Enterprise Apps for the Web Platform at Vermont Code Camp

Transcript

1. Enterprise Apps
   for the
   Web Platform
   Bradley Holt
   Program Manager, Developer Advocacy
   Center for Open-Source Data and AI Technologies
   September 15, 2018 / © 2018 IBM Corporation
   

   View Slide

2. Center for Open-
   Source Data and
   AI Technologies
   (CODAIT)
   September 15, 2018 / © 2018 IBM Corporation
   http://codait.org/
   

   View Slide

3. The Web
   Platform
   September 15, 2018 / © 2018 IBM Corporation
   NASA Earth's Light by NASA Goddard Space Flight Center, on Flickr (CC BY 2.0).
   

   View Slide

4. Instagram and other Social Media Apps by Jason Howie, on Flickr (CC BY 2.0).
   Native
   Apps
   

   View Slide

5. September 15, 2018 / © 2018 IBM Corporation
   

   View Slide

6. Cubes Colored by blizzy78, on Flickr (CC BY 2.0).
   Native App
   Complexities
   

   View Slide

7. Hybrid Mobile Apps
   September 15, 2018 / © 2018 IBM Corporation
   

   View Slide

8. Fotolia_0054 by Bildarchiv Universität Bielefeld, on Flickr (CC BY 2.0).
   Walled
   Gardens
   

   View Slide

9. lights in the dark by Celan Remus, on Flickr (CC BY 2.0).
   The
   Open
   Web
   

   View Slide

10. Progressive Web Apps
    Provides both the
    discoverability of a
    web app and the
    reliable, fast, and
    engaging user
    experience of a
    native mobile app
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

11. https://www.pwastats.com/
    

    View Slide

12. Twitter Lite
    Twitter Lite is fast,
    works offline, can
    be installed to
    your home screen,
    can send you push
    notifications, and
    is accessible on
    the open web
    September 15, 2018 / © 2018 IBM Corporation
    https://lite.twitter.com/content/lite-twitter/en.html
    

    View Slide

13. View Slide

14. Not just
    offline…
    Accès wi-fi à Gorakshep (5140m) by Jerome Bon, on Flickr (CC BY 2.0).
    

    View Slide

15. Instant access
    to content
    & data
    speed 3 by Monkieyes, on Flickr (CC BY 2.0).
    

    View Slide

16. Reliable, fast, and
    engaging user
    experience—
    regardless of
    network connectivity
    Static Wallpaper by James Spinks, on Flickr (CC BY-SA 2.0).
    

    View Slide

17. Offline, Online & ¯\_(ツ)_/¯
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

18. The next
    billion people
    on the internet
    the galaxy by tommy@chau, on Flickr (CC BY 2.0).
    

    View Slide

19. Web
    Platform
    Tools for
    Developers
    September 15, 2018 / © 2018 IBM Corporation
    lines lines by Yosuke Hayashi, on Flickr (CC BY 2.0).
    

    View Slide

20. Geolocation API
    Network Information API
    IndexedDB
    WebRTC API
    Push API
    Notifications API
    Device Orientation API
    Screen Orientation API
    Permissions API
    Proximity API
    Pointer Lock API
    Vibration API
    Payment Request API
    Battery Status API
    Ambient Light Sensor API
    Service Worker API
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

21. Add to Home Screen
    Apps meeting
    certain guidelines
    can prompt users
    to add the app to
    the Home screen
    on modern devices
    Chrome add to Home screen banner by Mozilla Contributors (CC-BY-SA 2.5).
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

22. Notifications API
    Notifications can
    deliver new
    content to users,
    even when the app
    is closed
    PWA notification by Mozilla Contributors (CC-BY-SA 2.5).
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

23. Payment Request API
    The Payment
    Request API
    enables in-app
    payments via credit
    card or payment
    processors such as
    Google Pay
    Example of basic-card support in the Payment Request API by Google Developers (CC BY 3.0).
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

24. Service Workers
    Service Workers
    allow for fine-
    grained control
    over caching of
    content and assets,
    enabling cache-first
    web apps
    Service Workers fetch diagram by Mozilla Contributors (CC-BY-SA 2.5).
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

25. IndexedDB
    IndexedDB enables
    app data to be
    stored locally within
    a browser
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

26. localForage
    localForage wraps
    IndexedDB,
    WebSQL, or
    localStorage,
    providing a
    consistent API
    regardless of which
    storage mechanism
    is supported by the
    end user’s browser
    IBM Design Icons by International Business Machines Corporation (CC BY 4.0).
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

27. Sync
    is
    Hard
    Technological devices designed by D3Images / Freepik .
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

28. Apache CouchDB
    PouchDB
    IBM Cloudant
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

29. Offline Sync for
    Progressive
    Web Apps
    PouchDB
    Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    September 15, 2018 / © 2018 IBM Corporation
    Apache CouchDB
    

    View Slide

30. Pokedex.org
    An offline-capable
    Progressive Web
    App built with
    Service Worker and
    PouchDB
    https://www.pokedex.org/
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

31. Multi-User
    Apps with
    Hoodie
    http://hood.ie/
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

32. September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

33. Devices by Darwin Laganzon, on Pixabay (CC0 Public Domain). | Cloud by Raphael Silva, on Pixabay (CC0 Public Domain).
    PouchDB
    September 15, 2018 / © 2018 IBM Corporation
    Apache CouchDB
    

    View Slide

34. Shopping List
    A series of Offline
    First demo apps—
    each built using a
    different stack
    https://ibm-watson-data-lab.github.io/shopping-list-demo
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

35. https://developer.ibm.com/code/patterns/create-an-offline-first-shopping-list-progressive-web-app/
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

36. Progressive
    Web Apps,
    Progressively
    September 15, 2018 / © 2018 IBM Corporation
    Uphill by Tuncay, on Flickr (CC BY 2.0).
    

    View Slide

37. Ensure Your Website is Mobile Friendly
    September 15, 2018 / © 2018 IBM Corporation
    • Implement responsive web design
    • Ensure cross-browser compatibility
    • Test and improve web performance
    

    View Slide

38. Improve an Existing Website
    September 15, 2018 / © 2018 IBM Corporation
    • Use an SSL/TLS certificate (Let's Encrypt is your friend)
    • Add a Web App Manifest containing app metadata
    • Use a Service Worker to make your app cache-first
    

    View Slide

39. Create a Native App-Like Experience
    September 15, 2018 / © 2018 IBM Corporation
    • Provide instant page transitions with a single-page app
    • Minimize time-to-interactive with the PRPL pattern
    • Use a local database (IndexedDB, localForage, or PouchDB)
    

    View Slide

40. Leverage the Web Platform
    September 15, 2018 / © 2018 IBM Corporation
    • Ensure that each page can be addressed via a URL
    • Implement server-side rendering
    • Bridge any gaps between web platform and native with Ionic
    

    View Slide

41. Lighthouse
    Lighthouse is a
    tool for auditing
    and improving
    web apps
    https://developers.google.com/web/tools/lighthouse/
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

42. big bend by Vincent Lock , on Flickr (CC BY 2.0).
    What will you
    build on the
    web platform?
    

    View Slide

43. Resources
    September 15, 2018 / © 2018 IBM Corporation
    • PWA Stats: https://www.pwastats.com/
    • localForage: https://localforage.github.io/localForage/
    • PouchDB: https://pouchdb.com/
    • CouchDB: http://couchdb.apache.org/
    • IBM Cloudant: https://www.ibm.com/cloud/cloudant
    • Hoodie: http://hood.ie/
    • Lighthouse: https://developers.google.com/web/tools/lighthouse/
    • Ionic: https://ionicframework.com/
    • IBM Developer: https://developer.ibm.com/
    

    View Slide

44. Thank you
    codait.org
    twitter.com/BradleyHolt
    medium.com/@BradleyHolt
    github.com/bradley-holt
    developer.ibm.com/code
    September 15, 2018 / © 2018 IBM Corporation
    

    View Slide

45. September 15, 2018 / © 2018 IBM Corporation
    

    View Slide