Download to read offline
![JavaScript UI tree Browser DOM tree
childNodes: [ <form class="user-form">
form { <div class="form-field">
childNodes: [ <label>Name:</label>
<input type="text" />
field { ... },
</div>
field { ... }
<div class="form-field">
]
<label>Email:</label>
}, <input type="text" />
buttonPanel { </div>
childNodes: [ </form>
button { caption: 'Save' }, <div class="button-panel">
button { caption: 'Cancel' } <button>Save</button>
] <button>Cancel</button>
} </div>
]
28](https://image.slidesharecdn.com/basis-jsrit2013169final-130423171507-phpapp02/75/basis-js-28-2048.jpg)
![Режимы
Dev Production
<b:style src="block.css"/> [[1,1,["element"],"div",[4,
<div{element} class="block [["block_","selected"]],0,"block"],
[1,0,0,"h2",[3,1,["title"]]],
block_{selected}">
[1,0,0,"ul",[8,1,["childNodesHere"]]]]]
<h2>{title}</h2>
<ul>
<!--{childNodesHere}-->
</ul>
</div>
46](https://image.slidesharecdn.com/basis-jsrit2013169final-130423171507-phpapp02/75/basis-js-47-2048.jpg)
Uploaded byRoman Dvornov
basis.js - почему я не бросил разрабатывать свой фреймворк
Документ описывает фреймворк basis.js для разработки одностраничных приложений с акцентом на модульность, работу с данными и шаблонами без бизнес-логики. В нем рассматриваются проблемы веб-приложений и преимущества использования basis.js по сравнению с другими фреймворками, также приводятся примеры использования и возможности фреймворка. Основное внимание уделено производительности, удобству разработки и инструментам для работы с фреймворком.
More Related Content
Similar to basis.js - почему я не бросил разрабатывать свой фреймворк
basis.js - почему я не бросил разрабатывать свой фреймворк
- 1. Роман Дворнов Ostrovok.ru basis.js почему я не бросил разрабатывать свой фреймворк
- 2. basis.js JavaScript-фреймворк, ориентированный на разработку single page application 2
- 3. basis.js – нестандартныйфреймворк 3
- 4. basis.js Сложные вещи делатьпросто – для простых есть возможность 4
- 5. TodoMVC Настоящие веб-приложения basis.js для настоящих приложений 5
- 6. Это был тёплыйлетний вечер в древней Греции... 6
- 7. Проблемы веб-приложений • Многокода, представлений, данных • Одни и те же данные в разных представлениях • Более одного сценария изменения данных • Асинхронность • Динамические представления • Локализация • Адаптивность • ... 7
- 8. basis.js • Модульность, namespace •Конструирование классов • Работу с данными • Сетевое сообщение • Построение интерфейса, компоненты • Шаблоны, адаптивность, локализация • Инструменты, сборка 8
- 9. Шаблоны 9
- 10. Другие шаблонизаторы element.innerHTML ='string'; 10
- 11. Пример шаблона вbasis.js <b:style src="block.css"/> <div{element} class="block block_{disabled}"> <h2>{title}</h2> <ul> <!--{childNodesHere}--> </ul> </div> 11
- 12. Шаблон → DOM Экземпляр шаблона шаблон декларация эталон DOM fragment (DOM fragment) функция bindings (фабрика экземпляров) 12
- 13. Шаблон = «HTML»+ CSS Шаблон CSS <b:style src="block.css"/> .block { <div class="block block_{disabled}"> ... } <h2>{title}</h2> <ul{childNodeElement}/> .block_disabled </div> { ... } 13
- 14. Разделение логики ипредставления Javascript Страница binding Шаблон Объект (DOM fragment) action 14
- 15. В шаблонах нетлогики, нет ветвлений и циклов 15
- 16. Замена DOM фрагмента <divclass="sidebar"> ... <ul class="list"> replaceNode <li>item 1</li> <li>item 2</li> </ul> <div class="list-wrapper"> ... <h2>Header</h2> </div> insertBefore <ul class="list"> </ul> </div> 16
- 17. Синхронизация var view =new basis.ui.Node({ template: basis.resource('path/to/template.tmpl') }); Шаблон basis.js basis server файловая система 17
- 18.
- 19. Темы Тема = HTML+ CSS 19
- 20. Адаптивность 20
- 21. Шаблоны в basis.js •Простое logic-less описание • Live update • Динамические представления • Быстрый процесс верстки • Темы • Адаптивность 21
- 22.
- 23. Во что превращаетсяшаблон <b:style src="item.css"/> <li class="app-some-module-some-list__item app- some-module-some-list__item_state_{selected} app-some-module-some- list__item_state_{disabled}"> {title} </li> 23
- 24. <b:isolate> – отменяетБЭМ <b:style src="item.css"/> <b:isolate/> <li class="item {selected} {disabled}"> {title} </li> 24
- 25.
- 26. Унификация API parentNode previousSibling node nextSibling firstChild childNodes lastChild методы appendChild, insertBefore, removeChild, replaceChild, ... 26
- 27. Паттерны • selection (выделение) •disable/enable • сортировка • группировка • привязка данных • ... 27
- 28. JavaScript UI tree Browser DOM tree childNodes: [ <form class="user-form"> form { <div class="form-field"> childNodes: [ <label>Name:</label> <input type="text" /> field { ... }, </div> field { ... } <div class="form-field"> ] <label>Email:</label> }, <input type="text" /> buttonPanel { </div> childNodes: [ </form> button { caption: 'Save' }, <div class="button-panel"> button { caption: 'Cancel' } <button>Save</button> ] <button>Cancel</button> } </div> ] 28
- 29. There is nospoon 29
- 30.
- 31.
- 32. Классы backbone.js Model Collection 32
- 33. Классы данных basis.js Скаляры Объекты Наборы Property Object Dataset DataObjectSet Entity Автоматические наборы Slot Агрегатные функции 33
- 34. Особенности • Все данныеимеют состояние • При изменении данных создается дельта изменений • Механизм делегирования • Объекты взаимодействуют через изменение данных и состояния • ... 34
- 35. Наборы данных Dataset (Collection) 35
- 36.
- 37.
- 38.
- 39. new basis.data.dataset.Subtract({ minuend: contacts, subtrahend: selectedContacts }); 39
- 40. new basis.data.dataset.Subset({ source: new basis.data.dataset.Subtract({ minuend: contacts, subtrahend: selectedContacts }), rule: function(item){ return /ч/i.test(item.data.title); } }); 40
- 41. Модульность 41
- 42. Основные модули core event data DOM UI entity dataset components net l10n router 42
- 43. Ресурсы basis.require('basis.ui'); module.exports = newbasis.ui.Node({ template: resource('template/view.tmpl'), binding: { editor: resource('editor.js').fetch(), list: resource('list.js').fetch() } }); 43
- 44.
- 45. Почему не require.js? Относительные пути 44
- 46. Режимы Dev Production • Много файлов • Один (обычно) js файл, в • Ленивая подгрузка котором весь код, шаблоны и словари, один • Оптимизируем CSS файл на тему загрузку с помощью basis server • Различные оптимизации 45
- 47. Режимы Dev Production <b:style src="block.css"/> [[1,1,["element"],"div",[4, <div{element} class="block [["block_","selected"]],0,"block"], [1,0,0,"h2",[3,1,["title"]]], block_{selected}"> [1,0,0,"ul",[8,1,["childNodesHere"]]]]] <h2>{title}</h2> <ul> <!--{childNodesHere}--> </ul> </div> 46
- 48.
- 49.
- 50. Время knockout.js 1900 ms 49
- 51. Время knockout.js 1900 ms basis.js 23 ms 49
- 52. Время knockout.js 1900 ms basis.js 23 ms Разница более чем в 80 раз! 49
- 53. Всё дело вDOM 50
- 54.
- 55. Другие фреймворки • backbone.js – постоянно копирует поля, отдельное событие для каждого изменного поля • knockout.js – создает слишком много массивов, замыканий и других структур • AngularJS – dirty check (глубокое копирование и сравнение объектов) 52
- 56. Простые модели backbone.js knockout.js basis.data 10 000 моделей c 5 полями Время 86 ms 160 ms 1 ms Память 3.3 MB 10.9 MB 0.3 MB 1 000 моделей с 50 полями Время 139 ms 220 ms 1 ms Память 1.3 MB 13.5 MB 0.1 MB 53
- 57. Модели посложнее backbone.js basis.entity создание 10 000 моделей 5 типизированных полей, индекс, коллекция Время 189 ms 58 ms Память 3.1 MB 1.1 MB обновление Время 235 ms 15 ms Память +0.3 MB +0 MB 54
- 58. basis.js • Простые структуры •Дельта изменений • Агрегация событий • Данные не упорядочены • Избегаем bind, замыканий • ... 55
- 59. Инструменты 56
- 60. basisjs-tools • create –кодогенерация • server – dev-сервер • build – сборщик 57
- 61. basis build 58
- 62. basis build 59
- 63.
- 64.
- 65.
- 66.
- 67. НЕЛЬЗЯ ТАК ПРОСТОВЗЯТЬ И РАССКАЗАТЬ ПРО BASIS.JS ЗА 30 МИНУТ 61
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74. Ostrovok.ru 63
- 75. basisjs.com 64
- 76.
- 77.
- 78. Спасибо за внимание! Вопросы? Роман Дворнов basisjs.com rdvornov@gmail.com github.com/basisjs 67