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
Top Related