Развитие каналов связи, стремительный рост вычислительной мощности мобильных устройств, появление Node.js и распространение идеологии open-source разработки - все это вывело Javascript на качественно новый уровень, поставив его во главу угла современного веба.
С подачи сообщества разработчиков и производителей браузеров современный JS, являясь самодостаточным, «взрослым» языком, стал способен самостоятельно определять состав страницы, генерировать код и поведение для элементов интерфейса, загружать только нужные стили. Опция браузера «отключить javascript на странице» сегодня воспринимается как анахронизм, т. к. ни один современный сайт не будет нормально работать и отображаться без скриптов.
Компонентный подход построения интерфейса постепенно стал обрастать «плотью» - библиотеками, фреймворками, сборщиками и готовыми реализациями. Фронтенд-разработка стала отдельной профессией и областью знаний со своим набором инструментов, подходов, решений и подводных камней (ну куда же без них). Справедливости ради отметим, что это поставило перед разработчиками новые вызовы и сложности в таком, казалось бы раньше тривиальном процессе интеграции верстки в ядро приложения.
Программисты, знакомясь с экосистемой фронтенд-разработки, во все красе постигали специфику современного JS.
Особенности языка и среды выполнения. Javascript оказался специфическим языком в плане архитектуры. Те, кто переходил с традиционных серверных веб-языков (в основной массе это были php, python), встретили ряд нетипичных вещей, которые надо осознать и принять — асинхронный код, прототипное наследование, особенности приведения типов, «эксплуатация» возвращаемых значений операторов и другие «трюки». Особенностью экосистемы JS всегда был огромный набор библиотек и альтернативных реализаций. Поэтому для самого JS был выпущен TypeScript, а также другие решения, призванные устранить те или иные недостатки архитектуры.
Синтаксический сахар.Каждый фреймворк помимо самой идеи привносил с собой различные «полезности» для увеличения продуктивности. Одной из них стал особый синтаксис шаблонов (JSX и другие), позволяющий усиливать html-код директивами фреймворка, а также вставлять необходимые блоки js-кода прямо посреди верстки там, где это было необходимо.
Инструменты сборки. Другой особенностью разработки на JS всегда было большое количество вспомогательных инструментов, необходимых для выпуска максимально совместимого с браузером (да и просто нормально работающего в нем) кода. Пакетный менеджер, сборщик, линтер, транспайлер — вот далеко не полный «стартер пак», необходимый для фронтэнд-разработчика. Просто писать готовые к выполнению скрипты руками уже не получится.
Реактивное программирование. Основная концепция фронтэнд фреймворков, ломающая привычные методы реализации отзывчивых веб-интерфейсов, но требующая переворота сознания и времени на перестроение способа организации логической модели. Поиск в DOM и event listener’ы теперь в прошлом. Способ реакции на изменения определяет “состояние” (state), ошибочно принимаемое многими начинающими программистами за откровение и магию фреймворков.
Новые поля для холиварных сражений. Большое количество альтернатив на рынке фронтэнд-фреймворков порождает большое количество дискуссий по направлениям - как на уровне конкуренции отдельных решений (React vs Vue vs Angular), так и целых их поколений (классические фреймворки React/Vue/Angular и новая волна - Svelte и подобные).
Сегодня уже очевидно, что появление Node.js способствовало переходу современного веба на качественно новый уровень, породившее целую экосистему программных продуктов, в том числе и целый спектр новых решений для интерфейсов. Не будем останавливаться на ранних попытках популяризации фронт-энд разработки (как правило, это были попытки Google и прочих), а посмотрим, что предлагает рынок сегодня.
Продолжение следует...