basis.js - почему я не бросил разрабатывать свой фреймворк

basis.jsпочему я не бросил разрабатывать

свой фреймворк

Роман ДворновOstrovok.ru

basis.js

JavaScript-фреймворк,

ориентированный на разработку

single page application

2

basis.js – нестандартный фреймворк

3

basis.js

4

Сложные вещи делать просто –

для простых есть возможность

5

TodoMVC

Настоящиевеб-приложения

basis.js для настоящих приложений

6

Это был тёплый летний вечер в древней Греции...

Проблемы веб-приложений

7

• Много кода, представлений, данных• Одни и те же данные в разных представлениях• Более одного сценария изменения данных• Асинхронность• Динамические представления• Локализация• Адаптивность• ...

basis.js

8

• Модульность, namespace

• Конструирование классов• Работу с данными• Сетевое сообщение• Построение интерфейса, компоненты• Шаблоны, адаптивность, локализация

• Инструменты, сборка

9

Шаблоны

Другие шаблонизаторы

10

element.innerHTML = 'string';

Пример шаблона в basis.js

11

<b:style src="block.css"/>

<div{element} class="block block_{disabled}"> <h2>{title}</h2> <ul> <!--{childNodesHere}--> </ul></div>

Шаблон → DOM

12

шаблон декларация эталон(DOM fragment)

функция(фабрика экземпляров)

DOM fragment

bindings

Экземпляршаблона

Шаблон = «HTML» + CSS

13

<b:style src="block.css"/>

<div class="block block_{disabled}"> <h2>{title}</h2> <ul{childNodeElement}/></div>

.block{ ...}

.block_disabled{ ...}

Шаблон CSS

Разделение логики и представления

14

ОбъектШаблон

(DOM fragment)

binding

action

Javascript Страница

В шаблонах нет логики,нет ветвлений и циклов

15

Замена DOM фрагмента<div class="sidebar"> ... <ul class="list"> <li>item 1</li> <li>item 2</li> </ul> ...</div>

16

<div class="list-wrapper"> <h2>Header</h2> <ul class="list"> </ul></div>

replaceNode

insertBefore

Синхронизация

17

Шаблон basis.js

var view = new basis.ui.Node({ template: basis.resource('path/to/template.tmpl')});

basis server

файловая система

Live update«киллер» фича

18

Темы

19

Тема = HTML + CSS

Адаптивность

20

Шаблоны в basis.js

21

• Простое logic-less описание

• Live update

• Динамические представления• Быстрый процесс верстки• Темы

• Адаптивность

Знакомо?

app-some-module-some-list__item_state_selected

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>

<b:isolate> – отменяет БЭМ

24

<b:style src="item.css"/><b:isolate/>

<li class="item {selected} {disabled}"> {title}</li>

DOM25

childNodes

Унификация API

26

методыappendChild, insertBefore, removeChild, replaceChild, ...

nextSiblingpreviousSibling

parentNode

firstChild lastChild

node

Паттерны

27

• selection (выделение)

• disable/enable

• сортировка• группировка• привязка данных• ...

28

childNodes: [ form { childNodes: [ field { ... }, field { ... } ] }, buttonPanel { childNodes: [ button { caption: 'Save' }, button { caption: 'Cancel' } ] }]

<form class="user-form"> <div class="form-field"> <label>Name:</label> <input type="text" /> </div> <div class="form-field"> <label>Email:</label> <input type="text" /> </div></form><div class="button-panel"> <button>Save</button> <button>Cancel</button></div>

JavaScript UI tree Browser DOM tree

29

There is no spoon

basis.js <3 DOM

30

Данные31

Классы backbone.js

32

Model Collection

Классы данных basis.js

33

НаборыОбъектыСкаляры

Property Object

Entity

Dataset

Slot

Автоматические наборы

Агрегатные функции

DataObjectSet

Особенности

34

• Все данные имеют состояние• При изменении данных создается дельта изменений

• Механизм делегирования

• Объекты взаимодействуют через изменение данных и состояния

• ...

Наборы данных

35

Dataset(Collection)

Наборы: пример

36

37

contacts

38

???

selectedcontacts

39

new basis.data.dataset.Subtract({ minuend: contacts, subtrahend: selectedContacts});

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); }});

Модульность

41

Основные модули

core event data DOM UI

entity dataset

net routerl10n

components

42

Ресурсы

43

basis.require('basis.ui');

module.exports = new basis.ui.Node({ template: resource('template/view.tmpl'), binding: { editor: resource('editor.js').fetch(), list: resource('list.js').fetch() }});

Почему не require.js?

44

Почему не require.js?

44

Относительные пути

Режимы

45

• Много файлов• Ленивая подгрузка• Оптимизируем загрузку с помощью basis server

Dev Production

• Один (обычно) js файл, в котором весь код, шаблоны и словари, один CSS файл на тему

• Различные оптимизации

Режимы

46

<b:style src="block.css"/><div{element} class="block block_{selected}"> <h2>{title}</h2> <ul> <!--{childNodesHere}--> </ul></div>

[[1,1,["element"],"div",[4,[["block_","selected"]],0,"block"],[1,0,0,"h2",[3,1,["title"]]],[1,0,0,"ul",[8,1,["childNodesHere"]]]]]

Dev Production

Производительность

47

История одного view

48

Время

49

1900 msknockout.js

Время

49

1900 ms

23 ms

knockout.js

basis.js

Время

49

1900 ms

23 ms

Разница более чем в 80 раз!

knockout.js

basis.js

Всё дело в DOM50

Структуры данных

51

Другие фреймворки

52

• backbone.js – постоянно копирует поля, отдельное событие для каждого изменного поля

• knockout.js – создает слишком много массивов, замыканий и других структур

• AngularJS – dirty check (глубокое копирование и сравнение объектов)

Простые модели

53

backbone.js knockout.js basis.data

10 000 моделей c 5 полями

1 000 моделей с 50 полями

86 ms 160 ms 1 ms

3.3 MB 10.9 MB 0.3 MB

139 ms 220 ms 1 ms

1.3 MB 13.5 MB 0.1 MB

Время

Память

Время

Память

Модели посложнее

54

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

Время

Память

Время

Память

basis.js

55

• Простые структуры• Дельта изменений• Агрегация событий• Данные не упорядочены• Избегаем bind, замыканий

• ...

Инструменты

56

basisjs-tools

57

• create – кодогенерация

• server – dev-сервер

• build – сборщик

basis build

58

basis build

59

Google Chrome plugin

60

Google Chrome plugin

60

Google Chrome plugin

60

Google Chrome plugin

60

61

НЕЛЬЗЯ ТАК ПРОСТО ВЗЯТЬ

И РАССКАЗАТЬ ПРО BASIS.JSЗА 30 МИНУТ

Сделано на basis.js

62

Сделано на basis.js

62

Сделано на basis.js

62

Сделано на basis.js

62

Сделано на basis.js

62

Сделано на basis.js

62

Ostrovok.ru

63

basisjs.com64

basisjs.com/tour65

github.com/basisjs

66

Спасибо за внимание!Вопросы?

67

Роман Дворновrdvornov@gmail.com

basisjs.comgithub.com/basisjs