Заголовок презентацииИмя и фамилия автора докладаКомпания

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