View
1.399
Download
0
Category
Preview:
DESCRIPTION
История о том, как развивалась поисковая выдача Aviasales.ru, о том, как устаревали некоторые решения и как они были заменены на новые. Про то, как сделать современное frontend-приложение, какие клиентские фреймворки стоит использовать, а с какими лучше не связываться. Про современную архитектуру клиентских приложений и результатах ее применения в нашей команде. Про оптимизацию и минимизацию итогового решения.
Citation preview
«Жидкое» приложение
Поисковая форма
«Жидкое» приложение
Поиск
Поисковая форма
ВыдачаВыдача
«Жидкое» приложение
Поиск
Поисковая форма
Выдача
Билет
Фильтры
«Жидкое» приложение
Поиск
Поисковая форма
Состояния
История
Выдача
Билет
Фильтры
Форма фидбека
«Жидкое» приложение
Поиск
Поисковая форма
Состояния
История
Выдача
Билет
Фильтры
Форма фидбекаКарта
Агенства
Страдания и боль
Непредсказуемая инициализация Самопальный AMD, несовместимый с AMD Отсутствие тестов Ошибка в логике приводит к ...
... нарушению принципов разработки ПО
Управление сложностью. Наличие метафор. Наличие хороших абстракций.
Почему бы не взять готовые jquery-плагины?
Можно взять, но для этого нам понадобятся:
Острый канцелярский нож, две пластиковые бутылки, клейкая
лента и:
JQueryjQueryUI
Jfomer
Apprise
Острый канцелярский нож, две пластиковые бутылки, клейкая
лента и:
JQueryjQueryUI
Jformer
Hyjack Select
jQuery Sparklines
Apprise
safeSubmit Plugin
Jrating
InputNotes
GmapJquery UI datepicker
Title Alert
Острый канцелярский нож, две пластиковые бутылки, клейкая
лента и:
JQueryjQueryUI
Jformer
Hyjack Select
jQuery Sparklines
asmSelect jQuery Plugin
jQuery Plugin Boilerplate
jQuery Floater Plugin
jQuery Queue pluginAppriseFollow & Tweet Widget
jQuery Corner Gallery
InputNotes
GmapJquery UI datepicker
Title Alert
Fix Scrollbar Height
Better Check Boxes with jQuery and CSS
Острый канцелярский нож, две пластиковые бутылки, клейкая
лента и:
JQueryjQueryUI
Jformer
Hyjack Select
jQuery Sparklines
asmSelect jQuery Plugin
jQuery Plugin Boilerplate
jQuery Floater Plugin
jQuery Queue pluginApprise
Jquery-toastmessage-plugin
Websanova Color Picker
safeSubmit Plugin
Jrating
jQuery Opineo Plugin
Follow & Tweet Widget
jQuery Corner Gallery
InputNotes
Gmap
PicNet Table Filter
Jquery UI datepicker
Activity Indicator
Title Alert
Fix Scrollbar Height
Better Check Boxes with jQuery and CSS
BetterTooltip
Острый канцелярский нож, две пластиковые бутылки, клейкая
лента и:
JQueryjQueryUI
Jformer
Hyjack Select
jQuery Sparklines
asmSelect jQuery Plugin
jQuery Plugin Boilerplate
jQuery Floater Plugin
jQuery Queue pluginApprise
Jquery-toastmessage-plugin
Websanova Color Picker
safeSubmit Plugin
Jrating
jQuery Opineo Plugin
Follow & Tweet Widget
jQuery Corner Gallery
InputNotes
Gmap
PicNet Table Filter
Jquery UI datepicker
Activity Indicator
Title Alert
Fix Scrollbar Height
Better Check Boxes with jQuery and CSS
BetterTooltip
Куда идти?
Google Closure Library Backbone (+ require.js) Ember AngularJS Etc.
Backbone.js + Require.js =
Композитная архитектура от автора Marionette
Сложные view Организация кода по функционалу Cocktail.js “Правило трех”
Приложение Aviasales
Декомпозиция
Шапка выдачи Выдача Фильтры
Декомпозиция
Поиск Список поисков
Декомпозиция
Поиск Список поисков
Поисковыйинформер
Поисковаяформа Один поиск
Композитная архитектура
Приложение
Поиск
Выдача
Фильтры
Шапка выдачи
Списокпоисков
Поисковыйинформер
Поисковаяформа Один поиск
Первый блин: Aviasales Wikimapia Widget
AMD + backbone
2 view
handlebars
Тесты на Jasmine,
TDD с помощью Testem
О размерах
Собранное приложение = 190 Кб. JQuery → Zepto (120 Кб.) Handlebars → Handlebars.runtime (+ rake) (92
Кб.) Require.js → Almond (70 Кб.) Gzip (20 Кб.)
Итог
Композитная архитектура – лучший способ проектировать UI
Backbone + AMD – одна из лучших связок для разработки UI
Слабая связность великолепна Есть решение лучше
Recommended