Enterprise Level Web Applications w/ Ext JS 5

"Enterprise Level Web Applications w/ Ext JS 5" from MIRAE WEB Inc. Developer Conference May 16th 2014 in Seoul, South Korea.

Transcript

1. Copyright Sencha Inc. 2014 Enterprise Level Web Applications MIRAE WEB Inc. Developer Conference
 May 16 2014
2. Copyright Sencha Inc. 2014 Responsive - State-full - Data-Rich Apps: The Next Generation
3. 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
4. SENCHA | 100’s of Screens 100,000’s Lines of Code 1,000,000’s of Data Records 10’s of Developers
5. 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
6. 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
7. 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
8. 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
9. SENCHA | Frameworks to the Rescue
10. SENCHA | much, much, much more… 200k CSS Repositories 1.2M JavaScript Repositories
11. 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?
12. 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?
13. 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
14. 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
15. 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
16. Copyright Sencha Inc. 2014 what’s new? Ext JS 5
17. SENCHA | What’s new? Tablet Support New Themes MVVM and more 2-Way Data Binding
18. 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+
19. 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
20. 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
21. 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
22. Copyright Sencha Inc. 2014 Questions & Answers ૕ޙҗ ׹߸
23. Copyright Sencha Inc. 2014 хࢎ೤פ׮ Thank you Stefan Stölzle Sr. Solutions Engineer, Asia & Pacific | Sencha Inc. @me_stoe