1. Разработка MVC-приложения на
JavaScript
Олег Воробьев
Разработчик

2. Обычный сайт на PHP
GET /index.php
Сервер
Браузер
HTML

3. Типичный код JavaScript

4. Клиент на JavaScript
GET /products
Сервер
JSON Пользователь
HTML

5. Backbone.js

6. Пример
#header
#left #main

7. index.html

8. Model
REST
GET /categories[/id]
POST / categories
PUT /categories/id
DELETE /categories/id

9. View

10. View

11. View

12. View

13. View

14. Router
http://appstore/
http://appstore/#store
http://appstore/#store/12

15. Router

16. index.js

17. index.html

18. index.html

19. index.html

20. index.html

21. index.html

22. Что получилось
GET /categories
[{id: 1, name: 'Популярные'},
{id: 2, name: 'Игры'},
{id: 3, name: 'Музыка и видео'},
{id: 4, name: 'Развлечения'},
{id: 11, name: 'Образ жизни'},
{id: 5, name: 'Дети и семья'},
{id: 6, name: 'Путешествия и навигация'},
{id: 7, name: 'Здоровье и фитнес'},
{id: 8, name: 'Фотографии'},
{id: 9, name: 'Социальные сети'},
{id: 10, name: 'Спорт'}]

23. Product

24. Product view

25. Product view

26. View events

27. Router

28. Что получилось
GET /categories
[{id: 1, name: 'Популярные'},
GET /products
{id: 2, name: 'Игры'},
{id: 3, name: 'Музыка и видео'}, [{id: 2, name: 'YouTube', icon: 'youtube.jpg'},
{id: 4, name: 'Развлечения'}, {id: 3, name: 'Gmail', icon: 'gmail.jpg'},
{id: 11, name: 'Образ жизни'}, {id: 1, name: 'Angry Birds', icon: 'angrybirds.jpg'},
{id: 5, name: 'Дети и семья'}, {id: 4, name: 'Plants vs Zombies', icon: 'plants.jpg'},
{id: 6, name: 'Путешествия и навигация'}, {id: 5, name: 'Google Maps', icon: 'googlemaps.jpg'},
{id: 7, name: 'Здоровье и фитнес'}, {id: 6, name: 'Evernote', icon: 'evernote.jpg'}]
{id: 8, name: 'Фотографии'},
{id: 9, name: 'Социальные сети'},
{id: 10, name: 'Спорт'}]

29. Вопросы?