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

Next generation, multi-platform web development (BB World)

Next generation, multi-platform web development (BB World)

The FT continues to be one of the few publishers to have an all-web strategy for mobile users. In this talk, I go into more detail on how we see the debate about native vs web, and why you should choose web every time, along with an overview of some of the technical challenges. A presentation to BlackBerry World 2012 in Orlando Florida.

Andrew Betts

May 02, 2012

More Decks by Andrew Betts

Other Decks in Technology


  1. e’ve got a ebsite for that. Responsive eb Design: Skills

    and best practices for next generation, multi-platform eb development ndre Betts (@triblondon) BlackBerry® orld, Orlando, Florida
  2. 2001: BlackBerry®. No e’re talking. (except ironically e’re not talking

    because RIM ouldn’t add telephony capabilities for another 3 years)
  3. Strictly: app (n). abbreviation of ‘application’,  computer program ith

    an interface, enabling people to use the computer as a tool to accomplish a specific task. ord processing, spreadsheet, and communications softare are all examples of applications.
  4. s ‘adopted’ by pple: app (n). n installable computer program

    ritten for a specific mobile platform, installable via an online app store, ith a touch-optimised interface.
  5. Popularly: app (n).  tool designed for touch sensitive smartphones

    and tablets, hich can be launched from the homescreen, ith a ‘native feel’
  6. OK, maybe e can do better than that: app (n).

    a distributed computer softare application designed for optimal use on specific screen sizes and ith particular interface technologies,
  7. The future of eb Type TV/ Desktop Netbook/ Laptop +

    Phone Tablet Click Touch Point Move Speak
  8. Challenges for the eb •  Layout –  dapt, adapt, adapt

    •  Navigation and interaction –  Interpreting touches is a subtle art •  Offline use –  Just reinvent the hole ay the eb orks •  Rethink backend architecture –  Feer pages, more PIs •  nalytics –  Record activity hile user is offline
  9. •  Load an article page hile offline •  Not in

    broser cache, not in app cache •  pp cache serves fallback Offline start
  10. •  Fallback page acts as client side front controller • 

    Load main JS, CSS, and HTML from localStorage •  Check for errors, trigger startup. Splash  screen   Basic  CSS   Error  msgs  /  support  info   Boot  code  
  11. Splash  screen   Basic  CSS   Error  msgs  /  support

     info   Boot  code   Main  app  code   Main  app  CSS   App  HTML  templates   •  Check cookie for user authentication •  Remove redundant content only needed for boot •  Examine URL, read requested content from ebSQL •  Render page
  12. Storing content images •  Can’t use app cache, because it’s

    aful. •  Other storage options don’t offer a URL •  Base-64 encode image data •  Store in localStorage or ebSQL •  Insert into DOM as data: URIs •  30% bloat, but also avoids netork operator recompression
  13. ebSQL () / IndexedDB (i) ppcache localStorage Cookies iOS (5.1)

    : 5MB / 50MB 10MB 5MB 4KB total Up to 50 per domain ndroid (4) ? Unlimited 5MB Safari (5.2) : 5MB / Unlimited Unlimited 5MB Chrome (18) : Unlimited 5MB 5MB IE (10) i: 500MB 50MB 10MB Opera (11) : 5MB / Unlimited 50MB / Unlimited 5MB / Unlimited Firefox (11) i: 50MB / Unlimited Unlimited 10MB Storage limits Two  figures  separated  by  /  indicate  limit  with  and  without  user  consent  prompt,  which  appears  automaBcally  when  you  try  to   store  more  than  the  lower  limit.    The  user  may  not  consent  to  more  than  the  upper  limit.  
  14. Let’s talk compression •  JavaScript internally uses UTF-16 for text

    encoding •  Great idea for processing: fast string operations, full support for Unicode BMP •  Terrible idea for storage of English text or base-64 encoded images.
  15. To bytes per character •  Provides great compatibility but halves

    precious quota! •  Can make compromises on compatibility to get more storage efficiency 00   48   00   45   00   4C   00   4C   00   4F   00   20   00   57   00   4F   00   52   00   4C   00   44   H   E   L   L   O   W   O   R   L   D  
  16. Pack SCII into UTF-16 •  Replace all non-SCII chars ith

    HTML entities server side •  Read char codes in pairs, construct ne string ith one char bitshifted on top of the other.
  17. UTF-8 in UTF-16 UTF-­‐8   R   o   y

      ’   s   Decimal   82   111   121   8217   115   As  binary   01010010   01101111   01111001   11100010  10000000  10011001   01110011   ShiSed   01010010  01101111   01111001  11100010   10000000  10011001   01110011   As  hex   52  6F   79  E2   80  99   73  00   UTF-­‐16   副   秢   肙   猀  
  18. Base64 in UTF-16 Original   A   B   C

      D   o   p   q   9   b64  index   0   1   2   3   40   41   42   61   As  binary   000000   000001   000010   000011   101000   101001   101010   111101   ShiSed   00000000  00010000   10000011  10100010   10011010  10111101   As  hex   00  10   83  A2   9A  BD   UTF-­‐16   ☐   莢   丢  
  19. Useful tools •  Charles – .charlesproxy.com •  einRE – phonegap.github.com/einre/ •  ebDriver

    for mobile brosers – http://code.google.com/p/selenium/iki/ ebDriverForMobileBrosers
  20. In summary •   ebsite can be an ‘app’ • 

    But it needs to be tailored for size and interface tech. •  eb technologies can do this •  eb approach retains all the benefits of the eb that you give up hen building native.