Top Banner
28

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

Jul 01, 2015

Download

Technology

Yandex

В своём докладе я расскажу, как использовал BEM для организации кода небольшого проекта вне Яндекса. Поговорим о том, что такое bem-node, каковы его возможности и как быстро создать с его помощью небольшой, но легко масштабируемый проект на node.js.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Разработка небольшого проекта c BEM и node.js — Сергей Пузанков
Page 2: Разработка небольшого проекта c BEM и node.js — Сергей Пузанков

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

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

Hello world!

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

4

Landing Page

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

5

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

〉express 〉ejs 〉nodemailer

6

Node.js

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

7

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

8

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

9

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

10

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

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

11

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

bit.ly/bn-hello-world

bem-node

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

13

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

bem.in

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

14

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

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

15

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

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

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

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

!

!

16

bem-node

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

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

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

〉Шаблоны на JavaScript

!

17

bem-node

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

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

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

〉Шаблоны на JavaScript

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

18

bem-node

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

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

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

〉Шаблоны на JavaScript

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

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

19

bem-node

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

20

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

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

21

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 22: Разработка небольшого проекта c BEM и node.js — Сергей Пузанков

22

Landing Page

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

23

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

bem.info

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

bit.ly/bn-demo

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

Итого

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

Вопросы

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

+38 (067) 500 06 34

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

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

Спасибо!

sergey.puzankov.puzankov@yandex-

@puzankovc