Моя компания использует 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.

Я знаю, мы уже видели это раньше с позвоночником и прочим. Но синтаксис здесь намного проще, и есть дополнительный бонус в виде сосредоточения на компонентах и методах жизненного цикла. И это создает общий синтаксис для приложения для определения компонентов и их поведения.

Вот пример того, как это работает:

  1. Добавьте несколько 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 и на демонстрационный сайт.

Мир и любовь,

Тамб