Fronted Developer: дорожная карта для изучения

5 (100%) 2 vote[s]

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

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



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

    1. Базовые знания (HTML + CSS + JS).
    2. CSS Framework.
    3. Менеджер пакетов (Package Manager).
    4. CSS Preprocessor.
    5. Инструмент для сборки (Build Tool).
    6. Front-end Framework.
    7. Инструменты тестирования (Testing).
    8. Прогрессивное ВЕБ-приложение (Progressive Web Applications — PWA).
    9. Производительность (Performance).
    10. CSR (Client-Side Rendering, рендеринг на клиенте) и SSR (Server-Side Rendering, серверный рендеринг).
    11. Генераторы статичный сайтов (Static Site Generator).

1. Основы

Fronted Developer

HTML: никогда не стоит недооценивать HTML. В HTML есть много фишек, которые незаслуженно обделены вниманием и не получили массового использования. На самом деле, есть много HTML элементов, узнав о которых, вы будете удивлены, насколько они облегчают жизнь (например, <meter>, <progress>, <template>, <details> <summary></summary> </details> и т.п).

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

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

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

2. CSS Framework

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

На сегодня наиболее популярными являются 5 фреймворков: Bulma, Bootstrap, Materialise, Semantic UI и Foundation.

Опытный Fronted Developer может сразу определить, взглянув на сайт, какой фреймворк CSS используется!

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

Менеджер пакетов — это инструмент, который автоматизирует процесс установки, обновления, настройки. Он также создает проектные среды и легко импортирует внешние зависимости.

Каждому хочется быстрее освоить главные инструменты, которыми должен обладать Fronted Developer, и можно предположить, что многие сразу после знакомства с HTML, CSS и JS берутся за изучение популярных сегодня фреймворков JS (React, Vue). Но придется все-таки отвлечься на изучение менеджера пакетов. Возможно, вы уже слышали аббревиатуры npm и yarn. Это и есть менеджеры веб-пакетов, которыми пользуются веб-разработчики. Официальным менеджером веб-пакетов является npm, а yarn — менеджер пакетов для node.js, представляющий собой отдельный проект, разработанный в первую очередь Facebook (разрабатывающий, как известно, React, и другими — Exponent, Google и Tilde). Это улучшенная версия NPM, но все же для новичка не рекомендуется начинать работать с yarn.

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

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

    1. LESS
    2. SASS
    3. STYLUS
    4. POSTCSS

5. Инструмент для сборки

Task Runner: для автоматизации всех скучных повторяющихся процессов, например, Gulp.js или Grunt.js.

Modular builder: модульный компоновщик объединяет множество веб-пакетов и различных зависимостей, включая файлы CSS и изображения, затем создает модули, например webpack.

Linter: Linting — это процесс запуска программы, которая будет анализировать код на наличие возможных ошибок. Code linting — это важный компонент, которым нужно пользоваться в проекте, потому что это способ повысить качество кода (HTML Tidy, scss-lint, stylint, less-plugin-linter, Stylelint,  JSLint, JSHint,  ESlint). Список инструментов для статичного анализа кода — https://en.wikipedia.org/wiki/List_of_tools_for_static_code_analysis.

Formatter: кодировщик кода изменяет или исправляет ваш исходный код в соответствии с предварительно заданной конфигурацией (https://htmlformatter.com/, babel в JS, esprima).

6. Front-end Framework

Angular. Создан Google и является лучшим для корпоративных приложений.

React. Построен Facebook, и широко используется во всех проектах.

Vue. Это прогрессивный фреймворк для создания пользовательских интерфейсов.

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

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

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

Есть 3 вида теста:

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

Интеграционное тестирование (INTEGRATION TESTING). Интеграционное тестирование — это тип тестирования, чтобы проверить, работают ли различные части модулей вместе. Поведение интеграционных модулей рассматривается в интеграционном тестировании.

Функциональное тестирование (FUNCTIONAL TESTING). Это тип тестирования программного обеспечения, при котором система проверяется на соответствие функциональным требованиям / спецификациям.

Рекомендуемые JS библиотеки для UNIT-тестирования: MochaJS ( c Chai  и Sinon), Jasmine, AVA, JEST, Karma и т.д.

8. PWA

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

PWA обладают такими признаками:

    • Устанавливаются на смартфоны или планшеты пользователей.
    • Работают в режиме оффлайн благодаря кэшированию контента.
    • Доставляют пользователям пуш-уведомления.

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

Чтобы добавить на сайт функциональность прогрессивного приложения, необходимо создать файлы web-manifest и service-worker. Это можно сделать вручную или с помощью генераторов и плагинов. Например, на сайтах под управлением Drupal, WordPress функциональность PWA реализуется в несколько кликов без специальных знаний.

9. Производительность

Существует различные инструменты для тестирования производительности вашего приложения, например:

10. SSR, CSR

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

При серверном рендеринге в ответ на запрос на сервере генерируется весь HTML-код страницы. Такой подход позволяет добиться быстрой первой отрисовки и первой содержательной отрисовки (FCP). Выполнение логики страницы и рендеринг на сервере позволяют избежать отправки клиенту большого количества JavaScript, что приводит к меньшему времени до появления интерактивности (TTI), что позволяет коду работать на широком диапазоне устройств, или даже без включенной поддержки JS. Однако формирование страницы на сервере занимает определённое время, что может привести к большему времени до получения первого байта (TTFB). Например, Angular Universal, Vue Nuxt рендерят на сервере.

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

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

11. Генераторы статических сайтов

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

Для статического рендеринга существуют самые разные решения. Такие инструменты, как Gatsby на React, Hugo, Angular SCULLY, VuePress от Vue разработаны так, чтобы создавать впечатление динамического рендеринга. Другие, вроде Jekyl и Metalsmith, принимают свою статическую природу и предлагают подход, основанный на шаблонах.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 788

Популярные записи