Tweet
Tweet

Slide 1

Slide 1 text

e’ve got a ebsite for that The FT eb app and the future of the mobile eb ndre Betts (@triblondon) HTML5DevConf, San Francisco, 21st May 2012

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

The eb has transformed our lives. No e need that stuff on the move.

Slide 4

Slide 4 text

1999: P. Seriously?

Slide 5

Slide 5 text

2001: BlackBerry®. No e’re talking. (except ironically e’re not talking because RIM ouldn’t add telephony capabilities for another 3 years)

Slide 6

Slide 6 text

2007: iPhone. Cracked it.

Slide 7

Slide 7 text

2008: pps arrive. eb largely forgotten

Slide 8

Slide 8 text

hat exactly is an “app”, anyay? But ait…

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Popularly: app (n).  tool designed for touch sensitive smartphones and tablets, hich can be launched from the homescreen, ith a ‘native feel’

Slide 12

Slide 12 text

For all practical purposes: app (n). meaningless

Slide 13

Slide 13 text

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,

Slide 14

Slide 14 text

Screen size Interface technology + Phone Tablet Notebook TV/desktop Touch Click Type Move Speak Think Point

Slide 15

Slide 15 text

Native/hybrid app + Phone Tablet Touch

Slide 16

Slide 16 text

Traditional eb Type TV/ Desktop Netbook/ Laptop + Phone Tablet Click

Slide 17

Slide 17 text

People built apps because their ebsites eren’t adaptive to the ne touch interfaces

Slide 18

Slide 18 text

The promise of eb today Type TV/ Desktop Netbook/ Laptop + Phone Tablet Click Touch Point

Slide 19

Slide 19 text

+ Traditional eb Phone Tablet

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

+ Touch Traditional eb

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Make your perfect recipe using eb technologies.

Slide 24

Slide 24 text

The future of eb Type TV/ Desktop Netbook/ Laptop + Phone Tablet Click Touch Point Move Speak

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Floed columns

Slide 27

Slide 27 text

Floed columns

Slide 28

Slide 28 text

Classifying devices by resolution

Slide 29

Slide 29 text

Siping beteen sections

Slide 30

Slide 30 text

Going offline •  HTML5 application cache •  localStorage •  ebSQL/IndexedDB •  Cookies

Slide 31

Slide 31 text

•  Load an article page hile offline •  Not in broser cache, not in app cache •  pp cache serves fallback Offline start

Slide 32

Slide 32 text

•  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  

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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  

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

eird. Not your father’s compression algorithm, that’s for sure.

Slide 40

Slide 40 text

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   副   秢   肙   猀  

Slide 41

Slide 41 text

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   ☐   莢   丢  

Slide 42

Slide 42 text

Snoman sniffing •  Speed vs storage •  Encode some stuff, don’t encode other stuff •  Encoded strings prefixed ith a snoman –  Normal text unlikely to start ith a snoman ☃嘴璢璪䖪...

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Useful tools •  Charles – .charlesproxy.com •  einRE – phonegap.github.com/einre/ •  ebDriver for mobile brosers – http://code.google.com/p/selenium/iki/ ebDriverForMobileBrosers

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

“Don’t build native apps, build eb apps” -­‐  Tim  Berners-­‐Lee  

Slide 47

Slide 47 text

Thanks andre@labs.ft.com @triblondon, @FTLabs Do you ant to build this stuff? Join in. [email protected]