GitHub — Tencent / omi на webdesignernews.com

Статьи по дизайну

English |简体 中文

omi "width =" 300 "style =" max-width: 100%; "/> </p> <h2 align= Omi: веб-инфраструктура следующего поколения в JavaScript 4kb

Объединить JSX, веб-компоненты, прокси, магазин, обновление пути вместе

Почему Оми?

  • Крошечный размер. ( 4kb gzipped)
  • Поддерживает TypeScript.
  • Реактивная привязка данных
  • На основе Shadow DOM
  • Легко отлаживается через расширение Omi DevTools [Install from Chrome WebStore]
  • Соблюдение тенденции браузера и дизайна API.
  • Объединить JSX и веб-компоненты в одну структуру.
  • Веб-компоненты также могут быть ориентированы на данные, UI = fn (данные) .
  • JSX — лучший опыт разработки (интеллектуальное завершение кода и подсказка). Выражение пользовательского интерфейса с наименьшим грамматическим шумом.
  • Оригинальная система Path Updating . Автоматическое автоматическое обновление потребление низкой мощности высокая степень свободы, отличная производительность, легкая интеграция requestIdleCallback
  • Попробуйте this.update метод при использовании системы хранения ! Он будет автоматически обновлять пользовательский интерфейс при изменении данных.
  • Посмотрите на Facebook React vs Web Components, Omi сочетает в себе свои преимущества и дает разработчикам свободу выбора 19459017 .
  • Shadow DOM объединяется с Virtual DOM Omi использует как виртуальную DOM, так и реальную DOM DOW, чтобы сделать просмотр обновлений более точным и быстрым.
  • В системе Store 99,9% проектов не требуют путешествий во времени, и не только Redux может путешествовать, пожалуйста, не придумывайте Redux, система магазинов Omi может удовлетворить все проекты
  • Лучшее решение с CSS — это Shadow DOM сообщество, разбивающее фреймворки и библиотеки для Scoped CSS (с использованием стилей записи JS или JSON, таких как Radium, jsxstyle, стиль, привязка к webpack с использованием сгенерированного уникального className filename-classname-hash такого как CSS-модули, Vue), являются хакерскими технологиями; и Shadow DOM Style — идеальное решение .

Сравнить TodoApp от Omi и React, Omi и React, рендеринг структуры DOM:

Оми React
Добавить Оми в одну минуту

Эта страница демонстрирует использование Omi без инструмента для сборки . 

 
< HTML >

< глава >
   meta   charset  =   " UTF-8 "   />
  < название > Добавить Оми в одну минуту </  название >
</  глава >

< тело >
     src  =   " https://unpkg.com/omi "  > </  ] сценарий >
  < сценарий > 
  const  { WeElement  h  render  определяют }  =  Оми 

  класс   LikeButton   распространяется   WeElement  {
  установить  () {
      =  {понравилось :   false } 
} 

   () {
 если  ( это .  данные .  понравилось ) {
  return    ' Вам понравилось. '   
} 

  возвращение   h  (
      
 {
  onClick  :  ()  =>  {
  это .  данные .  понравилось   =   true  
  это .  обновление  () 
} 
}, 
   '    
) 
} 
} 

  определяют  (  » аналогичная кнопка  ' LikeButton) 

    h  (  » аналогичная кнопка   ),   ' тела   ) 
  </  сценарий >
</  тела >

</  HTML >

Вы также можете использовать тег как кнопка непосредственно в HTML: 

 < тело >
  < как-кнопки  > </  как-кнопки  >
</  тела >

Начало работы

Установите 

 $ npm i omi-cli-g   #  установить cli 
$ omi init your_project_name   #  init project, вы также можете выполнить команду 'omi init' в пустой папке 
$  cd  your_project_name   # пожалуйста, проигнорируйте эту команду, если вы выполнили 'omi init' в пустой папке 
$ npm start   #  разработать 
$ npm run build   #  выпуск

Описание в каталоге: 

  ├─ config
├─ общественность
├─ скрипты
├─ src
│ ├─ активы
│ ├─ elements // Хранить все пользовательские элементы
│ ├─ store // Хранить все это хранилище страниц
│ ├─ admin.js // Запись js компилятора, будет создана для admin.html
│ └─ index.js // Запись js компилятора, будет создана для index.html

Автосозданные строительные леса CLI основаны на одностраничном приложении create-response-app, которое будет преобразовано в многостраничное, с проблемами конфигурации, чтобы увидеть руководство пользователя для создания-реагирования-приложения

Hello Element

Определите пользовательский элемент, расширив WeElement базовый класс и назовите его с помощью @tag decorator: 

  import  { tag  WeElement  render }  из     оми   

@  Тег  (   Привет-элемент   )
 класс   HelloElement   extends   WeElement  {

     onClick   =  ( evt )  =>  {
          //  триггер CustomEvent 
               abc  ' {name :     dntzhang  ' возраст :   12 })
         ЭВТ .  stopPropagation  ()
    }

     css  () {
       возвращение    ` 
 div {
 цвет: красный; 
 курсор: указатель; 
}  ` 
    }

     render  ( реквизит ) {
       возвращение  (
         < div onClick  =  { это .  onClick } > 
          Привет [ реквизит .  msg } { реквизит .  propFromParent }
           < div >       <  /  div > 
         <  /  DIV > 
      )
    }
}

Использование hello-element : 

  import  { tag  WeElement  render }  из     оми   
 импорт    ' ./ hello-element '  

@  Тег  (   мое-приложение   )
 класс   MyApp   распространяется   WeElement  {
   static   get   данные  () {
        {abc :      ' passToChild :      ' }
  }

    //  bind CustomEvent 
   onAbc   =  ( evt )  =>  {
        //  получить данные evt по evt.detail 
           abc   =       $ {  ЭВТ .  подробно .  имя  }    ` 
       это .  Обновление  ()
  }

   css  () {
     возвращение    ` 
 div {
 цвет: зеленый; 
}  ` 
  }

     реквизит  данные ) {
     возвращение  (
       < DIV > 
        Привет [ реквизит .  имя } { данные .  abc }
           -  элемент onAbc  =  {   onAbc } prop  -  из  -  parent  =  { данные .  passToChild } msg  =    " WeElement  "  > <  /  Привет  -  элемент > 
       <  /  DIV > 
    )
  }
}

   < мое  -  название приложения  =    ' Omi v4.0 '   >   /  мой  -  приложение >   ' тело   )

Скажите Бабелю, чтобы превратить JSX в Omi.h () звонок: 

 {
     presets  " : [ "  env  "   " оми "  ]
}

Для поддержки вышеуказанной конфигурации необходимо установить следующие два пакета NPM: 

   " babel-preset-env "  :   " ^ 1.6.0 "  ,
  " babel-preset-omi "  :   " ^ 0,1.1 "   ,

Если вы не хотите писать CSS в JS, вы можете использовать to-string-loader,
Например, следующая конфигурация: 

 {
  :    /   [   |   / ]  _  [ ]  S ]   *   .  CSS  $   /  ,
  использование :  [
       в строке-загрузчик   ,
       CSS-погрузчик   
  ]
}

Если ваш файл CSS начинается с « _ », CSS будет использовать для-string-loader ., Например: 

  import  { tag  WeElement   render }  из    ' оми   

  //  typeof cssStr является строкой 
 импорт   cssStr   из    ' ./_ index.css '  

@  Тег  (   мое-приложение   )
 класс   MyApp   распространяется   WeElement  {

   css  () {
     возвращение  cssStr
  }
   ... 
   ... 
   ...

TodoApp

Вот относительно полный пример TodoApp: 

  import  { tag  WeElement  render }  из     оми   

@  Тег  (   TODO-лист   )
 класс   TodoList   extends   WeElement  {
     render  ( реквизит ) {
         возвращение  (
             < уль > 
                {19459049] реквизит .  предметы .  карта  ( пункт   => 
                     < li key  =  { Пункт .  id } >  { Пункт .  текст }  <  /  Li > 
                ))}
             <  /  уль > 
        );
    }
}

@  Тег  (   TODO-приложение   )
 класс   TodoApp   extends   WeElement  {
   static   get   данные  () {
      {пункты :  []текст :      ' }
  }

   render  () {
     возвращение  (
       < DIV > 
         < Н3 >   TODO   <  /  Н3 > 
         < todo  -  перечислил элементы  =  { .  данные .  пункты }  /  > 
         < форма onSubmit  =  { этот .  рукояткаSubmit } > 
           < вход
            ID  =    " новый список задачи "  
            OnChange  =  { это .  handleChange }
            значение  =  { это .  Данные .  текст }
           /  > 
           < Кнопка > 
                  .  длина   +   1 }
           <  /  Кнопка > 
         <  /  форма > 
       <  /  DIV > 
    );
  }

   handleChange   =  ( e )  =>  {
         текст   =   e .  Цель .  значение 
  }

   handleSubmit   =  ( e )  =>  {
     е   preventDefault  ().
    если     это .  данные .  текст .  обрезка  ().  длина ) {
       возвращение ;
    }

     это .  Данные .  элементов .  толчок  ({
      текст :   это .  данные .  текст ,
      id :   Дата .  сейчас  ()
    })
       данные .  текст   =        ;
     это .  Обновление  ()
  }
}

   < todo  -  приложение  /  >   ' тело   )

Магазин

Попробуйте this.update метод при использовании системы магазинов! При изменении данных он будет автоматически обновлять пользовательский интерфейс. Мощная архитектура Store отличается высокой производительностью, поскольку все данные монтируются в хранилище, за исключением компонентов, которые полагаются на опоры для определения состояния компонента. 

  экспорт   по умолчанию  {
  данные :  {
    пункты :  [],
    текст :    ' '  ,
    firstName :    ' dnt '  ,
    lastName :    ' zhang '  ,
     fullName  :   функция  () {
       возвращение   это .  firstName   +   это .  lastName 
    },
    :     abc  '   //  Изменить, он обновит все элементы без изменения компонентов и страницы, объявляющих зависимость данных. 
    ccc : : :   1 }   //  Изменить это будет обновлять все элементы без изменения компонентов и объявления страниц. зависимость. 
  },
       globalPropTest  '  '  ccc.ddd  ' ],
   добавить  :   function  () {
    если     это .  данные .  текст .  обрезка  ().  длина ) {
       возвращение ;
    }
     это .  Данные .  элементов .  толчок  ({
      текст :   это .  данные .  текст ,
      id :   Дата .  сейчас  ()
    })
       данные .  текст   =       
  }
    //  Значение по умолчанию - false, значение true будет обновлять все экземпляры при изменении данных. 
    //  updateAll: true 
}

Пользовательский элемент требует объявления зависимых данных, так что Omi сохраняет вычислительный путь зависимости на основе данных, объявленных на пользовательском компоненте, и обновляет их локально по мере необходимости. Например: 

  класс   TodoApp   распространяется   WeElement  {
    //  Если вы используете хранилище, данные используются только для объявления зависимостей. 
   static   get   данные  () {
      {пункты :  []текст :      ' }
  }
    //  ... 
   handleChange   =  ( e )  =>  {
           текст   =   e .  цель .  значение 
  }

   handleSubmit   =  ( e )  =>  {
     е .  preventDefault  ()
     это .  магазин .  добавить  ()
  }
}

  • Логика данных инкапсулирована в методе определения хранилища (например, store.add ).
  • Взгляды — это только ответственные за передачу данных для хранения таких как вызов store.add или установка store.data.text сверху.

Вам нужно ввести магазин из корневого узла во время рендеринга, чтобы использовать этот магазин: 

    < todo  -  приложение  /  >    тело  ' магазин)

→ Сохранить исходный код

Резюме:

  • store.data используется для отображения всех атрибутов и значений по умолчанию (кроме компонентов представления, определенных реквизитами).
  • Данные компонента и страницы используются для перечисления атрибутов зависимого store.data (Omi будет записывать путь) и обновления по запросу.
  • Если на странице несколько простых компонентов, updateAll может быть установлено в true а компонентам и страницам не нужно декларировать данные, и они не обновляются по запросу
  • Путь, объявленный в globalData обновляет все страницы и компоненты, изменяя значение соответствующего пути, который может использоваться для отображения всех страниц или большинства путей общедоступных свойств

Жизненный цикл

Метод жизненного цикла Когда его назовут
установите перед тем, как компонент подключится к DOM
установлен после того, как компонент подключается к DOM
удалить до снятия с DOM
BeforeUpdate до render ()
AfterUpdate после render ()

Компонентная экосистема

Я считаю, что вы можете легко преобразовать элементы веб-компонентов в элементы omi.

Отладка

Используя Omi DevTools, вы можете просто отлаживать и управлять своим пользовательским интерфейсом без какой-либо конфигурации . Просто установите и отлаживайте.

Поскольку Omi использует веб-компоненты и Shadow-DOM, ему не нужно иметь другую панель элементов, такую ​​как React или Vue. Он просто добавляет панель к боковой панели элементов и она настолько же эффективна, как и React и Vue DevTools.

Поддержка браузеров

Omi 4.0+ работает в последних двух версиях всех основных браузеров: Safari 10+, IE 11+ и вечнозеленых Chrome, Firefox и Edge.

Ссылки

Вклад

  1. Вилка (https://github.com/Tencent/omi/fork)
  2. Создайте свою ветку ( git checkout -b мое-срочное исправление )
  3. Зафиксируйте свои изменения ( git commit -am «Исправлено что-то» )
  4. Нажмите на ветку ( git push origin my-emergency-hotfix )
  5. Создайте новый запрос Pull

Пожалуйста, свяжитесь с нами по любым вопросам:

Лицензия

MIT © Tencent

Go to Top