Заголовок презентацииИмя и фамилия автора докладаКомпания
Most JSframeworksday
или как приготовитьсовременные Web Components
RIOT
RIOT
11k GitHub
RIOT
3 years old
2384 commits
RIOT
<todo> <h3>TODO</h3>
<ul> <li each={ item, i in items }>{ item }</li> </ul>
<form onsubmit={ handleSubmit }> <input ref="input"> <button>Add #{ items.length + 1 }</button> </form>
this.items = []
handleSubmit( e ) { e.preventDefault() var input = this.refs.input this.items.push( input.value ) input.value = '' } </todo>
RIOTПочему ?
Что внутри и как сделано
RIOT
Простой
Стандартный
Современный
Простой
Легко читаемый
Лаконичный
Удобный синтаксис
Изучить за 1 день
RIOT
Стандартный
Ваши привычные инструменты,
шаблонизаторы,
Близок к стандартам
библиотеки и практики
Native JavaScript
RIOT
Современный
Маленький размер
Живое сообщество
Изоморфный
Web Components
RIOT
Web Components
Templates
Shadow DOM
Custom Elements
Imports
Observer
RIOT
Templates Tags
Virtual DOM
Router
Observer
— это
RIOTTag
ES6 синтаксис методов
Компилятор
Пре-процессоры
Рендеринг на сервере
RIOTTag
<example-tag>
<!-- layout --> <ul click={ greet }> <li each={ item, i in items }> { item } </li> </ul>
<!-- style --> <style> ul { list-style: square; } </style>
<!-- logic --> <script> this.items = [ 'one', 'two' ] this.on( 'mount', log ) </script>
</example-tag>
Custom Element
HTML import
Template, Shadow DOM
Observer, Tag Lifecycle
RIOT
sample p test { value }
script( type = 'text/coffee' ). @value = 'sample'
Pug (jade)
Coffee script
$ riot --template pug sample.tag CLI compiler
TagПре-процессоры
RIOTTemplates
Универсальные { expr }
для имен классов, атрибутов
и обработчиков событий
Экономичная работа с DOM
Шаблоны остаются шаблонами
RIOTTemplates
<example> <ul if={ is_logged }> <li each={ items } class={ completed: done }> <input type="checkbox" checked={ done }> { title } </li> </ul> </example>
show, hide
if
each
is_logged = true items = [ { title: 'First item', done: true }, { title: 'Second item' } ]
Универсальные { expr }
RIOT
Жизненный цикл тега
Observer
Интерфейс событий
События от пользователя
RIOTObserver
this.on( 'mount', function() { timer = setTimeout( ... ) }) this.on( 'unmount', function() { clearTimeout( timer ) })
update
updated
before-mount
mount
before-unmount
unmount
Жизненный цикл тега
RIOTObserver
function Car() {
riot.observable(this)
this.on('start', function() { })
}
var car = new Car()
car.trigger('start')
Интерфейс событий
RIOTObserver
<handler> <a onclick={ click }>
click(e) { e.preventDefault() } </handler>
e.currentTarget
e.target
e.which
e.item
События от пользователя
RIOTRouter
route( '/page/*', function( name ) { riot.mount( '#content', name ) })
riot.route.start()
route( '/page/awesome' )
Простой роутер с Wildcards
RIOTMount
riot.mount( '*' )
riot.mount( '#my-element', { opts } )
riot.mount( 'todo, forum, comments' )
Подключение тегов и запуск приложения
RIOTIsomorphic
var riot = require( 'riot' ) var timer = require( 'timer.tag' )
var html = riot.render( timer, { start: 42 } )
console.log( html )
// <timer><p>Seconds Elapsed: 42</p></timer>
Server Side Rendering
RIOT
Polymer SkateJS X-tag
Аналоги
11k
2k17k <1k
RIOTКирпичи для
Разработки сообщества
RIOT GEAR
Набор UI-компонент
Удобный Router
...
RiotControl
Централизованный Контроллер Событий
Inspired by Flux
RiotControl.addStore( store )
RiotControl.trigger( event )
RiotControl.on( event, callback )
RIOTСтроим с !
Примеры построения приложений, сборки и тестирования
Спасибо
Анджей Гужовский
2016
http://devdroid.net
Архитектор интернет систем, компания Betlab