Перевод статьи «Top 5 Frontend Development Megatrends».
Быть веб-разработчиком это очень непросто.
Это постоянные попытки успеть за развитием технологий: изучение новых фреймворков, новых свойств языка, а порой и новых языков. Поэтому не удивительно, что разработчики часто пребывают в состоянии стресса.
Но надежда есть. Несмотря на невероятно быстрые перемены и огромное количество доступных фреймворков и пакетов, в последние годы наблюдается некая консолидация концепций в несколько мегатрендов.
Если мы разберемся, что является этими мегатрендами, это поможет нам сфокусироваться и понять, чем именно стоит овладеть. Имея этот контекст, будет не так страшно выбрать новый фреймворк или инструмент для изучения. Ведь если наш выбор попадает в один из таких основных потоков, нам придет на помощь перенос знаний. То есть, изучив один инструмент, мы сможем перенести эти знания на другой.
Чем лучше мы видим картину крупным планом, тем вероятнее сумеем «оседлать» сумасшедшую волну веба, вместо того чтобы барахтаться в болоте.
Итак, перед вами основные тренды фронтенд-разработки.
1. Компонентно-ориентированная разработка
Сегодня каждый JavaScript-фреймворк адаптирован к компонентно-ориентированному подходу. И это касается не только самых крупных из них (React, Angular, Vue). Посмотрите на такие инструменты как Ember, Dojo, Mithril – все они используют компоненты как ключевую абстракцию по части пользовательского интерфейса.
Эта ориентация представлена и в CSS, как на методологическом уровне, так и на уровне фреймворков. Такие методологии как BEM созданы специально для поддержки компонентно-ориентированного подхода к CSS. UI-фреймворки, например Bootstrap, Material или Foundation, обязательно имеют коллекции готовых компонентов. Это корень практически всей современной фронтенд-разработки.
Почему именно компонентно-орентированная разработка? Потому что она позволяет разделять проблемы и модульную разработку подходящим для пользовательских интерфейсов способом.
Мы давно знаем о важности модульности кода: благодаря ей мы можем разрабатывать куда более сложные системы, код которых остается поддерживаемым и управляемым. Но не всегда был понятно, как правильно делать модуляризацию фронтенда. Решение React о смещении разделяющих барьеров в компоненты, а не в язык, произвело революцию в мире фронтенд-разработки.
Не всем нравится JSX-решение. Я вот предпочитаю подход Vue с его однофайловыми компонентами. Но несмотря на это, ключевым изменением является ментальный сдвиг. Мы стали представлять компоненты как небольшие пакеты тесно связанных HTML, CSS и JavaScript, причем между собой эти пакеты связаны мало.
2. Декларативное программирование
С ранних дней веба и до сегодняшнего дня во многих простых JavaScript-приложениях мы применяли императивную парадигму. Сделай вот это, измени вот это и делай вот так.
Но JavaScript-фреймворки все больше консолидируются вокруг декларативной парадигмы. При ней мы, вместо того чтобы указывать, как что-то делать, описываем конечный результат, а фреймворк сам определяет, как это сделать. Теперь мы просто говорим, что нужно сделать, а фреймворк управляет всеми «как» и «когда».
Если мы хотим изменить UI-элемент, мы просто говорим фреймворку, каким должно быть его конечное состояние, и предоставляем ему внести все необходимые для этого изменения. Для эффективной работы фреймворк может использовать такие инструменты как Virtual DOM или другие вещи, вроде time-slicing, чтобы внесение изменений не отражалось на пользователях. Главное, что обо всем этом не нужно беспокоиться нам, разработчикам.
Благодаря этому делаются возможными две вещи.
Во-первых, феноменальное улучшение читаемости кода. Он становится гораздо понятнее. Чтобы понять, что меняется, и представить, на что будет похож конечный результат, нам больше не нужно копаться во множестве строк jQuery. Мы можем просто посмотреть шаблон.
Во-вторых, у авторов фреймворков появляется возможность проще и быстрее реализовывать лучшие практики.
Чем больше мы передаем управление фреймворку, тем больше вещей он может делать незаметно, за кулисами.
3. Консолидация управления состояниями
Чем более сложным становится фронтенд, тем лучшие решения нам требуются для управления состояниями. Компонентно-ориентированная разработка в чистом виде отлично подходит для локальных состояний, но порой нам нужно разделять состояния между разными компонентами. Одна из сложностей фронтенда заключается в том, что все происходит асинхронно, но иногда нам необходимо обеспечить предсказуемость в управлении состоянием.
С этим связаны два различных, но, как мне кажется, взаимосвязанных проекта.
Первый это разработка Flux-архитектуры. Этот шаблон реализован в таких инструментах как Elm, Redux, Vuex. Красота этой архитектуры в том, что она принудительно вносит однонаправленный поток данных, что сильно облегчает управление состояниями и их отладку. Всё в конечном итоге проходит через центральный диспетчер, а это означает, что вы можете внести в управление состояниями предсказуемость, воспроизводимость и возможность отладки.
Второй проект, который, как мне думается, нацелен на решение той же проблемы, это GraphQL. Его подход заключается в создании обобщающего слоя, «живущего» не во фронтенде, не в диспетчере, а на сервере GraphQL. Фронтенду больше не нужно управлять множеством различных мест, из которых ему необходимо получать состояния, и их взаимосвязями… он просто запрашивает нужное, а готовит его сервер GraphQL.
4. Одностраничные приложения и возможность роутинга на стороне фронтенда
Когда сложные интерфейсы вступили в свои права, не сразу стало понятно, как мы будем их организовать. Будем ли мы просто встраивать все более и более мощные компоненты в независимые страницы с рендерингом на стороне сервера?
Со временем стало ясно, что URL это одна из величайших инноваций в вебе, но в перемещении между страницами исключительно в рамках фронтенд-приложений кроется огромное преимущество.
Ember.js стал, вероятно, первым фреймворком, который принял эту философию, но с того времени к ней пришли практически все основные фронтенд-фреймворки. Не каждому проекту необходимо иметь полномасштабное одностраничное приложение. Но становится все более распространенной практикой, когда весь ваш фронтенд или хотя бы его часть осуществляют собственный роутинг.
Не важно, пользуетесь вы при этом React Router, Vue-router, Mithril’s routes или чем-то еще – основные концепции будут схожими. URL ведет к набору компонентов и состояний, часто со вложенными компонентами и на основе вложенных маршрутов.
5. Типы для управления сложностью
Разработка на JavaScript долго была быстрой, но непоследовательной. Типы были несвязанными, аргументы не проверяемыми и даже автоматическое тестирование долгое время оставалось без внимания. Но сложность того, что мы создаем во фронтенде, существенно выросла. Одновременно возросла и наша потребность в помощи в управлении кодом и в предотвращении ошибок.
И один из самых больших мегатрендов в плане этой помощи – типы. Фронтенд все больше принимает идею проверки типов. Это проявляется и в использовании инструментов вроде Flow, и во все более частом использовании языков, компилируемых в JavaScript (TypeScript). Статистика показывает, что 46% респондентов npm-опроса используют TypeScript. Это потрясающий результат, и, судя по всему, эта тенденция сохранится в 2019 году.
Бонус: рендеринг на стороне сервера и универсальный JavaScript
Эта инновация больше касается деплоймента или операций, чем разработки фронтенда, но тем не менее. Еще один мегатренд – продвижение рендеринга одностраничных приложений на стороне сервера.
Это позволяет вам использовать лучшие особенности как одностраничных приложений, так и приложений с рендерингом на сервере. При таком подходе вы получаете быстрое время просмотра первой страницы, а также эффективность сети и все преимущества латентности и интерактивности одностраничных приложений.
Заключение
Преимущество, которое дает нам знание основных трендов – отсутствие паники в попытках определить, что учить дальше. Вы можете изучать один стек, но при его изучении уделять особое внимание вещам, соответствующим основным современным тенденциям. Эти знания при необходимости вы сможете быстро применить и в других стеках.
Например, вы решили погрузиться в Next.js с использованием TypeScript. При этом вы затронете все мегатренды из этой статьи.
Строить приложение вы будете при помощи React – компонентно-ориентированного фреймворка с отличным декларативным стилем. Вы можете решить использовать Redux или GraphQL, и получите возможность роутинга и рендеринга на стороне сервера, что называется, «из коробки».
И если позже вы захотите перейти на Vue.js, вы сможете перенести все эти знания: детали Vue немного отличаются, но в целом все очень похоже, есть даже эквивалент фреймворка более высокого уровня – Nuxt.js.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]