Download as PDF, PPTX
![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>](https://image.slidesharecdn.com/riotjs-40min-161204093546/85/Riot-JS-Web-Components-4-320.jpg)
![RIOT
Tag
<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](https://image.slidesharecdn.com/riotjs-40min-161204093546/85/Riot-JS-Web-Components-13-320.jpg)
![RIOT
Templates
<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 }](https://image.slidesharecdn.com/riotjs-40min-161204093546/85/Riot-JS-Web-Components-16-320.jpg)
Uploaded byFwdays
Анджей Гужовский "Riot.JS, или как приготовить современные Web Components"
Презентация посвящена веб-компонентам на основе библиотеки Riot, которая предлагает простой и читабельный синтаксис для разработки интерфейсов. Доклад охватывает основы использования Riot, включая создание компонентов, управление состоянием и маршрутизацию, а также возможности серверного рендеринга. В заключение автор делится примерами кода и ссылками на ресурсы для дальнейшего изучения.
More Related Content
Similar to Анджей Гужовский "Riot.JS, или как приготовить современные Web Components"
Анджей Гужовский "Riot.JS, или как приготовить современные Web Components"
- 1. Заголовок презентации Имя ифамилия автора доклада Компания Most JS frameworks day или как приготовить современные Web Components RIOT
- 2.
- 3. 11k GitHub RIOT 3 yearsold 2384 commits
- 4. 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>
- 5. RIOTПочему ? Что внутрии как сделано
- 6.
- 7.
- 8. Стандартный Ваши привычные инструменты, шаблонизаторы, Близокк стандартам библиотеки и практики Native JavaScript RIOT
- 9. Современный Маленький размер Живое сообщество Изоморфный WebComponents RIOT
- 10.
- 11.
- 12.
- 13. RIOT Tag <example-tag> <!-- layout --> <ulclick={ 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
- 14. RIOT sample p test {value } script( type = 'text/coffee' ). @value = 'sample' Pug (jade) Coffee script $ riot --template pug sample.tag CLI compiler Tag Пре-процессоры
- 15. RIOT Templates Универсальные { expr} для имен классов, атрибутов и обработчиков событий Экономичная работа с DOM Шаблоны остаются шаблонами
- 16. RIOT Templates <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 }
- 17. RIOT Жизненный цикл тега Observer Интерфейссобытий События от пользователя
- 18. RIOT Observer this.on( 'mount', function(){ timer = setTimeout( ... ) }) this.on( 'unmount', function() { clearTimeout( timer ) }) update updated before-mount mount before-unmount unmount Жизненный цикл тега
- 19. RIOT Observer function Car() { riot.observable(this) this.on('start',function() { }) } var car = new Car() car.trigger('start') Интерфейс событий
- 20. RIOT Observer <handler> <a onclick={ click}> click(e) { e.preventDefault() } </handler> e.currentTarget e.target e.which e.item События от пользователя
- 21. RIOT Router route( '/page/*', function(name ) { riot.mount( '#content', name ) }) riot.route.start() route( '/page/awesome' ) Простой роутер с Wildcards
- 22. RIOT Mount riot.mount( '*' ) riot.mount('#my-element', { opts } ) riot.mount( 'todo, forum, comments' ) Подключение тегов и запуск приложения
- 23. RIOT Isomorphic 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
- 24.
- 25.
- 26.
- 27. ... RiotControl Централизованный Контроллер Событий Inspiredby Flux RiotControl.addStore( store ) RiotControl.trigger( event ) RiotControl.on( event, callback )
- 28. RIOTСтроим с ! Примерыпостроения приложений, сборки и тестирования
- 29. Спасибо Анджей Гужовский 2016 http://devdroid.net Архитектор интернетсистем, компания Betlab