Living Standard

The web is a beautiful place. On the face of it: open to all. Complicated and yet still simple. Why do I still so strongly believe in the web? What’s different today that makes the web so much more exciting than ever? And how can we help to keep the web a welcome and open place?

Transcript

1. LIVING STANDARD
   Remy Sharp ● @rem
   

   View Slide

2. I ❤ the web.
   Remy Sharp ● @rem
   

   View Slide

3. I ❤ the web.
   Remy Sharp ● @rem
   

   View Slide

4. I ❤ the web.
   Remy Sharp ● @rem
   

   View Slide

5. I ❤ the web.
   and coding for browsers
   Remy Sharp ● @rem
   

   View Slide

6. View Slide

7. I am humbled
   by the web.
   

   View Slide

8. The web is the most hostile
   software engineering
   environment imaginable.
   “
   

   View Slide

9. I am not an engineer.
   I am a web developer.
   I am a tinkerer.
   

   View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. You do not have to
    learn everything
    

    View Slide

15. View Slide

16. View Slide

17. You do not have to
    learn everything
    Be kind to yourself.
    

    View Slide

18. View Slide

19. Understand your tools
    

    View Slide

20. Solve problems
    Don’t apply solutions
    

    View Slide

21. have fun too
    This was slide was going to be about ES6, but I changed it to…
    

    View Slide

22. Arrow functions, but mostly because it looks cool:
    fn = () => …;
    Default param arguments:
    (ctx = document, s = ‘’) => ctx.querySelector(s);
    Property shorthand:
    return { nodes, length }
    Destructuring:
    const { nodes } = fn(‘span’);
    

    View Slide

23. Browser APIs
    

    View Slide

24. Get out of your
    comfort zone
    

    View Slide

25. Read
    Write
    Share
    

    View Slide

26. Raise the
    voices of others
    !
    

    View Slide

27. Work for diversity
    

    View Slide

28. People learn at
    different speeds
    It’s not just simple.
    

    View Slide

29. Why be excited
    about the web
    today?
    

    View Slide

30. WebVR
    https://webvr.info
    https://copresence.herokuapp.com
    

    View Slide

31. https://bit.ly/web-bluetooth-demos
    

    View Slide

32. Progressive
    Web
    Apps
    

    View Slide

33. Progressive
    Web
    Apps
    

    View Slide

34. Control
    over the
    network:
    offline, li-fi,
    cache, etc…
    

    View Slide

35. First class
    citizens on
    homescreen
    

    View Slide

36. 3X more time on site
    40% high re-engagement
    3X lower data usage
    70% greater conversion
    from homescreen
    https://bit.ly/flipkart-study
    

    View Slide

37. “Push notifications
    allowed us to bring
    one of the most
    compelling
    capabilities from our
    native app to our
    mobile site. We see a
    direct 20% click
    through rate from
    push notifications…” http://bit.ly/pwa-study-btr
    – Beyond the Rack
    

    View Slide

38. Reliable: control over the network
    Security: TLS/HTTPS, permissions
    Performance: fast, responsive (in all senses)
    Availability: homescreen, push notifications
    

    View Slide

39. Service worker: network control, offline, li-fi
    HTTPS & HTTP2: security, performance, push
    Manifest: add to homescreen, icons, standalone,
    orientation
    Push notifications: re-engagement
    …more
    

    View Slide

40. {
    "short_name": "My sweet app",
    "name": "This be the bees knees sweet app",
    "icons": [
    {
    "src": "icon-144.png",
    "sizes": "144x144",
    "type": "image/png"
    }
    ],
    "start_url": "/?utm_source=web_app_manifest",
    "display": "standalone",
    "orientation": "portrait",
    "background_color": "#ff0000",
    "theme_color": "#00ff00"
    }
    
    

    View Slide

41. View Slide

42. View Slide

43. Polymer: starter kit & elements
    WebRTC: PeerJS
    WebSockets: BinaryJs
    NodeJS
    Material Design
    

    View Slide

44. Polymer: starter kit & elements
    WebRTC: PeerJS
    WebSockets: BinaryJs
    NodeJS
    Material Design
    UX:
    

    View Slide

45. Requires manifest

    and service worker.
    

    View Slide

46. If I add this app to my
    home screen, it will
    work when I open it.
    

    View Slide

47. If I add this app to my
    home screen, it must
    work when I open it.
    

    View Slide

48. view source
    Rally behind
    

    View Slide

49. open source
    Rally behind
    

    View Slide

50. browsers
    Rally behind
    

    View Slide

51. web community
    Rally behind
    

    View Slide

52. contributing
    Rally behind
    

    View Slide

53. learning
    Rally behind
    

    View Slide

54. the web
    Rally behind
    

    View Slide

55. Thanks ● @rem
    

    View Slide