Embed Size (px)
Citation preview
James Pearce Director, Developer Relations @ jamespearce [email protected]
Sencha
Create amazing apps built on web standards
Web FrameworksToolsLabs
Services
Frameworks
Sencha Touch
Ext JS
Ext GWT
Ext Core
Ext JS
http://www.sencha.com/products/extjs/examples/
Ext JS 4
http://dev.sencha.com/deploy/ChartsDemo/
Ext GWT
http://www.sencha.com/products/extgwt/examples/
+
Ext Core
http://www.sencha.com/products/extcore/MIT
Tools
Ext Designer
Sencha Animator
Ext Designer
http://www.sencha.com/products/designer/
Sencha Animator
http://www.sencha.com/products/animator/demos/
Labs
jQTouch
Raphaël
Connect
InfoVis
PhiloGL
Android tools
http://www.sencha.com/company/
Building Cross-Platform Mobile Web Apps
with
CSSHTML JS
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
2008
We must have aniPhone App!
2009
We must have anAndroid App!
2010
We must have aniPad App!
2011
We must have a...
omfg
PalmMicrosoft
Apple
Android
RIM RIMAndroidAppleMicrosoftPalm
Top U.S. Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010
Java
J2ME
Air
C++
C#
Obj-C
JS
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
Cross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
The Mobile Web
ApplicationsDocuments
Programmatic DOMDeclarative HTML
APIsThemes
ArgumentsURLs
SynchronizationRequest/Response
Thick clientThin client
The Web is Evolving...
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
A New Mobile App Stack
Javascript
Semantic HTML
CSS Styling & Layout
WebFonts Video Audio Graphics
Worker Parallel
Processing
File SystemsDBs
App Cache
x-AppMessaging
Device Access
Camera
Location
Contacts
SMS
Orientation
Gyro
Server & Services
HTTP
AJAX
Events
Sockets
SSL
More...
Rich Media & StylingFull Resource Access
Parallel ProcessingInter-App Communication
Full Offline Capability COMPLETE MODERN APP PLATFORM
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
WebKit FOEs
HTML5 SupportIE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb
@font-faceCanvasHTML5 Audio & Videorgba(), hsla()border-image:border-radius:box-shadow:text-shadow:opacity:Multiple backgroundsFlexible Box ModelCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS TransitionsGeolocation APIlocal/sessionStorageSVG/SVG ClippingSMILInline SVGDrag and DrophashchangeX-window MessagingHistory ManagementapplicationCacheWeb SocketsWeb WorkersWeb SQL DatabaseWebGLIndexedDB
Stay on top of diversityCan I Use?http://caniuse.com
Modernizrhttp://modernizr.com
DeviceAtlashttp://deviceatlas.com
ApplicationsDocuments
Programmatic DOMDeclarative HTML
APIsThemes
ArgumentsURLs
SynchronizationRequest/Response
Thick clientThin client
Sencha Touch support
Layouts & components Theming & icons Orientation & animationTouch events & scrollerData packageMVC framework
What’s in Sencha Touch?
Lists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation
Components
Forms
ScrollingMomentum/bounce physics
Hardware accelerated
Throughout all components: - Lists - Carousel - Pickers
Touch EventsBuilt on native events
Abstracted for performance
Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop
Data PackageModels, Stores, and Proxies - Associations - Validation - Local & server storage
Easily consume web services - JSON/P - XML - YQL
Use CSS3 & SASS - Flexible themes - Highly optimized
Theming
“The Kitchen Sink”
http://sencha.com/x/5e
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
Evolving a site for mobile
HTML, CSS...
Models
Controllers
Views
Evolving a site for mobile
Models
Controllers
Mobile
DesktopSw
itch
er HTML, CSS...
A dedicated mobile app
JSON
Models
Controllers
Mobile
DesktopSw
itch
ers
RESTonce
Thematic consistency
http://mysite.com/posts/123
http://mysite.com/#!/posts/123
The stack of the present
Storage
Business logic
User interfacereq/res
Rendering
A stack of the future
Storage
Security Business logic
User interfacesync
Storage
Thick client, thin server
The shortfall in the cloud
http://mysite.com/myimage.png
http://i.tinysrc.mobi/http://mysite.com/myimage.png
Location Services
Image Serving
AnalyticsAdaptation
Video Serving
Data SyncWeb Fonts
Ad Serving
Commerce$
Network APIs
Do we have time forsome code?
http://senchalearn.github.com/seattlebars/
The cloud at work...
Location API to get lat/long
MongoLabs to get city name
Yelp to get businesses
https://github.com/senchalearn/seattlebars
A platform that allows you to author native applicationswith web technologies and get access to device APIs
http://phonegap.com
PhoneGap
Device Access
FileGeolocationMediaNetworkNotificationStorage
AccelerometerCameraCompassContactsDeviceEvents
http://docs.phonegap.com
building( mobile.web().apps([ html5, css3, js ]).crossPlatform() );
Apps vs Web technologybuilt with
James Pearce Director, Developer Relations @ jamespearce [email protected]
