Nerv — высокопроизводительный интерфейсный фреймворк Jingdong

Nerv — это интерфейсная структура, похожая на React, созданная Jingdong Bump Labs. Он широко использовался вЦзиндун Молл(JD.COM) основной бизнес иTOPLIFEПолный сайт. Nerv основан на стандарте React, использует технологию Virtual Dom и имеет тот же API и жизненный цикл, что и React.Если вы уже хорошо знакомы с React, то разработка с помощью Nerv не требует для вас никаких затрат на обучение.

В то же время, по сравнению с React и другими однотипными фреймворками на рынке, Nerv более легкий и производительный. Кроме того, он соответствует текущим национальным условиям и может быть полностью совместим с браузерами IE8 и выше.

Официальный сайт:nerv.aotu.io/
Документация:nervjs.github.io/docs/
Гитхаб:github.com/NervJS/nerv

характеристика

Меньший размер:
После Gzip это всего 9k, что составляет менее трети объема React.Малопроизводительные устройства также могут загружать и парсить и выполняться на высокой скорости.
Более высокая производительность:
Эффективные синхронные алгоритмы сравнения и множество стратегий оптимизации делают Nerv одной из самых эффективных интерфейсных сред.
Полная экология:
Нет необходимости в nerv-compat, достаточно небольшой настройки, чтобы насладиться общими плодами всей экосистемы React.
Более последовательный рендеринг:
Nerv эффективно работает не только в браузере, но и на сервере.
Лучшая совместимость:
В отличие от большинства современных фреймворков, Nerv по-прежнему будет совместим с IE8.
Более убедительный случай:
Будь то высокий трафик на домашней странице JD.com или сложный бизнес Toplife, Nerv выдержал испытание реальным бизнесом.

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

При разработке Nerv мы сделали апгрейд алгоритма виртуального Дом, заменив параллельный процесс сравнения виртуальных Домов на синхронный, внося исправления во время сравнения, что значительно повысило скорость обновления виртуального Дома. В то же время мы также исследовали и обновили алгоритм сравнения, а также изменили наш код в соответствии с самым быстрым алгоритмом виртуального дома на рынке.

После рефакторинга и обновления производительность нашего фреймворка значительно улучшилась, как видно ниже.

Дополнительные данные о производительности см.Официальный сайт.

Предыстория проекта

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

В повседневной разработке, по сравнению с Vue, мы предпочитаем выбирать режим React в качестве нашего стандарта разработки, потому что React по своей сути является компонентным и функциональным программированием, которое является более гибким и простым в обслуживании.
Однако в React все еще есть несколько вещей, которые не соответствуют нашим потребностям:

Совместимость с браузером IE8: Учитывая ограничения текущей среды, даже неохотно, мы по-прежнему поддерживаем IE8.
Размер: React весит около 130 КБ. Нас не устраивает скорость загрузки и скорость парсинга на низкой скорости интернета/браузера с низкой версией/устройстве с низкой конфигурацией.
Производительность: алгоритм React Virtual Dom (собственное имя React — Reconciler) не сильно оптимизирован.

И наше новое колесо, Nerv, полностью обеспечивает все преимущества React, упомянутые выше, а также полностью отвечает нашим собственным потребностям: лучшая совместимость, меньший размер, более высокая производительность.

Установить

Рекомендуется использовать npm для разработки и наслаждаться удобством экосистемы Node и цепочки инструментов Webpack.

npm install nervjs --save

Простой пример

Ниже приведен пример таймера.

import Nerv from 'nervjs'
class Counter extends Nerv.Component {
  setTime = () => {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDay()
    const hour = date.getHours()
    const minute = date.getMinutes()
    const sec = date.getSeconds()
    this.setState({
      year,
      month,
      day,
      hour,
      minute,
      sec
    })
  }
  componentWillMount () {
    this.setTime()
  }
  componentWillUnmount () {
    clearInterval(this.interval)
  }
  componentDidMount () {
    this.interval = setInterval(this.setTime, 1000)
  }
  componentWillReceiveProps () {
    this.setTime()
  }
  render () {
    const { year, month, day, hour, minute, sec } = this.state
    return (
      <div className='counter'>
        <span>The time is</span>{year}-{month}-{day} {hour}:{minute}:{sec}
      </div>
    )
  }
}
export default Counter

Для более подробных примеров, пожалуйста, прочитайте документациюNervJsК пониманию.

напиши в конце

Придерживаясь открытого духа Всемирной паутины и кредо мира открытого исходного кода, мы принимаем различные оценки и обсуждения, и конечной целью является внести свой вклад в мир открытого исходного кода, спасибо!
Добро пожаловать в использованиеNerv, если у вас возникнут проблемы во время использования или у вас есть хорошие предложения, сообщите нам об этом.IssueилиPull Request.

Конечная пасхалка >>Видео поможет вам понять Nerv