Outperforming native platforms with Progressive Web Application

Way of Zattoo web platform from web site to progressive web application. Explanatory showcase of mobile and desktop applications made on pure HTML, CSS and JavaScript. Look into native markets delivery.

Transcript

1. View Slide

2. 25.06.2019, TAMEDIA EXCHANGE
   Outperforming native
   Apps with Progressive
   Web App
   

   View Slide

3. 25.06.2019, TAMEDIA EXCHANGE Page 3
   whoami
   Bogdan Plieshka
   Frontend Engineer at Zattoo
   

   View Slide

4. Demo
   Yes, right away
   25.06.2019, TAMEDIA EXCHANGE Page 4
   

   View Slide

5. This is Web App!
   HTML, CSS, JavaScript - nothing more
   

   View Slide

6. 25.06.2019, TAMEDIA EXCHANGE
   https://beta.zattoo.com
   

   View Slide

7. What our users say?
   A lot of surprises
   25.06.2019, TAMEDIA EXCHANGE Page 7
   

   View Slide

8. Content pages
   Page 8
   “Wann gibt es diese App über ITunes zum herunterladen?
   Bin bis jetzt sehr zufrieden ”
   “When there is this app on iTunes for download?
   I am very satisfied so far ”
   — iOS Safari user
   25.06.2019, TAMEDIA EXCHANGE
   

   View Slide

9. Content pages
   Page 9
   “Finde ich super gemacht. Wann kommt das
   auf der Android TV App?”
   “I think it's great. When will that be on the Android TV app?”
   — Mac OS Safari user
   25.06.2019, TAMEDIA EXCHANGE
   

   View Slide

10. 25.06.2019, TAMEDIA EXCHANGE
    “Cool, unbedingt APP Upgrade machen!”
    “Cool, be sure to upgrade APP!”
    — Android Chrome user
    “Wann kommen alle Funktionen wie in der App?”
    “When will all functions come in the app?”
    — iOS Safari user
    

    View Slide

11. Users don’t care about technologies
    Users care about experience
    25.06.2019, TAMEDIA EXCHANGE Page 11
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. Performance is not about numbers
    Performance is all about feelings
    25.06.2019, TAMEDIA EXCHANGE Page 16
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. How?
    Web mindset
    25.06.2019, TAMEDIA EXCHANGE Page 20
    

    View Slide

21. Stopped limiting
    Most of the performance problems in web coming from
    custom implementation instead of using native browser APIs
    25.06.2019, TAMEDIA EXCHANGE Page 21
    

    View Slide

22. View Slide

23. Devil in details
    Something that no one ever asked
    25.06.2019, TAMEDIA EXCHANGE Page 23
    

    View Slide

24. View Slide

25. So we get low
    25.06.2019, TAMEDIA EXCHANGE Page 25
    01
    Care about low-end devices. Everything that good for
    sluggish phone good for any high-end device.
    02
    Forget about desktop or mobile experience. Do web
    experience.
    03
    Consistency is a must.
    Nothing should be introduced without reason.
    04
    Prevent content jumps, empty screens, do
    animations
    05
    Speak to users, receive feedback, iterate on it.
    06
    Trust your engineers
    

    View Slide

26. Accessibility
    What if run your application with my fridge?
    25.06.2019, TAMEDIA EXCHANGE Page 26
    

    View Slide

27. 25.06.2019, TAMEDIA EXCHANGE Page 27
    Not so friendly, heh?
    

    View Slide

28. Size matters
    Page 28
    Why do we need hold megabytes of app in our pockets?
    25.06.2019, TAMEDIA EXCHANGE
    

    View Slide

29. Distribution
    Web is everywhere
    Native applications are limited by their platforms
    25.06.2019, TAMEDIA EXCHANGE Page 29
    

    View Slide

30. From Browser to App
    25.06.2019, TAMEDIA EXCHANGE Page 30
    You can find “Add to home screen” button
    in most of major browsers
    

    View Slide

31. Windows Market
    supports PWA for a long time
    25.06.2019, TAMEDIA EXCHANGE Page 31
    developer.microsoft.com/en-us/windows/pwa
    they even have tool for easy publishing pwabuilder.com
    

    View Slide

32. Google Play
    opens for PWA
    25.06.2019, TAMEDIA EXCHANGE Page 32
    This year Google announced support of Progressive
    Web Apps in their market as first-class citizens
    

    View Slide

33. Apple a bit behind
    25.06.2019, TAMEDIA EXCHANGE Page 33
    Generally you can already use PWA in iOS and Mac OS, however
    it’s not available in App Store yet.
    More sadly that over last years Safari became new IE.
    

    View Slide

34. - Can we replace all native apps with web?
    - No
    25.06.2019, TAMEDIA EXCHANGE Page 34
    Web & Native serve different purposes, but…
    - web can compete close enough*
    - web can fill uncovered platforms without big effort
    - web can instantly impress, give a sneak-peek into native
    Don’t limit Web
    

    View Slide

35. 25.06.2019, TAMEDIA EXCHANGE
    THX!
    and have a nice surfing!
    

    View Slide

36. View Slide