Sencha Complete: Kharkiv JS #1
-
Upload
illya-klymov -
Category
Technology
-
view
1.463 -
download
3
description
Transcript of 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
Вопросы?