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

2. 25.06.2019, TAMEDIA EXCHANGE Outperforming native Apps with Progressive Web App
3. 25.06.2019, TAMEDIA EXCHANGE Page 3 whoami Bogdan Plieshka Frontend Engineer at Zattoo
4. Demo Yes, right away 25.06.2019, TAMEDIA EXCHANGE Page 4
5. This is Web App! HTML, CSS, JavaScript - nothing more
6. 25.06.2019, TAMEDIA EXCHANGE https://beta.zattoo.com
7. What our users say? A lot of surprises 25.06.2019, TAMEDIA EXCHANGE Page 7
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
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
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
11. Users don’t care about technologies Users care about experience 25.06.2019, TAMEDIA EXCHANGE Page 11
16. Performance is not about numbers Performance is all about feelings 25.06.2019, TAMEDIA EXCHANGE Page 16
20. How? Web mindset 25.06.2019, TAMEDIA EXCHANGE Page 20
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
23. Devil in details Something that no one ever asked 25.06.2019, TAMEDIA EXCHANGE Page 23
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
26. Accessibility What if run your application with my fridge? 25.06.2019, TAMEDIA EXCHANGE Page 26
27. 25.06.2019, TAMEDIA EXCHANGE Page 27 Not so friendly, heh?
28. Size matters Page 28 Why do we need hold megabytes of app in our pockets? 25.06.2019, TAMEDIA EXCHANGE
29. Distribution Web is everywhere Native applications are limited by their platforms 25.06.2019, TAMEDIA EXCHANGE Page 29
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
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
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
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.
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
35. 25.06.2019, TAMEDIA EXCHANGE THX! and have a nice surfing!