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

Made with Slides.com