Adaptive design with Fe Framework (Bulgarian version)

Страст

Image by Christoffer Johansson : https://flic.kr/p/7UCbZJ

Възможности

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

За да може после да е лесно...

Петър Найденов – софтуер архитект в еКомера

Нова платформа?

Защо?

Брад Фрост

Video: https://vimeo.com/55076713

Slides: http://www.slideshare.net/bradfrostweb/beyond-media-queries-anatomy-of-an-adaptive-web-design

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

Само 10% от jQuery модулите са RESPONSIVE

www.unheap.com

Media Query за JavaScript?

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

Изисквания към код

• Гъвкавост за модифициранеИзбягване на функционален callback. Да се избегнат ситуации с ‘callback hell’. Управление, базирано изцяло на сигнали.

• ХомогенностЕднотипна структура и управление на обекти. Обща концепция за имена на методи.

• ЧетимостАбзаци от логика. Ясно визуално разделение на логически блокове. Визуални патерни.

• ПреизползваемостАбстрактен програмен код. Ясно разделение на програмна логика, селектори и обектно поведение.

• МодулностНезависимост на модулите. Да могат да бъдат включвани или изключвани без това да спираработата на останалата част на приложението.

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

Още...

• МногослойностНе е задължително използването на всички елементи на платформата. Заменяемост.

• Лесна теория и бърз старт;Начален старт в рамките на един ден.

• Бърза интеграция на jQuery модули;Богата библиотека от поддържани визуални елементи.

• Вградени добри практики за производителност ( performance );Автоматизиране на performance практиките.

Предизвикателството e

прието!

Image : https://flic.kr/p/cKi7Zd

Общ архитектурен модел

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

Общ архитектурен модел

• Node.js + Grunt

• Детектор за устройства

• Конфигурация

• Зареждане на ресурси

• CSS

• JavaScript

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

CSS процес

Node.js

+

Grunt

mini

green

maxi

Configuration

CSS-Dev CSS

mobile

smart

tablet

desktop

tablet HQ

Теми

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

Backbone

модел

JS

обект

събитиен

пакет

class инстанция поведение

JS

обект

събитиен

пакет

jQuery модул JS Адаптери

Backbone

модел

адаптор

Архитектура на JS приложениявходящ

сигнал

изходящ

сигнал

Събитиен пакет за обекта megaMenu

startdesktop

megaMenu:ON

stoptablet

megaMenu:OFF

stopmobile

megaMenu:OFF

Експерименти и резултати

• HTML 5 APIs

• Flexbox модел

• Маркъп техника за съдържание

• CSS транзишъни и анимации

• Разпознаване на устройства

• Polyfills и CDN

• Скорост на jQuery и Backbone събития

Експерименти и резултати

URL: http://jsperf.com/events-vs-events2/38

Време за демо

Screenshot from game “CRASH TIME 5”. URL: http://megagames.com/demos/crash-time-5-undercover-demo

Ползи

• Скорост на изпълнение

• Адаптив + респонсив

• Работещи перформанс практики

• Обновяване на библиотеки, без промяна на код

• Сорс код сигурност

Въпроси?

?

google.com/+PeterNaydenov

Петър НайденовФронт-енд архитект в еКомера

@PeterNaydenov

[email protected]

bg.linkedin.com/in/peternaydenov/

Adaptive design with Fe Framework (Bulgarian version)

Internet

Transcript of Adaptive design with Fe Framework (Bulgarian version)