Copyright Sencha Inc. 2014 Enterprise Level Web Applications MIRAE WEB Inc. Developer Conference
 May 16 2014 

Copyright Sencha Inc. 2014 Responsive - State-full - Data-Rich Apps: The Next Generation 

SENCHA | The Evolution Yesterday Page 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 Data Server 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 Data Server 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 Sockets Server Method Invocation Notifications 

SENCHA | Frameworks to the Rescue 

SENCHA | much, much, much more… 200k CSS Repositories 1.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) Sockets Server 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) Sockets Server 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) Sockets Server 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) Sockets Server 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) Sockets Server 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