Front end разработка – Что должен уметь фронтенд-разработчик / Нетология corporate blog / Habr

Профессия фронтенд-разработчик. Обучение в сервисе Яндекс.Практикум

Важное уточнение: на момент написания отзыва я успешно окончила бесплатную часть и все блоки, связанные с вёрсткой. Дальше идут разделы о JavaScript и инфраструктуре веб-приложений — о них судить не могу.

Когда объявили о запуске Яндекс.Практикума, я уже несколько месяцев как решила уходить со своей профессии, совсем не связанной с IT, во фронтенд. В моём багаже были базовые знания о JavaScript, HTML и CSS, огромная неуверенность в себе и вопрос «А что дальше?». После нескольких бесплатных курсов, статей, пары книг из списков «Каждый фронтендер должен прочитать» и туториалов я поняла, что хоть и могу решать отдельные задачи, но как подступиться к большим самостоятельным проектам — непонятно.

Больше всего в самообучении не хватало фидбэка, а на форумах не оставляло ощущение, что все поголовно программисты закончили мехмат и написали первую программу/сверстали первый сайт в первом классе. То есть я опоздала со стартом в программировании минимум лет на 20. Мне 27. В момент, когда я задумалась о платных курсах с наставником, в мою жизнь пришёл Яндекс.Практикум.

Помимо учёбы, также очень хотелось поучаствовать в развитии сервиса, помочь ему стать классным и удобным для следующих потоков. Большим плюсом стало то, что у меня появился не просто один наставник, а целое комьюнити из одногруппников, преподавателей и тех, кто создаёт сервис. У нас есть чат, где активны не только студенты, с нами постоянно делятся интересными статьями и регулярно проводят вебинары на темы от Q&A и разбора домашних заданий до БЭМ и эволюции построения сеток.

Принцип тренажёра не новый, такое я видела и раньше, но самое классное здесь — это самостоятельная работа над проектами. Она действительно самостоятельная. Отчётливо помню свой ужас во время первого домашнего задания, когда я увидела, что у меня есть просто статичный макет страницы. Пришлось открыть редактор и с нуля верстать полностью всё. Я думала не смогу. Я боялась, что результат будет настолько плох, что меня отчислят, потому что таким бездарям не место в программировании. И я отчётливо помню невероятное счастье, когда после проверки увидела комментарии ревьюера. Да, были ошибки, но кроме них у меня ещё был структурированный и логичный код, хорошая семантика, и я справилась с именованием классов по БЭМу. За 15 часов, которые я потратила на первое дз и правки, я выучила больше, чем за несколько месяцев самостоятельной практики, но, что важно, я почувствовала, что я могу.

Прошло почти 2 месяца после первого домашнего задания и около 2.5 месяцев — как я с Яндекс.Практикумом. В моём портфолио одностраничный сайт и большой адаптивный лендинг. Я узнала много интересного о вёрстке, научилась отлаживать код и уместно комментировать его, а впереди ещё много тем и дипломный проект. Осенью я планирую начать поиски своей первой работы во фронтенде. Большое спасибо всем из Яндекс.Практикума! Уверена, у нас всё получится.

praktikum.yandex.ru

Кто такой frontend developer и что должен уметь фронтенд-разработчик

Если вы в душе дизайнер, но любите программирование и верите, что будущее за internet-технологиями, для вас интересной будет специальность Frontend-разработчика, так как она требует некоторых творческих способностей и глубокой практической подготовки по web-программированию. С помощью языка разметки страниц HTML и каскадных таблиц стилей (СSS), вы сможете создавать дизайн web-приложений, интерфейсы сайтов, подавать информацию в привлекательном виде, приятном и удобном для пользователей. На Frontend-разработчика также ложится часть ответственности за рейтинг разрабатываемого сайта, так как чем понятней будет интерфейс, чем более подходящим способом будут структурированы данные, тем больше времени пользователь уделит сайту. В данном случае разработчику просто необходимо разбираться в дизайне и теории цветов, чтобы сайт не выглядел слишком угрюмо, но и не подавлял яркостью цветов и огромным размером символов.

Знания CSS и HTML помогут разработчику сделать красивую статическую страницу, но при работе с сайтом пользователям необходимо взаимодействовать с информацией. Поэтому разработчик должен знать скриптовый язык программирования JavaScript, который делает web-страницы функциональными и интерактивными. Также применение JavaScript способствует корректному отображению страниц на устройстве пользователя, так как некоторые браузеры понимают стандарты CSS и HTML по-разному. Багаж знаний Frontend-разработчика включает также знания библиотеки JavaScript — jQuery, которая необходима для взаимодействия JavaScript и HTML. Данная библиотека используется для работы с AJAX, еще одной технологии для разработки web-интерфейсов. Технологии AJAX выполняют взаимодействие клиентской части с серверной стороной. С использованием данных средств работа приложений стает быстрее и динамичней.

Разработчик не может быть уверен, что созданный им сайт будет выглядеть также красиво и упорядочено, как на своем браузере, поэтому Frontend-разработчикам надо знать кроссбраузерную верстку, которая воспроизводит интерфейс сайтов одинаково в наиболее популярных браузерах, что придерживаются необходимых стандартов, и адаптивную верстку, которая позволяет выполнять работу сайта на разных устройствах: планшете, смартфоне, ноутбуке и т.д.

Такой большой перечень требований оправдан, так как специалист в этом направлении может получать от 500$ до 2500$ в зависимости от уровня знаний и опыта работы. На данный момент рынок труда заинтересован в специалистах такого плана и в будущем спрос на них будет только расти, ведь использование интернета, интернет-технологий за последние десять лет выросли практически в геометрической прогрессии. Почти каждая фирма, организации, предприятие имеют свой сайт и нуждаются в специалистах обеспечивающих работу этих сайтов. Существует множество интернет-компаний, IT-компаний, где Frontend-разработчик может применить свои знания.

Если вы целеустремленны, инициативны и ответственны, можете работать в команде, человек с творческими способностями и критическим мышлением, любите изучать новые технологии и пытаете интерес к разработке сайтов, вам не составит труда добиться успеха в данной области.

Требования к Frontend разработчику:

• Знание HTML, CSS
• Знание языка программирования JavaScript
• Опыт работы в HTML5, CSS3
• Хорошее понимание JS фрeймворков (Angular2/jQuery/ReactJS/Node.js)
• Знакомство с MVC/MVVM design patterns
• Умение анализировать, изучать, осваивать и применять новые технологии
• Английский язык на уровне не ниже Intermediate

JavaScript/FrontEnd разработчик может занимать такие должности:

Web разработчик FrontEnd Developer
Junior/Middle/Senior JavaScript Developer
Node.js/ReactJS JavaScript Developer

Frontend Engineer
Frontend Software Engineer
Full Stack JavaScript Developer
JavaScript Team Lead

itvdn.com

Из фронтенда в бэкенд / QIWI corporate blog / Habr

К переходам внутри департаментов иногда относятся по-разному. Кому-то просто привычнее видеть любые карьерные изменения внутри одной компании через призму роста должностей. Кто-то не считает возможным сменить сферу деятельности, даже если она смежная с текущей. Третьи же в принципе уверены, что переход из департамента в департамент означает, что человек занимает позицию “ни рыба, ни мясо”, и вряд ли добьётся чего-то значимого.

При этом некоторые работодатели всячески это приветствуют и считают чем-то вроде предохранителя от выгорания – человек сменит фокус внимания, сменит департамент или отдел, но не сменит саму работу в целом.

Меня зовут Костя, и я работаю в QIWI почти 4 года. Сегодня расскажу вам, как успешно перешел из frontend-разработки в backend.

Frontend

В QIWI я с конца 2014 года, начинал работать как разработчик iOS–приложений, и, в принципе, пару лет занимался разработкой QIWI-кошелька. При этом не могу сказать, что было скучно – задачи были довольно разные и в рамках одного приложения: мы занимались интеграцией кошелька с другими нашими сервисами, чинили баги, подтягивали анимацию. Кроме этого, был занятный опыт по созданию приложения для Apple Watch. Потом немного расширил фокус и поработал еще и над iOS-приложением для «Совести».

И вот примерно тогда я начал потихоньку переходить в бэк. В плане гибкой методологии это даже удобно – я переключался, в первом спринте мог делать какие-то задачки по бэкенду, а во втором проводить интеграцию API, которое я же и написал.

Но в бэкенде на то время было слишком мало разработчиков и слишком здоровенный бэклог, так что в итоге я все же переключился на бэкенд полностью. То, что я делаю сейчас, это классические задачи бэкендера – пишу код в наших микросервисах, чиню баги, занимаюсь рефакторингом, постигаю Kotlin. Есть возможность работать и над свежим продуктом компании – QIWI Инвестор.

Кстати, не могу сказать, что за эти два года получилось как-то закостенеть во фронте, я отчетливо осознавал, что там тоже есть, куда развиваться. К примеру, я вижу, что сейчас происходит в команде мобильной разработки, и понимаю, что, останься я там, продолжил бы расти дальше вместе с ребятами.

Так что тут сложилась win-win ситуация – я хотел помочь команде и продукту (перевес в разработке был сильно не в сторону бэкендеров) и набраться новых знаний. Тимлиды все поняли и отпустили меня без каких-то претензий, продакт тоже.

Кроме этого, знания хотелось именно диверсифицировать, чтобы не привязываться к одной платформе (Android мне немного не по душе, но и Apple все же сдает позиции). Ну и было желание в случае чего уметь взять и сделать себе приложение самому (и фронт, и бэк), если вдруг появится какая-то клевая идея. Пока вот не пригодилось, правда.

Backend

Само собой, сама первая проблема, с которой сталкиваешься при таком переходе, это пробелы в матчасти. В моем случае это были некоторые тонкости работы с базами данных, но здесь помогла как способность к самообучению, так и команда – ребята отзывчивые и всегда готовы прийти на помощь и что-то подробно объяснить. В QIWI в принципе с обучением на любых этапах все хорошо, будь ты хоть джуниором в самом начале работы, хоть вот так реши и смени сферу пару лет спустя.

Никого не раздражало, что первое время я явно работал не так эффективно, потому что во многое надо было въезжать (но в долгосрочной перспективе команда-то все равно в выигрыше).

Конечно, у меня и до этого был небольшой опыт в разных сферах – мобильные игры и веб, но это все были, скорее, попытки нащупать что-то свое, нежели именно набивание практического серьезного опыта.

Впечатления от бэкенда после фронтенда

Нет работы с UI. Вообще. Раньше приходилось убивать время на исправление багов в UI, сейчас – нет. Минусы такого положения – конечный пользователь не видит результатов конкретно моей работы, как это было с фронтом. Я пытался определить, что же сложнее – бэк или фронт, и понял, что (лично для меня) тяжелее всегда было работать с многопоточностью и сетевым стеком. И тут уже не так важно – за фронт ты или за бэк. На фронте я просто столкнулся с такими задачами впервые, без подготовки, а на бэкенде уже с каким-никаким опытом.

Набраться опыта и делать что-то крутое можно в любой области, было бы желание и усидчивость, здесь практики сходятся – сделать что-то (и сделать хорошо), и чтобы это работало надежно и легко поддерживалось. Причем для бэкендера не столь критично наличие или отсутствие опыта во фронте. Если разраб учитывает все мелочи, сам продумывает корнер-кейсы и в целом понимает, как будут использовать его API, то он и без фронт-знаний сделает все, как надо.

Мне проще обнаруживать возможные проблемы как раз потому, что я знаю особенности реализации наших мобильных приложений. Но это не какая-то сверхспособность – это набор знаний, которыми так или иначе обрастает любой бэкендер, который часто работает с фронтами.

Что в итоге

Backend-разработка стала для меня еще одним хорошим опытом – я научился писать код и проводить ревью, продумывать архитектуру. Это на самом деле интересно.

Но при этом, попробовав вживую что фронт, что бэк, я не скажу, что в случае чего сразу выбрал бы бэкенд в самом начале карьеры. Для меня все же важно видеть и понимать, как мой продукт воспринимают пользователи. С бэкендом это все довольно призрачно.

Скорее всего, выбирая сферу сейчас, я бы пошел в геймдев или веб-фронтенд. Веб все еще остается хорошей платформой для запуска новых продуктов, и при этом перестал быть жутким и сложным для понимания. Все эти туториалы из спагетти-кода и callback-hell остались далеко позади, к счастью.

habr.com

что нужно знать о ключевых трендах в 2019 году

От автора: часто веб-разработка связана с ошеломляющим опытом. Я постоянно стараюсь оставаться в тренде, изучая новые фреймворки, новые функции языков, иногда изучая совершенно новые языки. Неудивительно, что front-end разработчики часто испытывают стресс.

Но надежда есть: в последние несколько лет, несмотря на то, что все еще происходят чрезвычайно быстрые изменения, и возникают новые среды и пакеты, также произошла некоторая консолидация концепций в несколько мега-трендов. Это то, что нужно знать для front-end разработки.

Если у нас есть понимание этих мега-трендов, это может помочь нам сосредоточиться на том, что стоит изучать. В этом контексте решение о том, какой конкретный фреймворк или инструмент вам учить, воспринимается менее сложным — до тех пор, пока тот, который мы выбрали, вписывается в эти мега-тренды.

Чем больше мы понимаем общую картину, тем проще нам удерживаться на гребне этой сумасшедшей волны, а не чувствовать себя отставшим.

Итак, вот они: Top 5 мега-трендов front-end разработки.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

1. Компонентно-ориентированная разработка

В наши дни каждый JavaScript-фреймворк применяет компонентно-ориентированный подход. Неважно, какой из них вы используете — React, Angular, Vue — это большая тройка, но мы также рассмотрим такие инструменты, как Ember, Dojo, Mithril … все они используют компоненты в качестве основной абстракции для представления интерфейса пользователя.

Эта ориентация также присутствует в CSS как на методологическом, так и на базовом уровне. Такие методологии, как BEM, разработаны именно для поддержки компонентно-ориентированного подхода к CSS. UI фреймворки, такие как Bootstrap, Material или Foundation, по сути являются просто наборами готовых компонентов. Это лежит в основе почти всех современных инструментов front-end разработки.

Почему компонентно-ориентированная разработка стала такой популярной? Потому что это позволяет разделить задачи и модульную разработку таким образом, который имеет смысл для пользовательских интерфейсов.

Мы всегда знали о важности модульности кода — это позволяет нам разрабатывать гораздо более сложные системы, сохраняя управляемость кода. Но правильный способ реализовать эту модульность для внешнего интерфейса не всегда был ясен. Подход React, направленный на то, чтобы развивать методы разделения компонентов, а не язык программирования, произвел революцию в мире front-end.

JSX — не всеми любимое решение. Я предпочитаю подход Vue Single File Component, и у обеих сторон есть веские аргументы, как в пользу шаблонных языков, так и включений JavaScript. Несмотря на это, ключевым изменением является ментальный сдвиг в контексте представления компонентов в виде небольших блоков тесно связанных HTML, CSS и JavaScript, которые сами по себе могут быть слабо связаны с другими компонентами.

2. Декларативное кодирование

На заре Интернета, и до сих пор во многих простых не-фреймворк приложениях JavaScript, мы используем императивную парадигму.

Но все чаще JavaScript-фреймворки переходят на использование декларативной парадигмы, когда вместо того, чтобы указывать, как делать что-то, мы описываем результат, а сам фреймворк отвечает за выяснение того, как этого добиться. Теперь мы просто заявляем что нужно, а фреймворк обрабатывает как и когда.

Если мы хотим, чтобы элемент пользовательского интерфейса изменился, мы просто сообщаем платформе, каким должно быть новое конечное состояние, и позволяем ей вносить все обновления, необходимые для этого. Он может использовать такие инструменты, как Virtual DOM, чтобы эффективно вносить эти изменения, и другие вещи, такие как разбивка времени, чтобы это происходило так, чтобы не мешать взаимодействию с пользователем, но нам, разработчикам, не нужно об этом беспокоиться. Это открывает две возможности.

Первое — это феноменальное улучшение читаемости и понятности кода. Вместо того, чтобы копаться во многих строках jQuery для выяснения, что меняется, и пытаться определить, как будет выглядеть конечное состояние, мы можем просто взглянуть на шаблон и увидеть это.

Второе — это возможность воспользоваться опытом авторов фреймворка, чтобы проще и быстрее внедрить лучшие практики. React уже занимается этим с помощью выделения временных отрезков и приостановки компонентов, пока они извлекают асинхронные данные, но я также подозреваю, что этому будет уделено большое внимание в WebAssembly. Чем больше контроля у фреймворка, тем больше он может незаметно сделать для нас под капотом.

3. Консолидация управления состоянием

По мере того, как все больше и больше сложных операций переходило во front-end, нам также приходилось придумывать все более и более эффективные решения для управления состоянием front-end. Чисто компонентно-ориентированная разработка хороша для локального состояния, но иногда нам нужно разделить состояние между разными компонентами. Одна из уникальных задач внешнего интерфейса заключается в реализации того, как все происходит асинхронно, но иногда нам необходимо обеспечить предсказуемость в управлении состоянием. Это касается двух, на первый взгляд, разных, но, по моему мнению, связанных событий.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Первое — это развитие архитектуры Flux. Этот шаблон был реализован в таких инструментах, как Elm, Redux, Vuex. Сила этой архитектуры в том, что она вызывает однонаправленный поток данных, что значительно упрощает управление и отладку состояния. Все заканчивается прохождением через центральный диспетчер, что означает, что вы можете обеспечить предсказуемость, воспроизводимость и простую поддержку в управлении состоянием.

Вторая вещь, которая, я считаю, решает ту же проблему — это GraphQL. Это еще один способ решения проблемы — создание слоя консолидации, который вместо front-end в диспетчере функционирует на сервере GraphQL. Front-end больше не нужно управлять множеством разных мест, из которых он должен получать состояние, и их взаимосвязями… он просто запрашивают именно то, что ему нужно, а сервер GraphQL позаботится о том, чтобы это подготовить.

4. Одностраничные приложения и маршрутизация на стороне клиента

Когда сложные внешние интерфейсы впервые вступили в игру, сразу не было понятно, как мы собираемся их организовывать. Будем ли мы просто встраивать все более и более мощные компоненты в независимые серверные страницы?

Со временем стало ясно, что URL-адрес является одним из величайших нововведений в сети, но мы можем получить огромные преимущества при перемещении между страницами полностью в пределах клиентских приложений.

Ember.js, вероятно, был первым фреймворком, который воплотил это как философию, но с тех пор это было реализовано во всех основных фреймворках на стороне клиента. Хотя не для каждого проекта требуется одностраничное приложение, все чаще встречаются решения, когда, по крайней мере, частично, а возможно, и полностью front-end, выполняет собственную маршрутизацию.

И независимо от того, используете ли вы маршрутизаторы React Router, Vue-router, Mithril или что-то еще, основные концепции довольно схожи. URL-адрес сопоставляется с набором компонентов и состоянием, часто с приложением компонентов на основе вложенных маршрутов.

5. Типы для управления сложностью

JavaScript долгое время был быстро развивающейся средой разработки. Типы были свободными, аргументы не проверялись, и даже автоматическое тестирование долгое время оставалось без внимания. Но по мере роста сложности того, что мы передаем во front-end, увеличиваются и потребности в управлении кодом и предотвращении ошибок.

И самый мощный мега-тренд в этом плане — это типы. Еще в таких инструментах, как Flow, и тем более сегодня с повсеместным использованием компилируемых в JavaScript языков, таких как TypeScript, front-end охватывает проверку типов.

Потрясающая статистика по принятию на уровне 46% респондентов на npm, использующих TypeScript, показывает, что это происходит, и в 2019 году все признаки говорят за то, что эта тенденция сохранилась.

Бонус: рендеринг на стороне сервера и универсальный JavaScript

Хотя это скорее касается «развертывания» или эксплуатационных инноваций, чем инноваций в области front-end разработки, еще один мега-тренд, который очень четко проявился — это тенденция к упрощению рендеринга одностраничных приложений на стороне сервера.

Это позволяет вам использовать лучшие качества как серверных приложений, так и SPA — быстрое первоначальное отображение страницы, а также эффективность использования сети и все преимущества малой задержки и интерактивности SPA.

Заключение

Преимущество осведомленности об этих мега-трендах состоит в том, что вам не нужно паниковать по поводу необходимости «идти в ногу со временем» или выяснять, чему учиться. Вы можете сосредоточиться на одном стеке, но, изучая его, обратите внимание на общие принципы, которые вы по мере необходимости сможете быстро применить к другим стекам. Например, вы можете глубже изучить Next.js, используя TypeScript. Это заставит вас уделить внимание каждому из этих мегатрендов.

Вы будете работать с React, компонентно-ориентированным фреймворком с отличным декларативным стилем. Вы можете использовать Redux или GraphQL, и вы получите из коробки маршрутизацию и рендеринг на стороне сервера.

Если позже, например, вы решите перейти на Vue.js, все эти знания будут востребованы — частности Vue немного отличаются, но общая картина очень похожа, существует даже эквивалентная структура более высокого уровня: Nuxt .js.

Источник: https://zendev.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Смотреть

webformyself.com

Как стать фронтенд-разработчиком в 2018 году / RUVDS.com corporate blog / Habr

Камран Ахмед, автор материала, перевод которого мы сегодня публикуем, говорит, что занимается фуллстек-разработкой уже 5 лет и в настоящее время работает на должности ведущего инженера в компании tajawal. Там ему приходится заниматься многими вещами. Ему, по долгу службы, надо быть в курсе того, что происходит в мире веб-разработки, кроме того, одна из его задач заключается в том, чтобы поддерживать знания и навыки других разработчиков в хорошем состоянии. По его словам, наблюдение за развитием технологий — это не только его работа, но и хобби. Ему приходилось видеть сложности, с которыми сталкиваются начинающие программисты (и опытные — тоже), когда речь заходит об оперативном освоении новшеств. Камрану, в прошлом году, часто приходилось отвечать на вопросы о том, в чём нужно ориентироваться для того, чтобы оставаться современным и востребованным программистом. В результате он, для того, чтобы помочь себе и другим, решил подготовить схемы, ссылки на которые отвечали бы на большинство вопросов, которые ему обычно задают.

Изначально эти схемы представляли собой нечто вроде списка рекомендаций по инструментам, но недавно Камран решил привести их в порядок: структурировать, добавить подробностей, и оформить их в виде пошагового плана действий, который дал бы всем желающим возможность понять — чем и в каком порядке нужно заниматься для того, чтобы стать современным и востребованным веб-программистом. Работа над схемами по бэкенд-разработке и DevOps всё ещё продолжается, а вот пошаговый план действий для фронтенд-разработчиков уже готов. О нём Камран расскажет в этой статье.

Обзор

Прежде чем я расскажу о различных частях предлагаемого здесь плана действий, мне хотелось бы сделать оговорку. Цель этого плана заключается в том, чтобы дать вам общее представление о том, что происходит в современном мире фронтенд-разработки, и рассказать о порядке освоения технологий на тот случай, если вам это нужно. Цель моей схемы заключается не в том, чтобы призвать вас к изучению чего-то такого, что переживает сейчас пик популярности, возможно, недолгий. Вам нужно развить в себе понимание того, почему в некоторых случаях определённый инструмент предпочтительнее всех остальных, и помнить о том, что если о чём-то говорят буквально на каждом углу, это — не обязательно лучшее средство для решения некоей задачи.

Теперь приступим к делу. Собственно говоря, вот — план развития фронтенд-разработчика, о котором я говорил выше.

План развития фронтенд-разработчика

Сейчас мы поговорим об этой схеме, рассмотрим основные шаги, которые нужно предпринять программисту, который хочет заниматься разработкой фронтенда в современных условиях. Первое, что стоит освоить такому программисту — это основы HTML, CSS и JavaScript.

Изучение основ HTML

HTML — это то, что позволяет структурировать веб-страницы. Это — что-то вроде человеческого скелета, который формирует основу нашего тела. Первый шаг, который следует предпринять тому, кто хочет стать фронтенд-программистом — это изучение синтаксиса HTML и его возможностей. В ходе учёбы особое внимание надо обратить на следующее:

• Основы HTML и правила написания HTML-кода.
  
• Способы разделения страниц на части и правильное структурирование DOM.
  

▍Задание

После того, как вы освоите основы HTML, создайте как минимум 5 HTML-страниц. Я порекомендовал бы выбрать любой веб-сайт — например, страницу профиля на GitHub, или страницу входа в Twitter, и воссоздать её, обращая особое внимание на структурирование элементов страницы. То, что получится, будет не таким уж и красивым, но беспокоиться пока об этом не стоит. Самое главное сейчас — структура.

Изучение основ CSS

Теперь, после того, как вы узнали правила создания скелетов страниц, пришло время обтянуть эти скелеты кожей, украсить их. Технология CSS, или каскадные таблицы стилей, используется для придания страницам привлекательного вида. Вот на что стоит обратить внимание, знакомясь с CSS:

• Синтаксис и свойства CSS.
  
• Блоковая модель, разработка макетов с использованием технологий Grid и Flexbox.
  
• Разработка отзывчивых сайтов с использованием медиа-запросов.
  

▍Задание

После того, как вы освоите основы CSS, займитесь стилизацией созданных ранее страниц. Например, если вы написали HTML-код, воссоздающий структуру страницы профиля на GitHub — сделайте с помощью CSS так, чтобы ваша разработка выглядела в точности как настоящая страница профиля. Стилизуйте все пять страниц, созданных на предыдущем шаге.

Изучение основ JavaScript

JavaScript — это технология, которая позволяет сделать HTML-страницы интерактивными. Например, средствами JavaScript создают все те слайдеры, всплывающие окна, уведомления, которые вы видите на веб-сайтах. JS даёт возможность перезагрузки частей страниц без необходимости перезагрузки страниц целиком. На данном шаге вам нужно освоить основы JavaScript и приготовиться к самому интересному. Изучая JS, обратите внимание на следующее:

• Изучите синтаксис и базовые конструкции языка.
  
• Освойте методики работы с DOM средствами JS, то есть, например, разберитесь с тем, как добавлять элементы на страницу и удалять их с неё, как работать с классами элементов, как применять CSS-стили.
  
• После освоения основ разберитесь с более продвинутыми вещами, такими, как области видимости, замыкания, поднятие функций, всплытие событий, и так далее.
  
• Разберитесь с тем, как выполнять HTTP-запросы из JS-кода с использованием технологий XHR или Ajax. Именно Ajax позволяет выполнять какие-либо действия, обычно требующие перезагрузки страниц, не перезагружая их целиком.
  
• Далее — уделите время изучению новых возможностей языка, того, что появилось в ES6+. ES6 — это версия JavaScript, в которой имеется множество интересных обновлений, таких, как классы, различные способы объявления переменных. Тут появились новые методы массивов, средства для конкатенации строк, и так далее. Большинство материалов по ES6, которые вам попадутся, будут использовать Babel в процессе разъяснения особенностей новых возможностей языка. Babel — это транспилятор, он конвертирует, условно говоря, «новый» JavaScript-код в «старый». Нужно это для того, чтобы новый код работал в старых браузерах. Пока, однако, не обращайте внимания на Babel. Ваша задача — понять основы JS и научиться пользоваться этим языком в современных браузерах. Ниже мы ещё поговорим о ES6.
  

На данном этапе освоения веб-технологий вы уже должны почувствовать, что кое-что знаете и начинаете ощущать вкус современного фронтенда. Кроме того, тут вы можете себя поздравить, так как HTML, CSS и JavaScript — это очень важно, это — база, на которой строится всё остальное, и вы освоили эту базу и готовы двигаться дальше.

Стоит ли изучать jQuery?

В былые времена слово «jQuery» было у всех на устах, и у такого положения дел были веские причины. Это — мощная библиотека, которая основана на JavaScript и позволяет решать множество задач, не заботясь об особенностях различных браузеров. Все эти особенности учтены при разработке библиотеки. Но теперь дни бешеной популярности jQuery прошли, эту библиотеку уже не так активно используют для новых проектов, однако, кое-кто ей всё ещё пользуется. Изучать jQuery необязательно, но освоить эту библиотеку несложно, а сделав это, вы приобретёте навыки, которые вполне могут вам пригодиться.

Практика

Я часто это говорил и скажу это снова: нельзя что-либо изучить без практики. Не практикуясь, вы можете думать, что знаете что-то, что что-то поняли, но подобные ощущения длятся недолго, «понимание» и «знание» без практики быстро исчезают. Постарайтесь, в ходе освоения всего того, о чём мы тут говорим, как можно больше практиковаться.

Например, можете сделать отзывчивый веб-сайт и оснастить его интерактивными функциями с использованием JavaScript. Скажем, скопируйте любую понравившуюся вам страницу и постарайтесь при этом воспользоваться всем тем, что уже изучили.

После того, как вы достаточно попрактикуетесь, придёт время заняться настоящими делами. Загляните на github.com, найдите подходящий опенсорсный проект и постарайтесь внести в него посильный вклад, создав несколько пулл-реквестов. Вот несколько идей, касающихся вклада в опенсорс:

• Улучшите интерфейс, дизайн, добавьте какой-нибудь странице интерактивности.
  
• Взгляните на списки ошибок и проблем, и подумайте, можете ли вы помочь с их исправлением и решением.
  
• Найдите код, который можно улучшить, и выполните его рефакторинг.
  

Сделав что-то полезное и отправив запрос на включение изменений в проект, добавьте туда ссылку на этот репозиторий, сообщите, что вы учитесь, попросите дать отзыв о вашей работе и рекомендации о том, как сделать её лучше.

Хотя я и рекомендую начинающим разработчикам попробовать свои силы на GitHub, всё это требует, помимо знаний веб-технологий, ещё и умения работать с git. Кроме того, этот шаг необязателен, хотя, если вы решитесь его выполнить, вы поймёте, что он принесёт вам много полезного, а ещё — вы будете удивлены тому, как много людей готовы вам помочь, если вы их об этом попросите. Существует множество учебных материалов по git, например, можете взглянуть на этот.

После того, как вы освоите всё то, о чём шла речь выше, вы имеет полное право это отпраздновать. Если вы ответственно подошли к изучению HTML, CSS и JavaScript, вы уже можете найти себе какую-нибудь работу, возможно — это будет фриланс, а может быть — и настоящая работа. Однако если вы хотите профессионального роста, на этом останавливаться не стоит. Впереди — большой и интересный путь.

Менеджеры пакетов

До этого момента, если вы пользовались какими-нибудь внешними библиотеками, например, плагинами или виджетами, вам приходилось самостоятельно загружать JS и CSS-файлы и добавлять их в проект. Когда у того, чем вы пользовались, выходила новая версия, вам, опять же, самостоятельно, приходилось эту новую версию загружать. Это — довольно скучная и утомительная задача. Менеджеры пакетов способны вас от этого избавить. Они помогают включать в проекты внешние библиотеки и плагины, делая это таким образом, что разработчику не приходится беспокоиться о том, чтобы вручную копировать необходимые файлы в проект и следить за выходом их новых версий. В частности, речь идёт о менеджерах пакетов yarn и npm. И тот и другой, в общем-то, представляют собой практически одно и то же, различия между ними не так уж и велики, и вы можете изучить любой из них, после чего другой покажется вам очень знакомым.

Практика

Теперь, когда вы освоили основы работы с менеджерами пакетов, подключите какие-нибудь внешние библиотеки к страницам, которые вы разрабатывали, когда осваивали HTML, CSS и JavaScript. Например, это может быть какой-нибудь плагин для вывода всплывающих уведомлений при щелчке по кнопке. Можете воспользоваться библиотекой для проверки данных, вводимых в форме. Поэкспериментируйте с настройками, разберитесь с тем, как устанавливать различные версии библиотек. Занимаясь этим, почитайте о семантическом версионировании.

Препроцессоры CSS

Препроцессоры расширяют возможности CSS, давая стилям функционал, недоступный при их стандартном использовании. Существует множество препроцессоров: Sass, Less, Stylus, PostCSS, и другие. Если бы мне пришлось бы выбрать один из них, я остановился бы на Sass. Однако в последнее время весьма интересно выглядит препроцессор PostCSS, умение обращаться с ним вам точно не помешает, это что-то вроде Babel для CSS. Его можно использовать автономно или поверх Sass. На данном этапе вашего обучения я порекомендовал бы освоить Sass, а позже, когда у вас будет время, разобраться с PostCSS.

CSS-фреймворки

В принципе, изучать CSS-фреймворки вам необязательно, однако, если вы решите освоить какой-нибудь из них, знайте, что существует их очень много. Из того, что я пробовал, мне больше всего понравились Bootstrap, Materialize и Bulma. Если вы выбираете фреймворк с учётом его рыночной востребованности, обратите внимание на Bootstrap. Я бы точно выбрал его, если бы сейчас задумывался об освоении CSS-фреймворка.

Организация CSS

По мере роста вашего веб-приложения растёт и объём CSS, в описания стилей проникает беспорядок, ими становится тяжело управлять. Существует множество способов структурирования CSS с учётом нужд масштабирования. Тут можно отметить OOCSS, SMACSS, SUITCSS, Atomic, BEM. Вам следует получить представление о них, понять различия между ними. Я бы в подобной ситуации, для более глубокого изучения, выбрал BEM.

Средства для сборки проектов

Инструменты для сборки проектов помогают в ходе разработки JS-приложений, в частности, позволяя упаковывать ресурсы приложения в пакеты. В эту категорию входят линтеры, средства для выполнения задач и средства для создания пакетов.

В области средств для выполнения задач существует множество вариантов, включая npm-скрипты, gulp, grunt и другие. Но в наше время, когда большинство задач, которые обычно решали с помощью gulp, можно решить с помощью Webpack, в этой категории, пожалуй, стоит обратить внимание лишь на npm-скрипты, используя их для автоматизации задач, которые не может выполнить Webpack. Вам необязательно изучать gulp, однако, если вы найдёте время, взгляните на него — возможно, он окажется полезным в вашем проекте.

В области линтеров, опять же, существует масса вариантов: ESLint, JSLint, JSHint, JSCS. Однако сейчас наибольшей популярностью пользуется ESLint, поэтому вы вполне можете остановиться на нём.

В вопросе инструментов для создания пакетов можно наблюдать ту же ситуацию. Тут есть Parcel, Webpack, Rollup, Browserify, и так далее. Если вы хотите выбрать какой-то один, можете без лишних раздумий остановиться на Webpack. Rollup тоже весьма распространён, но его рекомендуется использовать, в основном, для библиотек. Если же речь идёт о веб-приложениях — тогда вам нужен Webpack. Поэтому освойте Webpack, а позже, если хотите, разберитесь с Rollup.

Практика

После того, как вы освоите всё то, о чём шла речь выше, у вас появится очередной повод для праздника. Фактически, вы теперь стали современным JS-разработчиком примерно на 75%. Помните о том, что практика — это очень важно, поэтому создайте какой-нибудь проект, используя всё то, что уже изучили. Может быть — это будет некая библиотека, в которой будут применены возможности Sass и JavaScript. Завершив работу, используйте Webpack для преобразования Sass в CSS, примените babel для транспиляции ES6-кода. А когда всё будет готово — опубликуйте свою разработку на GitHub и выложите в npm.

Выбор фреймворка

В старой версии схемы, которую мы рассматриваем, шаг выбора фреймворка следовал сразу за освоением основ, но теперь я поместил его после Sass, инструментов для сборки проектов и менеджеров пакетов, так как всем этим вы будете пользоваться при работе с фреймворками.
В том, что касается выбора фреймворка, можно отметить несколько вариантов, однако наиболее распространёнными являются React, Vue и Angular. Причём в наши дни потребность рынка в React.js всё растёт и растёт. Однако выбрать можно любой из перечисленных фреймворков. Я бы, например, выбрал React или Angular. Стоит отметить, что вам, как начинающему разработчику, Angular может показаться проще в сравнении с React, возможно, из-за того, что Angular поддерживает практически всё, что нужно для работы, что называется, «из коробки». Это — мощный маршрутизатор с поддержкой ленивой загрузки, HTTP-клиент, поддерживающий перехватчики, средства для внедрения зависимостей, инкапсуляция CSS компонентов, и так далее. Используя Angular, вы будете избавлены от забот о подборе внешних библиотек. Однако React пользуется большей популярностью, вокруг него сложилось замечательное сообщество, Facebook активно занимается его развитием. Тут мне хочется отметить, что выбирать фреймворк, основываясь только лишь на его «популярности» не стоит. Лучше всего — оценить альтернативные варианты, сравнить их, «примерить» их к нуждам своего проекта и сделать выбор.

Тут я не буду рассказывать о том, как я работал с Angular и React, не буду сравнивать их. Пожалуй, это — тема для отдельной статьи. Однако, раз уж мы говорим об освоении технологий, рассмотрим кривые обучаемости для Angular и React.

Кривые обучаемости, представленные ниже, построены с учётом того факта, что разработчик уже знаком с TypeScript и RxJS. Описание особенностей этих кривых достойно самостоятельного материала, тут я лишь отмечу, что они выглядят именно так благодаря стандартизации и возможностям, которые присутствуют в Angular по умолчанию. Это не означает, что React в чём-то плох. У каждого из этих фреймворков есть своя область применения. Итак, вот эти кривые.

Кривые обучаемости для React и Angular

После выбора фреймворка для освоения, вам придётся выбрать и ещё кое-что. Например, если ваш выбор пал на React, вам может понадобиться изучить Redux или Mobx для целей управления состоянием приложения. Что именно выбрать — зависит от размера приложения, над которым вы будете работать. Mobx подходит для малых и средних приложений. Redux лучше подходит для крупных проектов. Кроме того, возможно, что ни Redux, ни Mobx могут вам и не понадобиться, и ваше приложение вполне сможет обойтись стандартными средствами для управления состоянием, присутствующими в React.

Если вы выбрали Angular, вам понадобится изучить TypeScript. Разрабатывать Angular-проекты можно и без TypeScript, но, всё же, рекомендуется применять именно этот язык. Кроме того, вам надо будет освоить и RxJS — это очень вам пригодится при разработке Angular-приложений. Это — по-настоящему мощная библиотека, которая, кроме того, подходит для функционального программирования.

Если вы выберете Vue.js, то вам может понадобиться изучить Vuex. Эта библиотека очень похожа на Redux, но предназначена для Vue.

Тут следует понимать, что Redux, Mobx и Rx.js не привязаны к соответствующим фреймворкам. Эти библиотеки можно использовать и в приложениях, написанных на чистом JavaScript. И, если вы выбрали Angular — обратите внимание на то, что это должен быть Angular 2+, а не Angular 1+.

Практика

Теперь вы знаете практически всё, что может понадобиться для разработки современных веб-приложений. Не забывая о практике, создайте что-нибудь на основе выбранного фреймворка. Если вам нужны идеи — поищите в интересных вам GitHub-репозиториях папки ideas, выберите то, что вам понравится, и приступайте.

После того, как вы сделаете то, что решили сделать — почитайте материалы об измерении и улучшении производительности. Например, обратите внимание на такие вещи, как Interactivity Time, Page Speed Index, Lighthouse Score, и так далее.

Прогрессивные веб-приложения

Освоив всё то, о чём мы до сих пор говорили, разберитесь с сервис-воркерами и с тем, как создавать прогрессивные веб-приложения.

Тестирование приложений

В сфере тестирования существует масса инструментов, ориентированных на различные цели. Я, в основном, пользуюсь комбинацией из Jest, Mocha, Karma и Enzyme. Однако прежде чем вы выберете свою библиотеку для тестирования, полезно будет разобраться с различными типами тестов, проанализировать доступные инструменты и выбрать те, которые лучше всего вам подходят. Вот хороший материал о современных средствах JS-тестирования.

Статическая проверка типов

Средства для статической проверки типов помогают контролировать типы данных в JavaScript-приложениях. Нельзя сказать, что изучать их обязательно, но они, определённо, способны принести огромную пользу, да и освоить их, вывести на уровень практического использования, можно буквально за несколько часов. Я, в основном, имею в виду TypeScript и Flow. Лично я отдаю предпочтение TypeScript, но вам советую опробовать и то и другое, а потом уже решить — что вам больше понравится.

Серверный рендеринг

Если вы изучили всё то, о чём мы говорили, ваших знаний будет достаточно для того, чтобы получить должность фронтенд-разработчика. Однако, это — не повод останавливаться.
Изучите возможности серверного рендеринга в выбранном вами фреймворке. Как именно это будет выглядеть — зависит от фреймворка. Например, в сфере React особое внимание стоит обратить на Next.js и After.js. В случае с Angular — это Universal. Если речь идёт о Vue, то это — Nuxt.js.

Итоги

Не берусь говорить о том, что в представленной здесь схеме предусмотрено абсолютно всё. Однако она содерж

habr.com

Frontend- и backend-разработка на примере создания сайтов — статьи на Skillbox

Любой сайт состоит из пользовательской и серверной частей. На странице в интернете вы видите текст, кнопки, панели, изображения и видео. Можете перемещаться по сайту, свободно изучать контент. Перед вами — пользовательская часть сайта и результат труда frontend-разработчика: визуализация, интерактивность и понятность интерфейса. Вы видите красивый дизайн, подсвеченные кнопки и интересную типографику, сайтом удобно пользоваться. Но как все это работает изнутри?

За логику, работоспособность и правильное функционирование сайта отвечает серверная часть, которая скрыта от пользователя. Ее созданием занимается backend-разработчик, а управлять может только администратор сайта через специальный интерфейс.

Любой запрос, который делает пользователь, передается на сервер. Вся работа происходит там. Запрос обрабатывается, фильтруется, а ответ отправляется обратно. Backend-разработка отвечает за правильное выполнение этого процесса.

Функции Frontend и Backend

Возьмем в качестве примера обычный компьютер. Вы свободно перемещаетесь по файлам и папкам, можете удалять и изменять информацию, добавлять новую, делать все, что хотите. Но в серверную часть для вас доступ закрыт. Компьютер скрывает папки с системными файлами, чтобы пользователь не наделал глупостей и не повлиял на его правильную работу. Примерно то же самое происходит с сайтом. Вам доступны только те части, которые не влияют на его работу. То есть вы можете пользоваться продуктом, но не имеете доступа к коду.

Связка Frontend и Backend

Серверная и пользовательская часть взаимосвязаны. И могут дать хороший результат, то есть понятный и функциональный сайт, только когда работают слаженно.

Представьте, что мы говорим о человеке, а не о программном обеспечении. Взаимодействие frontend- и backend-разработки похоже на слаженную работу человеческого тела и нервной системы. Подкожные рецепторы посылают информацию в мозг. Он обрабатывает полученные данные и отправляет ответный импульс, заставляя тело реагировать.

Frontend отвечает за то, как выглядит продукт.

Backend — за то, как этот продукт функционирует.

Есть несколько клиентов. Клиентами могут быть обычные браузеры на компьютере или мобильном устройстве. Один из клиентов — браузер вашего компьютера. Вы хотите получить информацию из интернета. Делаете запрос: вводите ваш вопрос в поисковик Yandex или Google. Сразу же открывается страница с необходимой вам информацией.

Как это работает на самом деле? Ваш клиент, он же браузер, отправляет запрос на сервер. Сначала на сервер пользователя — frontend. Frontend-сервер (компьютер) обрабатывает запрос, выбирает backend-сервер, который в данный момент свободен, и отправляет ему запрос из браузера. Backend-сервер обрабатывает запрос, обращается к базе данных и посылает ответ на запрос обратно frontend-серверу. А frontend, так как он отвечает за удобство пользователя, уже отображает ответ на запрос в виде HTML-страницы.

Передача данных

Теперь вы знаете, что за пользовательскую часть сайта отвечает frontend-разработка. Главная задача разработчика — создать понятный интерфейс, с которым будет легко работать. Frontend — это не только дизайн, но и код, который помогает взаимодействовать с пользователем.

HTML — содержание сайта

За содержание сайта отвечает язык гипертекстовой разметки HTML. Это не язык программирования, но он поможет наполнить сайт необходимой информацией и расположить ее в нужных частях страницы. Все, что вы видите на сайте, — это HTML-файл. Но просто HTML-страница без оформления выглядела бы очень скучно и непривлекательно. Поэтому, чтобы оформить сайт, сделать его приятным для восприятия, нужен инструментарий CSS. Самые широкие возможности, включая адаптивности дизайна и анимацию, предоставляет версия HTML5, на которую сегодня и стоит ориентироваться.

 CSS — оформление сайта

Этот язык отвечает за отображение HTML-документа. С его помощью верстка визуальной части сайта упрощается, у него появляется определенный стиль. А чтобы добавить интерактивности и динамики, например, мигающие кнопки, можно использовать JavaScript.

JavaScript — интерактивность сайта

Это полноценный язык программирования, который в веб-разработке используется для оживления сайта.

jQuery — фреймворк языка JavaScript

Библиотека с набором готовых функций, которые упрощают написание JavaScript-кода. Фреймворк позволяет не писать код заново, а подобрать подходящую часть из готового набора.

Для создания серверной части сайта нужно освоить полноценный язык программирования. Это может быть практически любой язык, но сейчас в веб-разработке чаще всего используют PHP. Это язык общего назначения, но для создания сайтов он подходит в большинстве случаев. Для разработки серверной части нужно разобраться с базами данных. Подойдет система управления базами данных MySQL.

Что такое frontend и backend-разработка

Теперь вы знаете, из чего состоит веб-сайт, чем бэкенд отличается от фронтенда, умеете различать пользовательскую и серверную часть, получили общее представление о базовых инструментах веб-разработки и необходимых навыках.

Чтобы пойти дальше, нужно не только хорошо разобраться в теории, но и отработать полученные знания на практике. Мы подготовили для вас практический курс по веб-разработке. Можно учиться с удовольствием из любой точки мира, а в награду получить билет в новую профессию.

Курс «Профессия Веб-разработчик»

Практический годовой курс для тех, кто хочет стать профессиональным веб-разработчиком, запустить свой интернет-проект или веб-сервис и получить первые заказы на разработку.

• Живая обратная связь с преподавателями
• Неограниченный доступ к материалам курса
• Стажировка в компаниях-партнёрах
• Дипломный проект от реального заказчика
• Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

skillbox.ru

Front-end разработка — wiki студи Клондайк

front-end разработка — это создание клиентской части сайта. Front-end разработчик занимается версткой шаблона сайта и созданием пользовательского интерфейса. Обычно front-end разработчик — это мастер на все руки. Он просто обязан обладать талантом дизайнера, быть искусным верстальщиком и хорошим программистом.

Современный front-end developer должен легко владеть html5, css3, JavaScript (и как минимум JQuery). У каждого front-end специалиста есть свои наработки, которые он хранит в виде framework. Многие разработчики в работе пользуются популярными framework-ами, такими как: Twitter, Bootstrap, Foundation 3, Compass.

Что необходимо знать frond-end разработчику:

В наши дни, чтобы быть успешным фронт-енд-разработчиком, нужно обладать набором необходимых базовых навыков. Те разработчики, которые не соответствуют этим требованиям, вскоре начнут отставать от динамичного прогресса, по мере того как источники информации начинают подразумевать наличие некоторых знаний как само собой разумеющееся.

Вот основные базовые навыки:

• JavaScript

Простого знания библиотеки на JavaScript больше не достаточно. Необходимо понимать в каких случаях применение библиотеки действительно уместно, и уметь работать со старым добрым JavaScript, если это потребуется. Необходимо так же понимать принцип работы структур данных вроде объектов и массивов; функции, в том числе как и почему их нужно вызывать и применять; уметь работать с наследованием через прототипы; и справляться с асинхронностью.

• Система управления версиями файлов GIT

Без GitHub, в общем и целом фронт-енд разработчик не может участвовать в жизни крупного сообщества с открытым исходным кодом, которое выросло вокруг технологий фронт-енд разработки. Клонирование репозитория с целью испробовать его возможности должно стать привычным делом важно понимать как использовать ветки в совместных проектах.

• Модульный принцип организации, управление зависимостями и тестовые сборки

RequireJS инструменты делают возможной разработку с использованием небольших модульных файлов JS и CSS, а затем конкатенируют и минифицируют их с помощью своего инструмента оптимизации для дальнейшего использования.

Если вышеописанный вариант не подходит по каким-либо причинам, можно использовать инструменты вроде UglifyJS или Closure Compiler, которые грамотно сжимают необходимый код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

Если же код пишется на чистом CSS — то есть не используется препроцессор вроде Sass или Stylus — RequireJS также поможет организовать необходимые CSS файлы по модульному принципу. Просто необходимо использовать @import в основном файле, чтобы загрузить зависимости для разработки и затем запустить средство оптимизации RequireJS для основного файла чтобы создать готовый для использования файл.

• Инструменты разработчика, встроенные в браузер

За последние несколько лет инструменты для разработчиков, встроенные в браузеры, ощутимо усовершенствовались. Если научиться ими правильно пользоваться, то они могут существенно улучшить опыт разработки. Стоит выбрать один браузер, чьи инструменты разработчика будут использоваться на постоянной основе, но не надо отказываться полностью от инструментов в других браузерах, так как в них время от времени на основе откликов разработчиков добавляются новые полезные возможности. В Dragonfly от Opera, в частности, были добавлены некоторые возможности, выделяющие её инструменты разработчика на фоне других, например: (экспериментальный) CSS- профилировщик, настраиваемые горячие клавиши, удалённая отладка без необходимости USB-подключения, а также возможность сохранять и использовать пользовательские цветовые палитры.

• Командная строка

Есть несколько задач, которые необходимо выполнять через командную строку не задумываясь:

1. ssh для подключения к другой машине или серверу
2. scp для копирования файлов на другую машину или сервер
3. ack или grep для поиска файлов в проекте по строке или шаблону
4. find для обнаружения файлов, чьи названия совпадают с данным шаблоном
5. git для выполнения хотя бы базовых действий вроде add, commit, status и pull
6. brew для использования Homebrew для установки пакетов
7. npm для установки пакетов Node
8. gem для установки пакетов Ruby

Тестирование

Написания модульного, свободно сопряжённого кода состоит в том, что такой код намного легче тестировать, а с инструментами вроде Grunt, подготовка проекта со встроенными тестами вообще стала проще простого. В Grunt интегрирован QUnit, однако существует много фреймворков для тестирования, из которых можно выбрать те, что по душе.

В то время, как тестирование модульного, свободно сопряжённого кода является приятным, тестирование плохо организованного кода может быть чем-то средним между сложным и невозможным. С другой стороны, если принудить себя написать тесты, возможно, даже до того, как написан код — это поможет систематизировать свой подход и код. Это также даст возможность перестроить код с большей уверенностью в будущем.

Автоматизация процесса

Возможность с помощью Grunt настроить проект со встроенной поддержкой модульного тестирования — это один из примеров автоматизации процессов. Реальность фронт-енд-разработки такова, что разработчику приходится выполнять множество повторяющихся действий, но, как говорится: хороший разработчик — ленивый разработчик. Если какое-либо действие выполняется больше трёх раз, пора его автоматизировать.

klondike-studio.ru