Что такое Single Page Application и с чего начать

Илья Таратухин

Transcript

1. Что такое Single Page Application и с чего начать Илья Таратухин i.taratuhin@2gis.ru @darkilfa
2. Докладчик • Работаю в 2ГИС над 2gis.ru и beta.2gis.ru 2
3. О чем доклад 1. Эволюция разработки frontend приложений 2. Почему Client Side Application? 3. Как начать писать приложение на JavaScript? 3
4. Эволюция разработки frontent приложений
5. Эпоха innerHTML
6. Эпоха innerHTML $ . a j a x ( { u r l : " g e t _ p a g e _ p a r t . p h p ", d a t a : d a t a S t r i n g , s u c c e s s : f u n c t i o n ( r e s p o n s e ) { $ ( e l e m ) . h t m l ( r e s p o n s e ) } } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 6
7. Шаблонизаторы
8. Шаблонизаторы • jQuery Template • Jade • Mustache • Handlebars • Underscore • Swig 8
9. Шаблонизаторы $ . a j a x ( { u r l : " g e t _ p a g e _ d a t a . p h p ", d a t a : d a t a S t r i n g , s u c c e s s : f u n c t i o n ( r e s p o n s e ) { $ ( e l e m ) . h t m l ( t e m p l a t e E n g i n e . r e n d e r ( r e s p o n s e ) ); } } ) ; 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 9
10. Шаблонизаторы < h 1 > C o m m e n t s < / h 1 > < d i v i d = " c o m m e n t s " > { { # e a c h c o m m e n t s } } < h 2 > < a h r e f = "{ { p e r m a l i n k } }" >{ { t i t l e } }< / a > < / h 2 > < d i v >{ { b o d y } }< / d i v > { { / e a c h } } < / d i v > 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 10
11. JS фреймворки
12. Marius Gundersen©
13. Сентябрь 2007
14. Knockout 1.0.0 – 5 июля 2010, Steven Sanderson • Two­way bindings (декларативные биндинги) • Низкий порог вхождения • Большая скорость разработки 14
15. Knockout < i n p u t t y p e = " t e x t " d a t a - b i n d = " v a l u e : s o m e T e x t " / > < s p a n d a t a - b i n d = " t e x t : s o m e T e x t " > < / s p a n > V i e w M o d e l . s o m e T e x t = k o . o b s e r v a b l e ( ); V i e w M o d e l . s o m e T e x t ( " П р и в е т , H a p p y D e v ! " ) ; Привет, HappyDev! Привет, HappyDev! 0 1 . 0 2 . 0 1 . 0 2 . 15
16. UI-фреймворк
17. Backbone.js 0.1.0 – 13 октября 2010, Jeremy Ashkenas • JS­фреймворк полного цикла (с плагинами) • Хорошо кастомизируется • Нацелен на сложную бизнес­логику • Близок к MVC • Требует времени, чтобы разобраться 17
18. Backbone.js • Foursquare • Groupon • Pinterest • Soundcloud • Trello 18
19. Рынок ожил
20. Выбирайте на свой вкус • Knockout • AngularJS • Ember • Backbone.js • Geddy • <Много других инструментов> 20
21. Почему Single Page Application? 1. Пользователю приятно, когда страница не перезагружается 2. Переносим нагрузку с сервера на браузер 3. Верстальщикам нравится писать на JS 4. Код сервера == код приложения == profit! 21
22. Как мне сделать SPA?
23. Как мне сделать SPA? 1. Разделяем приложение на frontend и backend 2. Backend работает с данными и взаимодействует с внешним миром через API 3. Frontend работает с данными через API backend 4. Имеем 2 приложения с разделенными функциями SoA (Service­oriented Architecture) 23
24. Backend • Обслуживание API • Взаимодействие с поставщиками данных • Бизнес логика по объединению данных 24
25. Frontend (SPA) • Получение/отправка данных через API • Бизнес логика связанная с выводом данных • Взаимодействие с пользователем • WOW­эффект 25
26. WOW-эффект • Мгновенная загрузка на клиенте • Интуитивно понятный интерфейс • Отзывчивый интерфейс • Красивые, ненавязчивые анимации • Пони и радуга 26
27. На что обратить внимание при выборе JS-фреймворка • Нужно ли вам рендерить приложение на сервере? • Бизнес­логика vs интерфейс • Навыки команды • Сложность приложения • Порог вхождения 27
28. Конец
29. Илья Таратухин darkilfa@gmail.com @darkilfa 29