Component Based UI ArchitectureAlex Moldovan

Full Stack Developer @ Fortech

alexnmoldovan

medium.com/@alexnm

About meFull Stack Developer

Tweet me: @alexnmoldovan

Blog: medium.com/@alexnm

History Lesson

1993

HTML

1999

HTML 4.1

2008 20142010 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

APPLICATIONSTATE

UISTATE

Component

UI State

View

EventHandling

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 20142010 2012

?

THE FUTURE OF HTML IS JAVASCRIPT

CSS

Model

users

products

showTab

selectedValue

Models

APPLICATIONSTATE

UISTATE

Flux

ViewStoreDispatcherAction

Event Emitter App State Components

ADD_TO_CART

DispatcherProduct

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