Забавное функциональное программирование с помощью Choo Framework

 isSameNode

Библиотека различий, которую использует Choo (morphdom), в isSameNode предлагает аварийный люк, который можно использовать для предотвращения повторного рендеринга. Кэш-элемент Choo содержит функции, которые переносят это поведение, чтобы упростить код, необходимый для кэширования и создания виджетов в Choo.

Посмотреть файл на GitHub: 7-friends.js

 const widget = require('cache-element/widget')
const dataViz = widget(update => {
  update(onUpdate)

  const el = html`<div></div>`
  return el

  function onUpdate(state) {
    const bars = d3.select(el)
      .selectAll('div.bar')
      .data(state.data)

    bars.style('height', (d)=> d + 'px')

    bars.enter()
      .append('div')
      .attr('class', 'bar')
      .style('height', (d)=> d + 'px')
  }
})
const dataVizView = (state, prev, send) => dataViz(state)

Запустите пример: npm run example-7

Теперь мы затронули все основные компоненты API-интерфейса Choo, я сказал вам, что он крошечный.

Также есть app.use для расширения работы Choo, позволяя вам перехватывать его поток в разных точках, таких как onActiononStateChange Эти хуки могут быть использованы для создания плагинов или промежуточного программного обеспечения.

Кроме того, рендеринг на стороне сервера может быть выполнен с помощью app.toString (route, state) .

Модульное тестирование

Одним из наиболее известных достоинств функционального программирования является тестируемость, так как же Choo складывается?

Компоненты

Choo Views — это чистые функции, которые принимают состояние в качестве входных данных и возвращают узел DOM, поэтому их легко тестировать. Вот как вы можете визуализировать узел и сделать на нем утверждения с помощью Mocha и Chai.

 const html = require('choo/html')
const myView = (state) => html`
  <div class="my-view">
    ${JSON.stringify(state)}
  </div>
`

describe('Component specs', () => {
  it('should return a DOM node', () => {
    const el = myView({hello: 'yep'})

    expect(el.innerHTML).to.contain('{"hello":"yep"}')
    expect(el.className).to.equal('my-view')
  })
})

Спецификации редуктора

Тестирование редукторов похоже, они являются функциями, которые принимают состояние и полезную нагрузку в качестве входных данных и возвращают новое состояние. Вы захотите извлечь каждую функцию редуктора из модели, чтобы вы могли проверить их независимо.

 const myReducer = (data, state) => {
  return { title: data }
}

describe('Reducer specs', () => {
  it('should reduce state', () => {
    const prev = { title: 'hello!' }
    const state = myReducer(prev, "? Choo!")

    expect(state.title).to.equal("? Choo!")
  })
})

Это всего лишь примеры, показывающие, как может выглядеть история модульного тестирования для приложений Choo. Каждая из концепций реализована с использованием чистых функций, поэтому ее можно легко протестировать отдельно.

Сильные стороны

Это просто и сплоченно. Предсказуемый поток между маршрутами, представлениями, действиями и редукторами позволяет легко учиться и получать удовольствие от работы. Крошечный API означает, что как только вы узнаете, как эти компоненты работают вместе, вы можете начать сборку, не просматривая подробные документы.

Требуется немного инструментов. Нет необходимости в JSX или сложных сборочных конвейерах, browserify — это все, что рекомендуется для объединения зависимостей в пакет. Это может быть так же просто, как browserify ./entry.js -o ./bundle.js

Это одноразово. Создание части вашего приложения в Choo — это не пожизненное заключение. Представления — это просто функции, которые возвращают узлы DOM, поэтому их можно использовать в любом месте, которое работает с DOM.

Минимальный размер 5 КБ означает, что вы можете без проблем включать другие версии Choo или других фреймворков. Это рамки на диете.

Слабые стороны

Это незрелый и будет иметь серьезные изменения. Посмотрите журнал изменений v4 для примера того, как API является движущейся целью. Несмотря на то, что прогресс — это отличная вещь, работа над миграциями между версиями — это потенциальный недостаток.

Возможно, вам придется вручную оптимизировать. Большие библиотеки, такие как React и Angular, которые ожидают владения всем приложением, могут выполнять такие вещи, как оптимизация событий с делегированием вверху дерева. yo-yo

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

Это новый ребенок на блоке. Популярность означает, что вы можете использовать сеть знаний и использовать готовые компоненты. В последнем примере показано, как включить в библиотеку другие библиотеки, которые управляют частями DOM, но на этом этапе все еще довольно сыро. Патч, который позволил это сделать, был всего несколько дней назад на момент написания этой статьи.

Вывод

Лично мне очень нравится Чу. Он объединяет множество замечательных идей с дружественным API. Сначала я вижу, как использую его в сторонних проектах, чтобы увидеть, как он работает в широком диапазоне сценариев. Я ожидаю достижения ограничений в какой-то момент, но это переломы, когда вы работаете на переднем крае.

Если это вызвало у вас интерес, вы можете прочитать README , ознакомиться с демонстрационными примерами или прочитать Руководство по незавершенному производству для получения дополнительных примеров от автора.

Как вы думаете? Попробуйте и дайте нам знать, как вы поживаете в комментариях ниже.