-
Notifications
You must be signed in to change notification settings - Fork 9
React, Vue.js и elu.js
Текст этой статьи написан по итогам 10-дневного ознакомления автора библиотеки elu.js с React и Vue.js на примере Ant Design Pro и Ant Design Pro of Vue соответственно.
Автор никоим образом не претендует ни на широту охвата, ни на экспертизу в области современных информационных технологий.
Однако настоящий обзор может пригодиться некоторым разработчкам Web-интерфейсов -- хотя бы в качестве стартового набора ссылок.
В основном здесь рассматриваются базовые javaScript-библиотеки для разработки Web-интерфейсов, где
- вообще существенная часть логики реализуется на клиенте;
- в частности, отдельные области экрана общаются с сервером и обновляются асинхронно и независимо друг от друга.
Итак:
- Angular - платформа, с 2016 года продвигаемая Google, взамен ранее раскручивавшейся AngularJS, ныне отправленной на заслуженный support. Данное ПО упомянуто здесь лишь вскользь. Общедоступные проекты Google, базирующихся на Angular, автору не известны.
- React - платформа, развиваемая с 2013 года и используемая Facebook для своего основного продукта и довольно широко известная за пределами корпорации.
- Vue.js - "движок", разрабатываемый с того же, 2013-го, года, ушедшим на вольные хлеба бывшим сотрудником Google Эваном Ю (Ю Юси), получившим на старте богатый (отрицательный) опыт использования AngularJS. По состоянию на конец 2020 года, был достаточно размаркетирован для того, чтобы молодые люди, прошедшие краткие курсы компьютерной грамотности, на интервью прямо с порога требовали как следует серьёзных денег, уточняя: "Я только Vue!".
- elu.js - библиотечка на ту же тему, придуманная автором этих строк в 2017 году и используемая, по всей видимости, только в ближайшем кругу его коллег.
- Ant Design, или antd -- Web-дизайн собственной информационной системы Ant Group: оператора мощнейшей в КНР китайской независимой платёжной сети Ali Pay (у которой, правда, в последнее время большие проблемы), реализованный в виде набора низкоуровневых React-компомент: кнопки, поля ввода и т. п.
- Ant Design Pro -- набор высокоуровневых компонент в дополнение к antd: "верхняя обвязка" с собственной системой страниц-вкладок и т. п. Как и базовый antd, представляет собой набор компонент React, однако их реализация существенно использует Angular.
- Ant Design of Vue -- аналог antd с заменой React на Vue. Вообще оригинальный antd использует React не как API, а как платформу для реализации, поэтом в данном случае речь идёт не о привязке одной библиотеки к двум платформам, а о практически полном переписывании.
- Ant Design Pro of Vue -- соответственно, Ant Design Pro, переписанный с React (+ Angular) на Vue.js. По заявлению на демо-сайте, лидирует в области Web-дизайна во всём округе округе Си Ху. Документирован в основном на китайском языке.
И в React, и во Vue.js, и в elu.js основное понятие: "компонента", то есть в основном кусок кода, знающий своё место на экране браузера (как правило, прямоугольник) и умеющий его обновлять в соответствии с заданным (серверным) источником данных в ответ на события ввода.
Первые версии React относятся к 2013 году: тогда Facebook как раз исполнился 1 млрд пользователей и прямо по курсу было падение чистой прибыли год-к-году на 95%. Offtopic: JDK 1.8 вышел только в следующем году. В общем, вполне естественно, что за основу была взята идеология ООП во всей её красе.
Не помешало даже то, что ES6, то есть javaScript с ключевым словом class, вышел только в 2015-м.
Итак, изначально компоненты React -- это классы, восходящие к общему предку React.Component.
Вдоволь усладившись всей мощью объектно-ориентированного подхода, разработчики React всего за 5 лет пришли к тому же, на что java-гуру потребовалось впятеро больше времени: к функционально-ориентированному программированию (по иронии судьбы, заложенном в javaScript изначально). React-компоненты в новых проектах, хотя по сути остаются экземплярами таких же классов, в коде выглядят как результаты вызова функций.
И ведь как в старом javaScript ещё с лихих 90-х: слегка типизированный "объект" -- был результатом в общем-то почти обычного (слегка помеченного ключевым словом new) вызова ничем не примечательной функции. Которая в контексте вызова с new обретала роль "конструктора" и заодно "класса". Правда, при этом в методах объекта на выходе он сам, инкапсулированный кусочек данных, был доступен как this.
Однако в функциональных компонентах React ситуация несколько иная: вернувшись от ООП к ФОП, там утеряли this. Копенсирующий это специальный API ("Hooks") выглядит на первый взгляд не вполне очевидно. Но ко всему можно привыкнуть. Наверное.
По состоянию на сегодня, 10.01.2021, рабочая версия Vue.js -- 2.х. В ней компоненты являются "объектами" в традиционном для js смысле: результатами new Vue ({...}), то есть вызова общего конструктора с широчайшим набором разнообразных опций.
Во Vue.js 3.х введено новшество: Composition API -- формально во многом повторяющее React Hooks. Однако здесь, по всей видимости, речь не идёт о столь же масштабной смене парадигмы. Просто добавляется очередная возможность писать более компакный код (коих во Vue уже изрядное число).
В elu.js компонента, или блок -- это побочный результат вызова функции show_block (устаревший вариант: use.block), который нигде впоследствии не существует и не может использоваться как переменная. Тип компоненты -- это лишь строка, фигурирующая в именах нескольких файлов и функций, связанных чисто тематически.
Это можно считать дефектом архитектуры. Однако, во всяком случае, это результат осознанного выбора: поскольку основной смысл elu.js -- организация разработки с максимальным разделением кода, обрабатывающего содержимое и его представление.
Исходные тексты компонент React (в основном) пишутся не на чистом js, а с расширением JSX. На первый взгляд это смотрится как javaScript вперемежку с HTML. На второй -- становится заметно, что это, по крайней мере, XHTML. На третий -- XML с некоторыми знакомыми тегами. И, наконец, переменные в фигурных скобках наводят на мысль о том, что мы имеем дело с клиентским аналогом JSF.
На самом деле каждый *ML-подобный тег прекомпилируется в js-код создания соответствующей компоненты, где значения атрибутов и дочерних объектов передаются в качестве параметров конструктору.
Vue.js реализует свой язык разметки, который довольно близок к стандартному HTML5 с добавлением некоторых атрибутов: для привязки данных, ветвления, циклов и т. п.
Как и в React, здесь можно использовать собственные теги в качестве конструкторов компонент, но несколько иначе: сначала компонента регистрируется во Vue с некоторым именем -- и далее его можно использовать в шаблоне. Для сравнения: в React в качестве имён тегов используются просто имена js-переменных, видимые в текущем блоке.
Шаблоны во Vue, как и в React, компилируются, но в результате получаются отдельные объекты. Текст шаблонов и js-код компонент не смешиваются в единое целое.
Механизм генерации фрагментов Web-страниц в elu.js (функция to_fill), отчасти напоминает Vue.js (сравнить, например, атрибуты data-on и v-show), но гораздо менее функционален: здесь
- нельзя доопределять теги (тем более для инициализации компонент);
- выражения не поддерживаются в принципе: интерполируются только заранее вычисленные значения именованных переменных.
data-on предусмотрен его двойник data-off, а также ряд атрибутов форматирования (data-digits для чисел, data-dt для времени), аналоги которых в проектах на React и Vue, вероятно, реализуются компонентами.
Шаблоны в elu.js (пока) не компилируются и быстродействие функции to_fill, мягко говоря, не на высоте. Впрочем, ощущается это только при отрисовке SELECT с тысячами OPTION.
В этом разделе, освещающем важную подтему предыдущего, пожалуй, стоит несколько поменять порядок рассмотрения.
Важнейшее свойство Vue.js -- превращать любой кусок данных, переданный для подстановки данных в шаблон, в объект наблюдения. И далее при изменении каждого его свойства перерисовывать на экране всё, что от этого свойства зависит.
То есть, если, скажем, объект data, соответствующий учётной записи пользователя, содержит поле label (ФИО), привязанное в шаблон дважды: в заголовок страницы и в поле ввода, то как только оператор отредактирует строку в поле, она тут же изменится и в заголовке. Без программирования: то есть и прослушиватель событий ввода и процедура обновления DOM-дерева реализованы в движке.
Разумеется, это работает и по отдельности:
- программное изменение
data.labelперерисовывает DOM; - редактирование поля ввода меняет
data.label, доступное программному коду.
data.label Vue подставляет getter / setter: в частности, поэтому магия работает только для полей, указанных изначально. Кроме того, разработчик компоненты может определять (отдельно от методов) вычислимые свойства, доступные в шаблонах только для чтения. То есть как getter без setter'а в javaBeans.
Во Vue.js привязка данных в шаблонах обозначается несколькими разными атрибутами (v-text, v-html, v-bind, v-model), элементом slot и вдобавок ещё тегами mustache для текстовых зон.
По контрасту с последней фразой: в React всего один, универсальный (и, соответственно, очевидный) способ вставки данных в шаблоны: фигурные скобки. В них можно писать любые js-выражения. В том числе содержащие JSX: так что шаблоны могут быть вложенными, как интерполируемые задние кавычки в ES6.
Но, понятное дело, при таком подходе данные могут передаваться только в одну сторону: если написать <input value="{f + i + o}">, то фарш невозможно провернуть назад.