Successfully reported this slideshow.

Adaptive design with Fe Framework (Bulgarian version)

713 views

Published on

Adaptive-responsive design solution. Introduction in Fe framework. Bulgarian version.

Published in: Internet
  • Be the first to comment

Adaptive design with Fe Framework (Bulgarian version)

  1. 1. Страст Image by Christoffer Johansson : https://flic.kr/p/7UCbZJ
  2. 2. Възможности
  3. 3. Краен резултат!
  4. 4. За да може после да е лесно... Петър Найденов – софтуер архитект в еКомера
  5. 5. Нова платформа? Защо?
  6. 6. Брад Фрост Video: https://vimeo.com/55076713 Slides: http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design
  7. 7. Респонсив е само върха на айсберга
  8. 8. Само 10% от jQuery модулите са RESPONSIVE www.unheap.com
  9. 9. Media Query за JavaScript?
  10. 10. Подредба на код DOM vs. Обекти
  11. 11. Изисквания към код • Гъвкавост за модифициране Избягване на функционален callback. Да се избегнат ситуации с ‘callback hell’. Управление, базирано изцяло на сигнали. • Хомогенност Еднотипна структура и управление на обекти. Обща концепция за имена на методи. • Четимост Абзаци от логика. Ясно визуално разделение на логически блокове. Визуални патерни. • Преизползваемост Абстрактен програмен код. Ясно разделение на програмна логика, селектори и обектно поведение. • Модулност Независимост на модулите. Да могат да бъдат включвани или изключвани без това да спира работата на останалата част на приложението.
  12. 12. Управление на риск
  13. 13. Още... • Многослойност Не е задължително използването на всички елементи на платформата. Заменяемост. • Лесна теория и бърз старт; Начален старт в рамките на един ден. • Бърза интеграция на jQuery модули; Богата библиотека от поддържани визуални елементи. • Вградени добри практики за производителност ( performance ); Автоматизиране на performance практиките.
  14. 14. Предизвикателството e прието! Image : https://flic.kr/p/cKi7Zd
  15. 15. Общ архитектурен модел Всеки файл от средата за разработка може да контролира повече от един аспект на крайния продукт.
  16. 16. Общ архитектурен модел • Node.js + Grunt • Детектор за устройства • Конфигурация • Зареждане на ресурси • CSS • JavaScript
  17. 17. Конфигурация
  18. 18. CSS процес Node.js + Grunt mini green maxi Configuration CSS-Dev CSS mobile smart tablet desktop tablet HQ Теми
  19. 19. Архитектура на JS приложения Backbone модел JS обект събитиен пакет class инстанция поведение JS обект събитиен пакет jQuery модул JS Адаптери Backbone модел адаптор
  20. 20. Архитектура на JS приложения
  21. 21. Архитектура на JS приложениявходящсигнал изходящсигнал Събитиен пакет за обекта megaMenu start desktop megaMenu:ON stop tablet megaMenu:OFF stop mobile megaMenu:OFF
  22. 22. Архитектура на JS приложения
  23. 23. Архитектура на JS приложения
  24. 24. Експерименти и резултати • HTML 5 APIs • Flexbox модел • Маркъп техника за съдържание • CSS транзишъни и анимации • Разпознаване на устройства • Polyfills и CDN • Скорост на jQuery и Backbone събития
  25. 25. Експерименти и резултати URL: http://jsperf.com/events-vs-events2/38
  26. 26. Време за демо Screenshot from game “CRASH TIME 5”. URL: http://megagames.com/demos/crash-time-5-undercover-demo
  27. 27. Ползи • Скорост на изпълнение • Адаптив + респонсив • Работещи перформанс практики • Обновяване на библиотеки, без промяна на код • Сорс код сигурност
  28. 28. Въпроси? ?
  29. 29. google.com/+PeterNaydenov Петър Найденов Фронт-енд архитект в еКомера @PeterNaydenov peter.naydenov@ecommera.co.uk bg.linkedin.com/in/peternaydenov/

×