Todays web front-end applications architecture. All resources shared at the end of presentation. Full sources on: https://lnkd.in/gyQuFKK https://lnkd.in/gZK8Sp3

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

15. Orchestrating and bundlingWebpack

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 ?

30. Omer Goktug Poyraz
@OGPoyraz
https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-i-introduction
https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance
https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience
https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-4-site-is-progressively-enhanced
https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/
https://www.youtube.com/watch?v=jCKZDTtUA2A
https://www.youtube.com/watch?v=OBfLvqA_E4A
https://www.slideshare.net/grgur/prpl-pattern-with-webpack-and-react
https://medium.com/@oguzkilic/modern-front-end-yaklaşımı
https://blog.kissmetrics.com/loading-time/
https://timkadlec.com/2014/09/js-parse-and-execution-time/
https://github.com/facebookincubator/create-react-app
https://www.reactboilerplate.com/
Sources
Thanks for your time !