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.

Transcript

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
3. The eb has transformed our lives. No e need that stuff on the move.
4. 1999: P. Seriously?
5. 2001: BlackBerry®. No e’re talking. (except ironically e’re not talking because RIM ouldn’t add telephony capabilities for another 3 years)
6. 2007: iPhone. Cracked it.
7. 2008: pps arrive. eb largely forgotten
8. hat exactly is an “app”, anyay? But ait…
9. 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.
10. 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.
11. Popularly: app (n).  tool designed for touch sensitive smartphones and tablets, hich can be launched from the homescreen, ith a ‘native feel’
12. For all practical purposes: app (n). meaningless
13. 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,
14. Screen size Interface technology + Phone Tablet Notebook TV/desktop Touch Click Type Move Speak Think Point
15. Native/hybrid app + Phone Tablet Touch
16. Traditional eb Type TV/ Desktop Netbook/ Laptop + Phone Tablet Click
17. People built apps because their ebsites eren’t adaptive to the ne touch interfaces
18. The promise of eb today Type TV/ Desktop Netbook/ Laptop + Phone Tablet Click Touch Point
19. + Traditional eb Phone Tablet
21. + Touch Traditional eb
23. Make your perfect recipe using eb technologies.
24. The future of eb Type TV/ Desktop Netbook/ Laptop + Phone Tablet Click Touch Point Move Speak
25. 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
26. Floed columns
27. Floed columns
28. Classifying devices by resolution
29. Siping beteen sections
30. Going offline •  HTML5 application cache •  localStorage •  ebSQL/IndexedDB •  Cookies
31. •  Load an article page hile offline •  Not in broser cache, not in app cache •  pp cache serves fallback Offline start
32. •  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  
33. 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
34. 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
35. 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.  
36. 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.
37. 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  
38. 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.
39. eird. Not your father’s compression algorithm, that’s for sure.
40. 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   副   秢   肙   猀  
41. 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   ☐   莢   丢  
43. Useful tools •  Charles – .charlesproxy.com •  einRE – phonegap.github.com/einre/ •  ebDriver for mobile brosers – http://code.google.com/p/selenium/iki/ ebDriverForMobileBrosers
44. 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.
45. “Don’t build native apps, build eb apps” -­‐  Tim  Berners-­‐Lee  
46. Thanks andre@labs.ft.com @triblondon Do you ant to build this stuff? Join in. jobs@labs.ft.com