Web Apps and more

QCon Beijing 2012

Transcript

1. Web Apps and more
   mockee@douban
   http://bit.ly/IAhFE5
   

   View Slide

2. HTML5
   Once again...
   

   View Slide

3. http://blog.whatwg.org/html-is-the-new-html5
   Standard ?!
   http://burningbird.net/node/156
   http://www.w3.org/2011/02/htmlwg-pr.html
   

   View Slide

4. "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
   

   View Slide

5. "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
   

   View Slide

6. http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-year
   

   View Slide

7. Keywords
   Identifying Web Apps
   

   View Slide

8. Self Contained
   Functional
   Immersive
   Interactive
   Work Offline
   Device Aware
   Ajaxcellent
   New Navigable
   http://www.html5rocks.com/webappfieldguide/know-your-apps/app-checklist/
   

   View Slide

9. Concepts
   damned...
   

   View Slide

10. Mobile App Web
    Desktop
    Native
    Hybrid
    

    View Slide

11. Worry about
    Browsers & Devices
    

    View Slide

12. Top 9 Mobile Browsers in China
    

    View Slide

13. Top 12 Browser Versions in China
    

    View Slide

14. RangeComic
    

    View Slide

15. Top 10 Browsers in Douban
    Google Analytics
    

    View Slide

16. Top 10 Mobile Devices in Douban
    Google Analytics
    

    View Slide

17. Real World
    Douban Read
    http://read.douban.com
    

    View Slide

18. Submission System
    Author Editor
    WYSIWYG
    

    View Slide

19. View Slide

20. legend
    dimensions
    align
    upload
    

    View Slide

21. 
    
    
    figure caption
    
    
    
    
    
    figure caption
    
    
    Semantics
    Elements
    

    View Slide

22. Semantically highlight parts of text
    
    

    View Slide

23. Web Reader
    

    View Slide

24. View Slide

25. Content
    Adaptation
    main techniques
    

    View Slide

26. Responsive Web Design
    Mobile First
    Progressive Enhancement
    Server-side Adaptation
    

    View Slide

27. http://www.alistapart.com/articles/responsive-web-design/
    Responsive Web Design
    by ETHAN MARCOTTE
    

    View Slide

28. Layout
    Grids
    Media Queries
    Responsive
    http://www.lukew.com/ff/entry.asp?1514
    

    View Slide

29. Bootstrap
    http://markdotto.com/bs2/docs/
    Frameless
    http://framelessgrid.com/
    1140 Grid
    Less Framework 4
    http://cssgrid.net/
    http://markdotto.com/bs2/docs/
    Golden Grid System
    http://goldengridsystem.com/
    

    View Slide

30. Media Queries
    

    View Slide

31. 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
    

    View Slide

32. @media only screen
    and (max-device-width: 1024px)
    and (orientation: portrait),
    (-webkit-min-device-pixel-ratio: 2)
    and (max-device-width: 640px)
    { ... }
    

    View Slide

33. 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');
    }
    });
    

    View Slide

34. 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 node with a media attribute<br/>set a CSS rule applied to a <div><br/>check to see if the style has been applied<br/>return { matches: bool, media: ma }<br/>

    View Slide

35. orientation: landscape
    

    View Slide

36. View Slide

37. New Navigable
    Panel
    table of contents
    Progress
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. Original
    Large
    Medium
    Small
    Retina ?
    Media Queries
    

    View Slide

45. Mobile First
    Bryan Rieger
    Desktop
    Mobile First
    

    View Slide

46. Fixed-Layout Reflowable
    Format
    Adobe PDF
    PostScript
    Kindle Cloud Reader
    Google Books
    iBook Author
    (landscape)
    Plain Text
    

    View Slide

47. Reflowing & Paging
    text block
    page break
    image block
    type page
    

    View Slide

48. Blank or Float
    Zoom or Crop
    

    View Slide

49. 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
    

    View Slide

50. paging...
    render
    paging in background threads
    render
    

    View Slide

51. Prerender
    Book Store
    Reader
    Reader
    href="http://read.douban.com/reader" />
    http://prerender-test.appspot.com/
    https://developers.google.com/chrome/whitepapers/prerender
    

    View Slide

52. Page Visibility API
    document.addEventListener(
    'visibilitychange', function(e) {
    // document.visibilityState;
    }, false);
    visibilityState
    visible hidden prerender
    (webkit / moz)
    

    View Slide

53. Store Reader
    if (document.visibilityState === 'hidden'
    || document.visibilityState === 'prerender'
    || document.hidden === 'ture') {
    stopSyncReadingProgress();
    }
    http://www.w3.org/TR/2011/WD-page-visibility-20110602/
    

    View Slide

54. SVG
    Configure Web Server MIME types
    ".svg" => "image/svg+xml"
    Creating & Converting & Optimizing
    SVG-edit
    Aviary Raven
    Scour
    Vector Magic
    

    View Slide

55. // 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
    

    View Slide

56. Touch Events
    touchstart
    touchmove
    touchend
    touchcancel
    touchInfo
    init
    update
    use
    clear
    touches Array (1 or 11)
    pageX, pageY
    time
    thresholds
    Gestures
    

    View Slide

57. Gesture
    Swipe
    up, right, down, left
    Tap
    single, double; hold
    Pinch
    in, out; rotate
    

    View Slide

58. 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
    

    View Slide

59. Fullscreen
    requestFullscreen
    exitFullscreen
    fullscreenElement
    webkitRequestFullScreen
    mozRequestFullScreen
    http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
    webkitCancelFullScreen
    mozCancelFullScreen
    webkitCurrentFullScreenElement
    mozFullScreenElement
    fullscreenEnabled mozFullScreenEnabled
    webkitIsFullscreen
    isFullscreen
    

    View Slide

60. Events:
    fullscreenchange, fullscreenerror
    Compatibility:
    F11
    webkitRequestFullScreen(
    Element.ALLOW_KEYBOARD_INPUT);
    

    View Slide

61. http://code.google.com/p/chromium/issues/detail?id=95344
    Issue 95344:
    webkitRequestFullScreen results in a black background
    document.documentElement.webkitRequestFullScreen();
    

    View Slide

62. 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
    

    View Slide

63. 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
    

    View Slide

64. 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.
    

    View Slide

65. * 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
    

    View Slide

66. Compatibility
    window.applicationCache
    checking
    noupdate
    downloading updateready
    swapCache()
    cached
    i
    progress
    

    View Slide

67. 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
    

    View Slide

68. For iOS
    Web clip icons
    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
    

    View Slide

69. Specifying 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 ...
    ...
    ...
    

    View Slide

70. Viewport
    Remove address (and button) bar
    window.scrollTo(0, 1);
    'load', 'orientationchange'
    location.hash, setTimeout
    content="yes">
    DEMO
    Change status bar style
    content="black">
    // default, black, or black-translucent
    

    View Slide

71. Framework
    

    View Slide

72. 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
    

    View Slide

73. View Slide

74. Debugger
    

    View Slide

75. Webkit
    Developer Tools
    UA
    

    View Slide

76. weinre
    http://phonegap.github.com/weinre/
    friends of
    

    View Slide

77. Adobe Shadow
    http://labs.adobe.com/downloads/shadow.html
    

    View Slide

78. 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
    ╮（╯＿╰）╭
    

    View Slide

79. Thx:)
    douban.com/people/mockee/
    blog: mockee.com twitter: @mockee
    mockee@gmail.com
    

    View Slide