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

Outperforming native platforms with Progressive Web Application

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.

Bogdan Plieshka

June 25, 2019
Tweet

More Decks by Bogdan Plieshka

Other Decks in Programming

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