Building WebApp with HTML5


Published on

This is my presentation about building webapp with HTML5 and JS, based on my experiences building webapp for Zing News.

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building WebApp with HTML5

  2. 2. Trần Lê Duy Tiên A Proud Clicker @ VNG Corp.
  3. 3. A short summary of WEBAPPorigin
  4. 4. A SHORTHISTORYOF WEBAPP • WebApp got first wide-spreaded attention after the introduction of the first generation iPhone, thanks to the fact that Apple didn’t allow native app development at the time. • After the iPhone, Palm introduced WebOS for their smartphones, designed with the dream of a webapp platform. • Google recently introduced Google Chrome OS with only webapp running on it.
  5. 5. WHATISWEBAPP & WHY? WebApp • “Web”: it is built using only web technologies such as HTML, Javascript and CSS • “App”: it should behave like an “app”, all interactions occur within the app (there is no page linking from the user point of view) & be able to work without Internet. Why is webapp? • Webapp getting popular in the mobile era as it is the only solution for the dream of developers to only have to write once and run it anywhere.
  6. 6. Thestate of webapp • Facebook abandoned their webapp-based application and switched to native app. • Palm’s WebOS after sold to HP is dead • Google is experimenting with webapp on their Chrome browser & Chrome OS, but so far it’s still unclear. WHY? • Even on the latest version of iOS, webapp still can’t match what native app can do both in term of performance and feature • Users don’t get it.
  7. 7. zing newswebapp EXPERIMENTS
  8. 8. theFIRST VERSION The first version of Zing News Webapp (no longer available). Viewers are automatically redirected to this app on browser when they visit Zing News
  9. 9. theSECOND(CURRENT)VERSION On iOS devices, browse will automatically redirect you to this webapp. On Android devices, point your browser to
  10. 10. ThingsLEARNED • When visit a webpage from browser, users expect to see the web as they known. Any different in the way the web respond lead to confusion. • Users never see the webapp as an app if it open in browser. To them it’s just a website behaving different & strange. • Don’t try make a website behave like an app. If you build webapp, it is meant to be install/launch like an app.
  11. 11. THETHIRD ATTEMPT Would be released together with Zing News version 3 introduced in previous presentation.
  13. 13. Thingsyouneedto learn Assume you already “master” HTML & CSS & Javascript, this presentation will just go over some major implementation points to build webapp: • How to enable webapp capability in iOS • Basic structure of a webapp • How to download resources to local device • How to use web storage API to cache data to local database • Tips building webapp
  14. 14. Enable webapp capability FOR WEBPAGE <head> <meta name="viewport" content="width=device-width,initial- scale=1, user-scalable=no"> <link rel="apple-touch-icon" href="touch-icon.png" /> <link rel="apple-touch-icon" sizes="72x72" href="touch- icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="touch- icon-rentina.png" /> <link href="splash-screen-640x1096.jpg" rel="apple-touch- startup-image" media="(device-height: 568px)"> <link href="splash-screen-640.jpg" rel="apple-touch- startup-image" sizes="640x920" media="(device-height: 480px)"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
  15. 15. CODEStructureOF YOURWEBAPP It’s a single web page. There is no “linking” in app, all data will load using ajax & displayed. Your single HTML file should only include basic HTML for screen layers that will be filled with content later. Change z-index value to make a layer active <html manifest="cache.manifest"> <head> (include normal js/css resources) </head> <body> <div id=“latest”> </div> <div id=“featured”> </div> <div id=“article”> </div> <div id=“category”> </div> <div id=“popup”></div> </body> </html>
  16. 16. MANIFEST– SAVEYOURSITES You can still run an app without Internet connection. A webapp therefore should be able to at least open offline. Use cache.manifest file to tell browser to download your app resources to local device and use them for later access. CACHE MANIFEST # rev 1.00 CACHE: js/jquery.min.js css/styles.css img/icons.png NETWORK: http://www.sites/img_folder/ http://www.sites/data_folder/ FALLBACK: / offline.html js/offline.js
  17. 17. UNDERSTANDHOWMANIFESTWORK The first time you visit a site with manifest, the browser just show the page and in the background download the resources The next time you visit the site, the browser use the offline version it downloaded last time. In the background, it check the manifest for any changes. If yes, it redownload all resources again. User will always used the version older than the current one until he/she relaunch the web.
  18. 18. CREATE AN “INSTALLATION” MECHANISM Create a middle step to check for updates all app resources before redirect user to the main app. Install.html App.htmlUSER
  19. 19. INSTALLATIONMECHANISM window.addEventListener('load', function(e) { var appCache = window.applicationCache; // no update appCache.addEventListener('noupdate', function(){ window.location.href = appHome; }, false); // all resource had been cached appCache.addEventListener('cached', function(){ window.location.href = appHome; }, false); // if there is updates and resources had been downloaded appCache.addEventListener('updateready', function(e) { if (appCache.status == appCache.UPDATEREADY) { window.applicationCache.swapCache(); } }, false); // if is downloading, update the progress bar appCache.addEventListener('downloading', function(){ appCache.addEventListener('progress', function(){ … }); }) });
  20. 20. Usinglocaldb to cachedata What if user open your webapp without Internet connection? Your app should still be able to display data the last time it had. Two types of storage available in HTML5 • window.localStorage – which save data until you delete them (or out of space limit) • window.sessionStorage – only save data in the same session Both have disk space limit, with each domain have about 5MB for database.
  21. 21. USINGLOCALSTORAGE Check if browser support: 'sessionStorage' in window && window['sessionStorage'] !== null 'localStorage' in window && window['localStorage'] !== null Save data window.localStorage.setItem(key, data); window.sessionStorage.setItem(key, data); Retrieve data window.localStorage.getItem(key); // always return as String window.sessionStorage.getItem(key); // always return as String Clear database window.localStorage.clear(); window.sessionStorage.clear();
  22. 22. CACHINGDATAWITH LOCALSTORAGE $.ajax({ url:url, dataType: "text” }).done(function(data) { // save the data if (local DB support) window.localStorage.setItem(url,data); // do other things with data }).fail(function() { if (window.localStorage.getItem(url) !== null) // use the cache data else // inform user there is no data available });
  23. 23. TIPS WHENBUILDINGWEBAPP • Make webapp fullscreen on iPhone 5: if (window.screen.height==568) { // iPhone 4" document.querySelector("meta[name=viewport]").content= "width=320.1"; } • Set cache expiration for manifest file immediately. Remove it during development process. • Don’t use any mobile js framework (jQuery core is ok to reduce coding time) • For HTML element, assign ID attribute whenever possible so that you can get to it faster. • Remember to use setTimeOut – a few hundred milliseconds delay will help smoother the experience.
  24. 24. TIPS WHENBUILDINGWEBAPP • Make your app responsive & fast. For all UI interaction event, always update the interface first. Small trick might help. • Make sure there only max two concurrent ajax calls at any moment $.xhrPool = []; $.ajaxSetup({ beforeSend: function(jqXHR) { $.xhrPool.push(jqXHR); }, complete: function(jqXHR) { var index = $.xhrPool.indexOf(jqXHR); if (index > -1) $.xhrPool.splice(index, 1); } });
  25. 25. TIPS WHENBUILDINGWEBAPP • Use CSS animation insteads of js animation whenever possible. • There is jQuery plugin that automatically convert .animate() function to css base animation. • CSS animation ready to use: • Prevent web scrolling effect: document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); • Enable 3d hardware on selected elements will help eliminate UI “flicker”, but be careful or your app will crash -webkit-transform:translate3d(0,0,0);