Моя компания использует Java, и это действительно здорово. Перестань над этим смеяться. Мы также используем Spring для нашего фреймворка MVC, это тоже действительно здорово. Мы также используем Thymeleaf для нашего движка шаблонов, это здорово… я думаю.
Лидеры наших проектов любят использовать Thymeleaf. Они не доверяют React, Vue, Angular 2+, потому что у них действительно плохой опыт работы с AngularJS, и они также ненавидят возвращать JSON вместо HTML. Я понимаю, откуда взялось начальство. Современная разработка SPA с множеством fetch
запросов может привести к очень ошибочному коду, бизнес-логика может ускользнуть в общедоступный JavaScript, это может быть настоящей болью. Более того, для реализации полного рендеринга на стороне сервера с помощью этих фреймворков требуется Nashorn, или запуск экземпляра Node, или какой-то другой неразумный рабочий процесс. Плюс к этому в моей компании у нас есть так много основного кода для конвертации валют, интернационализации, бизнес-логики, который обязательно должен оставаться на бэкэнде (даже логика шаблонов) .Так что это в значительной степени большой N.O. для рендеринга на стороне клиента.
Как старший фронтенд-разработчик, я как бы застрял. Хочу подчеркнуть, что люблю React. И я отчаянно хотел использовать его в наших продуктах. Но это просто не для нас. Мы создаем веб-приложения по старинке, и мне было поручено создать огромные приложения, которые частично перерисовали DOM, с многократно используемыми компонентами, без фреймворка или библиотеки.
В итоге я использовал некоторые методы для ускорения разработки и сделал все эти фрагменты HTML / Thymleaf «компонентными».
Я решил усовершенствовать эти практики и поместить их все в новый сверхлегкий фреймворк под названием DOMponent.
Domponent имеет небольшой размер (менее 2 КБ) и загружает полную страницу компонентов со скоростью почти 60 кадров в секунду. Он не предназначен для замены React. Он не предназначен для принудительного использования JSX или обработки какого-либо рендеринга / маршрутизации на стороне клиента. Это просто способ добавить действительно мощные функции (привязка данных, повторное использование кода, декларативный HTML, внутреннее состояние компонентов, наследование свойств) в простой старый HTML.
Я знаю, мы уже видели это раньше с позвоночником и прочим. Но синтаксис здесь намного проще, и есть дополнительный бонус в виде сосредоточения на компонентах и методах жизненного цикла. И это создает общий синтаксис для приложения для определения компонентов и их поведения.
Вот пример того, как это работает:
- Добавьте несколько
data
атрибутов в существующий HTML 💻
<div data-component=”Counter”> <p data-bind=”state:Counter.count”>0</p> <button data-action=”click->Counter.increment”> +1 </button> <button data-action=”click->Counter.decrement”> -1 </button> <div>
2. Напишите компонент JavaScript class
🔌
import { Component } from ‘domponent’; import './Component.scss'; export default class Counter extends Component{ constructor(el){ super(el); } increment(){ this.setState({count: (this.state.count + 1)}); } decrement(){ this.setState({count: (this.state.count — 1)}); } }
3. Инициализируйте приложение ⚡
import Init from ‘domponent’; import Counter from ‘./Counter.js’; const config = { selector: document.getElementById(‘root’), components: { Counter }, appCreated: callbackFunction }; new Init(config);
Вот и все. Теперь у вас есть доступ к методам жизненного цикла, односторонней привязке данных, ссылкам на DOM и т.п. Используйте это со своим механизмом создания шаблонов и фрагментами HTML, и у вас есть файл components.
Допустим, мы используем Pug и делаем Counter
компонент, вы можете вложить все Counter
ресурсы в /Counter
каталог:
|_/Counter |_Counter.pug |_Counter.scss |_Counter.js
Ваш Pug for component может выглядеть так:
// Counter.pug div(data-component="Counter" data-state='{"count": #{count}}').count p(data-bind="state:Counter.count") button(data-action="click->Counter.increment") + button(data-action="click->Counter.decrement") -
Затем вы можете включить свой счетчик:
include Counter/Counter.pug
Если вы включите свой Counter.scss
в свой Counter.js
и объедините его с Webpack, Parcel или Rollup, вы получите современный подход к серверным компонентам. Это классическая технология веб-приложений, дополненная Domponent.
Я очень надеюсь, что вы заглянули на ReadMe
и на демонстрационный сайт.
Мир и любовь,
Тамб