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

Содержание

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

Фронт-энд разработчик (с англ. «front-end developer») — это программист, занимающийся разработкой пользовательского интерфейса, то есть внешней публичной части сайта в браузере. Главная задача фронт-энд разработчика — сделать максимально удобным взаимодействие пользователей с сайтом или веб-приложением. Профессия подходит тем, кого интересует информатика (см. выбор профессии по интересу к школьным предметам).

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

Само слово «фронт» говорит о том, что фронт-энд разработчик находится на передовой линии с конечным пользователем, и отвечает за внешний функционал приложения, с которым контактирует пользователь. Программным кодом на сервере занимается другой специалист - бэк-энд разработчик. Для сведения: существует универсальный специалист, который работает одновременно на фронт-энд и бэк-энд. Он называется фулл-стак разработчик (с англ. «full stack developer»).

Основные инструменты фронт-энд разработчика в web: JavaScript, HTML, CSS.

JavaScript — главный язык фронт-энд разработчика в web, на котором он осуществляет программирование пользовательского интерфейса. Основная задача фронтендера - вёрстка сайтов: написание HTML-кода и CSS-стилей для представления информации в понятном всем браузерам виде и внешнему соответствию сайта макету дизайнера. Часто бывает, что  макеты не отражают всех деталей общей идеи. В данном случае фронт-энд разработчик включает свои дизайнерские способности, чтобы учесть все технические детали и нюансы. Есть много дополнительных инструментов, которые автоматизируют рутинную часть работы: Sass/SCSS, jQuery, LESS, AngularJS, Bootstrap, Prototype, Ember.js, Backbone, React.js, Grunt Gulp. А появление  Chrome Dev Tools и Firebug позволило повысить производительность труда.  

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

Код сайта, написанный фронт-энд разработчиком, можно увидеть, вызвав контекстное меню на сайте и выбрав пункт «Посмотреть код».

Особенности профессии

Функционал фронт-энд разработчика в web выглядит следующим образом:

  • создание HTML-страницы сайта на основе дизайн-макетов;
  • вёрстка сайта и шаблонов для CMS;
  • привязка к пользовательскому интерфейсу скриптов, которые обеспечивают визуализацию и анимацию страниц сайта;
  • обеспечение необходимого уровня пользовательского интерфейса (UI — User Interface) и опыта взаимодействия (UX — Uzer Experience).

Плюсы и минусы профессии

Плюсы

Востребованная и высокооплачиваемая профессия

Минусы

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

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

Место работы

Компании по разработке сайтов, веб-приложений, мобильных приложений

Важные качества

  • Аналитический ум
  • Ответственность
  • Внимание к мелочам
  • Творческие способности
  • Способность соблюдать дедлайны
  • Умение работать в команде
  • Умение объективно оценивать свои возможности для решения поставленных задач
  • Нацеленность на результат
  • Постоянное желание осваивать новые технологии и инструменты

Оплата труда

Ступеньки карьеры и перспективы

Начинающий фронт-энд разработчик должен обладать навыками верстальщика. Далее карьера может развиваться в нескольких направлениях:

  • специализация в бэк-энд разработках (Python, РНР) приведёт его к профессии бэк-энд разработчика;
  • увлечение пользовательским интерфейсом — к профессии фронт-энд разработчика;
  • внимание к дизайнерской части проекта — к профессии дизайнера;
  • совместное владение навыками фронт-энд и бэк-энд разработчика — к профессии фулл-стак разработчика. 

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

Интересные факты о профессии

Типы разработчиков

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

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

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

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

Экспериментатор — специалист, который находится в курсе всех новейших технологий и инструментов в сфере IT. Он постоянно стремится использовать новинки в своей работе.

Спагеттикодер  - это специалист, работающий очень быстро, но результат его работы всегда оставляет желать лучшего. Его коды называют спагетти-кодом или лапшой. Не всегда это происходит от неопытности. Иногда — из-за сжатых сроков  или излишнего давления руководства. Но на всякого лапшакодера найдётся свой Мистер рефракторинг. Так что не так всё плохо в этом лучшем из миров! 

Автор Флюра Ягофарова

www.profguide.io

Чем верстальщик отличается от фронтенд-разработчика — Блог ADN Digital Studio

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

Западные ИТ-компании выдвигают такой список требований:

  • Понимание ключевых серверных технологий.
  • Верстка графических макетов в HTML, CSS и JavaScript.
  • Создание визуально привлекательных веб-страниц и интерфейсов.
  • Создание, редактирование и изменение шаблонов CMS или фреймворка.
  • Программирование на JS и знание его библиотек.
  • Кросс-браузерная и кросс-платформенная верстка и тестирование.
  • Препроцессоры и сборщики LESS, SASS, GRUNT, GULP.
  • Понимание UX и юзабилити.
  • Работа с SVG-объектами.
  • Адаптивная/отзывчивая верстка.
  • Мобильная разработка.
  • Работа с DOM.
  • Умение работать с контролем версий (Git, GitHub, CVS и т.д.).
  • Знание HTML5 API (канвасы, геолокация, видео и т.д).
  • Иметь опыт работы с веб-форматами (JSON, JSONP, XML).
  • Уметь проводить юнит-тестирование.
  • Уметь работать с веб-шрифтами.
  • Уверенно пользоваться графическими редакторами.
  • И много всего еще.

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

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

Призываем работодателей тщательнее выбирать термины при размещении вакансии. А вам, коллеги, — проверять каждую. Мало ли, что там скрывается за очередным «frontend-HTML-верстальщиком».

И расти, конечно!

blog.adn.agency

Фронтэнд-разработчик: кто он? / СоХабр

Верстальщик и программист, художник и инженер в одном лице. В данном посте я поведаю миру о герое меча и магии стилей и кода, делающем веб красивее и быстрее — фронтэнд-разработчике. Пост будет интересен, в первую очередь, всем тем, кто хочет понять, чем фронтэнд-разработчики отличаются от верстальщиков, бекэнд-разработчиков, UX-специалистов и веб-дизайнеров. Какими навыками он должен обладать, и почему вообще столько чести быть фронтэнд-разработчиком? Автор не претендует на объективность, но всем, кому это интересно, добро пожаловать под кат.


Для начала давайте разберёмся, что же означает термин «фронтэнд», и кто такой фронтэнд-разработчик?

Данный термин весьма специфичен и обширен, в связи с чем сложно дать ему лаконичное и однозначное определение. Фронтэндом называют всю клиентскую (в том числе невидимую для пользователя — программную) часть сайтов/веб-приложений: интерфейсы, шаблоны, стили, виджеты и т. д. Соответственно, всё, что происходит на стороне сервера — бекэнд.

Приведу краткий список наиболее часто ассоциируемых с фронтэнд-разработкой понятий и технологий:
HTML, CSS, JavaScript, jQuery, Node.js, AJAX, SPA…

Разберём по полочкам, чем занимается типичный фронтэнд-разработчик.

Конечно же, первой приходящей на ум обязанностью является вёрстка. Наш герой в идеале знает, как сверстать страницу любой сложности. Соблюдение стандартов (в пределах возможного) — обязательное условие.

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

Хотите поставить на главную страницу своего сайта красивую галерею «как вот на том сайтике»? Спросите фронтэнд-разработчика! Он без раздумий назовёт вам дюжину готовых решений, предложит варианты кастомизации стандартных плагинов, и всё это сразу с учётом совместимости с вашей CMS и поддерживаемых устройств/браузеров.

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

Внимание к мелочам и чувство прекрасного — отличительные черты фронтэнд-разработчика.

На этом месте давайте обозначим грань, разделяющую верстальщика и фронтэнд-разработчика. Не будем вдаваться в подробности работы верстальщика. Основная его задача — нарезать макет. Если далее он предпочитает брать на себя часть бекэнд-разработки (PHP, Python...), то он развивается в сторону бекэнд-программиста. Если он больше уделяет внимание программированию клиентской части (JS), то, возможно, это будущий фронтэнд-разработчик. Может случиться и так, что верстальщик уйдёт в сторону дизайна, что тоже весьма неплохо — практические навыки вёрстки станут его весомым преимуществом относительно классических дизайнеров «по призванию».

Вторая важная обязанность фронтэнд-разработчика — обеспечение должного уровня юзабилити и опыта взаимодействия (UI и UX). Безусловно, об этих вещах должен в первую очередь думать дизайнер. Но в одиночку дизайнер не всегда может спроектировать такой интерфейс, который будет понятен в использовании и прост в реализации, по всё той же причине незнания технической части. Хороший фронтэнд-разработчик обладает навыками дизайнера и UX-специалиста. Другими словами, он знает как сделать красивый и удобный пользовательский интерфейс. Но ни в коем случае не отнимает хлеб у дизайнеров и UX-специалистов. А в случае отсутствия в команде любого из них — может их частично заменять.

Приведу жизненный пример.
Дизайнер больше не занимается проектом, а заказчик решил переделать внешний вид и логику работы какой-либо части своего интернет-магазина на Битриксе.
1. Менеджер проекта идет к программисту.
2. Программист говорит «нужна вёрстка, ТЗ и платное решение из Маркетплейса, потому что это нестандартный функционал для магазина» и отправляет менеджера к верстальщику.
3. Верстальщик говорит «нужен макет и нестандартный плагин для такой галереи, потому что этого нет в нашем готовом решении».
Менеджер оказывается в сложной ситуации. Клиент ждет результат, бюджет минимальный, рисовать некому. Как показывает практика, если доверить спасение подобной ситуации бекэнд-программисту, то на выходе клиент получит нечто, вроде бы работающее, но ужасное настолько, что дизайнер побелел бы, увидев такое, а пользователь ушел бы с сайта, приняв это за один большой баг. Верстальщик не справился бы с задачей однозначно. Малой кровью спасти ситуацию может только опытный фронтэнд-разработчик. Без лишней суеты он перепишет похожий компонент под поставленную задачу, переверстает стандартную галерею и добавит элементы интерактивности так, что решение задачи устроит клиента и понравится пользователям, а менеджер в очередной раз выдохнет с облегчением.

Наш герой — специалист широкого профиля. Ему интересен весь спектр веб-технологий. Не обходит вниманием он и серверную разработку. Помимо родного JS фронтэнд-разработчик знает на среднем уровне хотя бы один серверный язык программирования, может выполнять значительную часть задач, которые обычно выполняет бекэнд-программист. Знает как обращаться с таким зверем, как командная строка (консоль, терминал), и даже может настроить веб-сервер. Серверная разработка на платформе Node.js — не экзотика, а, как минимум, повод ответить всем «пэхэпэшникам» и «питонщикам» мол мы тоже не лыком шиты.

Одна из основных задач фронтэнд-разработчика — это, конечно, разработка на JavaScript, начиная от мини-плагинов для галереи, заканчивая полноценными веб-сервисами. Здесь вновь стоит упомянуть Node.js, в последние годы играющий огромную роль как в разработке клиентской части веб-приложений, так и серверной. Сотни клиентских фреймворков и библиотек, таких как, jQuery, Angular, Backbone, Knockout, Ember и др. — бескрайний простор для развития техник построения архитектуры приложений, улучшения качества и расширения спектра решаемых приложениями задач.

С развитием платформы Node.js стало популярно понятие «full-stack developer» — в нашем случае это JS-разработчик, использующий в своих проектах JavaScript для всех возможных целей. Сервер, база данных, клиентские шаблоны — всё это работает с данными в формате JSON, что весьма выгодно смотрится на фоне того же PHP, где «матёрые программисты» пишут кашу из PHP/Smarty/JS/CSS, которую бывает не под силу расхлебать уже через месяц после сдачи проекта.

Инструменты фронтэнд-разработчика — так же отдельная тема для разговора. Для Node.js было написано множество замечательных утилит, работающих в духе «одна программа — одна задача». Автоматизация рутинных задач с помощью Grunt стала неотъемлемой частью работы. Проверка кода, запуск тестов, автоматический деплой, обфускация и минификация, препроцессинг CSS и многие другие задачи решаются «на ура» всего в несколько кликов.

Chrome Dev Tools и Firebug — вне конкуренции среди инструментов для клиентской разработки. В умелых руках нашего героя эти штуки позволяют творить чудеса. Ваш сайт глючит и медленно загружается, из-за чего подвергается пессимизации в поисковиках? Хороший фронтэнд-разработчик с помощью Firebug за пару минут найдет все тонкие места в производительности сайта. К слову, и про SEO-оптимизацию наш герой не забывает. Случалось так, что товарищи по цеху в лице верстальщика и программиста наставили в коде страницы прекрасных тегов <h2>, а все картинки имели атрибут alt="image001.jpg". Они, безусловно, получат втык и под чутким надзором будут исправлять это.

Вывод

Кратко перечислим по порядку изложенные выше навыки хорошего фронтэнд-разработчика:
  1. Валидная pixel-perfect вёрстка
  2. Проектирование интерфейсов
  3. Работа с серверными технологиями
  4. JavaScript во всех ипостасях
  5. Оптимизация веб-приложений

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

sohabr.net

Что должен знать frontend-разработчик и кто это такой

Тематический трафик – альтернативный подход в продвижении бизнеса

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

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

Front-end разработчик: кто это и чем он занимается

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

  1. Верстка дизайна. На данном этапе происходит создание структуры html-кода, который вмещает в себя элементы, располагающиеся на страницах сайта (картинки, текст, кнопки и т. д.) и отображающегося в пользовательском окне браузера. Главная цель здесь – добиться того, чтобы каждый элемент дизайна был абсолютно идентичен макету. Помимо HTML здесь используется формальный язык программирования CSS.
  2. Настройка функционирования кнопок, форм регистрации и обратной связи, галерей и прочего необходимого на сайте функционала. Для достижения высоких результатов Front-end должен применять готовый скрипт из библиотеки, либо создавать собственный.
  3. После того как основная часть работы выполнена, он приступает к тестированию работы.
  4. В дальнейшем он может давать рекомендации разработчикам касательно оптимального способа реализации той или иной функции на веб-ресурсе.

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

За что отвечает фронт-энд разработчик

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

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

Чтобы посмотреть написанный им код, пользователь может вызвать контекстное меню на страницах веб-ресурса, выбрав комбинацию клавиш Ctrl+Shift+L, либо нажав правой кнопкой мыши на свободном месте и перейдя в раздел «Посмотреть код».

Что нужно знать начинающему front-end разработчику

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

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

Также начинающий front-end разработчик должен знать, где именно он может получить соответствующие знания и образование, подкрепленное дипломом. Во-первых, он может поступить в Международный учебный центр IT-образования «Компьютерная академия Шаг». Здесь только очное отделение, а выпускники получают соответствующие сертификаты и международный диплом. На сегодняшний день филиалы академии представлены в шестнадцати странах мира. Во-вторых, можно пройти онлайн-курсы в Образовательном IT-портале GeekBrains. За шестинедельный курс здесь можно пройти стажировку.

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

Как стать front-end разработчиком

Карьерный путь специалиста, как правило, начинается с обычного верстальщика. Далее, в дополнении к имеющимся знаниям рабочей связки HTML+CSS, приобретаются знания и навыки в JavaScript и сопутствующих инструментах, включая графические редакторы. Если человек изначально знает, кем он хочет быть, он может пройти обучение в соответствующих учебных заведениях, что позволит ему узнать основу профессии сразу, а не частями.

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

  1. Совершенствовать свои навыки как специалиста, занимаясь различными проектами в роли фрилансера – это горизонтальный путь развития.
  2. Устроиться в компанию и расти по карьерной лестнице – это вертикальный путь развития.

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

semantica.in

Кто такой 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

Frontend-разработчики должны быть в теме всего / Habr


Мысли Криса Койера

Одна из мыслей, которая поселилась в моей голове: должен ли frontend-разработчик быть в курсе всего? В общем смысле, frontend-разработчик может использоваться и на других рабочих местах. Вся команда разработчиков заканчивает разговор на frontend-разработчике. В этом смысл моей идеи. Frontend-разработчики создают те вещи, с которыми будут взаимодействовать люди. Все этапы разработки проходят вместе с frontend-разработчиком. Возможно, именно поэтому это такая забавная работа! Поскольку frontend-разработчик занимает центральное место в цепочке разработки, и при этом мы имеем дело с большим количеством разных специалистов, мы должны понимать их работу и иногда подсказывать, что и как сделать лучше.
От переводчика

Всем привет, с вами Максим Иванов, и сегодня мы поговорим на довольно острую тему в сфере веб-разработки. Как утверждает Крис Койер, frontend-разработчик должен разбираться в очень многих вещах, о которых не все даже и задумываются. Конечно, мы должны понимать, что frontend-разработчик не главный в процессе разработки любого онлайн-сервиса или ПО в целом. На ту же позицию frontend-разработчика вы найдете больше откликов на вакансию, чем на позицию backend-разработчиком. Но почему же тогда Крис Койер считает, что работать frontend-разработчиком сложнее, ибо ты должен специализироваться во всем. Конечно, ситуаций в жизни очень много, разные компании по-разному используют своих специалистов, но в чем наверняка должен разбираться frontend-разработчик? Об этом мы сегодня и поговорим. Жду комментариев на эту тему, а сейчас приступим.
Содержание

  1. Frontend-разработчик должен разбираться в дизайне
  2. Frontend-разработчик должен разбираться в работе серверной части (backend)
  3. Frontend-разработчик должен разбираться в работе сетей
  4. Frontend-разработчик должен разбираться в производительности
  5. Frontend-разработчик должен разбираться в контент-стратегии
  6. Frontend-разработчик должен разбираться в базах данных
  7. Frontend-разработчик должен разбираться в тестировании
  8. Frontend-разработчик должен разбираться в системах сборки
  9. Frontend-разработчик должен разбираться в методологиях разработки
  10. Frontend-разработчик должен разбираться в настройке веб-серверов
  11. Frontend-разработчик должен разбираться в юзабилити
  12. Frontend-разработчик должен разбираться в мобильном дизайне
Frontend-разработчик должен разбираться в дизайне

Если frontend-разработчик не является сам по себе дизайнером, он должен знать, насколько важен дизайн. Он должен иметь хороший вкус. Он должен знать об инструментах, участвующих непосредственно в разработке.
К прочтению:

1. Памятка дизайнеру сайтов
2. Принцип цикады и почему он важен для веб-дизайнеров
3. Стив Круг «Веб-дизайн или Не заставляйте меня думать»
4. Якоб Нильсен «Веб-дизайн»
5. Дональд Норман «Дизайн привычных вещей»
6. Джеф Раскин «Интерфейс»
7. Как за 15 лет изменились главные страницы Apple, Microsoft, IBM, Sony
8. Ководство
9. О дизайне
10. Почему курсор мыши наклонён на 45°?
11. Наберитесь смелости сделать не как все. 12 устаревших интерфейсных и технологических решений
12. Имена людей и интерфейс
13. User experience design: как построить сайт для клиентов, а не для себя
14. Главные особенности китайского веб-дизайна и их истоки
Frontend-разработчик должен разбираться в работе серверной части (backend)

Даже если вы и не backend-разработчик, то вы явно осознаёте всю важность серверной части. Вы понимаете, с чем взаимодействует backend, что передается на сервер, а что нет. Вы знаете об обязанностях backend-разработчика. Вы понимаете, какой язык используется на сервере, и при этом должны уметь объяснить, что должен дать вам backend и что нужно от серверной части frontend-а.
К прочтению:

1. Чему мы научились, разрабатывая backend
2. Собеседование на должность PHP Backend Developer в Германии
3. Пишем backend для мобильного приложения за несколько минут
4. Что должно быть впереди фронтэнд или бекенд?
5. Что нужно знать, чтобы стать Backend разработчиком?
6. Что должен знать «PHP Junior Developer без опыта работы»?
7. Какими технологиями должен обладать backend разработчик (уровень начальных знаний — новичок+)?
Frontend-разработчик должен разбираться в работе сетей

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

1. Принципы работы сети Интернет
2. Архитектура и принципы работы сети
3. Принцип работы торрент-сетей и как достигается высокая скорость
4. Руководство по TCP/IP для начинающих
5. Domain Name Service — cлужба Доменных Имен
Frontend-разработчик должен разбираться в производительности

Если вы не сосредоточены на производительности, то знаете, что производительность имеет важное место в успехе вашего проекта. Frontend-разработчики знают об этом нелегком мире. Нужные навыки помогут вам одержать быструю победу в долгой борьбе. Необходимо понимать насколько быстрым должен быть backend, а также, что оставшиеся 80% времени это загрузка сайта, т.е. это frontend.
К прочтению:

1. Производительность web: Why Performance Matters
2. Тонкости производительности
3. Выигрыш в производительности для rel=noopener
4. Измерение производительности веб-страниц
5. Улучшаем UX посредством оптимизации
6. Подходы к оптимизации (веб-)приложений
7. Пример веб-производительности
8. Производительность рендеринга картинок в Web
9. 10 Ways to Test Your Website Performance
Frontend-разработчик должен разбираться в контент-стратегии

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

1. Как создать контент-стратегию, которую будут обсуждать
2. Супер контент-стратегия. 5 успешных примеров
3. Нужна ли контент-стратегия при наполнении сайта?
4. Эрин Киссейн «Основы контентной стратегии»
5. Как построить SMM-стратегию: пошаговый план продвижения в социальных сетях
6. Как оптимизировать контент для SEO и SMM?
Frontend-разработчик должен разбираться в базах данных

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

1. Введение в базы данных
2. Базы данных: SQL (DDL/DML)
3. Ускоряем базу данных веб-сайта
4. Веб-интерфейс для баз данных размером в один .php файл
5. Возможности PostgreSQL, которых нет в MySQL, и наоборот
6. HTML 5. Работа с Web SQL базой данных
7. Базы данных и NoSQL
8. Как отобразить 350 миллионов строк из базы данных на Web-форме
9. Встраиваемая JavaScript база данных с прицелом на API совместимость с MongoDB
Frontend-разработчик должен разбираться в тестировании

Существует большое количество видов тестирования. Интеграционное тестирование. Регрессионное тестирование. Пользовательское тестирование!
К прочтению:

1. Тестирование программного обеспечения
2. Зачем нужны тесты?
3. Модульные тесты и интеграционные: в чём разница?
4. Тестирование
5. JavaScript Testing курс (eng)
6. QUnit. Тестирование javascript кода
7. Как развиваться начинающему тестировщику?
8. Повышаем стабильность Front-end
9. Бек Кент. Экстремальное программирование. Разработка через тестирование
10. Пишем свой первый юнит-тест, на примере методологии BDD и библиотеки Jasmine
10. Процесс тестирования мобильных приложений
11. Макгрегор Джон, Сайкс Девид. Тестирование объектно-ориентированного программного обеспечения
12. Тестирование JS. Кармический Webpack
Frontend-разработчик должен разбираться в системах сборки

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

1. Webpack – один из самых мощных и гибких инструментов для сборки frontend
2. Grunt — Обзор системы сборки
3. Автоматизация сборки
4. Приятная сборка frontend проекта
5. Сравнение популярных систем сборки для frontend-разработчиков
6. Grunt vs Gulp сравнение систем сборки для front-end разработчика
7. Gulp или Grunt, да всё равно
8. Методология сборки БЭМ-проекта
Frontend-разработчик должен разбираться в методологиях разработки

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

1. Необходимый минимум для фронтенд-разработчика
2. Методологии фронтенд-разработки
3. Советы front-end разработчику
4. Какими знаниями должен обладать Front-end разработчик в 2015 году
5. Что нужно знать и уметь front end разработчику в 2015/2016
6. Карта развития веб-разработчика
7. Основные навыки фронтенд-разработчика
8. Isobar Front-end Code Standards
9. Front-end Style Guides
10. JavaScript Style Guide
11. Coding style (Mozilla)
Frontend-разработчик должен разбираться в настройке веб-серверов

Без них не было бы веб-сайтов.
К прочтению:

1. Основные типы серверов
2. Что такое веб-сервер
3. Веб-сервер
4. Простым языком об HTTP
5. Веб-сервисы в теории и на практике для начинающих
6. Сравнение веб-серверов
7. Web-сервера и их использование для управления нагрузкой на приложение.
8. PHP. Встроенный web-сервер
9. Локальный веб-сервер
10. Использование преимуществ встроенного PHP сервера
11. Как поднять сервер для python скриптов за 1 минуту
Frontend-разработчик должен разбираться в юзабилити

Если frontend-разработчик не очень хорошо разбирается в юзабилити, в любом случае он должен понимать насколько это важно. Необходимо уметь тестировать и налаживать юзабилити. Frontend-разработчик должен знать, с кем поговорить на эту тему.
К прочтению:

1. Юзабилити
2. Юзабилити сайта
3. 10 советов по юзабилити сайта, основанных на результатах исследований
4. Основы юзабилити (usability) сайтов
5. Юзабилити-тестирование (ИТМО)
6. Usability vs. User Experience
7. What is the difference between UX and UI designer and web designer?
Frontend-разработчик должен разбираться в мобильном дизайне

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

1. Лучшие практики по мобильному UX от Ника Бабича
2. Адаптивный веб-дизайн
3. Responsive Web Design: What It Is And How To Use It
4. Книга Итана Маркотта «Отзывчивый веб-дизайн»
4. 10 адаптивных фреймворков для веб-дизайна
5. Responsive Web Design Fundamentals курс (eng)
Заключение

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

habr.com

Что должен знать фронтэнд разработчик?

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

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

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

Инструкция в некоторой мере повторяет мой путь, что гарантирует как минимум 25$ рейт для человека, который основательно и дисциплинированно пройдет по ней(это мой фактический по часовой рейт на бирже на момент написания статьи).

Примечание: Я неспроста выбрал именно такой порядок изучения, и поэтому желательно придерживаться именно такой последовательности, не перепрыгивая через пункты, если вы не владеете ими на необходимом уровне. Это не касается пунктов 0 и 3.

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

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

0. Английский язык

Сложность 3/10
Важность 10/10

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

В случае с фундаментальными книгами, типа JavaScript. Definite Guide — вы с лёгкостью найдёте локализованную версию, но если это статьи из блогов, новостных сайтов или тематических сообществ, то как минимум перевод вы увидите через некоторый период после публикации, а как максимум его просто не будет.

Если уж говорить о видеокурсах, ответах на вопросы на StackOverflow и дискуссиях в сообществах — перевода можно и не ждать с 99% вероятностью.

Английский язык также пригодится при общении с клиентами из разных стран.

• DuoLingo

Основы грамматики, начальный словарный запас, тестирование своих навыков

• LinguaLeo

То же что и на Дуолинго, с хорошим упором на проработку словарного запаса и аудирования. Пригодится для того, чтобы стало проще изучать материалы по видеокурсам.

• Технические статьи

Можно начинать изучать технические статьи и видеоуроки из списка ниже, держа под рукой словарь. Первой технической книгой, которую я читал на английском языке была ФЛЭНАГАН РУБИ, поначалу я заглядывал в словарь по несколько раз на страницу, но уже к середине книги я отложил его и скорость моего чтения и усваивания информации возросла. Техническая литература ПРОЩЕ художественной, а учитывая, что подобные книги как минимум на треть состоят из фрагментов кода, порог вхождения в мир технической литературы снижается пропорционально.

• Переводы

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

1. HTML/CSS

Сложность 4/10
Важность 10/10

HTML и CSS это язык разметки и таблицы стилей. Ключевая связка не только для фронтэндера, но и для веб-разработчика/веб-дизайнера.

Так как это не языки программирования, понять принцип и сделать первую HTML страничку очень просто, вы сможете сделать это буквально через пару часов после знакомства с ними.

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

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

• HTMLAcademy

Лучший русскоязычный ресурс по изучению разработке, и в то же время лучший способ быстро понять принципы вёрстки, а также начать привыкать к тэгам, свойствам и значениям.
Интерактивное обучение с интересными задачами не дадут вам заскучать. А после прохождения бесплатных курсов вы скорее всего захотите купить подписку на сайте(300₽), которая даёт доступ к изучению дополнительных тем.

• Codeschool, FreeCodeCamp, Codecademy

CS
FCC
Codecademy
На этих ресурсах тоже есть курсы по вёрстке, они несколько уступают HTMLAcademy, но всё же тоже дают некую базу. Ресурсы перечислены в порядке убывания качества информации.

• Справочники, спецификации

HTML Book
W3C Schools
MDN
Подробное описание всех CSS селекторов
Сюда вы будете заглядывать, чтобы подглядеть параметры свойств и аттрибуты тэгов.

• Практика

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

2. Twitter Bootstrap

Сложность 2/10
Важность 7/10

Самый популярный css-фреймворк, и скорее всего первый фреймворк на вашем пути.
Bootstrap — это набор стилей, а также JavaScript ШТУЧЕК, которые ускорят вашу разработку.

Существует множество других css-фреймоворков, но владеть Bootstrap’ом должен каждый веб-разработчик или веб-дизайнер.

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

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

• Документация

Bootstrap 3
Bootstrap 4 alpha

• Курс на CodeSchool

• Другие CSS-фреймворки

Foundation
Semantic UI
сравнение

3. Работа с командной строкой и системами контроля версий(СКВ)

Сложность 5/10
Важность 9/10

Для полноценного воркфлоу вы должны уметь пользоваться командной строкой и СКВ хотя бы на среднем уровне.

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

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

• Codeschool

Git Path
На кодскуле есть ветка посвященная git и github, очень подробно разбираются все моменты, первый курс из четырёх доступен без платной подписки.

• ProGit 2

Переведённая на русский язык версия популярного учебника.

• Курс по основам командной строки

Command Line Power User
Серия бесплатных уроков, чтобы получить их — нужно оставить свой почтовый адрес.

4. JavaScript

Сложность 8/10
Важность 8/10

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

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

• Codeschool

JS Path
Множество отличных курсов в специальной ветке, посвященной языку.
(CoffeeScript, Node, Express можно пропустить, если вы пока не хотите писать бэкенд)

• Learn JavaScript

Замечательный источник для изучения, да ещё и на русском языке. На мой взгляд не имеет аналогов. В конце каждой темы есть задачки на отработку.

• Книги

Носорог
Выразительный JS
Good parts

• JS Right Way

Лучшие практики языка

• Ооочень много всякого разного

• Задачки по JS

• FreeCodeCamp

Основной упор ресурса идёт как раз на JavaScript, очень много задач как алгоритмического характера так и практического(т. н. Ziplines).
Можно получить бесплатный сертификат, а также поработать в опен-сорс проектах.

5. Gulp, Webpack

Сложность 5/10
Важность 9/10

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

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

Я выбрал именно эти 2 инструмента, потому что они самые передовые в своей отрасли, а также не исключают друг друга.

• Илья Кантор

Gulp
Webpack
Замечательные бесплатные видеокурсы посвященные обоим инструментам научат вас пользоваться ими на хорошем уверенном уровне.

• Официальная документация Webpack

• Разбор сложных моментов Webpack

6. Препроцессоры

Сложность 2/10
Важность 8/10

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

Код с использованием препроцессоров Jade и Stylus

Код написанный на чистом HTML и CSS

Я думаю, визуальная разница очевидна.

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

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

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

• Курс Sass на Codeschool

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

• Официальные источники с документацией

Sass(SCSS)
LESS
Stylus
Jade

7. jQuery, jQuery UI, основы AJAX/JSON

Сложность 7/10
Важность 9/10

jQuery — самая популярная библиотека для JavaScript, она значительно упрощает работу с DOM-элементами, обменом данными с сервером(AJAX/JSON) и другими каждодневными задачами.

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

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

• В очередной раз несколько курсов на CodeSchool

• Официальная документация jQuery

• Официальная документация jQuery UI

• Примеры использования jQuery(тут же есть и AJAX)

• Курс на Codecademy

• Кратко о JSON

8. ES2015(ES6)

Сложность 4/10
Важность 7/10

Ecmascript2015 — новый стандарт языка JavaScript, добавляющий синтаксический сахар и дающий новые возможности.

Если вы купили подписку на CodeSchool, то наверняка видели раздел посвященный этому стандарту, если нет, можно посмотреть это:

• Статья на CSS-Tricks

Нужно знать, что ES2015 синтаксис не полностью поддерживается современными браузерами, поэтому код приходится компилировать, для этого нужно использовать Gulp или Webpack из пункта 5.

9. Тесты

Сложность 5/10
Важность 6/10

Я не буду много говорить о тестах, просто посмотрите этот видеоролик:

10. JS-фреймворки

Сложность 9/10
Важность 9/10

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

Для эффективной работы вышеупомянутых действий необходимо использовать фреймворки. Фреймворки бывают разные, но самые популярные сейчас это React, Angular 1-2, Vue, Ember. Все они относительно похожи, но имеют свои особенности. Вам стоит выбрать понравившиеся и развиваться в них.

P.S. React это не совсем фреймворк, фактически это библиотека для рендеринга данных, но он часто используется в таком контексте, а связка с использованием Redux/Flux и других архитектур позволяет реализовывать любые хотелки клиента.

• Официальный туториал по Angular 1.x
• Документация Angular 2
• Официальный туториал React
• Раздел JS на CodeSchool

Содержит много курсов по фреймворкам, скоро появится курс по Angular 2. Я думаю, Backbone можно не рассматривать, ну а курсы по Angular и React пройти надо.
Кстати, первый курс по Angular полностью бесплатный.

• Вопросы на собеседование по Angular 1.x
• Шпаргалка по React


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

http://frontendbookshelf.ru

https://frontendfront.com
https://new.vk.com/jsraccoon
https://css-tricks.com
https://scotch.io/
http://www.unheap.com/

https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.a4tu4t2iq
https://github.com/bolshchikov/js-must-watch
http://www.clock.co.uk/blog/javascript-frameworks-in-2016
https://egghead.io/series/getting-started-with-redux
http://codepen.io/enxaneta/full/adLPwv/

Благодарю за внимание, если вам понравилась эта статья — сделайте репост и напишите комментарий 🙂

www.flppv.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *