Build Amazing Apps with Web Standards
53
Build Amazing Apps with Web Standards Build Amazing Apps with Web Standards Mobile HTML5 Mobile HTML5 Applications Applications In Hours, Not Days. In Hours, Not Days.
description
Mobile HTML5 Applications In Hours, Not Days. Build Amazing Apps with Web Standards. Aditya Bansod VP, Product Marketing @adityabansod [email protected]. Mobile app development is hard. The Native Route. A badge for all these ways the web is changing. - PowerPoint PPT Presentation
Transcript of Build Amazing Apps with Web Standards
Build Amazing Apps with Web StandardsBuild Amazing Apps with Web Standards
Mobile HTML5 Mobile HTML5 Applications Applications In Hours, Not Days.In Hours, Not Days.
Aditya BansodAditya BansodVP, Product MarketingVP, Product Marketing
@adityabansod @adityabansod
Mobile appMobile appdevelopment is harddevelopment is hard
The Native RouteThe Native Route
A badge for all these waysthe web is changing
Top US Smartphone PlatformsAugust 2011, comScore MobiLens
Native programming languages you’ll need
US Smartphones, August 2011
Browser platforms to targetUS Smartphones, August 2011
But at least we are using
one language,one markup,
one style system
One Stack
Workers & Parallel
Processing
File Systems
DatabasesApp Caches
JavaScript
Semantic HTML
CSS Styling & Layout
WebFont
Video Audio Graphics
Cross-AppMessaging
Camera
Location
Contacts
SMS
Orientation
Gyro
HTTP
AJAX
Events
Sockets
SSL
(all the elements of a modern application platform)
IE Chrome Safari Firefox iOS BB10 Android@font-face
CanvasHTML5 Audio & Video
rgba(), hsla()border-image:border-radius:
box-shadow:text-shadow:
opacity:Multiple backgrounds
Flexible Box ModelCSS Animations
CSS ColumnsCSS Gradients
CSS ReflectionsCSS 2D TransformsCSS 3D Transforms
CSS TransitionsGeolocation API
local/sessionStorageSVG/SVG Clipping
SMILInline SVG
Drag and Drophashchange
X-window MessagingHistory Management
applicationCacheWeb SocketsWeb Workers
Web SQL DatabaseWebGL
IndexedDB
Stay on top of diversity
Can I Use?http://caniuse.com
Modernizrhttp://modernizr.com
DeviceAtlashttp://deviceatlas.com
Capabilities & specifications
Support 100%
Browsers
Capabilities & specifications
100%
Polyfills Support
Frameworks
Browsers
pages interactive pages interactive apps apps
Build Amazing Apps with Web Build Amazing Apps with Web StandardsStandards
pages interactive pages interactive apps apps
SERVERS & SERVICESSERVERS & SERVICES
MY APPLICATIONMY APPLICATION
Sencha TouchMobile
Sencha TouchMobile
Ext JSDesktopExt JSDesktop
BROWSER ENGINESBROWSER ENGINES
Sencha.ioSencha.ioHTTP/HTTPSHTTP/HTTPS
WebSocket
WebSocket
JavaScriptJavaScriptHTMLHTML CSSCSS
SERVERS & SERVICESSERVERS & SERVICES
MY APPLICATIONMY APPLICATION
Sencha TouchMobile
Sencha TouchMobile
Ext JSDesktopExt JSDesktop
BROWSER ENGINESBROWSER ENGINES
• Desktop Desktop frameworkframework
• Cross-Cross-BrowserModern BrowserModern desktop UIdesktop UI
• Mobile Mobile frameworkframework
• Native Native packagingModerpackagingModern mobile UIn mobile UI
Sencha.ioSencha.ioHTTP/HTTPSHTTP/HTTPS
WebSocket
WebSocket
JavaScriptJavaScriptHTMLHTML CSSCSS
SERVERS & SERVICESSERVERS & SERVICES
Sencha.ioSencha.ioHTTP/HTTPSHTTP/HTTPS
WebSocket
WebSocket
MY APPLICATIONMY APPLICATION
Sencha TouchMobile
Sencha TouchMobile
Ext JSDesktopExt JSDesktop
BROWSER ENGINESBROWSER ENGINES
UI: Controls + ContainersUI: Controls + Containers
Foundation: OOP + MVC + LibraryFoundation: OOP + MVC + Library
Data: Models + Stores + ConnectorsData: Models + Stores + Connectors
JavaScriptJavaScriptHTMLHTML CSSCSS
Sencha Touch 2Sencha Touch 2
A JavaScript framework for building rich mobile apps with web standardsA JavaScript framework for building rich mobile apps with web standards
QuickTime™ and aH.264 decompressor
are needed to see this picture.
Sencha BasicsSencha Basics
Class SystemClass System
PackagesInheritanceScope ManagementClass LoadingMix-ins
Ext.create( ‘class_name’, { } );
Ext.define( ‘class_name’, { } );
Class SystemClass System
ClassesClasses
ClassesClasses
ClassesClasses
MVC
xtypextype
xtemplatextemplate
UIUI
Touch Components
Ext JS Components
““ ””I want to go I want to go
fast...fast...
DesignDesign DeveloDevelopp
DeployDeploy
DEVELOPMENT WORKFLOW
Ext Designer 1.2Ext Designer 1.2
Ext DesignerExt Designer
• Ext JS interface Ext JS interface builderSupport for Ext JS builderSupport for Ext JS ChartsCode generation for ChartsCode generation for complex UI layoutsJSON/XML complex UI layoutsJSON/XML data connectivitydata connectivity
• Export projects and codeExport projects and code
DesignDesign DeveloDevelopp
DeployDeploySencha Architect 2Sencha Architect 2
Sencha Architect 2Sencha Architect 2
• Everything from Ext Everything from Ext Designer 1.2Designer 1.2++
• Sencha Touch 2Code Sencha Touch 2Code EditingEditing
• MVCNative DeploymentMVCNative Deployment
Let’s take a closer Let’s take a closer looklook
Architect’s workspace
Application ToolbarApplication Toolbar
Project InspectorProject Inspector
Design CanvasDesign Canvas
ToolboxToolbox
ConfigurationConfiguration
Code EditorCode Editor
Wear your helmets for the live Wear your helmets for the live demo!demo!
Aditya BansodAditya BansodVP, Product MarketingVP, Product Marketing @ @[email protected]
