Современные архитектуры фронт-энда

Аналитика

▍Наблюдение за поведением пользователей и A/B-тестирование

• Google Analytics (GA). Существуют руководства по использованию GA в Angular, React и Vue.
• Kameleoon. Это — основанный на технологиях искусственного интеллекта фреймворк для персонализации и A/B-тестирования веб-проектов.

▍SEO

• Angular. Вот интересная статья по поисковой оптимизации, которая применима к Angular- и к Angular Universal-проектам.
• React. Вот материал об общих проблемах SEO в React-проектах. Вот — статья об улучшении поисковой оптимизации React-приложений.
• Vue. Вот подробная статья о поисковой оптимизации Vue-приложений.

React + Flux

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

JavaScript-библиотека для построения интерфейсов

Facebook создал React и Flux для решения некоторых недостатков MVC и проблем с масштабированием. Посмотрите их широко известную презентацию Hacker Way: Rethinking Web App Development at Facebook. В ней говорится о происхождении и особенностях Flux.

Чтоб начать работу с React и Flux, сперва изучите React. Хорошим учебником для начинающих будет документация React. После этого переходите к React.js Introduction For People Who Know Just Enough jQuery To Get By, чтобы помочь себе отойти от jQuery-мышления.

Когда у вас появится общее представление о React, начинайте изучать Flux. Стоит сперва прочитать официальную документацию Flux. После этого посетите Awesome React — сборник ссылок, которые помогут продвинуться дальше в вашем обучении.

Практика с фреймворками

Теперь вы имеете общие знания о JavaScript-фреймворках и архитектурных шаблонах и настало время применить их на практике

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

Кто это?

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

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

Как стать frontend-разработчиком с нуля

Должность верстальщика – первая ступень на пути к должности фронтенд-разработчика. Это самый распространенный вариант.

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

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

Чтобы стать frontend-разработчиком с нуля, первым делом познакомьтесь с HTML-кодом и возьмитесь за изучение CSS.

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

А дальше оттачивайте свои навыки, пополняйте знания.

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

Более быстрый способ узнать все тонкости профессии – обзавестись наставником. Найти его можно на онлайн-курсах.

Где учиться

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

По завершении обучения вам выдадут сертификат и помогут составить резюме.

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

Вот несколько хороших курсов:

• Профессия Frontend-разработчик
• Frontend-разработчик с нуля
• React: библиотека фронтенд-разработки №1
• Специализация Frontend-разработчик
• Frontend-разработчик
• Профессия “Фронтенд-разработчик”

Узнать подробности и ознакомиться с полным перечнем курсов по frontend-разработке можно на нашем блоге.

Где работать

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

Карьерная лестница начинается с пункта “стажер”. Работа позволит набраться опыта и узнать на практике, что такое фронтенд-разработка.

Вакансии можно найти на профильных IT-ресурсах или на популярном сервисе по поиску работы hh.ru.

Если вам достаточно подработки или вы еще совсем “зеленый”, найти работу и испытать себя можно на биржах фриланса. Есть международные сервисы, например, Upwork, Freelancer, Joomlancers, Gigster, Codeable и YouTeam. А есть русскоязычные: Kwork, FL, Freelance.

Биржи помогут начинающим программистам набить руку, собрать портфолио и научиться работать с заказчиками.

У опытного специалиста есть три варианта совершенствования в работе:

1. Вертикальный – рост по карьерной лестнице, постепенное завоевание новых должностей.
2. Горизонтальный – непрерывное совершенствование своих навыков, что приводит к повышению цены за свои услуги.
3. Диверсификационный – обретение новых навыков, смежных специальности фронтенд-разработчик, и последующая переквалификация. Так часто frontend-developer превращается в backend-разработчика.

Как стать frontend-разработчиком? Что нужно знать и уметь?

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

1. Освоить HTML и CSS. HTML – это язык разметки веб-документов. CSS – каскадные таблицы стилей. Они управляют оформлением различных элементов на страницах (например, размером шрифтов).
2. Изучить JavaScript – основной язык, который нужно знать frontend-программисту. Существуют различные библиотеки готовых скриптов, написанных на JavaScript. Их тоже лучше изучить, чтобы пользоваться ими и ускорять свою работу. Пример такой библиотеки – jQuery.
3. Изучить методологию верстки, например, БЭМ от Яндекса. Методология помогает создавать веб-приложения по определенным принципам, которые помогают разбираться в чужом коде и в своем тоже по прошествии какого-то времени.
4. Изучить фреймворки, в частности, Bootstrap. Фреймворк – это набор неких готовых решений, на базе которых можно создавать веб-сайты быстрее, чем при написании кода с нуля.
5. Освоить кроссбраузерную верстку и научиться создавать страницы, которые одинаково выглядят в разных браузерах.
6. Изучить адаптивный дизайн, т.е. дизайн, который подстраивается под размеры экрана пользователя. Таким образом сайт приемлемо выглядит на разных устройствах (компьютер, планшет, смартфон).
7. Не лишним будет освоить языки серверного программирования на базовом уровне. Например, язык PHP – один из самых популярных в среде веб.

8. Изучить Git и научиться работать с системами контроля версий.

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

Мифы о UI/UX-дизайнерах

Вначале я хотел бы обратить внимание на предвзятое отношение и недоверие фронтендщиков к UI/UX-дизайнерам. Далее по тексту я опущу приставку UI/UX и буду писать просто «дизайнер», подразумевая именно дизайнеров интерфейсов

Выделим несколько мифов, которые мешают в коммуникации.

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

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

Мой дизайнер только рисует макеты, откуда он знает, как лучше? Этот миф распространен у Junior-разработчиков. Специально для них объясню, что дизайнеры — то люди, которые прорабатывают макет не только чтобы он смотрелся красиво и современно, но и чтобы им было удобно пользоваться. Они знают множество паттернов поведения пользователя, сочетания цветов и форм, о которых мы не догадываемся, поэтому лучший совет в этом пункте: больше доверяйте своему коллеге, он наверняка знает, что делает.

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

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

Функционал специалиста

А теперь пора перечислить основные функции, которые непосредственно выполняет фронтенд-разработчик:

• получает техническое задание от веб-дизайнера (макеты будущего веб-ресурса) и изучает его;
• создает шаблоны будущих страниц сайта и делает верстку с помощью HTML и CSS;
• формирует с помощью готовых скриптов (или создает новые) все составляющие – кнопки, картинки, разделы, галереи и прочие формы, которые должен увидеть пользователь, зайдя на страницу сайта;
• проводит тестирование проекта сайта;
• исправляет возможные недочеты и ошибки, доводит проект до идеального состояния;
• сдает готовый проект веб-дизайнеру и заказчику.

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

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

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

Для завершения образа специалиста по фронтенд-разработке предлагаю оценить существующие достоинства и недостатки в его работе:

Широкий выбор сфер деятельности, где можно попробовать свои силы
Большая востребованность в грамотных специалистах
Высокий уровень дохода
Можно работать удаленно или на фрилансе
Перспективы карьерного роста и развития в профессии

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

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

Интересные люди

• Mathias Bynens — разработчик V8, высокопроизводительного JavaScript- и WebAssembly движка от Google с открытым исходным кодом.
• Jake Archibald — веб-евангелист и представитель браузера Google Chrome, один из лучших экспертов компании, автор множества докладов на уникальные темы.
• Phil Walton — инженер в Google, работающий над браузером Chrome, имеет опыт разработки с 1998 года и ведет персональный блог.
• Monica Dinculescu — “emojineer”, работает в Google над проектом Magenta, создавая музыку и изобразительное искусство с помощью машинного обучения.
• Tim Kadlec — технический консультант по производительности, делающий веб более быстрым, автор нескольких книг и участник конференций.
• Léonie — специалист по доступности и сооснователь W3C Web Platform WG.
• Eric Meyer — эксперт в области HTML и CSS, автор множества статей и книг, создатель нескольких полезных инструментов и ресурсов. Более подробно — на его личном сайте.
• Una — веб-евангелист и директор по дизайну продуктов в Bustle Digital Group.
• Harry Roberts — независимый веб-консультант по производительности, работающий с крупнейшими международными корпорациями. Приглашенный эксперт Google, отмеченный наградами разработчик, международный докладчик и посол по вопросам эффективности в SHIFT Commerce.
• Alex Russell — техлид по стандартам команды Chrome, участник группы технической архитектуры W3C и разработчик ECMA TC39 (стандарт JavaScript).
• Surma — веб-евангелист в Google.
• Manuel Matuzović — профессиональный веб-разработчик с 2008 года и фрилансер с 2010 года, специалист в HTML, доступности, CSS-верстке и архитектуре.
• HJ Chen — веб-евангелист в Nexmo.
• Jen Simmons — дизайнер-евангелист в Mozilla, член рабочей группы CSS, который знает, как CSS Grid меняет веб-дизайн.
• Martin Splitt — евангелист OSS1 и разработчик в Google.
• Maximiliano Firtman — независимый разработчик мобильных и веб-приложений, ментор и докладчик, занимающийся прогрессивными веб-приложениями, производительностью, мобильностью и веб-платформой. Автор множества технических статей и книг о программировании.
• Rachel Andrew — веб-разработчик, член рабочей группы CSS и главный редактор Smashing Magazine.
• Roma Komarov — frontend-разработчик, специализирующийся на CSS, создатель Hayaku, bemto-компонентов, bemto для Pug.js и так далее.
• Addy Osmani — руководитель команды Speed Team в Google Chrome, которая делает веб быстрее. Также Addy работает над несколькими проектами с открытым исходным кодом — более подробно на персональном сайте.

Где учиться

• Если фронтент-разработчиком можно стать и после непрофильного вуза (строительство, дизайн, экономика и проч.), то бэкендером гораздо сложнее. Идеальная образовательная основа для бэкенд-разработчика — математическое, физическое и собственно ИТ образование. Именно они дают отличную базу для понимания алгоритмов, функций, паттернов, вычислительных процессов и т.д. 
• С курсами дело обстоит тоже печальнее — вы можете начать изучать какой-то язык (например, PHP или Java) и даже сделать какой-то фуллстековый мини-проект, но только опыт реальной работы даст полное понимание функционирования и взаимодействия всех компонентов, потому что у бэкенда слишком много деталей и подводных камней (даже несмотря на крутые инструменты разработки).
• Именно для бэкенда лучшим образовательным путём мне видится изучение основ серверного языка и путь от стажёра в компании, где есть наставник/ментор по специальности. На реальном проекте и узких задачах вы быстрее поймёте, что к чему.
• Никто не отменяет небольшие open source проекты, в которые можно коммитить.
• И, конечно, должен быть свой сайт (пет-проект), который станет главным тренировочным плацдармом. Путь предстоит не самый простой, поэтому выбирайте ту тематику, которую, кроме самой разработки, вам будет интересно развивать. Например, если вы увлекаетесь спортом и здоровым образом жизни, разработайте приложение-дневник со счётчиками, коннекторами к каким-нибудь датчикам, ачивками и т.д. Это будет полезно и увлекательно (а иногда из таких сайд/пет проектов вырастают коммерчески успешные стартапы). 

Фронт + бэк = фулстэк

Если в двух словах, то фронтенд (Front-end) — это сцена, бэкенд (Back-end) — закулисье, а фулстек (Full Stack) — их совокупность, то есть вся подготовительная работа к спектаклю и сам спектакль.

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

• Превращает макет дизайнера в код. Щелкните правой кнопкой мыши прямо сейчас, выберите «Исходный код страницы» — его написал фронтендер.

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

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

• Готовит данные к отправке на сервер или в сторонние приложения.

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

Бэкенд-разработчик отвечает за то, что скрыто от глаз пользователя, происходит вне его компьютера или другого устройства. Например, когда вы вводите запрос в поисковой строке Google или Яндекс, вы имеете дело с фронтендом, как только вы нажимаете Enter, в игру вступает бэкенд. Запрос уходит на сервер поисковика, распознается там и возвращается в виде понятного ответа. В выдаче появляется список сайтов — это снова фронтенд.

Коды для фронта и бэка пишутся на разных языках. Для первого наиболее актуальны HTML, CSS, JavaScript, для второго — Ruby, PHP, Python, Java.

Фулстэк-разработчик владеет сразу несколькими языками, отвечает и за «темную» серверную сторону, и за «светлую» пользовательскую. Иногда он также обладает компетенциями UI/UX-дизайнера. В общем, универсал.

Натан Розенталс «Изучаем TypeScript 3»

Мир не стоит на месте, миру нужна строгая типизация, поэтому на сцене появился TypeScript — надстройка над JS, которая открывает нам многие классические возможности строго-типизированных языков и дает нам полноценное Объектно-Ориентированное Программирование (почему полноценное — я когда-нибудь напишу об этом).

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

Книга поделена на осмысленные разделы, где есть пояснения — что читать frontend-разработчику со знанием js, и что читать начинающему разработчику.

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

Послесловие

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

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

2. Книги #2 — серия, которая поможет разобраться во всех разделах отдельно, поможет углубиться в тему, получить скорее архитектурное понимание, чем общее

3. Книга #3 — рынок диктует то, что мы читаем. Книга поможет быстро вникнуть в typescript, понять его основы, понять скорее его идеологию.

P.S.

В будущем, если статья понравится пользователям, я бы хотел написать:

• Книги по фреймворкам и библиотекам

• Книги для новичков (таких очень много)

• Книги по CSS и HTML (да, и такое есть)

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

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

К ним относятся:

1. HTML и CSS

Без HTML и CSS разработка внешнего интерфейса невозможна. Эти две технологии обеспечивают строение основополагающей части любого сайта.

Язык разметки HTML отвечает за то какие элементы должны находится на сайте. Например: кнопки, ссылки, формы заполнения полей, заголовки и т.д.

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

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

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

2. JavaScript

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

Использование CSS, HTML и JavaScript позволяет разрабатывать как простые, так крупные продвинутые веб-приложения.

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

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

3. Frontend фреймворки (на JavaScript)

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

Одни из самых популярных фреймворков это:

• ReactJS
• Vue.js
• Angular

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

4. jQuery

jQuery — это JS библиотека, которая упрощает обработку событий, а также обход и манипулирование DOM элементом веб-сайта.

Почти 3 из 10 миллионов веб-сайтов используют jQuery. Это набор расширений и плагинов, которые ускоряют разработку с помощью JavaScript. jQuery обычно используется для:

• Манипуляции и событий с HTML тэгами
• Автоматической перестановки и изменение размеров макетов сетки
• Создания счетчика обратного отсчета
• Автозаполнение формы поиска

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

5. CSS препроцессор

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

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

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

На сегодняшний день доступны 2 популярных CSS препроцессоров. Это SASS и LESS. Оба отличаются синтаксисом

SASS гораздо более популярен среди веб-дизайнеров. Это может быть связано с тем, что SASS немного старше. Изначально LESS поддерживался хорошо зарекомендовавшим себя фреймворком Bootstrap. Но с версией 4 проект Bootstrap официально перешел на SASS, что еще больше повысило его популярность.

6. API-интерфейсы и службы RESTful

Другой набор передовых концепций, относящихся к frontend разработке — это API-интерфейсы и службы RESTful.

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

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

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

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

Эксперимент 7

React и Flux- мощная комбинация для построения комплексных приложений

Теперь, когда вы потренировались в применении MVC, пришло время Flux. Эксперимент 7 заключается в создании списка задач с использованием React и Flux. Вы можете найти полный учебный курс на сайте с документацией Facebook’s Flux. Курс шаг за шагом объяснит, как использовать React и как Flux применяется для создания веб-приложений.

После окончания этого курса вы можете перейти на следующий уровень, прочитав учебники How to Build a Todo App Using React, Redux, and Immutable.js и Build a Microblogging App With Flux and React.

Будьте в курсе

Как и остальная часть фронтенда, область JavaScript стремительно меняется

Очень важно всегда быть в курсе происходящего

Пейзаж JavaScript стремительно меняется

Ниже я привожу список наиболее интересных и информативных сайтов, блогов и форумов.

• Smashing Magazine
• JavaScript Weekly
• Ng Weekly
• Reddit JavaScript
• JavaScript Jabber

Эксперимент 1

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

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

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

Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

• Меню приложения
• Виджет Twitter
• Простое плоское меню

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

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

Императивный vs. Декларативный

Есть два типа подхода к тому, как JavaScript взаимодействует в DOM: императивный и декларативный. С одной стороны декларативное программирование сосредоточено на том, что происходит. С другой стороны императивное программирование сосредоточено не только на том, что происходит, но и как.

var hero = document.querySelector('.hero')hero.addEventListener(‘click’, function() {  var newChild = document.createElement(‘p’)newChild.appendChild(document.createTextNode(‘Hello world!’))    newChild.setAttribute(‘class’, ‘text’)    newChild.setAttribute(‘data-info’, ‘header’)    hero.appendChild(newChild) })}

Это пример императивного программирования, когда мы вручную запрашиваем элемент и вкладываем структуру в DOM. Другими словами концентрируемся на том, как достичь чего-то. Самая большая проблема этого кода — он слишком хрупкий. Если кто-то в процессе работы поменяет имя класса в HTML с hero (герой) на villain (злодей), обработчик событий больше не будет срабатывать, поскольку в DOM нет никакого класса hero.

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

Это позволяет сосредоточить внимание на том, что делается, вместо того, как это делается. Для получения большей информации прочитайте и Three D’s of Web Development #1: Declarative vs

Imperative.

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