В статье сравниваются два подхода к созданию веб интерфейса пользователя.  Один подход - это современные фреймворки с компонентным подходом, который инкапсулирует HTML, js, css. Второй подход к разработке веб-интерфейса аналогичен разработке интерфейса пользователя десктопного приложения. Сначала нам было достаточно статических страниц, написанных с помощью языка разметки html. После, к статичным страницам html добавили javascript. Потом, объединили html и javascript и появились frontend framework. Вот, на примере одного из популярных фреймворков Vue.js. Удобство современных фреймворков - это реактивность, т.е. связанность данных, когда данные на странице  связаны с данными компонента Несмотря на развитие технологий, все равно, на первом месте идет язык разметки - html, а javascript так и остался на подхвате, ведь так изначально применен подход в веб сайтам. Такой подход несомненно очень гибкий, и позволяет создавать немыслимые веб интерфейсы как по красоте, так и по функциональности, но для этого frontend framework предлагает свой, так называемый, декларативный язык. Представляете, вы пишите программу на html, пусть доработанном, но, все же, языке разметки.   А что, если использовать другой подход? А что если на первое место поставить javascript? Конечно, мы потеряем все то многообразие вариантов красочного и анимированного оформления веб-форм, но приобретем лаконичность и привычную атмосферу разработки десктопного приложения. Этот подход позволит создавать веб приложения на основе готовых библиотек элементов управления. А почему бы и нет, ведь десктопные приложения обходятся же ограниченным набором компонент (это не означает небольшим). И созданные приложения будут не менее красивыми и функциональными, ведь можно использовать множество тем оформления.   Попытаемся сравнить два подхода.   Первый подход будет представлять один из популярнейших фреймворков vue.js.   Второй подход будет представлять один новый фреймворк ui-organizer.ru. Собственно, это прототип библиотеки, но вполне рабочий прототип.  Авторы хотели узнать, насколько второй подход может быть интересным и полезным. И востребована ли необходимость развивать его. Все дальнейшие примеры двух библиотек предназначены для демонстрации основных подходов, а не для сравнения какой фреймворк лучше. В Vue.js компоненты необходимо разрабатывать самому, либо использовать сторонние библиотеки. Для тех, кто знает html и javascript, очень просто создать нужный компонент.   index.html index.js Как видно из примера, программный код написан на html в файле index.html и на javascript в файле index.js. Здесь опускаются вопросы компиляции и сборки приложения, так как в Vue.js процесс сборки отличается в зависимости используете ли вы typescript или javascript. В примере программный код в index.js написан на javascript, поэтому его не надо компилировать и, вообще, вы можете поместить его прямо на страницу index.html вместе с программным кодом, написанном на html. Да, программный код пишем прямо на html. Это будет заметно на более сложных примерах.   ui-organizer не предназначен для создания компонентов. ui-organizer - это библиотека готовых элементов управления, с помощью которых вы можете сделать нечто подобное.   main.ts   Как видите здесь html вообще не трогаем. И нам пришлось создать форму и добавить на нее элемент IDataElement. Html будет построен автоматически. Программа построит следующий html:   Обращаем внимание на то, что программный код написан на typescript. Это требует компиляции программы, чтобы получить чистый javascript. Реализовать второй подход, наверное, невозможно без использования typescript - это снижает риски ошибок, ведь нам важно не написать очень хитрый код, с использованием всех возможностей javascript, а создать надежное, простое в сопровождении приложение.   Сделаем список задач с кнопкой.   Сначала создаем html. Как вы можете заметить, здесь уже язык разметки превратился в полноценную программу с циклами, событиями и др.   В файле typescript добавляем данные и реализуем обработчики событий reverseMessage и setFlag. В этом примере мы уже используем typescript. Безусловно, данные тесно связаны с компонентом и с ними достаточно удобно работать. Еще плюс в том, что это очень гибкий инструмент и мы можем создать любой компонент (элемент управления на форме пользователя). По сути мы только что создали элемент управления, который можем использовать отдельно, а можем встроить в любой другой компонент.   Отличие второго подхода (ui-organizer) в том, что мы не создаем новый элемент управления, а используем существующие, чтобы решить задачу. В данном случае используем два элемента управления IList и IButton, причем элемент управления IList мы доработали добавив свойство isReversed и метод reverseText. У элемента IButton добавили реализацию метода onClick .   На самом деле IList и IButton это интерфейсы, а мы создаем объекты, реализующие эти интерфейсы.  В тексте упростили и написали просто: "элементы управления IList и IButton".   AppManager открывает форму 'simpleForm' и передает ей массив элементов в формате JSON. В Vue компоненты - это части приложения, которые можно использовать повторно. Вот например:   На Html странице укажите, где хотите вставить компонент:   Здесь мы указали, что для каждого item в groceryList выводим на экран элемент todo-item.   В приложении передаем в данные этот самый groceryList. Здесь повторное использование - это класс элемента, мы можем создать сколько угодно объектов этого класса. Перепишем предыдущий пример из раздела 4.2.   Здесь мы создали класс MyList и наследовали его от предопределенного класса UIList, который, в свою очередь, реализует интерфейс IList. При описании формы мы просто создали экземпляр MyList, где в конструктор передали название элемента 'list' и название свойства 'elem', из которого будут подставляться данные.   Как вы могли заметить, в библиотеке ui-organizer не выделено понятие "компонент", так как, в объекте уже инкапсулированы html, данные и поведение в виде методов. В экземпляре Vue доступны данные и некоторые предопределенные методы:   Здесь компоненту vm  мы передали объект user. И теперь имеем доступ к свойствам этого объекта через компонент vm.name. Это, так называемая система, реактивности, - наверно, ключевое преимущество современных фреймворков.   В примере также показано использование служебных свойств $data и $el и служебного метода $watch. Конечно, служебных свойств и методов гораздо больше.   Здесь основной подход следующий: элементу управления передаются данные, которые каким-то образом могут измениться. Чтобы получить измененные данные обратно, нужно запросить эти данные. Например, при открытии формы, ей передаются первоначальные данные. Пользователь может изменить эти данные. При нажатии кнопки submit, мы можем запросить измененные данные формы и отправить их на сервер.   В библиотеке ui-organizer для элемента управления можем установить bindingProperty. В нашем примере bindingProperty элемента управления dataElement установлено в firstName. Это значит, что значение свойства firstName в передаваемых данных будет установлено этому элементу (см. №№1-2). Верно, также обратное, когда мы меняем данные элемента функция collectData формы возвращает новые данные (см.№№3-4).   Здесь первоначальный объект остается неизменным. Для того, чтобы получить изменения в первоначальном объекте, необходимо функции getData передать этот первоначальный объект:   Служебное свойство dom возвращает HTMLElement, связанный с этим элементом управления. У каждого элемента управления на форме свой DOMHTMLElement. У каждого элемента управления доступны служебные методы, такие как addClass, getElement и другие. Для стилевого оформления можем добавлять классы css. Конечно описание этих css классов нужно настроить в соответствующем css файле, который подключен к html.   Описываем html:   В описании компонента задаем данные, от изменения которых будет зависеть добавление классов к HTML элементу. Например, так как isReadonly = true, то класс readonly будет добавлен, а так как hasError = false, то класс error добавлен не будет. Таким образом, имеем:  То же самое с inline стилями:   Здесь значение стилей pozition и font-size определяются соответственно переменными userPosition и fontSize, описанными в секции data.   Библиотека включает в поставку два файла: page.css, который определяет компоновку элементов управления и style.css, который определяет стилевое оформление. Вы можете заменить style.css. Кроме этого, можно для элемента IGroup указать файл .css, который будет применен для этой группы элементов. Кроме того каждый элемент имеет два метода addClass и removeClass, которые добавляют и удаляют классы HTML элемента. В vue js обработчики событий указываются прямо в html. И есть возможность подписываться на все события, возникающие в HTML элементе. В примере мы подписались на событие click html элемента button.   Вы также можете генерировать свое событие:   и подписываться на него   Подход в ui-organizer другой: вы не имеете доступа к событиям html элементов, но можете обрабатывать предопределенные для каждого элемента управления события и генерировать свои.   Например, ниже написан обработчик события onAfterLoad, в котором задаются обработчики событий show и hide элемента управления IElement:   Можете генерировать свои события и подписываться на них:   В последнем примере определены два интерфейса для облегчения написания программы на typescript. Для связи компонента vue js c элементом формы input имользуется директива v-model, которая указывается в html. Эта директива связывает данные компонента vue js с элементом ввода input. Здесь для пользователя одинаково, что работать c простым элеметом IDataElement, со списком IList или полем ввода IProperty. Все является элементом формы. Программист не работает напрямую с элементом input или textArea, а использует элементы управления. Которым передаются данные как было показано в разделе 6.2.   Форма с полем ввода и текстом (эхо, дублирующее поле ввода) будет выглядеть следующим образом:   Как и vue js, так и ui-organizer имеют возможность отладки в VSCode и в браузере.   Для отладки в VSCode нужно установить соответствующее расширение отладчика, например Debugger Chrome.   Для отладки в браузере необходимо настроить конфигурацию сборщика, например webpack.  Конечно же, выводы делать читателям. Авторы заинтересованная сторона и им больше по душе второй подход, т.к. они используют его в своих разработках. Во втором подходе нам нравится простота, однотипность элементов управления, что кнопка, что поле ввода, что список. Одни и те же атрибуты, одни и те же события, методы. А самое главное, - подсказки. Попробуйте создать элемент управления, и вы будете приятно удивлены, как редактор (в нашем случае VSCode) указывает на ошибки и подсказывает в трудной ситуации.