FRU Kathmandu: Adopting with Change Frontend Architecture and Patterns

Slide from Frontend Re-United Kathmandu.
Date: May 18, 2019

Frontend spectrum is changing rapidly. As new changes arrive, we have to be open to adopting new and better patterns and libraries. Learn about how the JavaScript scene has been evolving over the years.

Transcript

1. Adopting with Change: Frontend Architecture and Patterns MJT wwktm.c o
2. Early Web and JavaScript • AJAX based applications • All JavaScript bundled into one file • jQuery • IIFEs everywhere • Imperative code
3. Moving to JS Modules No more IIFEs
4. JS Modules in Brief • ES6 syntax + New Features • Creating smaller functions is easy • Default exports / Named exports • Import creates immutable bindings
5. JS Modules to Components • One component should focus on one section of the UI. • Shouldn’t access another’s html directly. • Encapsulates its Output(html), Style (css) and Functionality (javascript). • Each component has some way to interact with others.
6. JS Modules to Components • Separation of concerns • Major framework (React, Angular, Vue or <insert your framework here>) use this concepts
8. Service Layers • How to make our components communicate with the backend? • Building boundaries with modules • Each task needs to be encapsulated • The component should not know more than what it requires • Centralizes external access to data and functions
9. Service Layers
12. Publish - Subscribe Pattern
13. State Management • Global application state or Local component state? • Libraries for state management ◦ Redux ◦ MobX ◦ Vuex ◦ …
14. Example: Redux Redux the popular state management library uses the publisher / subscriber pattern
15. Redux - Publish Subscribe Pattern User clicks something An action triggers Ok the state has changed Repaint where state changes need to be shown
16. Middleware Pattern (A Backend Example)
17. Middleware Pattern • Middlewares are written to be composable, meaning that multiple middleware functions can be run one after the other • Example: A logging middleware • Popular Example: redux-thunk (dispatch side-effects)
18. Multiple Middlewares Working Together
19. All That Aside: How do we structure all these patterns? Early days Today
20. Structuring The Modules • Better separation of concern • Feature based • Components bundled together • Easy to understand (but you need to know a lot more)
21. But Modules Still Don’t Work on Browser s?
22. Build Tools (Webpack, Rollup, …)
23. Task Runners to Build Tools Toda y
24. Webpack Configuration • Build configuration as per your environment (production / development) • Use webpack plugins to extend your configuration
25. Final Optimized Output
26. Conclusion • The JavaScript ecosystem is ever changing • Adopt new changes along the way (not necessarily follow the hype) • JavaScript is moving to a functional / modular approach with better frameworks, libraries and build tools • The ecosystem is getting better • Cope along, follow the community
27. Thank You