На данном сайте используются cookie-файлы и аналогичные технологии. Если, прочитав это сообщение, вы остаетесь на сайте, это означает, что вы не возражаете против использования этих технологий.
Подробнее Хорошо
vk pixel
Мир клиентских Javascript-приложений

Блог

02. 08. 2017г.
0

Клиентские фреймворки

В настоящее время, фронтенд постепенно превращается из статичного в динамичный: в то время как раньше сервер отдавал уже готовую страницу, а браузер просто отображал стилизованный 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, современный, очень продуманный и качественно спроектированный язык, который позволяет программистам избегать многих ошибок и структурировать код так, что дальнейшие модификации не вызывают проблем.
Назад
В корзине 0 товаров на 0 р.