Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FRU Kathmandu: Adopting with Change Frontend Architecture and Patterns

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.


Leapfrog Technology

May 18, 2019


  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
  7. None
  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

  10. None
  11. None
  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