Your SlideShare is downloading. ×
0
BUILDING
WEBAPP FOR
MOBILE
Trần Lê Duy Tiên
A Proud Clicker @ VNG Corp.
http://facebook.com/leduytien
http://zini.vn/leduytien
A short summary
of WEBAPPorigin
A SHORTHISTORYOF WEBAPP
• WebApp got first wide-spreaded
attention after the introduction of the
first generation iPhone, ...
WHATISWEBAPP & WHY?
WebApp
• “Web”: it is built using only web technologies such
as HTML, Javascript and CSS
• “App”: it s...
Thestate of webapp
• Facebook abandoned their webapp-based
application and switched to native app.
• Palm’s WebOS after so...
zing newswebapp
EXPERIMENTS
theFIRST VERSION
The first version of Zing News Webapp (no longer
available). Viewers are automatically redirected to
this...
theSECOND(CURRENT)VERSION
On iOS devices, browse http://news.zing.vn will
automatically redirect you to this webapp. On An...
ThingsLEARNED
• When visit a webpage from browser, users
expect to see the web as they known. Any
different in the way the...
THETHIRD ATTEMPT
Would be released together with Zing News version
3 introduced in previous presentation.
BUILDING A WEBAPP
Thingsyouneedto learn
Assume you already “master” HTML & CSS &
Javascript, this presentation will just go over
some major ...
Enable webapp capability FOR WEBPAGE
<head>
<meta name="viewport" content="width=device-width,initial-
scale=1, user-scala...
CODEStructureOF YOURWEBAPP
It’s a single web page.
There is no “linking” in
app, all data will load
using ajax & displayed...
MANIFEST– SAVEYOURSITES
You can still run an
app without Internet
connection. A
webapp therefore
should be able to at
leas...
UNDERSTANDHOWMANIFESTWORK
The first time you visit a site with manifest, the
browser just show the page and in the
backgro...
CREATE AN “INSTALLATION” MECHANISM
Create a middle step to check for updates
all app resources before redirect user to the...
INSTALLATIONMECHANISM
window.addEventListener('load', function(e) {
var appCache = window.applicationCache;
// no update
a...
Usinglocaldb to cachedata
What if user open your webapp without Internet
connection? Your app should still be able to disp...
USINGLOCALSTORAGE
Check if browser support:
'sessionStorage' in window && window['sessionStorage'] !== null
'localStorage'...
CACHINGDATAWITH LOCALSTORAGE
$.ajax({
url:url,
dataType: "text”
}).done(function(data) {
// save the data
if (local DB sup...
TIPS WHENBUILDINGWEBAPP
• Make webapp fullscreen on iPhone 5:
if (window.screen.height==568) { // iPhone 4"
document.query...
TIPS WHENBUILDINGWEBAPP
• Make your app responsive & fast. For all UI
interaction event, always update the
interface first...
TIPS WHENBUILDINGWEBAPP
• Use CSS animation insteads of js animation
whenever possible.
• There is jQuery plugin that auto...
Building WebApp with HTML5
Upcoming SlideShare
Loading in...5
×

Building WebApp with HTML5

3,468

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,468
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Building WebApp with HTML5"

  1. 1. BUILDING WEBAPP FOR MOBILE
  2. 2. Trần Lê Duy Tiên A Proud Clicker @ VNG Corp. http://facebook.com/leduytien http://zini.vn/leduytien
  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 http://news.zing.vn will automatically redirect you to this webapp. On Android devices, point your browser to http://touch.news.zing.vn
  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.
  12. 12. BUILDING A WEBAPP
  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/ http://www.google-analytics.com/ FALLBACK: / offline.html http://connect.facebook.com/ 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: http://daneden.me/animate/ • 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);
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×