More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Modern Web Applications
Similar to Modern Web Applications (20)
Recently uploaded
Recently uploaded (20)
Modern Web Applications
- 1. Modern Web Applications Omer Goktug Poyraz @OGPoyraz
- 2. 1. Request Web Application SIMPLE SPA 2. Server returns HTML SERVER CDN 3. Request Application Assets ( JS, CSS, Images) 4. Returns Assets ( JS, CSS, Images) We will talk about this part ( Mostly JS & CSS ) How to do it with Modern Way! Where we are right now ? SERVICES
- 3. Compute on the client side 📱 Mobile web is slow 😕 Todays problems
- 4. How loading time effects conversion & bounce rates %53 of visitors abandon sites if it takes more than 3 seconds to load 100ms decrease in loading %1.11 conversion increase
- 5. Performant # Delightful UX 😌 Reliable % What users expect from todays applications?
- 6. Philosophy of Progressive Web Applications Connection is secure User can Add to Homescreen App can load while offline Page load performance is fast Design is mobile-first Site is progressively enhanced Address bar matches brand colors
- 7. Mostly Hype Techs 😎 What we should use to do PWA?
- 8. New techs & frameworks feel like
- 9. Javascript library for building user interfacesReact Virtual DOM JSX One-way Data Flow
- 10. React
- 11. React
- 12. Predictable state container for JavaScript appsRedux
- 13. Redux
- 14. Redux
- 16. asynchronous event driven JavaScript runtimeNode.js
- 17. Key user moments
- 18. App Shell Architecture & Humanized First Meaningful Paint The shell is very minimal UI that application uses and is independent of data. It's an effective way to reduce the bounce rate! No More !
- 19. Critical Rendering Normal Execution Async Execution Defer Execution
- 20. Critical Rendering Not Recommended How 🤔 Penthouse Styled-components Critical CriticalCSS … other OS packages
- 21. Service Workers / Offline Support
- 22. Service Workers / Offline Support
- 23. Service Workers / Offline Support
- 24. Service Workers / Offline Support Both indicate offline by graying out their UIs so you know “live” prices may be different. You’re in control of how much of your UX is available offline. You can offline-cache just the application shell, all of the data or offer a limited, useful set of stale data like Housing.com and Flipkart do.
- 25. Service Workers / Offline Support The React-based mobile.twitter.com use a Service Worker to serve a custom offline page when the network can’t be reached.
- 26. Common Chunks / Code Splitting
- 27. Tree shaking Chunkhashes for cachy vendor files Offline data-caching Offline Google Analytics … Other optimizations
- 28. What about testing ? Unit Tests Integration Tests DOM Testing ASync Testing with fake API’s Testing in React Apps are easy because your app is a component.
- 29. Pros Modern Web Application stacks Simple Declarative Testable Performance based Best user experience Continuous improvement Cons Learning curve Risk of abandonment Support ? Security risks ?