Progressive Web Apps

Transcript

1. Our first PWA: Oceanner @dleitee @danilowoz
2. PWA Progressive Web Apps are user experiences that have the reach of the web, and are:
3. PWA Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
5. PWA Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
6. PWA Engaging - Feel like a natural app on the device, with an immersive user experience. This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.
7. Worthy of being on the home screen - When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web App to their home screen. PWA
8. AliExpress increases conversion rate for new users by 104% with new Progressive Web App ✓ 104% for new users across all browsers; ✓ 82% increase in iOS conversion rate; ✓ 2X more pages visited per session per user across all browsers; ✓ 74% increase in time spent per session across all browsers. PWA Case of Studies
9. Konga cuts data usage 92% with new Progressive Web App ✓ 92% less data for initial load, vs. native app; ✓ 82% less data to complete first transaction, vs. native app; ✓ 63% less data for initial load, vs. previous mobile web experience; ✓ 84% less data to complete first transaction, vs. previous mobile web experience. PWA Case of Studies
12. Lighthouse is an open-source, automated tool for improving the quality of web pages.
13. We are PWA!!!
14. PWA with React - Code Splitting - Server Side Rendering - Service Workers - Helmet - Apollo Cache
15. Service Workers
16. { manifest.json }
17. GraphQL + Apollo
19. CSS Methodology Atomic Design
21. Let me show * Open storybook
22. React with Atomic Design
23. Variables
24. Variables The atoms should be written without margins and positions;
25. Variables Only the molecules and organisms can set the positions of atoms, but these stacks can’t have any styles of margins and positions;
26. Variables Templates have only one function: to set the grid of pages but never positions of specific components;
27. Variables Pages render the components with a template defined and it’s here that the Atomic Design will be connected to the rest of the application;
30. Say thanks!