[Sencha 엔터프라이즈 웹애플리케이션 세미나] Enterprise Level Web Application w_ Ext JS 5

1,164 views
1,052 views

Published on

[Sencha 엔터프라이즈 웹애플리케이션 세미나] Enterprise Level Web Application w_ Ext JS 5

Published in: Software, Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,164
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

[Sencha 엔터프라이즈 웹애플리케이션 세미나] Enterprise Level Web Application w_ Ext JS 5

  1. 1. Copyright Sencha Inc. 2014 Enterprise Level Web Applications MIRAE WEB Inc. Developer Conference
 May 16 2014
  2. 2. Copyright Sencha Inc. 2014 Responsive - State-full - Data-Rich Apps: The Next Generation
  3. 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. 4. SENCHA | 100’s of Screens 100,000’s Lines of Code 1,000,000’s of Data Records 10’s of Developers
  5. 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. 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 DataServer Method Invocation Server Notifications Framework Geography
  7. 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 DataServer Method Invocation Server Notifications
  8. 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 SocketsServer Method Invocation Notifications
  9. 9. SENCHA | Frameworks to the Rescue
  10. 10. SENCHA | much, much, much more… 200k CSS Repositories 1.2M JavaScript Repositories
  11. 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. 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. 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) SocketsServer Method Invocation Server Notifications
  14. 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) SocketsServer Method Invocation Server Notifications
  15. 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) SocketsServer Method Invocation Server Notifications
  16. 16. Copyright Sencha Inc. 2014 what’s new? Ext JS 5
  17. 17. SENCHA | What’s new? Tablet Support New Themes MVVM and more 2-Way Data Binding
  18. 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. 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. 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) SocketsServer Method Invocation Server Notifications
  21. 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) SocketsServer Method Invocation Server Notifications
  22. 22. Copyright Sencha Inc. 2014 Questions & Answers 질문과 답변
  23. 23. Copyright Sencha Inc. 2014 감사합니다 Thank you Stefan Stölzle Sr. Solutions Engineer, Asia & Pacific | Sencha Inc. @me_stoe

×