Sg conference multiplatform_apps_adam_stanley
-
Upload
nadamstanley -
Category
Technology
-
view
405 -
download
0
description
Transcript of Sg conference multiplatform_apps_adam_stanley
Multiplatform App Development with Web Technologies
Adam Stanley
@n_adam_stanley
04 de julio 2013
Logo de empresa que presenta
Hola Mundo
• Adam Stanley – Team Lead, BlackBerry Developer Relations
– Likes: ninjas, bacon, JavaScript
– Dislikes: cilantro, styrofoam, JavaScript
– 127.0.0.1 is Waterloo, Ontario, Canada
Web or Native?
USA Today Flixster
Web or Native?
• What matters to users is EXPERIENCE
• What matters to developers is USERS
Why consider Web?
• Cross platform by nature, good for developers
Why consider Web?
Q2 2013 Mobile Developer Report 6,046 Appcelerator Titanium developers
Why consider Web?
• Excellent cross-platform mobile support
• HTML5 Test
– Max 500 + 15 bonus points
http://html5test.com
Current state of HTML5
Camera Accelerometer Storage File API WebGL Magnetometer
Geolocation Web sockets requestAnimationFrame Media queries Notification
Current state of HTML5
• It knows what you want to do next
– Contextual input fields
– Native UI integration
9
Current state of HTML5
• Ringmark test
http://rng.io
BlackBerry 10
CSS3
• Provide visual style to UI
– Enhance default styles
– Define a custom look & feel
.gangnam {
float: left;
font-family: Korean;
}
CSS3
• GPU helps animation & CSS transitions
– Use 3D to enable hardware acceleration
-webkit-transform: translate(100px, 0px);
-webkit-transform: translate3d(100px, 0px, 0px);
More demos http://bit.ly/15h0Xa2
JavaScript
• Functionality for web apps
• A beautiful language
– Standards based
– Cross-platform
– No compilation
– View source
Image Source: ©2008 Doug Crockford, http://shop.oreilly.com/product/9780596517748.do
JavaScript
• It’s also a terrible language
– No OOP
– No standard libraries
– No module system
– Full of surprises
> [] + [] [object Object]
> {} + []
0
> {} + {}
NaN Image Source: © Phillihp Harmon, http://bit.ly/13uHQKM
JavaScript
• Classic developer problem
Image Source: © 2013, Nicholas H. Tollervey, http://ntoll.org/article/pinax-and-lego
So, you want to build something awesome.
Do you build everything yourself?
Image Source: © 2011, CNET http://news.cnet.com/2300-17938_105-10008728-10.html
JavaScript
• Or had the problem already been solved?
– Don’t invent already invented solutions
Image Source: © 2013, Craig Changfoot, http://www.organizedactions.com/?p=1801
JavaScript
• Understand community frameworks
– Macro (jQuery, Sencha)
– Micro (require, backbone)
“Micro” Frameworks
Your Org
HTML5, CSS3
JavaScript
“Macro” Frameworks
JavaScript
• Flotr2.js
– Drawing HTML5 charts & graphics
Image Source: © 2013, Humble Software Development, http://www.humblesoftware.com/flotr2
JavaScript
• Hammer.js
– multi-touch gestures
– Cross-platform support
– Super lightweight (2Kb)
Image Source: © 2013, Jorik Tangelder, http://eightmedia.github.io/hammer.js/
Hammer(el).on("swipeleft", function() {
alert('you swiped left!');
});
JavaScript
• Construct2
– Create compelling HTML5 games
– No coding required
http://www.scirra.com/construct2
JavaScript
• Development strategy rule
– Never make assumptions based on a browser
– Use feature detection NOT browser detection
JavaScript
• Modernizr
– A JavaScript library for feature detection
– HTML5, CSS3
– Write code for all browsers
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
Mobile Applications
What if you could build a native application using Web technologies?
JavaScript
HTML5 CSS3
Mobile Applications
• Storefronts
– Powerful digital shopping experience
– Carrier billing
– Credit card, PayPal
Mobile Applications
• Browser vs. Applications distribution model
Mobile Applications
• HTML5 apps that run natively
– SDKs: Cordova, PhoneGap, WebWorks
Mobile Applications
• HTML5 powered by native capabilities
HTML5, CSS3, JavaScript
WebKit engine
Application platforms
Platform Developer APIs
Mobile Applications
• Enriched platform capabilities
blackberry.app
blackberry.event
blackberry.system
blackberry.identity
Native plugin (C/C++)
JavaScript API
Mobile Applications
• Platform Services
– Payment
– Advertising
– Location
– Analytics
– Social
– Scoreloop
Mobile Applications
• Achieve a native “Look & Feel” with Web
– Reminder: It’s about EXPERIENCE
bbUI.js Sencha Touch jQuery Mobile
Performance matters
http://browserdiet.com
Performance matters
• Radio – Bandwidth
– Latency
• CPU – Animation
– Scrolling
• Battery – Events
Performance matters
• Hardware acceleration makes a BIG difference
– CSS (scrolling, transitions)
– Canvas (GUIMark3, WebGL)
http://www.youtube.com/watch?v=OYgtr0-hlBQ
Real World applications
Sencha HTML5
Facebook Hybrid App
List scrolling
Payload
State Retention
http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story
15 fps 60 fps
20 kb 2 kb
None Full
Real World applications
35
Real World applications
USA Today Flixster
What’s next for HTML5?
• Mobile computing
– More than smartphones
– Think ‘end points’
http://www.youtube.com/watch?v=J0rMb8qtcSs Image Source: ©2013, Crackberry.com, http://bit.ly/11Btbh9
©2013, PostMedia News, http://bit.ly/1cUP3U9
Closing thoughts
• Choose mobile industry leaders
– High HTML5 standards support
– Very active WebKit contributions
– 1st-class packaged Web app support
– Enables native integration
– Push boundaries of web app platform
38
Closing thoughts
• Build sophisticated mobile Web apps
2Scoops Filter Mama TuneIn radio Mailonline
Closing thoughts
• A Web app is not a Web site
Packaged Resources
+ User
Experience
Optimize
Performance
Image Source: © Rooster Teeth, http://bit.ly/11jyK3e
Closing thoughts
• Performance must be considered at every step
0 20 40 60 80 100
Performance
Default
Some optimization
Fully optimized
Preguntas
¡Gracias!
Adam Stanley
@n_adam_stanley
Logo de empresa que presenta