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

веб-приложений

Ткаченко Ярослав, 10sheet.com@sap1ens

App

jQuery

jQueryUI

Backbone.js

Underscore.js

Хорошее и современное решение

jQuery plugins

jQuery plugins

jQuery plugins

socket.io

QUnit

template engineModernizr

App

jQuery / Prototype.js / MooTools

Плохое или старое решение

?

…

… ?

Симптомы?

Симптомы

1. Нет фреймворка/библиотеки Application уровня или ее аналога

2. Нет работы с URL3. Обработчики onclick прямо в HTML4. Излишняя привязка к DOM, вместо работы с

данными5. Нет иерархии компонентов6. Сильная связность компонентов

Решение?

App

App

Решение?

App

App?

Время

Деньги

Люди

Решение!

Грубый рефакторинг:

1. Разбиваем код на модули2. Организуем связь между модулями

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

RequireJS

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

AMD

Asynchronous Module Definition API

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

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

HTML5 History API Динамические URL

https://twitter.com/#!/following

https://twitter.com/following

HTML5 History API

Manager

Manager

One page application

1. Физически - одна страница, подключающая все стили и скрипты

2. Запускает загрузку приложения через RequireJS3. Все шаблоны хранятся на клиенте4. Обмен данными – AJAX (JSON) / Websocket

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

Top level module Top level module

Widget Widget Widget

ComponentComponent

ComponentComponent

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

ReportDate interval

Search Pagination

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

Less

Less

Less

CSS Sprites?

Sprites? Fonts!

Pictos.cc

Спасибо!

http://github.com/balupton/history.js

http://requirejs.org/

http://lesscss.org/