Meet Magento - Jak sprzedawac wiecej i wyprzedzic konkurencje
Meet Magento Belarus - Alexander Kaigorodov
-
Upload
amasty -
Category
Presentations & Public Speaking
-
view
251 -
download
0
description
Transcript of Meet Magento Belarus - Alexander Kaigorodov
www.aitoc.com
«Сказ о JavaScript в Magento: недооцененные перспективы использования клиентской стороны
приложения»
Александр Кайгородов
1. Статистика: github
100
619
577
Пользователи
JavaScriptPHPJAVA
8
115
33
Строки кода, млн.
JavaScriptPHPJAVA
50.458
62.854
74.089
Репозитории
JavaScriptPHPJAVA
2. Статистика: SO & HH
707
647
721
StackOverflow, тыс
JavaScriptPHPJAVA
93
99
95
HH: Пользователи, тыс
JavaScriptPHPJAVA
2102
1665
1199
HH: Статьи
JavaScriptPHPJAVA
• Высоконагруженное приложение
• Высокий уровень интерактивности
• Обработка пользовательских данных
• в том числе обработка изображений
• Необходимость написания SaaS’а
• Общий доступ к редактированию документов
• Работа с 3D графикой
3. Предпосылки
4. WebGL: Epic Citadel
5. WebGL: jewlr.com
6. Принцип работы
7. Приложение
Фронтенд
8. Фронтенд: структура
Observers
Model(business logic)
View / Renderers
Data(client side)
Request
Data(server side)
Cache
Controller / Mediator
9. Фронтенд: нюансы
• Инициализация
• загрузка ядра
• минимальный набор данных для начала работы
• Большое количество .js файлов
• AMD
• компиляция
• Web Storage, IndexedDB, App Cache (manifest)
• Асинхронность
• callbacks
• promises
10. Фронтенд: промисы
var callback = function( response ) {// some code here
}request.send( ‘http://www.host.com/getSomeData/’, callback );
cujojs / whenvar promise = request.send( ‘http://www.host.com/getSomeData/’ );promise.then( callback );promise.then( callback2 );promise.then( callback3 );
promise.then( callback1 ) .then( callback2 ) .then( callback3 );
when.all( [ promise1, promise2, promise3 ] ).then( callback );
11. Фронтенд: промисыRequest.prototype = {
_deferred: null ,
send: function( url ) { this._deferred = when.defer(); new Ajax.Request( url, { onSuccess: this.onSuccess.bind( this ) }); return this._deferred.promise; } ,
onSuccess: function( response ) { // Handle the response content… this._deferred.resolve(); } ,
onFailure: function( response ) { // Handle the response content… this._deferred.reject( ‘some error text here’ ); } }
12. Приложение
Бэкенд
13. Бэкенд: данные
• Инициализация
• конфигурация
• загрузка приложения
• стартовый набор данных (если необходим)
• Статические
• HTML ( блоки, шаблоны )
• индексы
• Динамические
• переменные
14. Бэкенд: нюансы
• Максимально простые данные
• Максимум динамических данных
• Кэширование запросов
• Компрессия запросов (zlib)
• Куки как способ общения бэка с фронтом
15. Подводные камни
• Кроссбраузерность
• Асинхронность
• Последовательно VS Параллельно
• Гибкость VS Скорость
• Большие объемы данных и утечки памяти
• Unfriendly URL’s
• History
16. Пример: структура
Mediator Filter «abstract»Layered
Data
Collection Item
Request
Toolbar
Filter Renderer«abstract»
Item
Tool«abstract»
List
List Renderer«abstract»
Cookie
App
всего ~40 js-классов
17. Пример: сложности
• Индексирование каталога
• совместимость с темами и модулями
• отсутствие шаблона продукта для категории
• дублирование контента• сторы
• группы юзеров
• скорость индексирования
• Большие объемы данных
• Повторная загрузка приложения
AITOC, Inc., 2014