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.

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