• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile App Development - Pitfalls & Helpers
 

Mobile App Development - Pitfalls & Helpers

on

  • 1,735 views

 

Statistics

Views

Total Views
1,735
Views on SlideShare
1,733
Embed Views
2

Actions

Likes
7
Downloads
29
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile App Development - Pitfalls & Helpers Mobile App Development - Pitfalls & Helpers Document Transcript

    • PITFALLS AND HELPERS Mobile HTML5 Applications
    • My name is Rob Hawkes, I’m one of the Technical Evangelists at Mozilla.My focus is games, most recently around Firefox OS and mobile.
    • I’m also British, if you hadn’t already guessed.Photo: http://www.flickr.com/photos/beto_frota/3232254956
    • I’m not going to go into anything in too much detail, however I’ve included links within the slides where necessary soyou can get further information.The slides are on my Slideshare account. I’ll put the link up at the end.
    • WEB APP PITFALLS
    • HARDWARE LIMITATIONS Memory, GPU, battery…One of the most obvious pitfalls is around device hardware limitations, things like memory, and GPU.Now there aren’t any silver-bullet solutions here to improve memory consumption and GPU usage, but there arecertainly ways to improve things in general.For example, to make better use of limited hardware you could offload graphics to the GPU by using hardware-accelerated CSS calls instead of doing everything with the CPU.There are also ways to save battery. For example, when animating you should use requestAnimationFrame instead ofsetTimeout as it puts the browser in control of when to draw things. If the application is in the background thennothing will draw, saving battery.You can also use things like the Battery API to intelligently degrade functionality as energy levels decrease.
    • DIFFERING BROWSER SUPPORT WebAPIs, manifests, tooling…Another obvious pitfall is around the huge differences between supported features in browsers.Some prime examples at the moment include various WebAPIs not being supported in all browsers, and applicationmanifests between different browsers being formatted slightly differently.I won’t go into any more detail about specifics, but what I will say is that it’s always a good idea to use shims andfeature detection when using functionality that may not be fully supported everywhere.
    • CHANGING SPECS Some APIs are in fluxRelated to browser support is changing API specifications and implementation.This is how Web technologies naturally develop and usually doesn’t result in anything catastrophic. However, it’salways a good idea to keep an eye on APIs and technologies that are known to be in a non-finalised state – theymight change.One recent example is WebSockets, around a year ago the WebSockets spec changed in a way that broke all existingimplementations. It was necessary, but it meant that developers who didn’t update their code had their appssuddenly break when the browsers dropped support for the older WebSockets APIs.
    • DIFFERING PERFORMANCE Similar spec hardware, different resultsIf you are developing anything that is vaguely intensive, like a game, you’ll have noticed massive differences inperformance on mobile, even between browsers on the same device.In short, performance on similar mobile devices should not be assumed and instead should be tested and expectedto differ.
    • Average Average Lowest Highest Device Min FPS Max FPS FPS FPS Otoro (Fx OS) 40.40 49.80 18.00 61.00 Otoro (Fennec) 19.38 31.75 4.00 46.00 SGS2 (Fx OS) 46.11 57.78 20.00 71.00 SGS2 (Fennec) 29.38 39.63 8.00 52.00 Unagi (Fx OS) 39.80 46.60 20.00 59.00 Nexus S (Fennec) 15.88 27.63 4.00 40.00 Nexus 7 (Fennec) 27.11 33.89 4.00 50.00 Nexus (Fennec) 25.75 34.13 6.00 46.00I’ve been doing a lot of research in this area with games on Firefox OS and Fennec and it’s shown interesting results.What we’re seeing is that the frame-rate on similarly-specced devices can differ by a significant amount when playingthe same game in the same browser environment.As a side-note; what we’re also seeing is that frame-rates are significantly better on Firefox OS than Fennec on anidentical device – often in the range of 1.3 to 1.5x better.
    • VIEWABLE SOURCE Part of what makes the WebA controversial potential pitfall is that of Web apps having an openly viewable source.Viewable source on its own isn’t necessarily a pitfall, as it’s just the way the Web works, but what if you need to addsome element of protection to your app assets?There are some ways to implement types of ‘protection’, like compressing and obfuscating code, but they aren’tfool-proof.One common technique, at least in games, is to defer protected logic to the server while embracing the openness ofcode on the client.
    • APP MANIFEST QUIRKS Simple once you know howWhen using application manifests there are a few things to bear in mind.https://developer.mozilla.org/en-US/docs/Apps/Manifest
    • MIME-TYPE REQUIREMENT application/x-web-app-manifest+jsonApp manifest files must be served with the application/x-web-app-manifest+json MIME-type for them to berecognised by the browser.We’ve worked with GitHub on this and application manifests hosted using GitHub pages are automatically served withthe correct type.https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache#Structure_of_a_cache_manifest_file
    • SAME ORIGIN POLICY Manifest and app served from same domainApplication manifests must be served from the same origin as the application they describe.
    • APPCACHE IS… Not quite as bad as some make it out to beAppCache is another technology that gets quite a bad press around perceived issues and difficulties.I don’t believe it’s quite as bad as we make out.
    • MIME-TYPE REQUIREMENT text/cache-manifestOne of the basic things that can trip people up is the MIME-type requirement for AppCache manifest files.The manifest can have any extension but must be served with the text/cache-manifest MIME-type for the browser torecognise it.
    • Jake Archibald’s talk on AppCache quirks and workarounds is a fantastic resource on what to look out for with thetechnology.The following are a selection of his key observations…http://www.alistapart.com/articles/application-cache-is-a-douchebag/
    • #1 FILES ALWAYS COME FROM THE APPCACHE, EVEN IF YOU’RE ONLINEResources in the AppCache will always be pulled from the cache, even if you’re online.When the cached resources are updated AppCache will fire an updateready event, though you’ll need to refresh thepage to see them.The updateready event is where you’ll listen if you want to prompt the user to reload the page when updates areready, otherwise they’ll naturally get the latest resources the next time they view your app, or the next time theynavigate around your app.
    • #2 THE APPCACHE ONLY UPDATES IF THE CONTENT OF THE MANIFEST ITSELF HAS CHANGEDAlthough AppCache lets you know when updates are ready, these updates may not work in the way you’re expecting.What happens is that the AppCache won’t update unless the AppCache manifest itself is updated.The reasoning for this is that the browser would otherwise have no idea which files needed updating and would haveto check every single file referenced within the manifest.The most common way to force an update to the manifest is by using a commented version number or timestampevery time you change one of the files referenced in the AppCache.
    • CACHE MANIFEST# 2012-12-05:v10# Explicitly cached resourcesCACHE:appleicon.pngclasslib.js…# Resources that require the user to be online.NETWORK:*# Fallbacks if files cannot be foundFALLBACK:
    • #3 THE APPCACHE IS AN ADDITIONAL CACHE, NOT AN ALTERNATIVE ONEWhen the browser updates the AppCache it requests resources as it normally would, meaning that it obeys standardcache headers.One way this can catch you out is if you don’t serve cache headers with your resources then the browser may ‘guess’that the resource doesn’t need to be updated and won’t request it.Jake’s recommended workaround for this is to serve cache headers with your resources, perhaps even setting themas no-cache if you’re testing a lot.
    • #4 NEVER EVER EVER FAR-FUTURE CACHE THE MANIFESTOne interesting quirk with AppCache is that you can get yourself into a lot of trouble if you mess around with thecaching of the manifest itself.For example, if you set a cache header on the manifest file for it not to update in a long time, then change the URL ofthe manifest in your HTML document to try and force an update, then nothing will update. Ever.The reason for this is that the user will be seeing the cached HTML document which is referencing the old manifestfile, which is exactly the same as it was last time it checked, so nothing changes.How to avoid this? Don’t rename the manifest file unless you know what you’re doing.
    • #5 NON-CACHED RESOURCES WILL NOT LOAD ON A CACHED PAGEBy default, any resources that you don’t reference within the AppCache manifest won’t be displayed. This is thedefault behaviour of AppCache.To work around this, you can add a NETWORK section to the manifest with a * wildcard. This will make sure anythingnot cached will be requested from the network if online.
    • CACHE MANIFEST# 2012-12-05:v10# Explicitly cached resourcesCACHE:appleicon.pngclasslib.js…# Resources that require the user to be online.NETWORK:*# Fallbacks if files cannot be foundFALLBACK:
    • “I’M NOT SAYING THAT APPLICATIONCACHE SHOULD BE AVOIDED, IT’S EXTREMELY USEFUL.” Jake ArchibaldYou may be under the assumption that AppCache isn’t ready, or is too quirky for prime-time.I think Jake’s final words on the matter sum up how you should view his criticism of the technology.His main point is that you should be aware of the quirks and limitations of AppCache so you can use it to it’s fullpotential.
    • AppCache Facts is another great resource on the truths behind AppCache.http://appcachefacts.info/
    • WEB APP HELPERS
    • CROSS-PLATFORM SUPPORT Taking the sting out of thingsGeneral cross-platform support
    • Modernizr for feature detectionhttp://modernizr.com
    • Can I Use? for compatibility chartshttp://caniuse.com
    • Mobile HTML5 for mobile-specific compatibility chartshttp://mobilehtml5.org
    • WebSockets with Socket.ioAutomatically falls back to long-polling if necessary.http://socket.io/
    • Lawnchair for reliable local storageAutomatically selects the best storage option for each platform.http://brian.io/lawnchair/
    • APPCACHE GENERATORS Taking the pain out of manifestsAppCache generators
    • Manifested online generatorhttp://manifested.dregsoft.com
    • manifestR bookmarklethttp://westciv.com/tools/manifestR/
    • Command-line approach using PhantomJS and confess.jshttps://github.com/jamesgpearce/confess
    • My own online AppCache generator built using confess.js on the serverhttp://appcache.rawkes.com
    • TESTING APPCACHE Being sure that it actually worksTesting AppCache
    • Chrome appcache-internals pagechrome://appcache-internals
    • Firefox about:cacheClick on “Offline cache device” when you reach the about:cache page
    • Charles proxyhttp://www.charlesproxy.com/
    • Chrome developer tools network paneLook for ‘(from cache)’ in the size column
    • Firefox developer tools ‘Net’ loggingSimply doesn’t display resources that have been loaded from the cacheThis also works with remote debugging so you can see network logs from a Firefox OS or Fennec device…https://developer.mozilla.org/en-US/docs/Mozilla/Boot_to_Gecko/Debugging_on_Boot_to_Gecko/Setting_up
    • UI BUILDING BLOCKS Keeping a consistent style
    • Gaia UI Building Blockshttps://github.com/mozilla-b2g/Gaia-UI-Building-Blocks
    • Twitter Bootstraphttp://twitter.github.com/bootstrap/
    • jQuery Mobilehttp://jquerymobile.com/
    • EASING APP DEVELOPMENT Templates and frameworks
    • Mortar is the recommend set of Web app templates for Firefox OShttps://github.com/mozilla/mortar
    • BUILD TOOLSAutomating common tasks
    • Volohttps://github.com/volojs/volo
    • Grunthttp://gruntjs.com/
    • HTML5 Boilerplate build script (using Grunt)https://github.com/h5bp/node-build-script
    • PERFORMANCETools for analysing and optimisation
    • YSlow!http://developer.yahoo.com/yslow/
    • PageSpeedhttps://developers.google.com/speed/pagespeed/
    • Smush.ithttp://www.smushit.com/ysmush.it/
    • Pngcrushhttp://pmt.sourceforge.net/pngcrush/
    • YUI Compressorhttp://developer.yahoo.com/yui/compressor/http://refresh-sf.com/yui/
    • UglifyJShttp://marijnhaverbeke.nl/uglifyjs
    • FIREFOX OS SIMULATOR Perfect for testing Firefox OS appsFirefox OS Simulatorhttps://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/
    • FURTHER RESOURCES
    • Apps area on MDNhttps://developer.mozilla.org/en-US/docs/Apps
    • Firefox Marketplace Developer Hubhttps://marketplace.firefox.com/developers/
    • HTML5 Rocks article on mobile performancehttp://www.html5rocks.com/en/mobile/optimization-and-performance/
    • Sam Dutton’s talk on mobile Web app performance and optimisationhttp://www.samdutton.com/velocity2012/
    • Tasneem Sayeed’s talk on improving mobile Web app experiencehttp://www.slideshare.net/tasneemsayeed/developer-pitfalls-strategies-for-improving-mobile-web-developer-experience
    • Mobile Web app best practices from the W3Chttp://www.w3.org/TR/mwabp/
    • @ROBHAWKESSLIDESHARE.NET/ROBHAWKES