Component Based UI Architecture
Alex Moldovan
Full Stack Developer @ Fortech
alexnmoldovan
medium.com/@alexnm
About me
Full Stack Developer
Tweet me: @alexnmoldovan
Blog: medium.com/@alexnm
History Lesson
1993
HTML
1999
HTML 4.1
2008
2014
2010
2012
?
CSS
MVC
Model
View
Controller
View-Controller Coupling
View
Controller
request / routing
response / render
Client
Server
View-Controller Coupling
View
Controller
create
onClick
getModel
dataReady
Models
Product
User
Controller
Model
Models
Controller
Model
View
users
products
showTab
selectedValue
Model
users
products
showTab
selectedValue
Models
APPLICATION STATE
UI STATE
Component
UI State
View
Event Handling
Future of html
<Root>
<Header />
<Navbar />
<MainContent>
<Breadcrumbs />
<ProductImage />
<ProductDetails>
<Interactions />
<Tags />
<Rating />
</ProductDetails>
</MainContent>
<Footer />
</Root>
React Case Study
JSX
JS
DEMO
1993
HTML
1999
HTML 4.1
2008
2014
2010
2012
?
THE FUTURE OF HTML IS JAVASCRIPT
CSS
Model
users
products
showTab
selectedValue
Models
APPLICATION STATE
UI STATE
Flux
View
Store
Dispatcher
Action
Event
Emitter
App State
Components
ADD_TO_CART
Dispatcher
Product Store
Cart Store
dispatch
emit
emit
dispatch
dispatch
Components + Flux
Separation of concerns
Scalability
One-way flows
Visibility & Understanding
Encapsulation
Thank you! Questions?
Alex Moldovan
Full Stack Developer @ Fortech
alexnmoldovan
medium.com/@alexnm