Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Быстрая и безболезненнаяразработка клиентской части     веб-приложений        Ткаченко Ярослав, 10sheet.com               ...
Хорошее и современное решение   jQuery        jQuery plugins            Backbone.js                                       ...
Плохое или старое решение     jQuery / Prototype.js / MooTools     …                                  ?                App...
Симптомы?
Симптомы1. Нет фреймворка/библиотеки Application уровня   или ее аналога2. Нет работы с URL3. Обработчики onclick прямо в ...
Решение?                 AppApp
Решение?      ВремяДеньги                App                ?App                  Люди
Решение!Грубый рефакторинг:1. Разбиваем код на модули2. Организуем связь между модулями
Код по возможности не переписывать
RequireJS1. Загрузчик модулей2. Поддерживает все современные браузеры3. Имеет кучу плагинов4. Модули в нотации AMD5. Совме...
AMDAsynchronous Module Definition API
Типовой модуль
Пример подключения RequireJS
HTML5 History API        Динамические URL     https://twitter.com/#!/following      https://twitter.com/following
HTML5 History API
Manager
Manager
One page application1. Физически - одна страница, подключающая все   стили и скрипты2. Запускает загрузку приложения через...
Иерархия модулейComponent                                  Component               Component                              ...
Иерархия модулейDate interval          Report   Search             Pagination
Иерархия модулей
Less
Less
Less
CSS Sprites?
Sprites? Fonts!   Pictos.cc
Спасибо!http://github.com/balupton/history.jshttp://requirejs.org/http://lesscss.org/
Быстрая и безболезненная разработка клиентской части веб-приложений
Быстрая и безболезненная разработка клиентской части веб-приложений
Быстрая и безболезненная разработка клиентской части веб-приложений
Быстрая и безболезненная разработка клиентской части веб-приложений
Быстрая и безболезненная разработка клиентской части веб-приложений
Быстрая и безболезненная разработка клиентской части веб-приложений
Nächste SlideShare
Wird geladen in …5
×

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

1.241 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

  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/

×