So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Experience Optimization Meetup
Download as PPTX, PDF1 like2,770 views
The document provides guidance and best practices for developing mobile apps. It discusses prioritizing platforms based on usage share, targeting the needs and behaviors of different user groups, and the advantages of native apps over HTML5 for user experience. It also covers tools for testing across browsers and devices, such as Ringmark, Modernizr, and network monitoring with ARO. Thorough testing on real networks is emphasized to ensure apps degrade gracefully on unstable connections.
![@yottaa #WebPerf
Example method in Modernizr
Polyfills are
scripts that
simulate the
behavior of
native API in
older browsers
This method:
Modernizr.load
has been
released
standalone as
yesnope.js
Modernizr.load([
{
// Logical list of things we would normally need
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
// Modernizr.load loads css and javascript by default
nope : ['presentational-polyfill.js', 'presentational.css']
},
// Functional polyfills
{
// This just has to be truthy
test : Modernizr.websockets && window.JSON,
// socket-io.js and json2.js
nope : 'functional-polyfills.js',
// You can also give arrays of resources to load.
both : [ 'app.js', 'extra.js' ],
complete : function () {
// Run this after everything in this group has downloaded
// and executed, as well everything in all previous groups
myApp.init();
}
},
// Run analytics after you've already run the rest of your app.
'post-analytics.js'
]);](https://image.slidesharecdn.com/yottaaugpresentationnativevshtml5mobile-130725132943-phpapp02/85/So-you-want-to-build-a-mobile-app-HTML5-vs-Native-the-Boston-Mobile-Experience-Optimization-Meetup-22-320.jpg)
![@yottaa #WebPerf
Using Modernizr
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.7.1.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);
• Modernizr attempts
to load a script that
requires jQuery
• Immediately after, it
tests to determine
whether the jQuery
object is available
• If not, loads a local
copy of jQuery
WIN: Modernizr.load
handles the execution
order for you.](https://image.slidesharecdn.com/yottaaugpresentationnativevshtml5mobile-130725132943-phpapp02/85/So-you-want-to-build-a-mobile-app-HTML5-vs-Native-the-Boston-Mobile-Experience-Optimization-Meetup-23-320.jpg)
So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Experience Optimization Meetup
- 1. @yottaa #WebPerf So you want to build a mobile app… Brought to you by:
- 2. @yottaa #WebPerf Available info, tooling driven by market http://ti.me/18FeIn4
- 3. @yottaa #WebPerf Prioritize based on volume Share (%) of Smartphone Subscribers January 2013 April 2013 Delta Google 52.3% 52.0% -0.3% Apple 37.8% 39.2% 1.4% BlackBerry 5.9% 5.1% -0.8% Microsoft 3.1% 3.0% -0.1% Symbian 0.5% 0.5% 0.0% http://bit.ly/1bRw6FC
- 4. @yottaa #WebPerf Prioritize further: who are your users? Your momma’s… got game! It’s actually Gen-Xers. Millennials are into fitness & entertainment http://blog.flurry.com/
- 5. @yottaa #WebPerf What do your target users do and use? 80% of mobile interaction is via native apps HTML5 apps are great for: • Productivity • News • Generally - forms http://bit.ly/17G1Ng5
- 6. @yottaa #WebPerf Why are only 6% of apps HTML5? No app store makes it more difficult to monetize Build once, run everywhere translates to optimize everywhere HTML5’s “good enough” experience isn’t always good enough
- 7. @yottaa #WebPerf For LinkedIN it the ecosystem was lacking 2012: HTML5 for efficiency & agility 8-10% Mobile users Apps running out of Memory Lacked testing & profiling 2013: Native for user experience Majority of Traffic from mobile Better features (use HTML5, CSS for email) Apple and Google drive innovation http://bit.ly/15NdyAg
- 8. @yottaa #WebPerf High-level Overview Governing body: W3C • 5 years to ratify… • 200+ browser interpretations More security vulnerabilities • Can’t encrypt cached data • Encrypting data in motion compromises performance
- 9. @yottaa #WebPerf High-level Overview Governing bodies: Apple and Google • At least one release/year • iOS is highly standardized & regulated • More Android variety, but still finite (~30 varieties vs. over 200 for HTML5) Better user experience • Fewer security vulnerabilities • Device-specific functionality is richer
- 10. @yottaa #WebPerf OK, to be fair… http://blog.flurry.com Over the past two years, Android has had 21 updates to their browser.
- 11. @yottaa #WebPerf What do you hold most dear? 1. User experience 2. Performance 3. Monetization 4. X-plat deployment $$ 5. Fragmentation 6. Programming expertise 7. Updates & distribution 8. New innovation timeline 9. Security
- 12. @yottaa #WebPerf A bit of trivia http://bit.ly/15iQlqz STARTUP TIME W/8 TABS AVERAGE STARTUP TIME 40-TAB LOAD (CACHED, HOT) WEBKIT SUNSPIDER JSBENCH FACEBOOK JSGAMEBENCH HARDWARE ACCELERATION PAGE LOAD RELIABILITY OVERALL WINNER
- 13. @yottaa #WebPerf Test…Testing…Testing 1, 2, 3 Question: How do your features Appear to your users? Behave in the wild? Impact the device? Perform across networks?
- 15. @yottaa #WebPerf To Emulate or Simulate? Emulator • Mimics device hardware & software • Android developers tend to complain about performance • Emulates GPU but tends to lag (instructions translated to x86) Simulator • Mimics device software • Apple stresses device testing b/c disk space, CPU & memory speed different • Faster cycle times, but requires recompiling to device http://bit.ly/17G2hTH
- 16. @yottaa #WebPerf How to determine browser features • UA sniffing – Poor choice – detects navigator.userAgent – User agent string may have changed – New browser versions or flavors • Feature detection – HTML5 + CSS3 – JavaScript
- 17. @yottaa #WebPerf rng.io - Ringmark OSS maintained by Facebook @ https://github.com/facebook/rng.io Native UX testing & development Works with existing W3C tests Full list of supported features across browsers: http://bit.ly/1c0jDOj Check whether an API is usable & produces expected, specified output
- 18. @yottaa #WebPerf Grab the brass browser ring Ring 0 State of the world today. Actively used mobile web features. • Application Cache • Canvas • CSS 2.1 • CSS 3D Transforms • CSS3 Animation • CSS3 Background • CSS3 Color • CSS Min, Max • CSS Opacity • CSS3 Text • CSS3 2D Transforms • CSS3 Transitions • CSS3 UI • CSS3 Values • Data URL • Doctype • Geolocation • JSON • Masking Images • Web Messaging • Progress Event • Prompts • Selectors 2 • Video • Viewport • Web Storage Ring 1 Enable 2D game, audio, video, camera Most popular types of mobile apps today. • Audio, Multi-Track • Blob • CSS3 Background, Standard • CSS3 Fonts • CSS3 MediaQueries • CSS Overflow Scrolling • CSS Position Fixed • CSS3 Text, Standard • CSS3 UI, Standard • Device Orientation Event • FileReader • FormData • HTML5 Forms, Inputs • Hashchange • History • Media Capture Input • IndexedDB • Multi Touch Event • Offline Mode • Ring 1 Performance • Touch Event • URL • Web Workers • XHR2 Ring 2 3D games, messaging, video streaming Work in progress. • Animation Timing • Canvas 3D • Canvas 3D, Standard • CSS Unspecified • CSS3 Animation, Standard • CSS3 BorderImage • CSS Element • CSS3 Flexbox • CSS3 Flexbox, Standard • CSS3 Images • CSS3 Images, Standard • CSS Overflow Scrolling, Standard • CSS3 2D Transforms, Standard • CSS3 Transitions, Standard • Custom Data Attributes • Fullscreen • HTML5 Layout & Semantic • Iframe Sandboxing • IndexedDB, Standard • Performance Timing • Network Info • Notifications • Ring 2 Performance • SharedWorkers • SVG • SVG Animation • SVG Inline • Video Tracks • Vibration • Page Visibility • WebRTC (Real time Audio & Video)
- 19. @yottaa #WebPerf How Ringmark works test("postMessage", function() { var postMessage = window.postMessage; assert( !!postMessage, "postMessage supported" ); }); test("onmessage", function() { assert( "onmessage" in window, "onmessage supported" ); }); asyncTest("postMessage/onmessage In Practice", function( async ) { window.onmessage = function( event ) { async.step(function() { assert( true, "onmessage event fired" ); assert( event.data === "This is Ground Control", "message content matched expected" ); async.done(); }); }; window.postMessage( "This is Ground Control", "*" ); });
- 20. @yottaa #WebPerf Lord of the Rings: Dolphin (and BB10) Also: http://www.browserscope.org/?category=ringmark&v=top-m http://www.youtube.com/watch?v=8KAXh81hIwY
- 21. @yottaa #WebPerf Modernizr javascript library For development with HTML5 + CSS3 Ensure support for old browsers Checks for native browser support of new web features Generates custom object to test what you need
- 22. @yottaa #WebPerf Example method in Modernizr Polyfills are scripts that simulate the behavior of native API in older browsers This method: Modernizr.load has been released standalone as yesnope.js Modernizr.load([ { // Logical list of things we would normally need test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients, // Modernizr.load loads css and javascript by default nope : ['presentational-polyfill.js', 'presentational.css'] }, // Functional polyfills { // This just has to be truthy test : Modernizr.websockets && window.JSON, // socket-io.js and json2.js nope : 'functional-polyfills.js', // You can also give arrays of resources to load. both : [ 'app.js', 'extra.js' ], complete : function () { // Run this after everything in this group has downloaded // and executed, as well everything in all previous groups myApp.init(); } }, // Run analytics after you've already run the rest of your app. 'post-analytics.js' ]);
- 23. @yottaa #WebPerf Using Modernizr Modernizr.load([ { load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js', complete: function () { if ( !window.jQuery ) { Modernizr.load('js/libs/jquery-1.7.1.min.js'); } } }, { // This will wait for the fallback to load and // execute if it needs to. load: 'needs-jQuery.js' } ]); • Modernizr attempts to load a script that requires jQuery • Immediately after, it tests to determine whether the jQuery object is available • If not, loads a local copy of jQuery WIN: Modernizr.load handles the execution order for you.
- 24. @yottaa #WebPerf Useful Links The All-In-One Entirely-Not-Alphabetical No- Bullshit Guide to HTML5 Fallbacks (yes, really) http://bit.ly/12griWY Writing Cross-Browser JavaScript Polyfills http://addyosmani.com/blog/writing-polyfills/ Ultimate Guide to Mobile Emulators & Simulators http://www.mobilexweb.com/emulators
- 25. @yottaa #WebPerf Has.js phiggins42./has.js on Github For development with JavaScript Self-contained tests & unified framework Checks for native browser support of JavaScript features Modular/a-la-carte to test only what you need if(has("function- bind")){ // your enviroment has a native Function.prototype.bin d }else{ // you should get a new browser. }
- 27. @yottaa #WebPerf AT&T Application Resource Optimizer • All Platforms – pcap/tcpdump network trace – Wi-Fi Hotspot + Wireshark/NetMon • iOS – Remote Virtual Interface – Uses Instruments to collect pcap over 3G/LTE • Android – Native Collector – Requires root https://github.com/attdevsupport/ARO
- 28. @yottaa #WebPerf Close Connections HttpURLConnection getimagecloseconn = (HttpURLConnection) urln.openConnection(); getimagecloseconn.setRequestProperty("connection", "close"); getimagecloseconn.connect(); String cachecontrol = getimagecloseconn.getHeaderField("Cache- Control"); InputStream isclose = getimagecloseconn.getInputStream(); bitmap = BitmapFactory.decodeStream(isclose); getimagecloseconn.disconnect(); >80% of apps DO NOT close connections!
- 29. @yottaa #WebPerf Cache Your Data • 17% of mobile traffic is duplicate downloads – Reading from local cache is 75-99% faster than downloading from the web – Even when supported, it’s OFF by default!! • Each file uniquely tagged, revalidated for reach request – Requests use the radio, drain the battery – Also add 500-3,000 ms of latency • Carefully assign Max-Age times – App won’t check for the file on server until reached – Retrieval is strictly file processing: up to 98% faster, no radio http://soc.att.com/138bhRJ http://yhoo.it/1c6wcHV
- 30. @yottaa #WebPerf Manage Connections if (Tel.getDataActivity() >0){ if (Tel.getDataActivity() <4){ //ok, we are passed the minimum time to check //and we found network activity- //download the image here using image getter imagegetter(counter, numberofimages); //and show the ad AdRequest adRequest = new AdRequest(); adRequest.addTestDevice(AdRequest.TEST_EMULATOR); adView.loadAd(adRequest); // Initiate a generic request to load it with an ad adView.loadAd(new AdRequest()); Grouping data, ads, analytics can save > 50%
- 31. @yottaa #WebPerf Real Life @yottaa #WebPerf
- 32. @yottaa #WebPerf DIY - Move Yourself • Lose the signal – Find a basement or elevator • Mix it up – Walk in and out of WiFi areas • Have a cuppa – Find slow, saturated WiFi (coffee shop, train) • Shut up and drive – Ride along in a car to swap towers, signals • Paint a picture – Map your findings to understand and prioritize http://bit.ly/14MOmNr
- 34. @yottaa #WebPerf Yottaa Mobile Performance Testing Understand performance across the globe See iOS and Android end user rendering (diffs) Verify graceful degradation across various networks Mobile Monitoring Eliminate downtime, errors Understand site performance & competitive position Prioritize optimization, feature work w/historical analysis Mobile Optimization Overcome slow / variable networks with adaptive infrastructure Optimize dynamic content: offload bandwidth, intelligently cache, adapt images Maximize user experience with federated CDN delivery, global server load balancing Guarantee availability and network elasticity by analyzing and managing traffic http://www.yottaa.com
- 35. @yottaa #WebPerf In Summary Heavily tested hybrid apps are most likely the ideal solution Native is more work, but nets a better experience There is no substitute for real world testing If there’s a tool, use it! ARO, Ringmark, Modernizr, Yottaa Mobile networks are unreliable. Code for graceful degradation
- 36. @yottaa #WebPerf Thank You! Follow us! @yottaa www.yottaa.com/signup @yottaa #WebPerf
Editor's Notes
- #7: Appcelerator/IDC’s Q2 2012 survey of 3,600+ developers found that 6% of applications were targeted for development in HTML5 1.25 million native applications versus 75,000 HTML5 applications in production today in public app stores: these are telling statistics.400,000,000 accounts tied to credit cards in Apple’s app store, This is the largest number of participants for a transactional site on the Internet. Consumers have downloaded 30 billion apps and Applehas written checks for over $5 billion to developers. The store is now available in over 155 countries around the world. However, costs can be prohibitive when building native applications on every required OS. In the same developer survey referenced above, 80% of developers expressed the need to deploy their applications on more than one operating system. Development team costs need to be doubled or tripled to deliver this native experience on multiple OSes (if those developers can even be found and hired).
- #8: It’s ideal to keep rendered content for instant switching back. However you could only do that if memory management is done optimally. There’s only so much you could keep until the app crashes running out of memory.
- #11: Over 28 implementations by multiple manufacturers (e.g. HTC, Samsung, Motorola, Kindle, Google itself, Sony and more), the pains associated with writing an application for Android deployment are well documented.
- #16: TouchOrientationGPSBandwidth
- #23: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
- #24: It works by trying to load in the script, and then immediately after, testing to see if the jQuery object is available. If It’s not, then they load a local copy of jQuery as a fallback. This is generally not that easy in script-loaders, but Modernizr.load has got you covered. You can just use the same logic, and Modernizr.load will handle the execution order for you:
- #26: https://github.com/phiggins42/has.js
- #27: http://bit.ly/133ixOB
- #29: https://github.com/attdevsupport/ARO/tree/master/2013DevSummitTurbocharge
- #32: http://bit.ly/12Kl2lp
- #34: http://bit.ly/12Klct4