Sencha Complete: Kharkiv JS #1

Globalcode – Open4education

Rule them all: Sencha CompleteIllya Klymov

Globalcode – Open4education

Кто я?

{

name : "Illya Klymov",

company: "WookieeLabs",

iam: "http://cv.xanf.me",

social : {

twitter: {}.undefined,

mail : "[email protected]",

juick : “http://juick.com/xanf"

}

}

Globalcode – Open4education

О чем мы будем говорить?

Как Sencha делает жизнь JS-разработчика легче?

Sencha на каждой платформе: существующие

проблемы, решения, риски

Пишем на Sencha правильно: как не допустить те

ошибки, что делал я

Счастливая жизнь с Sencha

Globalcode – Open4education

Как все начиналось?

Хочу платформу для LiveChat Чтобы была админка, биллинг, виджеты и т.д.

Ок. Воспользуемся:- $- Backbone- CommonJS / RequireJS- Twitter Bootstrap- Templating engine?

Globalcode – Open4education

Прошло две недели…

Отлично, а еще нам нужно будет мобильное приложение для iOS и Android.

Хорошо. Ведь у нас есть:- JQuery Mobile (или нет?)- Responsive Design?- Phonegap / Appcelerator ?

Globalcode – Open4education

Проект развивается…

А для операторов моего колл-центра важно, чтобы это было десктоп-приложение, а не веб

А раньше нельзя было сказать? Ок, прийдется использовать app.js

Globalcode – Open4education

Конечный итог

Globalcode – Open4education

Общий итог

Globalcode – Open4education

Просто добавьте немного Sencha

=

Globalcode – Open4education

Продукты 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

Вспомогательные утилитыS(T)Build – тулчейн для сборкиЦелевые платформы:

ExtJS:Windows

Linux

Mac

Sencha Touch 2:Android

iOS

Blackberry

Globalcode – Open4education

Вспомогательные утилитыSencha CMD

Написана на Java (2 версия – на node.js)

YUI compressor

Генератор моделей, вьюшек, контроллеров и т.д.

PhantomJS (управление зависимостями)

Разные билдыDevelopment (без сжатия, без постобработки)

Production (сжатие, инкрементальные апдейты с использованием Local Cache)

Package (для упаковки с помощю STBuild либо Phonegap)

Globalcode – Open4education

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

И менеджер зависимостей тоже свой

Globalcode – Open4education

Строгое MVC и отличный Data Package

Globalcode – Open4education

Sencha Architect 2

Globalcode – Open4education

Инструментарий отладки: Illuminations

Globalcode – Open4education

Мобильная платформа: + профили

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

Процент повторного использования кода

82%*

Globalcode – Open4education

Синдром NIH внутри команды

ExtJS 4

Ext.define('MyApp.Panel', {

extend: 'Ext.Panel.Panel',

config: {

items: […],

title: ‘Some panel’,

…

},

});

Sencha Touch 2

Ext.define('MyApp.Panel', {

extend: 'Ext.Panel.Panel',

items: […],

title: ‘Some panel’,

…

});

Globalcode – Open4education

Синдром NIH внутри команды

ExtJS 4

Ext.define('MyApp.Controller', {

extend: 'Ext.app.Controller',

onLaunch: function (…) {

//some code

});

Sencha Touch 2

Ext.define('MyApp.Controller', {

extend: 'Ext.app.Controller',

launch: function (…) {

//some code

});

Globalcode – Open4education

SCL – Sencha Compatibility Layer

Обеспечивает на 73% совместимость Model/Store/Controller между ExtJS4 и Sencha Touch 2

Будет открыт в opensource, как только код будет избавлен от большинства FIXME

Будет не нужен в ExtJS5 / Sencha Touch 3 (если не наступит конец света)

Globalcode – Open4education

Темы оформления

Globalcode – Open4education

Темы оформления

Globalcode – Open4education

Проблемы на мобильных платформах

Android – доставайте бубен для 2.х

Android – пока не поддерживаются PUSH уведомления

Требует трюков для сборки Sencha Touch 2 проекта, использующего Phonegap функции

Globalcode – Open4education

Поддержка удивляет

Здравствуйте, мы нашли баг в 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

Очень личное

# sencha app package –target android> STBuild is not implemented on linux

Globalcode – Open4education

За кадром

Node.js, MongoDB + ExtJS / Sencha Touch 2 – автогенерация Mongoose моделей на основании клиентов

Чистим DOM – убрать все лишнее

Stay tuned for Kharkiv JS #2

Globalcode – Open4education

Вопросы?