Copyright Sencha Inc. 2014

Enterprise Level Web ApplicationsMIRAE WEB Inc. Developer Conference

May 16 2014

Copyright Sencha Inc. 2014

Responsive - State-full - Data-Rich

Apps: The Next Generation

SENCHA | The Evolution

YesterdayPage Display

Integration

Data

Logic & State

Page Generation

Browser

App Server

Today

Integration

Data

Logic & State

Interface Mgt

User Interface

APIs

Native &

HTML5

Cloud

SENCHA |

100’s of Screens

100,000’s Lines of Code

1,000,000’s of Data Records

10’s of Developers

SENCHA | How Are We Going To...

Then scale this out across our teams & apps?

• Dynamically lay out screen elements in response to different screen sizes and resizes • Detect and respond to touch gestures beyond simple taps • Swap in local language strings, handle RTL languages and keep everything accessible • Animate content and more...

View System

• Create appealing themes and styles for interactive elements • Present complex data using structured presentation elements like grids and charts • Create a standard visual vocabulary across apps • and more...

Interface Elements

• Update the screen when data changes and vice versa • Remember application states to enable undo/redo as well as navigation • Search, sort, filter, group and validate data • and more...

Logic & Data

• Handle asynchronous calls to the server-side • Parse and convert serialized data • Call out to server-side code • and more...

Server i/o

SENCHA |

Rendering, DOM, fonts, parallelism, security, media decode, sensors, printing, network i/o...

View System

Interface Elements

Logic & Data

Server i/o

Base Services

Basic Widgets (buttons, bars, text fields...)

Containers & Windows (panels, cards, modals...) Themes

Compound Widgets (trees, grids, gauges...)

Visualizations (charts,infographics)

Styles

Layout Manager (absolute, flex...)

Templating (iterations, conditionals…)

Visual Effects (animations, filters...)

Accessibility (focus manager, ARIA...)

Drawing (vector, bitmap...)

Localization (RTL, locale libraries)

Interactions (gestures, drag & drop)

Theming (computed styles)

State Manager (history, undo, routes...)

Modularity (components, modules )

Data Binding (1-way, 2-way)

Testing (IOC, test hooks)

Data Objects (queues, hashtables...)

Persistent Data (cache & sync)

Data Models & Stores (group, sort, validate)

Multi-Media (3D, Audio, Video)

Server Calls (asynch, conversion) 2-Way DataServer Method Invocation Server

Notifications

Framework Geography

SENCHA | Pre-HTML5 Web

Rendering, DOM, fonts, parallelism, security, media decode, sensors, printing, network i/o...

Base Services

Interface Elements

Basic Widgets (buttons, bars, text fields...)

Containers & Windows (panels, cards, modals...) Themes

Compound Widgets (trees, grids, gauges...)

Visualizations (charts,infographics)

Styles

View System

Layout Manager (absolute, flex...)

Templating (iterations, conditionals…)

Visual Effects (animations, filters...)

Accessibility (focus manager, ARIA...)

Drawing (vector, bitmap...)

Localization (RTL, locale libraries)

Interactions (gestures, drag & drop)

Theming (computed styles)

Logic & Data

Server i/o

State Manager (history, undo, routes...)

Modularity (components, modules )

Data Binding (1-way, 2-way)

Testing (IOC, test hooks)

Data Objects (queues, hashtables...)

Persistent Data (cache & sync)

Data Models & Stores (group, sort, validate)

Multi-Media (3D, Audio, Video)

Server Calls (asynch, conversion) 2-Way DataServer Method Invocation Server

Notifications

SENCHA | Cross Browser

Rendering, DOM, fonts, parallelism, security, media decode, sensors, printing, network i/o...

Base Services

Interface Elements

Range, Color Picker, Date/Time, Progress, Tel

Containers & Windows (panels, cards, modals...) Themes

Compound Widgets (trees, grids, gauges...)

Visualizations (charts,infographics)

Gradients, Border Radius

View System

Flexbox, MultiCol

Templating (iterations, conditionals…) Animations & transitions, filters WAI-ARIA

SVG, Canvas

Localization (RTL, locale libraries)

Drag & Drop Theming (computed styles)

Logic & Data

Server i/o

History Push State Modularity (components, modules )

Data Binding (1-way, 2-way) Web Timing API

Data Objects (queues, hashtables...)

Local Storage, Indexed DB, app-cache

Data Models & Stores (group, sort, validate) Video, audio, WebGL

Server Calls (asynch, conversion) Web SocketsServer Method Invocation Notifications

SENCHA | Frameworks to the Rescue

SENCHA | much, much, much more…

200k CSS Repositories1.2M JavaScript Repositories

SENCHA | Bad Questions

What’s the best framework? What’s the best library? Should I use bootstrap or AngularJS? Should I use d3 or AngularJS?

SENCHA | Good Question

Given the kinds of app experiences I want to build…

and the language and skills of my development team…

and my apps’ maintenance lifetime…

and the browsers I need to support…

and the size of my development teams…

and [your additional requirements here]

…

What is the best framework/library for this app, for my app portfolio, and for my organisation?

SENCHA | Framework Geography

Rendering, DOM, fonts, parallelism, security, media decode, sensors, printing, network i/o...

Base Services

Interface Elements

Basic Widgets (buttons, bars, text fields...)

Containers & Windows (panels, cards, modals...) Themes

Compound Widgets (trees, grids, gauges...)

Visualizations (charts,infographics)

Styles

View System

Layout Manager (absolute, flex...)

Templating (iterations, conditionals…)

Visual Effects (animations, filters...)

Accessibility (focus manager, ARIA...)

Drawing (vector, bitmap...)

Localization (RTL, locale libraries)

Interactions (gestures, drag & drop)

Theming (computed styles)

Logic & Data

Server i/o

State Manager (history, undo, routes...)

Modularity (components, modules )

Data Binding (1-way, 2-way)

Testing (IOC, test hooks)

Data Objects (queues, hashtables...)

Persistent Data (cache & sync)

Data Models & Stores (group, sort, validate)

Multi-Media (3D, Audio, Video)

Server Calls (asynch, conversion) SocketsServer Method Invocation Server

Notifications

SENCHA | AngularJS

Rendering, DOM, fonts, parallelism, security, media decode, sensors, printing, network i/o...

Base Services

Interface Elements

Basic Widgets (buttons, bars, text fields...)

Containers & Windows (panels, cards, modals...) Themes

Compound Widgets (trees, grids, gauges...)

Visualizations (charts,infographics)

Styles

View System

Layout Manager (absolute, flex...)

Templating (iterations, conditionals…)

Visual Effects (animations, filters...)

Accessibility (focus manager, ARIA...)

Drawing (vector, bitmap...)

Localization (RTL, locale libraries)

Interactions (gestures, drag & drop)

Theming (computed styles)

Logic & Data

Server i/o

State Manager (history, undo, routes...)

Modularity (components, modules )

Data Binding (1-way, 2-way)

Testing (IOC, test hooks)

Data Objects (queues, hashtables...)

Persistent Data (cache & sync)

Data Models & Stores (group, sort, validate)

Multi-Media (3D, Audio, Video)

Server Calls (asynch, conversion) SocketsServer Method Invocation Server

Notifications

SENCHA | jQuery + jQuery UI + plugins…

Rendering, DOM, fonts, parallelism, security, media decode, sensors, printing, network i/o...

Base Services

Interface Elements

Basic Widgets (buttons, bars, text fields...)

Containers & Windows (panels, cards, modals...) Themes

Compound Widgets (trees, grids, gauges...)

Visualizations (charts,infographics)

Styles

View System

Layout Manager (absolute, flex...)

Templating (iterations, conditionals…)

Visual Effects (animations, filters...)

Accessibility (focus manager, ARIA...)

Drawing (vector, bitmap...)

Localization (RTL, locale libraries)

Interactions (gestures, drag & drop)

Theming (computed styles)

Logic & Data

Server i/o

State Manager (history, undo, routes...)

Modularity (components, modules )

Data Binding (1-way, 2-way)

Testing (IOC, test hooks)

Data Objects (queues, hashtables...)

Persistent Data (cache & sync)

Data Models & Stores (group, sort, validate)

Multi-Media (3D, Audio, Video)

XHR (asynch, conversion) SocketsServer Method Invocation Server

Notifications

Copyright Sencha Inc. 2014

what’s new?

Ext JS 5

SENCHA | What’s new?

Tablet Support

New Themes

MVVM

and more

2-Way Data Binding

SENCHA | Supported Browsers

Platform Baseline Browsers

iOS Chrome, Firefox, Safari

MacOS Chrome, Firefox, Safari, Opera

Windows Chrome, Firefox, Opera, IE8, IE9, IE10+

Android Chrome, Android 4.4

Windows Mobile IE10+

SENCHA | References

What’s new in Ext JS 5 http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/whats_new.html

Ext JS 5 Upgrade Guide http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/extjs_upgrade_guide.html

Sencha Cmd 5 Upgrade Guide http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/cmd_upgrade_guide.html

Ext JS Charts Upgrade Guide http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/charts_upgrade_guide.html

SENCHA | Ext JS 5

Rendering, DOM, fonts, parallelism, security, media decode, sensors, printing, network i/o...

Base Services

Interface Elements

Basic Widgets (buttons, bars, text fields...)

Containers & Windows (panels, cards, modals...) Themes

Compound Widgets (trees, grids, gauges...)

Visualizations (charts,infographics)

Styles

View System

Layout Manager (absolute, flex...)

Templating (iterations, conditionals…)

Visual Effects (animations, filters...)

Accessibility (focus manager, ARIA...)

Drawing (vector, bitmap...)

Localization (RTL, locale libraries)

Interactions (gestures, drag & drop)

Theming (computed styles)

Logic & Data

Server i/o

State Manager (history, undo, routes...)

Modularity (components, modules )

Data Binding (1-way, 2-way)

Testing (IOC, test hooks)

Data Objects (queues, hashtables...)

Persistent Data (cache & sync)

Data Models & Stores (group, sort, validate)

Multi-Media (3D, Audio, Video)

Server Calls (asynch, conversion) SocketsServer Method Invocation Server

Notifications

SENCHA | AngularJS + Angular UI + Bootstrap + D3 + underscore + plugins…

Rendering, DOM, fonts, parallelism, security, media decode, sensors, printing, network i/o...

Base Services

Interface Elements

Basic Widgets (buttons, bars, text fields...)

Containers & Windows (panels, cards, modals...) Themes

Compound Widgets (trees, grids, gauges...)

Visualizations (charts,infographics)

Styles

View System

Layout Manager (absolute, flex...)

Templating (iterations, conditionals…)

Visual Effects (animations, filters...)

Accessibility (focus manager, ARIA...)

Drawing (vector, bitmap...)

Localization (RTL, locale libraries)

Interactions (gestures, drag & drop)

Theming (computed styles)

Logic & Data

Server i/o

State Manager (history, undo, routes...)

Modularity (components, modules )

Data Binding (1-way, 2-way)

Testing (IOC, test hooks)

Data Objects (queues, hashtables...)

Persistent Data (cache & sync)

Data Models & Stores (group, sort, validate)

Multi-Media (3D, Audio, Video)

Server Calls (asynch, conversion) SocketsServer Method Invocation Server

Notifications

Copyright Sencha Inc. 2014

Questions & Answers

질문과 답변

Copyright Sencha Inc. 2014

감사합니다Thank you

Stefan Stölzle

Sr. Solutions Engineer, Asia & Pacific | Sencha Inc.

@me_stoe