An overview of Sencha products and their problems for development (Russian)

1. Rule them all: Sencha Complete
Illya Klymov
Globalcode – Open4education

2. Кто я?
{
name : "Illya Klymov",
company: "WookieeLabs",
iam: "http://cv.xanf.me",
social : {
twitter: {}.undefined,
mail : "xanf@xanf.me",
juick : “http://juick.com/xanf"
}
} Globalcode – Open4education

3. О чем мы будем говорить?
Как Sencha делает жизнь JS-разработчика
легче?
Sencha на каждой платформе: существующие
проблемы, решения, риски
Пишем на Sencha правильно: как не допустить
те ошибки, что делал я 
Счастливая жизнь с Sencha
Globalcode – Open4education

4. Как все начиналось?
Хочу платформу для LiveChat
Чтобы была админка, биллинг,
виджеты и т.д.
 Ок. Воспользуемся:
-$
- Backbone
- CommonJS / RequireJS
- Twitter Bootstrap
- Templating engine?
Globalcode – Open4education

5. Прошло две недели…
Отлично, а еще нам нужно
будет мобильное приложение
для iOS и Android.
 Хорошо. Ведь у нас есть:
- JQuery Mobile (или нет?)
- Responsive Design?
- Phonegap / Appcelerator ?
Globalcode – Open4education

6. Проект развивается…
А для операторов моего колл-
центра важно, чтобы это было
десктоп-приложение, а не веб
 А раньше нельзя было
сказать? Ок, прийдется
использовать app.js
Globalcode – Open4education

7. Конечный итог
Globalcode – Open4education

8. Общий итог
Globalcode – Open4education

9. Просто добавьте немного Sencha
=
Globalcode – Open4education

10. Продукты Sencha
ExtJS – платформа для desktop browsers
Touch 2 – mobile browsers
Charts – кросс-платформенные графики
Architect – визуальное создание приложений
IO – Cloud-based платформа для мобильных
приложений (messages / resources / images /
etc.)
И то, что есть, но никогда не использовалось:
Sencha GXT (</3 Java), Sencha Animator
Globalcode – Open4education

11. Вспомогательные утилиты
S(T)Build – тулчейн для сборки
Целевые платформы:
ExtJS:
Windows
Linux
Mac
Sencha Touch 2:
Android
iOS
Blackberry
Globalcode – Open4education

12. Вспомогательные утилиты
Sencha CMD
Написана на Java (2 версия – на node.js)
YUI compressor
Генератор моделей, вьюшек, контроллеров и т.д.
PhantomJS (управление зависимостями)
Разные билды
Development (без сжатия, без постобработки)
Production (сжатие, инкрементальные апдейты с
использованием Local Cache)
Package (для упаковки с помощю STBuild либо Phonegap)
Globalcode – Open4education

13. Ext.Core: Я построю свое ООП!
Ext.create('Computer', {
extend: 'Calculator',
overrides: 'ZXSpectrum',
statics: {
instanceCount: 0,
factory: function(brand) {
// 'this' in static methods refer to the class itself
return new this({brand: brand});
}
},
config: { brand: null },
constructor: function(config) {
this.initConfig(config);
this.self.instanceCount++;
this.callParent(arguments); }
}
);
var dellComputer = Computer.factory('Dell'); var appleComputer = Computer.factory('Mac');
Globalcode – Open4education

14. И менеджер зависимостей
тоже свой
Globalcode – Open4education

15. Строгое MVC и отличный Data Package
Globalcode – Open4education

16. Sencha Architect 2
Globalcode – Open4education

17. Инструментарий отладки: Illuminations
Globalcode – Open4education

18. Мобильная платформа: + профили
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
views: ['SpecialView'],
controllers: ['Main'],
models: ['MyApp.model.SuperUser']
},
isActive: function() { return Ext.os.is.Tablet; }
});
Globalcode – Open4education

19. Процент повторного использования кода
82%*
Globalcode – Open4education

20. Синдром NIH внутри команды
ExtJS 4 Sencha Touch 2
Ext.define('MyApp.Panel', { Ext.define('MyApp.Panel', {
extend: 'Ext.Panel.Panel', extend: 'Ext.Panel.Panel',
config: { items: […],
items: […], title: ‘Some panel’,
title: ‘Some panel’, …
… });
},
});
Globalcode – Open4education

21. Синдром NIH внутри команды
ExtJS 4 Sencha Touch 2
Ext.define('MyApp.Controller', { Ext.define('MyApp.Controller', {
extend: 'Ext.app.Controller', extend: 'Ext.app.Controller',
onLaunch: function (…) { launch: function (…) {
//some code //some code
}); });
Globalcode – Open4education

22. SCL – Sencha Compatibility Layer
Обеспечивает на 73% совместимость
Model/Store/Controller между ExtJS4 и
Sencha Touch 2
Будет открыт в opensource, как
только код будет избавлен от
большинства FIXME
Будет не нужен в ExtJS5 / Sencha
Touch 3 (если не наступит конец
света) Globalcode – Open4education

23. Темы оформления
Globalcode – Open4education

24. Темы оформления
Globalcode – Open4education

25. Проблемы на мобильных
платформах
Android – доставайте бубен для 2.х
Android – пока не поддерживаются
PUSH уведомления
Требует трюков для сборки Sencha
Touch 2 проекта, использующего
Phonegap функции
Globalcode – Open4education

26. Поддержка удивляет
Здравствуйте, мы нашли баг в FocusManager
(…пропущена страница описания бага…)
Bot: Great news, seems this bug was fixed as
SENCHA-7654 for ExtJS 4.2.0
Классно, где сказать 4.2.0. Мне в клиент
портале доступна только 4.1.3?
4.2.0. будет доступна клиентам в течении
ближайших двух месяцев. Даты релиза у нас
пока нет.
Globalcode – Open4education

27. Очень личное
# sencha app package –target
android
> STBuild is not implemented on
linux
Globalcode – Open4education

28. За кадром
Node.js, MongoDB + ExtJS / Sencha Touch 2 –
автогенерация Mongoose моделей на основании
клиентов
Чистим DOM – убрать все лишнее
Stay tuned for Kharkiv JS #2
Globalcode – Open4education

29. Вопросы?
Globalcode – Open4education