Документ обсуждает развитие клиентской части веб-приложений с использованием современных технологий, таких как jQuery и RequireJS. В нем описываются проблемы с устаревшими решениями и подходами, а также предлагаются методы рефакторинга кода и организации модульной структуры. Основное внимание уделяется созданию одностраничных приложений и взаимодействию с данными через AJAX и WebSocket.

1. Быстрая и безболезненная
разработка клиентской части
веб-приложений
Ткаченко Ярослав, 10sheet.com
@sap1ens

3. Хорошее и современное решение
jQuery jQuery plugins Backbone.js
socket.io
jQuery plugins
App QUnit
jQuery plugins
template engine
Modernizr
Underscore.js jQueryUI

4. Плохое или старое решение
jQuery / Prototype.js / MooTools
… ?
App …
?

5. Симптомы?

6. Симптомы
1. Нет фреймворка/библиотеки Application уровня
или ее аналога
2. Нет работы с URL
3. Обработчики onclick прямо в HTML
4. Излишняя привязка к DOM, вместо работы с
данными
5. Нет иерархии компонентов
6. Сильная связность компонентов

9. Решение?
App
App

10. Решение?
Время
Деньги App
?
App Люди

11. Решение!
Грубый рефакторинг:
1. Разбиваем код на модули
2. Организуем связь между модулями

12. Код по возможности не переписывать

13. RequireJS
1. Загрузчик модулей
2. Поддерживает все современные браузеры
3. Имеет кучу плагинов
4. Модули в нотации AMD
5. Совместим с jQuery, node.js, Dojo
6. Есть оптимизатор кода

14. AMD
Asynchronous Module Definition API

15. Типовой модуль

16. Пример подключения RequireJS

17. HTML5 History API Динамические URL
https://twitter.com/#!/following
https://twitter.com/following

18. HTML5 History API

19. Manager

20. Manager

21. One page application
1. Физически - одна страница, подключающая все
стили и скрипты
2. Запускает загрузку приложения через RequireJS
3. Все шаблоны хранятся на клиенте
4. Обмен данными – AJAX (JSON) / Websocket

22. Иерархия модулей
Component
Component
Component
Component
Widget Widget Widget
Top level module Top level module

23. Иерархия модулей
Date interval Report
Search Pagination

24. Иерархия модулей

27. Less

28. Less

29. Less

30. CSS Sprites?

31. Sprites? Fonts!
Pictos.cc

33. Спасибо!
http://github.com/balupton/history.js
http://requirejs.org/
http://lesscss.org/