Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Apps and more

Yan Shi
April 20, 2012

Web Apps and more

QCon Beijing 2012

Yan Shi

April 20, 2012

More Decks by Yan Shi

Other Decks in Programming


  1. "New open standards created in the mobile era, such as

    HTML5, will win on mobile devices. " http://www.apple.com/hotnews/thoughts-on-flash/ Steve Jobs April, 2010
  2. "HTML5 is now universally supported on major mobile devices. This

    makes HTML5 the best solution for creating and deploying content in the browser across mobile platforms." http://blogs.adobe.com/conversations/2011/11/flash-focus.html Danny Winokur November 9, 2011
  3. Self Contained Functional Immersive Interactive Work Offline Device Aware Ajaxcellent

    New Navigable http://www.html5rocks.com/webappfieldguide/know-your-apps/app-checklist/
  4. <figure> <img src="figure.png" alt="" /> <figcaption> <p>figure caption</p> </figcaption> </figure>

    <div class="figure"> <img src="figure.png" alt="" /> <div class="legend"> <p>figure caption</p> </div> </div> Semantics Elements
  5. Syntax media_query_list : S* [media_query [ ',' S* media_query ]*

    ]? ; media_query : [ONLY | NOT]? S* media_type S* [ AND S* expression ] * | expression [ AND S* expression ]* ; expression : '(' S* media_feature S* [ ':' S* expr ]? ')' S* ; http://www.w3.org/TR/css3-mediaqueries
  6. window.matchMedia // get MediaQueryList var mql = window.matchMedia( 'screen and

    (orientation: portrait)'); mql.addListener(function(mql){ if (mql.matches) { console.log('portrait'); } else { console.log('landscape'); } });
  7. matchMedia() polyfill http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/ document.createElement('div'); make sure it's hidden create a

    <style> node with a media attribute set a CSS rule applied to a <div> check to see if the style has been applied return { matches: bool, media: ma }
  8. Web Workers Inline Workers WebKitBlobBuilder MozBlobBuilder Handling Errors "message", "error"

    Use Cases Prefetching Data Processing large arrays, humungous JSON responses http://www.html5rocks.com/en/tutorials/workers/basics/ Updating many rows of a local web database
  9. Store Reader if (document.visibilityState === 'hidden' || document.visibilityState === 'prerender'

    || document.hidden === 'ture') { stopSyncReadingProgress(); } http://www.w3.org/TR/2011/WD-page-visibility-20110602/
  10. SVG Configure Web Server MIME types ".svg" => "image/svg+xml" Creating

    & Converting & Optimizing SVG-edit Aviary Raven Scour Vector Magic
  11. // fallback for IE 6/7/8 background: url(icons.png); // for modern

    browsers background: rgba(0,0,0,0) url(icons.svg); SVG in CSS backgrounds IE 6/7/8 don't support rgba color values will automatically ignore this rule http://caniuse.com/#feat=svg-css
  12. Touch Events touchstart touchmove touchend touchcancel touchInfo init update use

    clear touches Array (1 or 11) pageX, pageY time thresholds Gestures
  13. Scrolling iScroll 4 Scrollability -webkit-overflow-scrolling: touch; Native Pinch / Zoom,

    Pull up/down to refresh, Customizable scrollbars by Joe Hewitt http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit
  14. Offline manifest file • MIME type: text/cache-manifest • Same origin

    (domain & scheme) Handling Events checking, error, update, obsolete, cached, downloading, updateready http://www.w3.org/TR/html5/offline.html
  15. CACHE MANIFEST # version 1.0.1 /ark/logo.png favicon.ico app.html#reader http://img3.douban.com/pics/cover.png /ark/js/*

    CACHE: NETWORK: # online whitelist /j/reader/ #* FALLBACK: fallback.html Only one file per line. A full file name is required, no wildcards allowed. Can't include fragment identifiers.
  16. * Enhance Application Cache for better performance: /ark/icon-reader.svg , ETag:

    ... app.html ETag: ... , Last-Modified: ... Server Client updated manifest file re-fetch each resouce newer ? re-fetch : 304 with additional meta-data only re-fetch definitely updated files Reduces network bandwidth & latency
  17. Detecting Connection if (navigator.onLine) { // send data to server

    } else { // use Web Storage or Database } window.addEventListener( 'online', function(e) { // sync data with server }, false); notes & comments reading progress
  18. For iOS Web clip icons <link rel="apple-touch-icon" sizes="" href="" />

    iPhone 57x57 iPhone Retina 114x114 iPad 72x72 iPad Retina 144x144 http://developer.apple.com/library/ios/#documentation/userexperience/ conceptual/mobilehig/IconsImages/IconsImages.html
  19. Specifying startup image <link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px)

    and (max-device-width: 1024px) and (orientation:landscape)" /> ... iPad - landscape (768-20)x1024 iPad - portrait 768x(1024-20) iPad Retina ... iPhone ... iPhone Retina ... ... ...
  20. Viewport Remove address (and button) bar window.scrollTo(0, 1); 'load', 'orientationchange'

    location.hash, setTimeout <meta name="apple-mobile-web-app-capable" content="yes"> DEMO Change status bar style <meta name="apple-mobile-web-app-status-bar-style" content="black"> // default, black, or black-translucent
  21. W3C Selectors API Structuralization Modules & Widgets mini-framework File &

    Module Loader Backbone.js, micro- RequireJS, Oz.js, Do.js document.querySelector Touch, Fx, Overlay http://www.mindmeister.com/143758104/douban-read
  22. http://forums.adobe.com/docs/DOC-1674 Weinre Wrapper must be connected to the Internet need

    to use machine's public IP address some updates in Chrome are not shown on devices ╮(╯_╰)╭