Sg conference multiplatform_apps_adam_stanley
-
Upload
nadamstanley -
Category
Technology
-
view
405 -
download
0
description
Transcript of Sg conference multiplatform_apps_adam_stanley
![Page 1: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/1.jpg)
Multiplatform App Development with Web Technologies
Adam Stanley
@n_adam_stanley
04 de julio 2013
Logo de empresa que presenta
![Page 2: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/2.jpg)
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
![Page 3: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/3.jpg)
Web or Native?
USA Today Flixster
![Page 4: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/4.jpg)
Web or Native?
• What matters to users is EXPERIENCE
• What matters to developers is USERS
![Page 5: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/5.jpg)
Why consider Web?
• Cross platform by nature, good for developers
![Page 6: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/6.jpg)
Why consider Web?
Q2 2013 Mobile Developer Report 6,046 Appcelerator Titanium developers
![Page 7: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/7.jpg)
Why consider Web?
• Excellent cross-platform mobile support
• HTML5 Test
– Max 500 + 15 bonus points
http://html5test.com
![Page 8: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/8.jpg)
Current state of HTML5
Camera Accelerometer Storage File API WebGL Magnetometer
Geolocation Web sockets requestAnimationFrame Media queries Notification
![Page 9: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/9.jpg)
Current state of HTML5
• It knows what you want to do next
– Contextual input fields
– Native UI integration
9
![Page 10: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/10.jpg)
Current state of HTML5
• Ringmark test
http://rng.io
BlackBerry 10
![Page 11: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/11.jpg)
CSS3
• Provide visual style to UI
– Enhance default styles
– Define a custom look & feel
.gangnam {
float: left;
font-family: Korean;
}
![Page 12: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/12.jpg)
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
![Page 13: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/13.jpg)
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
![Page 14: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/14.jpg)
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
![Page 15: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/15.jpg)
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
![Page 16: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/16.jpg)
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
![Page 17: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/17.jpg)
JavaScript
• Understand community frameworks
– Macro (jQuery, Sencha)
– Micro (require, backbone)
“Micro” Frameworks
Your Org
HTML5, CSS3
JavaScript
“Macro” Frameworks
![Page 18: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/18.jpg)
JavaScript
• Flotr2.js
– Drawing HTML5 charts & graphics
Image Source: © 2013, Humble Software Development, http://www.humblesoftware.com/flotr2
![Page 19: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/19.jpg)
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!');
});
![Page 20: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/20.jpg)
JavaScript
• Construct2
– Create compelling HTML5 games
– No coding required
http://www.scirra.com/construct2
![Page 21: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/21.jpg)
JavaScript
• Development strategy rule
– Never make assumptions based on a browser
– Use feature detection NOT browser detection
![Page 22: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/22.jpg)
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'
});
![Page 23: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/23.jpg)
Mobile Applications
What if you could build a native application using Web technologies?
JavaScript
HTML5 CSS3
![Page 24: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/24.jpg)
Mobile Applications
• Storefronts
– Powerful digital shopping experience
– Carrier billing
– Credit card, PayPal
![Page 25: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/25.jpg)
Mobile Applications
• Browser vs. Applications distribution model
![Page 26: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/26.jpg)
Mobile Applications
• HTML5 apps that run natively
– SDKs: Cordova, PhoneGap, WebWorks
![Page 27: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/27.jpg)
Mobile Applications
• HTML5 powered by native capabilities
HTML5, CSS3, JavaScript
WebKit engine
Application platforms
Platform Developer APIs
![Page 28: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/28.jpg)
Mobile Applications
• Enriched platform capabilities
blackberry.app
blackberry.event
blackberry.system
blackberry.identity
Native plugin (C/C++)
JavaScript API
![Page 29: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/29.jpg)
Mobile Applications
• Platform Services
– Payment
– Advertising
– Location
– Analytics
– Social
– Scoreloop
![Page 30: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/30.jpg)
Mobile Applications
• Achieve a native “Look & Feel” with Web
– Reminder: It’s about EXPERIENCE
bbUI.js Sencha Touch jQuery Mobile
![Page 31: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/31.jpg)
Performance matters
http://browserdiet.com
![Page 32: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/32.jpg)
Performance matters
• Radio – Bandwidth
– Latency
• CPU – Animation
– Scrolling
• Battery – Events
![Page 33: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/33.jpg)
Performance matters
• Hardware acceleration makes a BIG difference
– CSS (scrolling, transitions)
– Canvas (GUIMark3, WebGL)
http://www.youtube.com/watch?v=OYgtr0-hlBQ
![Page 34: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/34.jpg)
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
![Page 35: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/35.jpg)
Real World applications
35
![Page 36: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/36.jpg)
Real World applications
USA Today Flixster
![Page 37: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/37.jpg)
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
![Page 38: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/38.jpg)
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
![Page 39: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/39.jpg)
Closing thoughts
• Build sophisticated mobile Web apps
2Scoops Filter Mama TuneIn radio Mailonline
![Page 40: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/40.jpg)
Closing thoughts
• A Web app is not a Web site
Packaged Resources
+ User
Experience
Optimize
Performance
Image Source: © Rooster Teeth, http://bit.ly/11jyK3e
![Page 41: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/41.jpg)
Closing thoughts
• Performance must be considered at every step
0 20 40 60 80 100
Performance
Default
Some optimization
Fully optimized
![Page 42: Sg conference multiplatform_apps_adam_stanley](https://reader033.fdocuments.in/reader033/viewer/2022052619/55519361b4c905013a8b462b/html5/thumbnails/42.jpg)
Preguntas
¡Gracias!
Adam Stanley
@n_adam_stanley
Logo de empresa que presenta