AJAX-приложения делаются не так и давно, потому найти собранные воедино best practices не так-то просто. Многие наработки просто не выложены в паблик, а используются разработчиками для каких-то своих проектов. Потому надо проявить старание и разобраться самому.
Сначала посмотрите на то, что делают другие. Но здесь важно не брать плохие примеры (например, монстров типа Zend Framework и ExtJS. jQueryUI, кстати тоже уродливая вещь — вы его исходники смотрели?) Посмотрите, как написан клайентсайд у вконтакта. Посмотрите у фейсбука (хотя там код пожат, но разобраться можно). Посмотрите библиотеку Zforms. Посмотрите Google Closure Library (у Гугла есть чему поучиться, особенно в плане организации кода, посмотрите обязательно).
Вообще, смотреть чужой код полезно. он не всегда хорошо написан, но даже в этом случае — это повод для размышлений на тему «а как правильно?».
Теперь о теории. При построении более-менее сложных AJAX-приложений приходится решать примерно те же проблемы, что и на серверной части, а именно:
— разделение кода на слабосвязанные компоненты (чтобы, меняя один из них, не ломать все остальное). Сюда входит как организация 3-звенной архитектуры (например, MVC), так и разбиение на модули, динамическая подгрузка модулей (посмотрите yepnope.js и сделайте то же, но проще). Выбор средства взаимодействия модулей — Dependency Injection или система событий (паттерн Observer). Мне больше нравится Observer.
— организация хранилища данных — нужен какой-то модуль для получения данных с сервера с кешированием, проверкой актуальности, возможно с блокировками и нотификацией об изменениях. Посмотрите, например, как ведет себя Гугл Докс если открыть в 2 окнах 1 документ и править его. Нужна серверная половинка для приема/валидации/выдачи данных.
— организация View: это решение вопроса о выборе шаблонов (jQuery Templates для начинающего — вполне пойдут), создание системы виджетов (чтобы например можно было вставить виджет графика в виджет формы и все работало) — я не знаю, правда, ни одной нормальной библиотеки виджетов, пишите сами.
— роутер и контроллер — ну это элементарно пишется без всяких библиотек. Не знаете, как — посмотрите, как сделано у вконтакта.
— повторное использование кода — копипаст недопустим.
Также, есть проблемы специфичные именно для клиентсайда:
— необходимость уменьшения числа запросов (неправильно: грузим диалог, обнаруживаем, что ему нужны CSS и JS файлы и грузим их) — лучше это делать одним запросом. То же про запросы к хранилищу: выбирайте все одним запросом. Несколько AJAX-запросов — это треш и ужас, особенно при пинге 100-200 мс.
— необходимость минимизации объема и скорости работы JS-кода. Ради нее надо отказываться от тяжелых/перегруженных библиотек типа ExtJS, kendo и jQueryUI.
— склеивание/сжатие JS файлов — элементарщина, можно склеивать хоть bash-скриптами (или make), плюс можно применить тулзы типа Google Closure Compiler. Разберитесь, как они работают.
— необходимость создания адаптивной верстки — для этого есть библиотеки типа Modernizr, но по моему, это перегруженный монстр. Мне, например, хватает простого инлайн-скрипта, включаемого сразу после body, который ставит классы with/without-js, with-css3, with-ie, в итоге пользователи современных браузеров экономят трафик и видят rounded corners и CSS gradients, а пользователи ИЕ скачивают их в виде картинок.
А, вот скрипт, если кому интересно:
paste2.org/p/1947136
— необходимость поддержки навигации средствами браузера — посмотрите библиотеку history.js (хотя имхо, ее тоже стоило бы урезать раза в 2-3, там много лишнего).
Ну и для закрепления знаний нужна естественно практика.
Напишите
1) свой грид (грид — это в данном случае виджет, который отображает в виде таблицы какие-то данные), с сортировкой, фильтром и постраничным просмотром. Все должно работать через AJAX (а если яваскрипт отключен, то классическим методом). Если таблица помещается на экран без постраничной навигации, сортировки и фильтрация должны выполняться 100% на клиенте. Добавьте кеширование (при открытии уже закешированных данных они отображаются из кеша и посылается запрос на проверку их актуальности).
2) Сделайте форму редактирования/добавления данных в этот грид с валидацией.
3) А теперь сделайте так, чтобы он работал при пропадающем интернете (то есть, вы добавляете какие-то данные, они сохраняются, выживают при закрытии браузера и отправляются, когда соединение восстанавливается)
4) если не испытываете отрицательных эмоций по отношению к вконтакту — решите эту задачу:
vk.com/page-1_42054413. Она хорошо подходит для отработки навыков разработки AJAX-приложений.
Что касается PHP, в AJAX-приложении он просто служит бекендом и умным хранилищем данных, не более. Слепите простейший ORM, его вполне хватит.
P.S. И никогда не повтоярйте ошибок, которые делают косолапые разработчики Хабра. Размер textarea для комментариев должен вмещать минимум 20-25 строк.
Средний
