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

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 DataServer 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 DataServer 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 SocketsServer 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)
SocketsServer 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)
SocketsServer 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)
SocketsServer 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)
SocketsServer 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)
SocketsServer 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