Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Быстрая и безболезненная разработка клиентской части веб-приложений

1,239 views

Published on

Published in: Technology
  • Be the first to comment

Быстрая и безболезненная разработка клиентской части веб-приложений

  1. 1. Быстрая и безболезненнаяразработка клиентской части веб-приложений Ткаченко Ярослав, 10sheet.com @sap1ens
  2. 2. Хорошее и современное решение jQuery jQuery plugins Backbone.js socket.iojQuery plugins App QUnit jQuery plugins template engine Modernizr Underscore.js jQueryUI
  3. 3. Плохое или старое решение jQuery / Prototype.js / MooTools … ? App …?
  4. 4. Симптомы?
  5. 5. Симптомы1. Нет фреймворка/библиотеки Application уровня или ее аналога2. Нет работы с URL3. Обработчики onclick прямо в HTML4. Излишняя привязка к DOM, вместо работы с данными5. Нет иерархии компонентов6. Сильная связность компонентов
  6. 6. Решение? AppApp
  7. 7. Решение? ВремяДеньги App ?App Люди
  8. 8. Решение!Грубый рефакторинг:1. Разбиваем код на модули2. Организуем связь между модулями
  9. 9. Код по возможности не переписывать
  10. 10. RequireJS1. Загрузчик модулей2. Поддерживает все современные браузеры3. Имеет кучу плагинов4. Модули в нотации AMD5. Совместим с jQuery, node.js, Dojo6. Есть оптимизатор кода
  11. 11. AMDAsynchronous Module Definition API
  12. 12. Типовой модуль
  13. 13. Пример подключения RequireJS
  14. 14. HTML5 History API Динамические URL https://twitter.com/#!/following https://twitter.com/following
  15. 15. HTML5 History API
  16. 16. Manager
  17. 17. Manager
  18. 18. One page application1. Физически - одна страница, подключающая все стили и скрипты2. Запускает загрузку приложения через RequireJS3. Все шаблоны хранятся на клиенте4. Обмен данными – AJAX (JSON) / Websocket
  19. 19. Иерархия модулейComponent Component Component Component Widget Widget Widget Top level module Top level module
  20. 20. Иерархия модулейDate interval Report Search Pagination
  21. 21. Иерархия модулей
  22. 22. Less
  23. 23. Less
  24. 24. Less
  25. 25. CSS Sprites?
  26. 26. Sprites? Fonts! Pictos.cc
  27. 27. Спасибо!http://github.com/balupton/history.jshttp://requirejs.org/http://lesscss.org/

×