23

Жидкие и твёрдые интерфейсы

Embed Size (px)

DESCRIPTION

История о том, как развивалась поисковая выдача Aviasales.ru, о том, как устаревали некоторые решения и как они были заменены на новые. Про то, как сделать современное frontend-приложение, какие клиентские фреймворки стоит использовать, а с какими лучше не связываться. Про современную архитектуру клиентских приложений и результатах ее применения в нашей команде. Про оптимизацию и минимизацию итогового решения.

Citation preview

Page 1: Жидкие и твёрдые интерфейсы
Page 2: Жидкие и твёрдые интерфейсы

«Жидкое» приложение

Поисковая форма

Page 3: Жидкие и твёрдые интерфейсы

«Жидкое» приложение

Поиск

Поисковая форма

ВыдачаВыдача

Page 4: Жидкие и твёрдые интерфейсы

«Жидкое» приложение

Поиск

Поисковая форма

Выдача

Билет

Фильтры

Page 5: Жидкие и твёрдые интерфейсы

«Жидкое» приложение

Поиск

Поисковая форма

Состояния

История

Выдача

Билет

Фильтры

Форма фидбека

Page 6: Жидкие и твёрдые интерфейсы

«Жидкое» приложение

Поиск

Поисковая форма

Состояния

История

Выдача

Билет

Фильтры

Форма фидбекаКарта

Агенства

Page 7: Жидкие и твёрдые интерфейсы

Страдания и боль

Непредсказуемая инициализация Самопальный AMD, несовместимый с AMD Отсутствие тестов Ошибка в логике приводит к ...

Page 8: Жидкие и твёрдые интерфейсы

... нарушению принципов разработки ПО

Управление сложностью. Наличие метафор. Наличие хороших абстракций.

Почему бы не взять готовые jquery-плагины?

Можно взять, но для этого нам понадобятся:

Page 9: Жидкие и твёрдые интерфейсы

Острый канцелярский нож, две пластиковые бутылки, клейкая

лента и:

JQueryjQueryUI

Jfomer

Apprise

Page 10: Жидкие и твёрдые интерфейсы

Острый канцелярский нож, две пластиковые бутылки, клейкая

лента и:

JQueryjQueryUI

Jformer

Hyjack Select

jQuery Sparklines

Apprise

safeSubmit Plugin

Jrating

InputNotes

GmapJquery UI datepicker

Title Alert

Page 11: Жидкие и твёрдые интерфейсы

Острый канцелярский нож, две пластиковые бутылки, клейкая

лента и:

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

Page 12: Жидкие и твёрдые интерфейсы

Острый канцелярский нож, две пластиковые бутылки, клейкая

лента и:

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

Page 13: Жидкие и твёрдые интерфейсы

Острый канцелярский нож, две пластиковые бутылки, клейкая

лента и:

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

Page 14: Жидкие и твёрдые интерфейсы

Куда идти?

Google Closure Library Backbone (+ require.js) Ember AngularJS Etc.

Page 15: Жидкие и твёрдые интерфейсы

Backbone.js + Require.js =

Композитная архитектура от автора Marionette

Сложные view Организация кода по функционалу Cocktail.js “Правило трех”

Page 16: Жидкие и твёрдые интерфейсы

Приложение Aviasales

Page 17: Жидкие и твёрдые интерфейсы

Декомпозиция

Шапка выдачи Выдача Фильтры

Page 18: Жидкие и твёрдые интерфейсы

Декомпозиция

Поиск Список поисков

Page 19: Жидкие и твёрдые интерфейсы

Декомпозиция

Поиск Список поисков

Поисковыйинформер

Поисковаяформа Один поиск

Page 20: Жидкие и твёрдые интерфейсы

Композитная архитектура

Приложение

Поиск

Выдача

Фильтры

Шапка выдачи

Списокпоисков

Поисковыйинформер

Поисковаяформа Один поиск

Page 21: Жидкие и твёрдые интерфейсы

Первый блин: Aviasales Wikimapia Widget

AMD + backbone

2 view

handlebars

Тесты на Jasmine,

TDD с помощью Testem

Page 22: Жидкие и твёрдые интерфейсы

О размерах

Собранное приложение = 190 Кб. JQuery → Zepto (120 Кб.) Handlebars → Handlebars.runtime (+ rake) (92

Кб.) Require.js → Almond (70 Кб.) Gzip (20 Кб.)

Page 23: Жидкие и твёрдые интерфейсы

Итог

Композитная архитектура – лучший способ проектировать UI

Backbone + AMD – одна из лучших связок для разработки UI

Слабая связность великолепна Есть решение лучше