"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25

Алексей Охрименко Acronis

Isomorphic D3 + MALEVICH

1

2

• D3 • Isomorphic D3 • D3 and WebWorkers • MALEVICH —> COD.js

3

D3

4

DEMO - stage concept

5

6

Isomorphic D3

7

8

DEMO - isomorphic

9

11

jsdom4browser позволяет работать с DOM в

WebWorker

12

MALEVICH —> COD.js

новый паттерн программирования и новый фреймворк

13

Зачем?

14

15

M/S

VC

VM

бизнес-логика, валидация

визуальное представление

кэш, синхронизация с сервером

реакция на события

JSON only!

16

M/S

VC

VM

Main

Sidebar

M/S

VC

VM

M/S

VC

VM

Menu

17

COD.js новый фреймворк на базе MALEVICH

18

19

git clone https://github.com/aiboy/COD.js.git cd COD.js rm -rf .git

npm install npm run dev npm run watch

DEMO - COD.js

22

Плюсы COD.jsD3 «Virtual Data/DOM» + DOM recycling! ( в 2012 году на 1 год раньше чем React )

Полуавтоматическое обнаружение ошибок ( в следующей версии - полуавтоматическое с указанием конкретной строчки кода )

Неимоверная скорость и отзывчивость UI (даже на мобильных девайсах)

Легкий рефакторинг и просто тестирование - By Design

Почти бесплатный Drag&Drop

24

Минусы COD.js

Семантика теряется по дороге (No SEO) ( можно исправить используя React as View )

Отсутствие нормальной документации и примеров ( будет исправлено в ближайшем будущем )

25

• D3 • Isomorphic D3 • D3 and WebWorkers • MALEVICH —> COD.js

26

Алексей ОхрименкоWork@: Acronis

Twitter: @Ai_boy

https://gist.github.com/aiboy/366f0e6dc3c46730877e

https://github.com/aiboy/isomorphic-d3-and-malevich https://github.com/aiboy/jsdom4browser https://github.com/aiboy/MALEVICH

https://github.com/aiboy/COD.js

27