История

Почти два года назад, 10 марта 2015 года, я выпустил первую версию крошечной библиотеки представлений FRZR. С тех пор API сильно изменился, и даже название изменилось на RE: DOM. Это был долгий путь, я многому научился, и это здорово, наконец, дойти до версии 1.0! RE: DOM определенно более чем готов к производству со 100% тестовым покрытием.

Представление

RE: DOM - одна из самых быстрых библиотек представлений. Вот результаты теста производительности, переупорядочивающего 10 000 HTML-элементов:

  1. ~ 30 мс Vanilla JS
  2. ~ 30 мс RE: DOM v1.0
  3. ~ 30 мс FRZR v0.22.7
  4. ~ 80 мс React v15.3.2
  5. ~ 500 мс React v0.14.7
  6. ~ 10 000 мс Riot.js v2.6.2

Riot.js скоро выпустит v3, я надеюсь, что это исправит проблемы с производительностью ..

Размер файла

RE: DOM составляет 3,5 КБ до и 2 КБ после gzip.

Серверный рендеринг

С выпуском RE: DOM 1.0 я также выпустил NO: DOM - дополнительную библиотеку для рендеринга приложений / компонентов RE: DOM на стороне сервера. Он также крошечный, простой в использовании и очень быстрый.

Использование JavaScript

В RE: DOM не так уж много абстракций. Вы создаете компоненты, написав ванильный JavaScript. Различия производятся против DOM (хотя и с потрясающей производительностью). Вы можете ссылаться на реальные элементы DOM и при этом пользоваться преимуществами «чистых функций», поскольку обновление компонента всегда должно выполняться только через одну функцию обновления по замыслу. Когда с vdom вы всегда все переопределяете, с RE: DOM вы можете определить состояние инициализации для компонента и отдельно то, как вы его обновляете.

Вот базовый привет, мир с одним элементом HTML:

import { el, mount } from redom

const hello = el('h1', 'Hello world!')

mount(document.body, hello)

Вот версия компонента:

import { el, text, mount } from redom
class Hello {
  constructor () {
    this.el = el('h1',
      'Hello ',
      this.target = text('world'),
      '!'
    )
  }
  update (target) {
    this.target.textContent = target
  }
}
const hello = new Hello()

mount(document.body, hello)
setTimeout(() => hello.update('you'), 1000)

Будущее

Я считаю, что у RE: DOM светлое будущее, поскольку нет ничего лучше, чем писать JavaScript как можно ближе к металлу. Недавно я писал об освоении DOM и говорил об усталости от JavaScript, которую, как мне кажется, можно решить только с помощью более минималистичного подхода. В конечном итоге вы получите наибольшую выгоду, изучив сам язык, а не какие-то сторонние абстракции.

Если у вас есть какие-либо вопросы о RE: DOM, просто поднимите вопрос на Github, отправьте мне твит или отправьте мне письмо по электронной почте.

Надеюсь, вам понравится RE: DOM!