Sencha FrameworksFrom Desktops to Smartphones

For the legacy and the modern web

Gautam Agrawal Sr. Director, Product Management

gautam@sencha.com

Ext JS History

2

(2007) Ext JS 2.x

Ext JS 3.x (2009)

(2010) Touch 1.x

(2011) Ext JS 4.x Touch 2.x

Ext JS 5.x (2014)

(2015) Ext JS 6.x

!==CoreSenc

ha E

xt JS

Sencha Touch

Classic Toolkit

Modern Toolkit

Views / UI Components

DOM

Class / Loader

Data Package

MVC / MVVM

Utilities

Views / UI Components

DOM

Class / Loader

Data Package

MVC / MVVM

Utilities

Sencha Ext JS 6

Ext JS & Sencha Touch Merged

Sencha Ext JS 6 SDKMost comprehensive Cross-browser, Cross-platform, Cross-device JavaScript framework for enterprise HTML5 application development

Ext JS 6 - Universal AppsSingle Framework

(All Devices – Desktop, Tablets, Smartphones)(All Browsers – Modern & Legacy)

Ext JS 6 - Universal Applications• Desktop, Tablets, Phones• Modern & Legacy Browsers• Device Specific UX

Ext JS 6 Package Structure

modern

core

classic

Ext JS

charts

ux

…

theme-*theme-*theme-*

theme-*theme-*

theme-*

app

resources

sass

model

view

controller

/

src

resources

sass

model

view

controller

classic

modern

classic

app.jsonToolkit-specific content

Shared content

Traditional Apps ! Universal Apps

app

resources

sass

modern

classic

/

app.json

sencha generate app -ext -modern MyApp apps/myapp

Modern or Classic Only

app

resources

sass

classic

modern

/

app.json

sencha generate app -ext -classic MyApp apps/myapp

"builds": { “classic”: { “toolkit”: “classic”, “theme”: “theme-triton” }, “modern”: { “toolkit”: “modern”, “theme”: “theme-triton” }}

Build Profile

Universal Apps – app.json

Ext.beforeLoad = function (tags) { // tags = platform, device, browser attributes var profile = tags.desktop ? 'classic' : 'modern’; // var profile = tags.phone ? 'modern' : 'classic';

var m = /[&?]profile\=([^&]+)/.exec(location.search); if (m && m[1]) { profile = m[1]; }

Ext.manifest = profile; // informs the Microloader

Universal Apps – index.html<script id="microloader" type="text/javascript" src="bootstrap.js"/>

App TemplatesPre-built Universal Apps

(Targeted UX Across Different Form Factors)

Beyond Kitchen Sink• Kitchen Sink• A Collection of Components

• App Templates• Mimic Real World App UX• Built entirely with Ext JS 6• Triton as the Base Theme

• Adaptive Design• Targeted UX (device specific)

Pre-Built App Experiences

Adaptive Design (Targeted UX)

App Template Demo

Modern ThemeFlat UI / Minimalistic Design(Uniform Experience Across All Devices)

Triton• Minimalistic• No Rounded Corners• No Gradients• Nearly borderless

• Font Icons / Web Fonts• Lightweight / Imageless• Resolution Independent• Improved Network Load Time• Easily Modify Color Scheme

Classic Toolkit Themes

Base• Neutral

• Neptune• Neptun

e Touch

Modern Toolkit Themes

Base• Neptune

• Triton

• Device Base• Cupertino

More Power to GridsPivot Grid & Accessibility Improvements

(Analytics Capabilities for Grid, Improved Keyboard Navigation)

Classic Ext JS Grid• What is John's total order?• What are total order amounts

by country?• How did sales team perform in

2015?• …

Sencha Pivot GridLe

ft ax

is

Top axis

Aggregation

Sencha Pivot Grid Features• Sorting• Sub-totals and Grand-totals• Results Filtering• Results Grouping• Drill Down• Much more …

Pivot Grid Configurator

Accessibility Improvements• ARIA Functionality Integrated

into Components• No Need for Special “aria”

package• Screen Reader Support

without Special Inclusions• Grid Actionable Mode• Keyboard Navigation Cells

Productivity ToolsIDE Plugins, Inspector, Fashion(Code Faster, Debug Faster, and Test Faster)

Sencha ToolsFocused on Enterprise App Development

Requirements, and integrating with popular Enterprise IDEs

for increased developer productivity

• Sencha IDE Plugins – Productivity • Sencha Inspector – Debugging • Sencha Cmd – Build Optimization • Sencha Architect – Visual Designer • Sencha Test Studio – Test Automation

Sencha IDE Plugins• No Dependencies• Supports Ext JS 4.2+ & Touch 2.1+ (non-minified versions)• Works with Custom Classes and Overrides• JetBrains (Commercial Versions of IntelliJ, WebStorm, etc.)• Available Now

• Eclipse• Early Access

• Visual Studio• Early Access

Sencha IDE Plugins• Template Creation• Code Generation• Code Completion• Code Inspection• Code Refactoring• Code Navigation• Spell Checking

Sencha Inspector – Debugging• Works on Sencha’s Object

Model, not Rendered DOM

• Inspect Sencha Apps• Component Tree• Data Stores• Layouts• Events• MVC/MVVM• Theme

Sencha Theme Compiler - Fashion• JavaScript-based Compiler for Sencha Themes• Accelerates Building Ext JS 6 Themes• Near Real-time Theming• Eliminates Ruby Dependency

Q & Agautam@sencha.com