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

Ya Gotta Love Frontend, Tel Aviv, 28 June 2016

Ya Gotta Love Frontend, Tel Aviv, 28 June 2016

Closing keynote talk on Progressive Web Apps, proxy browsers and emerging markets


bruce lawson

June 28, 2016

More Decks by bruce lawson

Other Decks in Technology


  1. World-Wide Web, not Wealthy Western Web Bruce Lawson, Opera Software

  2. My pledge to the Web ▪ Never gonna give you

    up ▪ Never gonna let you down ▪ Never gonna run around and desert you ▪ Never gonna make you cry ▪ Never gonna say goodbye ▪ Never gonna tell a lie and hurt you
  3. Make the web better for… Consumers Business owners The next

    4 billion 4bn Developers
  4. ICT access by population Total 
 global population ~7.4 billion

 internet 1.1 billion Total 
 internet users 3.2 billion Mobile phones 5.2 billion Within mobile coverage 7 billion
  5. The world’s offline population Total 
 internet users 3.2 billion

 internet 1.1 billion India 1.063 billion Countries outside of the top 20 China 755 million Indonesia 213 million Pakistan 165 million Bangladesh 148 million Nigeria 111 million Brazil 98 million Ethiopia 95 million Mexico 70 million Congo, Dem. Rep. 68 million Philippines 63 million Russian Federation 55 million Iran, Islamic Rep. 54 million Myanmar 53 million Vietnam 52 million United States 51 million Tanzania 49 million Thailand 48 million Egypt, Arab Rep. 42 million Turkey 41 million

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. Jon Hicks’ map

  15. None
  16. ▪ Black Friday + Cyber Monday: $2.9 Bn ▪ Double

    11 Day: $9.2 Bn Sources: Nanjing Marketing Group, Q4 2014 Ecommerce (top sales day)
  17. Total online retail spending in China reached $307 billion in

    2013 and is forecast to grow at a compound annual rate of nearly 20% until 2019, when it should exceed $1 trillion. “ $1 trillion by 2019 - China Online Retail Forecast Forrester
  18. None
  19. in Indonesia 75% of users are on older 2G, or

    GSM/ EDGE, networks, and the nation’s geography (it is made up of thousands of islands) presents additional challenges… more than half of Indonesian smartphone users said they experienced network problems daily. “ Indonesia - Measuring and improving network performance Ericsson, September 2014
  20. None
  21. in 1993, Bangladesh became the first South Asian country to

    adopt cellular technology … household ownership of at least 1 working mobile phone grew from 29.85% in [2008] to 56.07% in [2011]. “ - Johns Hopkins Bloomberg School of Public Health Feb 2015
  22. None
  23. Five years ago, buying a cell phone SIM card in

    Myanmar could set you back more than $2,000… In August [2014], Qatar’s Ooredoo began selling data-enabled cards with a 3G connection for $1.50. “ SIM: was $2,000 now $1.50 - When a SIM Card Goes From $2,000 to $1.50 Bloomberg (29 Sept '14)
  24. None
  25. we expect the number of Internet users to at least

    double, from 190 million in 2014 to 400 million in 2018 … We expect the Internet to contribute $200 billion to India’s GDP (5% of total GDP) by 2020. “ - Boston Consulting Group (BCG), 23 April 2015

  27. 56% in emerging economies saw themselves first and foremost as

    global citizens rather than national citizens. In Nigeria (73%), China (71%), Peru (70%) and India (67%) the data is particularly marked. “ - Globescan poll for BBC, April 2016
  28. None
  29. None
  30. 1. google.com 2. facebook.com 3. youtube.com 4. wikipedia.org 5. yahoo.com

    Top domains: USA 6. twitter.com 7. wellhello.com 8. addthis.com 9. wordpress.com 10. apple.com
  31. 1. Apple iPhone 2. Apple iPad 3. Samsung Galaxy S

    Duos 2 4. Samsung Galaxy S3 5. Samsung Galaxy Grand Prime Top handsets: USA 6. Samsung Galaxy Grand Neo Plus 7. Samsung Galaxy grand Neo GT 8. Nokia Asha 201 9. Samsung Galaxy Note III 10.TracFone LG 306G
  32. 1. facebook.com 2. google.com 3. google.co.id 4. wordpress.com 5. youtube.com

    Top domains: Indonesia 6. blogspot.co.id 7. wikipedia.org 8. indosat.com 9. liputan6.com 10. xl.co.id
  33. 1. Nokia X201 2. Nokia Asha 210 3. Nokia C3-00

    4. Generic WAP 5. Nokia Asha 205.1 Top handsets: Indonesia 6. Samsung Galaxy V SM-G313HZ 7. Nokia 215 8. Nokia X2-02 9. Samsung GTS5260 Star 2 10. Nokia 5130 XpressMusic
  34. 1. google.com.ng 2. facebook.com 3. google.com 4. naij.com 5. youtube.com

    Top domains: Nigeria 6. bbc.com 7. opera.com 8. wikipedia.org 9. goal.com 10. waptrick.com
  35. 1. Nokia Asha 200 2. Nokia Asha 210 3. Nokia

    X2-01 4. Nokia C3-00 5. TECNO P5 Top handsets: Nigeria 6. Nokia Asha 205 7. Nokia Asha 201 8. TECNO M3 9. Infinix Hot Note X551 10. Infinix Hot 2 X510

  37. Making the web work on lower-spec devices

  38. Progressive Web Apps ▪ “install” to the home screen ▪

    have their own icon (defined by the web developer) ▪ can launch full-screen, portrait or landscape ▪ but “live” on the Web
  39. Average android app gets uninstalled by 77% of users in

    24 hrs. By day 90, Install retention is down to 3.97% “ Unappiness - http://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and-that-the-best-apps-do-much-better/
  40. Most installed apps are not used often. The average app

    user has 36 apps installed on his or her smartphone. Only one in four of those apps are used daily, while 1 in 4 apps are never used. “ Native Apps take up space - How Consumers Really Find and Use Your Apps (Google research, May 2015)
  41. None
 With space this limited, the user is comparing

    their personal photo collection with the adoption of a new app on their phone. “ - Mobile App Developers Are Suffering
  43. Africa: mobile phone use

  44. we didn’t stand a chance as we were fighting with

    both our competitors and other apps for a few more MB of room inside people’s phones. “ Birdly - Why you shouldn’t bother creating a mobile app
  45. people side-load apps and other content from third parties who

    have these apps downloaded to a PC and for a small fee will install apps from their computers to users’ phones. “ Nigeria - Constance Okoghenun, konga.com
  46. Manifest file stores metadata for your web app: icons, description,

    colors, and related info that lets browsers create high-quality experiences for the launcher icon, task switcher, and splash screen.
  47. <link rel="manifest" href="/manifest.json"> all in the <head>

  48. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }

  50. None
  51. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "fullscreen", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  52. { "name": "Air Horner", "short_name": "Air Horner", "icons": [ {

    "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#2196F3", "background_color": "#2196F3", "display": "fullscreen", "orientation": "portrait", "start_url": "/?home=true" }
  53. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#990000", "background_color": "#DFCFAF", "display": "fullscreen", "orientation": "landscape", "start_url": "/inbox-attack/?home=true" } https://andreasbovens.github.io/inbox-attack/
  54. Tools Manifest Generator http://brucelawson.github.io/manifest/ 
 Manifest validator manifest-validator.appspot.com
 List of

    PWAs pwa.rocks
  55. { "name": "Simple web app demo", "short_name": "Demo", "icons": [

    { "src": "icon-medium.png", "sizes": "96x96" },{ "src": "icon-large.png", "sizes": "192x192" } ], "theme_color": "#3F51B5", "background_color": "#F5F5F5", "display": "standalone", "orientation": "portrait", "start_url": "/simple-demo/?home=true" }
  56. None
  57. None
  58. Flipkart Lite ▪ 40% returning visitors week over week

    +63% conversions from Home screen visits
 ▪ 3x time spent on FlipKart Lite
  59. We want Flipkart Lite available on every phone over every

    flaky network in India “ Engagement + Reach - Amar Nagaram (Flipkart engineering)
  60. Progressive Web Apps ▪ live on the server so no

    update distribution lag
 ▪ require no app store or gatekeeper
 ▪ are a normal website on browsers such as Opera Mini, Safari, Windows phones
 ▪ searchable, indexable, linkable
 ▪ can work offline

  62. None
  63. Appcache http://www.lollercoasterlab.com/2011/05/foreveralonethispartyiscrp.html

  64. The appcache API is another big mistake. It’s the best

    example of not understanding the problem before designing a solution, and I’m still trying to fix that mess. “ SlapDache - Hixie
  65. None
  66. None
  67. None
  68. Also with Service Worker ▪ Push Notifications
 ▪ Background Sync

  69. None
  70. Responsive images

  71. None
  72. ▪ <picture> ▪ srcset attribute ▪ x descriptor ▪ w

    descriptor ▪ sizes attribute Video, tutorials New HTML thingies
  73. Average Bytes per Page by Content Type Total 2296 kB

    Stylesheets 76 kB HTML 66 kB Images 1,457 kB Other 4 kB Video 203 kB Fonts 126 kB Scripts 358 kB Data: httparchive.org, 15 April 2016 (Alexa Top 1,000,000 Sites)
  74. 500MB data: hours worked


  76. None

  78. None
  79. Meet Thor

  80. Stop! Hammer Time

  81. ad-blocking

  82. Opera Mini consumes on an average 14% less battery and

    89% less data when compared to other mobile browsers. “ Testing in India - Cigniti Technologies (Chrome, UC browser, CM browser and UC Mini on WiFi, 2G and 3G networks in India, March April 2015)
  83. A third of Indian citizens, especially in the rural parts

    of the country remains without power, as does 6% of the urban population. During peak hours the shortage was 9.8 percent. “ Battery life matters - Federation of Indian Chambers of Commerce & Industry (2012)
  84. Nearly 30 per cent of our annual smartphone unit sales

    have power banks bundled in," said Alok Gupta, managing director and chief executive of The Mobile Store, India's largest cellphone retailer. "Two years ago, less than 1 per cent of our annual smartphone sales had power banks bundled in." “ Battery life matters 2 - Business Insider (October 2015)
  85. None
  86. Approximately 600 million times per second, particles collide within the

    Large Hadron Collider (LHC)…Electronic circuits record the passage of each particle …and send the data to the CERN Data Centre… Physicists must sift through the 30 petabytes or so of data produced annually. “ - CERN computing
  87. None
  88. None
  89. None
  90. In India, only 96k of the 736k cell towers are

    3G enabled, but more critically, only 35k of those towers have a fiber optic connection to the backbone, which results in inconsistent connection. “ Flaky connection - India's mobile Internet: The revolution has begun Avdendus (2013)
  91. None
  92. Design considerations for developing markets

  93. None
  94. None
  95. None
  96. Tech constraints for lower- spec markets

  97. Everything happens on the server ▪ Everything needs user interaction

    ▪ Everything needs a server roundtrip ▪ JS on page load runs for 5 seconds ▪ JS-only APIs do NOT work More: Opera Mini and JavaScript.
  98. Design won't always be preserved ▪ No CSS rounded corners

    or gradients ▪ Animations (CSS/ SVG) show only first frame ▪ No web fonts ▪ Don't use icon fonts; use SVG Make SVG icons (even more!) responsive.
  99. None
  100. we've launched our first Holy Grail app into production! …

    It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker “ Holy Grail App - AirBnB
  101. because we serve up real HTML instead of waiting for

    the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines. … It feels 5x faster. “ Holy Grail App #2 - AirBnB
  102. Rise of The Smartphones

  103. India emerged as the world's third largest smartphone market after

    the U.S. and China. Total smartphone shipments are expected to increase to reach more than 150 million units in 2018. “ - Busiess Korea (8 May '15)
  104. Smartphone shipments to the Middle East and Africa saw unprecedented

    year-on-year growth of 83% in 2014… Feature phones have been hit hard … with shipments down 4.5% year on year in 2014. “ - International Data Corporation (IDC) (26 Apr '15)
  105. None
  106. Bruce’s law of Smartness™

  107. None
  108. 91.7% live within range of a 2G network. At less

    than a quarter the speed of a 56K dialup modem, 2G/ GSM (9.6 KBPS) is insufficient for practical use of the internet. 48.7% live within range of a 3G mobile network. “ Infrastructure - State of Connectivity 2014 internet.org
  109. Opera Mini: modes ▪ High mode: WebView (≈ 50% compression)

    ▪ Extreme mode: Server (up to 90% compression)
 ▪ iOS defaults to High mode
 ▪ Android defaults to Extreme mode (except Poland, USA, Sweden, Norway, Russia and Germany, which default to High)
 ▪ WindowsPhone, Feature Phones: Extreme mode only

  111. None
  112. Smartphone growth? ▪ Global smartphone shipments fell 3 percent annually

    from 345.0 million units in Q1 2015 to 334.6 million in Q1 2016. Strategy Analytics (28 April 2016) ▪ According to IDC, the market grew by 0.2 per cent year-on-year to 334.9 million units, marking “the smallest ever year-on-year growth on record”. Mobile World Live, 28 April 2016
  113. None
  114. In Africa, 7 in 10 people who do not use

    the internet say they just don’t know how to use it, and almost 4 in 10 say they do not know what the internet is. 
 In high-income Poland and the Slovak Republic, one- fifth of adults cannot use a computer. “ Africa: digital illiteracy web? - World Bank
  115. 41% do not use the internet at all, 53% do

    not have broadband access at home, and 23% do not use cell phones. “ American seniors - Older Adults and Technology Use (Pew Research Centre, April 2014)
  116. None
  117. Video by ClubInternet, Pakistan. 
 Used by kind permission. http://clubinternet.co/

  118. None
  119. None
  120. Developing countries are home to 94% of the global offline

    population. “ - State of Connectivity 2014, internet.org
  121. Digital Divide: Africa 2011-12 Individuals who use the internet (%)

    0 5 10 15 20 25 Bottom Upper
 40% 60% Mature Young
 (45+) (15-24) Rural Urban Women Men
 Gender Location Age Income distribution
  122. Rural mobile internet users grew by a staggering 93% between

    December 2014-Dec 2015, yet only nine per cent of the hinterland has access to the technology. In comparison, 53% of urban areas had mobile internet connectivity and grew at 71% during the same period. “ Digital Divide (India) - Times of India, 3 Feb 1016
  123. Making the internet universally accessible and affordable should be a

    global priority. “ World Bank
  124. In Nigeria, the data needed to watch just 2 minutes

    of online video a day can cost more than sending a child to school for a month. “ Nigeria - How To Make Internet Affordable
  125. Digital products are taxed as luxury goods Import tariffs (%)

    0 5 10 15 20 C uba C am bodia Argentina Brazil C am eroon C entral 
 African R ep. C had C ongo, D em . 
 R ep. G abon Liberia Belarus M adagascar Sam oa M ozam bique C hile Computers Laptops Computers and laptops
  126. Digital products are taxed as luxury goods Import tariffs (%)

    0 5 10 15 20 25 30 35 Fiji Pakistan Sam oa D om inican 
 R epublic C abo Verde Bangladesh Zim babw e Antigua and
 Barbuda Barbados Belize D om inica G renada G uyana Jam aica Mobile phones Mobile phones
  127. None
  128. • Settle on fair and transparent ICT taxes. • Get

    governments and donors to step up efforts. • Agree on “affordability”: 1 GB for 2% • Invest in public access solutions. • Make getting women online a top priority. Fast Africa
  129. Online work can prove particularly beneficial for women, youth, older

    workers, and the disabled, who may prefer the flexibility of working from home or working flexible hours. “ Online work
  130. Women 25% Men 75% Total nonagricultural employment Women 44% Men

    56% Online work (Elance) Web empowers women
  131. Online work: Most important advantages Able to earn extra money

    Higher chances of getting higher earnings than in jobs offline Able to work from home 
 and work flexible hours Reduce time and 
 cost for job search Provide access to the 
 job market which 
 was limited before Higher chances of 
 getting a job that matches 
 my skills and interests 0 10 20 30 40 50 Men Women Percent of respondents
  132. Online work: Most important disadvantages Payment is not 

    enough Friends and family 
 do not understand 
 what I am doing Do not have any 
 social benefits Require access to an 
 online payment system Require access to internet Require internet and 
 computer skills The job is temporary, 
 and it is not for a 
 long-term career 0 10 20 30 40 Men Women Percent of respondents
  133. The government of the Indian state of Kerala set up

    the Kudumbashree project to outsource information technology services to cooperatives of women from poor families; 90 percent of the women had not previously worked outside the home. “ “Prosperity of the family”
  134. Access to the internet is critical, but not sufficient “

    World Bank:
  135. the full benefits of the information and communications transformation will

    not be realized unless countries continue to improve their business climate, invest in people’s education and health, and promote good governance. “
  136. an increase in Internet maturity similar to the one experienced

    in mature countries over the past 5 years creates an increase in real GDP per capita of $500 on average during this period. “ Internet matters - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)
  137. It took the Industrial Revolution of the 19th century 50

    years to produce the same result. “ Internet matters - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)
  138. brucel@opera.com opera.com/developer brucelawson.co.uk @brucel

  139. Thanks ▪ Me by HTML sign in Tokyo by Doug

    Schepers (@shepazu), used with permission ▪ World Development Report 2016: Digital Dividends ▪ “Is Google usable” - clubinternet.co; used with permission ▪ Opera's Blink commits cake photographed by Andreas Bovens ▪ Proxy browser market share ScientiaMobile, used with permission . ▪ Overloaded truck, monks buying phones, packed tuk- tuk, Bangkok cables Bruce Lawson. All rights reserved. ▪ Putri photo used with Putri's permission; all rights reserved.
  140. Maps ▪ True size of Africa by Kai Krause (Public

    Domain) ▪ Map of Indonesia Single Color by FreeVectorMaps.com ▪ Map of India Single Color by FreeVectorMaps.com ▪ Map of Bangladesh Single Color by FreeVectorMaps.com ▪ Map of Myanmar Single Color by FreeVectorMaps.com ▪ Map of China Single Color by FreeVectorMaps.com ▪ Map of Africa Single Color by FreeVectorMaps.com ▪ Map of Asia Single Color by FreeVectorMaps.com