Component Based Architecture (CBA) is the hottest buzz on the Front-End world. Not long ago it was the era of MVC. Why has the web shifted from MVC and what is CBA anyways? This talk will be mostly about concepts, but we will take Angular framework as a case study, and see it transition from MVW framework towards component based framework. lecture video: https://youtu.be/JlyEZf4vBBY

1. From MVC
To Component
Based Architecture
By Barak Drechsler

2. About Me
Barak Drechsler
◦ Front end Developer at AOL
◦ Passionate about the web since sixth grade
🐦 @BarakDrechsler

3. Short History Lesson

4. Front End Timeline
2006 20101990 2011 2013 2015
First website
20162014
CBA ERA

5. ModelViewModelView
MVVM
MVC

6. How MVW front end apps looked like?
Separate horizontal layers:
◦ VIews
◦ Controllers
◦ Models

7. Let’s see MVC example
AngularJs 1.4 quick start guide App

8. But after a while things got complicated...
Issues we had:
◦ Hard to re-use
◦ Hard to decouple
◦ Hard to maintain and understand
as the project grows
Components to the rescue!

9. Component
Based
Architecture

10. ◦ Components only control their own
View and Data
◦ Components have a well-defined
public API - Inputs and Outputs
◦ Components have a well-defined
lifecycle
(AngularJs docs)
What is a Component?

11. ◦ The whole app is a tree of
components
◦ Everything is a component, even if it
won’t be reusable.
◦ Components contain other
components
◦ Components interact with other
components through their defined API
How To Think in components?

12. ◦ Easier separation of concerns, and
single responsibility
◦ Easier to maintain and expand
◦ Reusability
Advantages of CBA

13. Stateful & Stateless components
Stateful
a “living” component
which has knowledge
and state, and the ability
to modify state, and
communicate with
external resources.
Stateless
Receives inputs and
displays them
Calculates changes,
but do not store them,
but transfer them to
other components

14. Stateful component ~ impure function

15. Stateless component ~ pure function

16. Let’s see CBA example
Angular Example App

17. Thanks!
ANY QUESTIONS?
You can find me at
@BarakDrechsler
barak.drechsler@gmail.com