Клиентские фреймворки
В настоящее время, фронтенд постепенно превращается из статичного в динамичный: в то время как раньше сервер отдавал уже готовую страницу, а браузер просто отображал стилизованный HTML, сейчас генерация HTML часто происходит уже в самом браузере с помощью Javascript-фреймворков, которые могут обрабатывать запрашиваемые с сервера данные (и по ним уже строить страницу). Обычно, такие фреймворки имеют Virtual DOM - виртуальную модель HTML-документа, с которой и работает программист (а уже сам фреймворк по нему генерирует конечный HTML).
Angular
AngularJS, Angular 2 (и его последняя версия Angular 4) - разработка, поддерживаемая Google. В то время как первая версия Angular, которая называется AngularJS - работала полностью на Javascript, вторая использует Typescript - другой язык (типизированный Javascript, разработанный Microsoft), который транспилируется (именно так называется этот процесс) в Javascript.
React
React - разработка, поддерживамая Facebook. Он использует надмножество языка Javascript под названием JSX. Так же, как и Angular, позволяет задавать в HTML-верстке ссылки на переменные кода, при изменении которых их отображение на странице обновляется автоматически.
Другие
Ember.js, Vue.js - еще пример известных клиентских JS-фреймворков. Немаловажным является его размер, от него зависит не только скорость загрузки страницы, но и время старта приложения (и иногда в сложных случаях даже реакции). Они, в отличие от двух перечисленных выше, построены без изменений в Javascript, и направлены больше на активное использование шаблонизации, хотя архитектурно они во многом повторяют React и Angular.
Архитектурные концепции
Angular, React и большинство других клиентских Javascript-фреймворков строятся на компонентной модели. Компонента - это обособленный кусочек функционала конечного приложения, например, навигация, виджет, основной контент страницы (он может также состоять из компонент).
Компоненты как минимум содержат стили, разметку и код. Код связывает всё это воедино, и, получая некоторым образом данные, сопоставляет их местам в разметке.
Одной из основных концепций всех клиентских фреймворков следует выделить клиентский роутинг - когда адреса в браузере обрабатываются на клиенте, и контент для подмены генерируется клиентским приложением (в браузере) - при этом может происходить подгрузка данных, но перезагрузки страницы происходить не будет.
Примеры
Примеры можно легко найти в Google. В этот раз я не стал их сам писать :) Просто нашел легкие и наглядые примеры.
Angular
React
Почему не нужно писать свой фреймворк
Желание решить конкретные проблемы конкретного фреймворка часто порождает новые фреймворки в Javascript-мире. Это не есть хорошо по следующим причинам:
-
Их никто не знает и никто вам с ними не поможет,
-
Их, возможно, написать несложно, но отлаживать и поддерживать - очень сложно,
-
В них не будет многого того, что есть в самых распространенных, следовательно вы будете решать другие проблемы, которых нет в распространенных фреймворках (и не факт, что вы их решите лучше),
-
Наконец, если вы не Google и не Facebook конечно, вы вряд ли найдете много последователей, времени на разработку и поддержку.
Если есть ощущение, что конкретная проблема конкретного фреймворка - это шоу-стоппер в вашем проекте и "всё надо переписать" - не спешите. Помимо того что Javascript очень могуч (как минимум благодаря тому что функции - это объекты первого класса, то есть их можно присваивать переменным и затем подменять в переменных), всегда можно немного отойти от конкретного фреймворка и сделать локальный workaround (нет, не костыль:)), или еще лучше - плагин. Также не возбраняется дорабатывать фреймворки, отправляя pull-requests в проект на github. Это приветствуется сообществом и всегда развивает проект.
P.S. Минутка личного мнения.
Несмотря на большую популярность React, я считаю что он проигрывает Angular принципиально. Возможно я человек старой школы, но смесь HTML и JS в одном файле, как это сделано в JSX - некоторый шаг назад. Несмотря на то, что это хорошо решает задачи Facebook, многие веб-приложения не являются клонами Facebook. Typescript, используемый в Angular, современный, очень продуманный и качественно спроектированный язык, который позволяет программистам избегать многих ошибок и структурировать код так, что дальнейшие модификации не вызывают проблем.