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