sg conference multiplatform_apps_adam_stanley
DESCRIPTION
Web technologies such as HTML5, Javascript and CSS3 are emerging as an alternative for mobile application development platform, at the same time allow the user to provide great experiences, and are simple to administer and maintain by IT organizations. This session will discuss the status of these technologies and their feasibility for the development of mobile applications. We will also address some recommendations and considerations that must be taken to choose a strategy for developing apps based on web technologies.TRANSCRIPT
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