jslab.Сергей Пузанков. "Разработка небольшого проекта...

38
Разработка небольшого проекта с BEM и node.js Пузанков Сергей, руководитель группы разработки поисковых интерфейсов Яндекса

Upload: geekslab

Post on 15-Jul-2015

124 views

Category:

Technology


4 download

TRANSCRIPT

Page 1: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Разработка небольшого проекта с BEM и node.js

Пузанков Сергей, руководитель группы разработки поисковых интерфейсов Яндекса

Page 2: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Hello world!

Page 3: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

3

Landing Page

Page 4: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

4

Page 5: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

〉express 〉nodemailer

5

Node.js

Page 6: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

6

Page 7: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

7

Page 8: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

8

Page 9: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

9

Проект начинает размножаться

Page 10: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

10

Page 11: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

bit.ly/bn-hello-world

bem-node

Page 12: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

12

Независимые блоки

bem.info

Page 13: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

13

Интерфейс из независимых блоков

Page 14: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

14

Модифицируемые блоки

Page 15: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Contribs

Page 16: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

〉Common blocks

〉Basic components

〉Modules

16

Contribs

Page 17: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

bem-node

Page 18: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Тот же BEM только на node.js

〉Модульность

!

!

!

18

bem-node

Page 19: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Тот же BEM только на node.js

〉Модульность

〉Шаблоны на JavaScript

!

!

19

bem-node

Page 20: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Тот же BEM только на node.js

〉Модульность

〉Шаблоны на JavaScript

〉Рендер на сервере и на клиенте

!

20

bem-node

Page 21: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Тот же BEM только на node.js

〉Модульность

〉Шаблоны на JavaScript

〉Рендер на сервере и на клиенте

〉Блоки сами получают нужные данные

21

bem-node

Page 22: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Тот же BEM только на node-js

〉Модульность

〉Шаблоны на JavaScript

〉Рендер на сервере и на клиенте

〉Блоки сами получают нужные данные

〉Легко делать ручки

22

bem-node

Page 23: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Внешние данные

Page 24: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

24

Отказоустойчивый интерфейс

Page 25: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Нам нужно Больше запросов!

Page 26: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Дозапросы

Page 27: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Дозапросы

Page 28: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

28

1.1

2.1

1.3

1.2

2.2

2.1

1.2

2.2

2.1

1.2

2.2

2.1

1.2

2.2

2.1

1.2

2.2

2.1

1.2

2.2

2.1

1.2

2.2

2.1

1.2

2.2

Page 29: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Гибкий интерфейс

Page 30: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

〉Регион

〉Источник перехода

〉Разные рекламные объявления

〉Разные устройства

!

30

Гибкий интерфейс

Page 31: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

A/B тестирование

Page 32: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

32

Landing Page

Page 33: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

33

Page 34: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

bem.info

Page 35: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

bit.ly/bn-demo

Page 36: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Итого

Page 37: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

+38 (067) 500 06 34

Сергей Пузанков

Руководитель группы разработки поисковых интерфейсов

Спасибо!

[email protected]

@puzankovcom

Page 38: JSLab.Сергей Пузанков. "Разработка небольшого проекта c BEM и node.js"

Вопросы