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.
«Жидкое» приложениеПоисковая форма
«Жидкое» приложениеПоискПоисковая формаВыдачаВыдача
«Жидкое» приложениеПоискПоисковая формаВыдачаБилетФильтры
«Жидкое» приложениеПоискПоисковая формаСостоянияИсторияВыдачаБилетФильтрыФорма фидбека
«Жидкое» приложениеПоискПоисковая формаСостоянияИсторияВыдачаБилетФильтрыФорма фидбекаКартаАгенства
Страдания и больНепредсказуемая инициализацияСамопальный AMD, несовместимый с AMDОтсутствие тестовОшибка в логике прив...
... нарушению принциповразработки ПОУправление сложностью.Наличие метафор.Наличие хороших абстракций.Почему бы не взять...
Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJfomerApprise
Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJformerHyjack SelectjQuery SparklinesApprise...
Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJformerHyjack SelectjQuery SparklinesasmSele...
Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJformerHyjack SelectjQuery SparklinesasmSele...
Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJformerHyjack SelectjQuery SparklinesasmSele...
Куда идти?Google Closure LibraryBackbone (+ require.js)EmberAngularJSEtc.
Backbone.js + Require.js =Композитная архитектура от автораMarionetteСложные viewОрганизация кода по функционалуCockta...
Приложение Aviasales
ДекомпозицияШапка выдачи Выдача Фильтры
ДекомпозицияПоиск Список поисков
ДекомпозицияПоиск Список поисковПоисковыйинформерПоисковаяформаОдин поиск
Композитная архитектураПриложениеПоискВыдачаФильтрыШапка выдачиСписокпоисковПоисковыйинформерПоисковаяформаОдин поиск
Первый блин: AviasalesWikimapia Widget AMD + backbone 2 view handlebars Тесты на Jasmine, TDD с помощью Testem
О размерахСобранное приложение = 190 Кб.JQuery → Zepto (120 Кб.)Handlebars → Handlebars.runtime (+ rake) (92Кб.)Requir...
ИтогКомпозитная архитектура – лучший способпроектировать UIBackbone + AMD – одна из лучших связокдля разработки UIСлаба...
Жидкие и твёрдые интерфейсы
Nächste SlideShare
Wird geladen in …5
×

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

История о том, как развивалась поисковая выдача Aviasales.ru, о том, как устаревали некоторые решения и как они были заменены на новые.

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

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

  1. 1. «Жидкое» приложениеПоисковая форма
  2. 2. «Жидкое» приложениеПоискПоисковая формаВыдачаВыдача
  3. 3. «Жидкое» приложениеПоискПоисковая формаВыдачаБилетФильтры
  4. 4. «Жидкое» приложениеПоискПоисковая формаСостоянияИсторияВыдачаБилетФильтрыФорма фидбека
  5. 5. «Жидкое» приложениеПоискПоисковая формаСостоянияИсторияВыдачаБилетФильтрыФорма фидбекаКартаАгенства
  6. 6. Страдания и больНепредсказуемая инициализацияСамопальный AMD, несовместимый с AMDОтсутствие тестовОшибка в логике приводит к ...
  7. 7. ... нарушению принциповразработки ПОУправление сложностью.Наличие метафор.Наличие хороших абстракций.Почему бы не взять готовые jquery-плагины?Можно взять, но для этого нам понадобятся:
  8. 8. Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJfomerApprise
  9. 9. Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJformerHyjack SelectjQuery SparklinesApprisesafeSubmit PluginJratingInputNotesGmapJquery UI datepickerTitle Alert
  10. 10. Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJformerHyjack SelectjQuery SparklinesasmSelect jQuery PluginjQuery Plugin BoilerplatejQuery Floater PluginjQuery Queue pluginAppriseFollow & Tweet WidgetjQuery Corner GalleryInputNotesGmapJquery UI datepickerTitle AlertFix Scrollbar HeightBetter Check Boxes with jQuery and CSS
  11. 11. Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJformerHyjack SelectjQuery SparklinesasmSelect jQuery PluginjQuery Plugin BoilerplatejQuery Floater PluginjQuery Queue pluginAppriseJquery-toastmessage-pluginWebsanova Color PickersafeSubmit PluginJratingjQuery Opineo PluginFollow & Tweet WidgetjQuery Corner GalleryInputNotesGmapPicNet Table FilterJquery UI datepickerActivity IndicatorTitle AlertFix Scrollbar HeightBetter Check Boxes with jQuery and CSSBetterTooltip
  12. 12. Острый канцелярский нож, двепластиковые бутылки, клейкаялента и:JQueryjQueryUIJformerHyjack SelectjQuery SparklinesasmSelect jQuery PluginjQuery Plugin BoilerplatejQuery Floater PluginjQuery Queue pluginAppriseJquery-toastmessage-pluginWebsanova Color PickersafeSubmit PluginJratingjQuery Opineo PluginFollow & Tweet WidgetjQuery Corner GalleryInputNotesGmapPicNet Table FilterJquery UI datepickerActivity IndicatorTitle AlertFix Scrollbar HeightBetter Check Boxes with jQuery and CSSBetterTooltip
  13. 13. Куда идти?Google Closure LibraryBackbone (+ require.js)EmberAngularJSEtc.
  14. 14. Backbone.js + Require.js =Композитная архитектура от автораMarionetteСложные viewОрганизация кода по функционалуCocktail.js“Правило трех”
  15. 15. Приложение Aviasales
  16. 16. ДекомпозицияШапка выдачи Выдача Фильтры
  17. 17. ДекомпозицияПоиск Список поисков
  18. 18. ДекомпозицияПоиск Список поисковПоисковыйинформерПоисковаяформаОдин поиск
  19. 19. Композитная архитектураПриложениеПоискВыдачаФильтрыШапка выдачиСписокпоисковПоисковыйинформерПоисковаяформаОдин поиск
  20. 20. Первый блин: AviasalesWikimapia Widget AMD + backbone 2 view handlebars Тесты на Jasmine, TDD с помощью Testem
  21. 21. О размерахСобранное приложение = 190 Кб.JQuery → Zepto (120 Кб.)Handlebars → Handlebars.runtime (+ rake) (92Кб.)Require.js → Almond (70 Кб.)Gzip (20 Кб.)
  22. 22. ИтогКомпозитная архитектура – лучший способпроектировать UIBackbone + AMD – одна из лучших связокдля разработки UIСлабая связность великолепнаЕсть решение лучше

×