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

1. Страст
Image by Christoffer Johansson : https://flic.kr/p/7UCbZJ

2. Възможности

3. Краен резултат!

4. За да може после да е лесно...
Петър Найденов – софтуер архитект в еКомера

5. Нова платформа?
Защо?

6. Брад Фрост
Video: https://vimeo.com/55076713
Slides: http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design

7. Респонсив е само върха на айсберга

8. Само 10% от
jQuery модулите са
RESPONSIVE
www.unheap.com

9. Media Query за JavaScript?

10. Подредба на код
DOM vs. Обекти

11. Изисквания към код
• Гъвкавост за модифициране
Избягване на функционален callback. Да се избегнат ситуации с ‘callback hell’. Управление,
базирано изцяло на сигнали.
• Хомогенност
Еднотипна структура и управление на обекти. Обща концепция за имена на методи.
• Четимост
Абзаци от логика. Ясно визуално разделение на логически блокове. Визуални патерни.
• Преизползваемост
Абстрактен програмен код. Ясно разделение на програмна логика, селектори и обектно поведение.
• Модулност
Независимост на модулите. Да могат да бъдат включвани или изключвани без това да спира
работата на останалата част на приложението.

12. Управление на риск

13. Още...
• Многослойност
Не е задължително използването на всички елементи на платформата. Заменяемост.
• Лесна теория и бърз старт;
Начален старт в рамките на един ден.
• Бърза интеграция на jQuery модули;
Богата библиотека от поддържани визуални елементи.
• Вградени добри практики за
производителност ( performance );
Автоматизиране на performance практиките.

14. Предизвикателството e
прието!
Image : https://flic.kr/p/cKi7Zd

15. Общ архитектурен модел
Всеки файл от средата за разработка може да контролира
повече от един аспект на крайния продукт.

16. Общ архитектурен модел
• Node.js + Grunt
• Детектор за устройства
• Конфигурация
• Зареждане на ресурси
• CSS
• JavaScript

17. Конфигурация

18. CSS процес
Node.js
+
Grunt
mini
green
maxi
Configuration
CSS-Dev CSS
mobile
smart
tablet
desktop
tablet HQ
Теми

19. Архитектура на JS приложения
Backbone
модел
JS
обект
събитиен
пакет
class инстанция поведение
JS
обект
събитиен
пакет
jQuery модул JS Адаптери
Backbone
модел
адаптор

20. Архитектура на JS приложения

21. Архитектура на JS приложениявходящсигнал
изходящсигнал
Събитиен пакет за обекта megaMenu
start
desktop
megaMenu:ON
stop
tablet
megaMenu:OFF
stop
mobile
megaMenu:OFF

22. Архитектура на JS приложения

23. Архитектура на JS приложения

24. Експерименти и резултати
• HTML 5 APIs
• Flexbox модел
• Маркъп техника за съдържание
• CSS транзишъни и анимации
• Разпознаване на устройства
• Polyfills и CDN
• Скорост на jQuery и Backbone събития

25. Експерименти и резултати
URL: http://jsperf.com/events-vs-events2/38

26. Време за демо
Screenshot from game “CRASH TIME 5”.
URL: http://megagames.com/demos/crash-time-5-undercover-demo

27. Ползи
• Скорост на изпълнение
• Адаптив + респонсив
• Работещи перформанс практики
• Обновяване на библиотеки, без промяна на
код
• Сорс код сигурност

28. Въпроси?
?

29. google.com/+PeterNaydenov
Петър Найденов
Фронт-енд архитект в еКомера
@PeterNaydenov
peter.naydenov@ecommera.co.uk
bg.linkedin.com/in/peternaydenov/