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