The document discusses component-based UI architecture, highlighting the evolution of HTML and CSS, alongside an analysis of MVC (Model-View-Controller) patterns. It emphasizes the importance of separation of concerns, one-way data flows, and scalability within applications using tools like React and Flux. The author, Alex Moldovan, shares insights from his experience as a full stack developer and invites questions from the audience.

1. Component Based UI Architecture
Alex Moldovan
Full Stack Developer @ Fortech
alexnmoldovan
medium.com/@alexnm

3. About me
Full Stack Developer
Tweet me: @alexnmoldovan
Blog: medium.com/@alexnm

4. History Lesson

5. 1993
HTML
1999
HTML 4.1
2008 20142010 2012
?CSS

6. MVC
Model
View
Controller

7. View-Controller Coupling
View Controller
request / routing
response / render
Client Server

8. View-Controller Coupling
View Controller
create
onClick
getModel
dataReady

9. Models
Product
User
Controller Model

10. Models
Controller Model View
users
products
showTab
selectedValue

11. Model
users
products
showTab
selectedValue
Models
APPLICATION
STATE
UI
STATE

12. Component
UI State
View
Event
Handling

21. Future of html
<Root>
<Header />
<Navbar />
<MainContent>
<Breadcrumbs />
<ProductImage />
<ProductDetails>
<Interactions />
<Tags />
<Rating />
</ProductDetails>
</MainContent>
<Footer />
</Root>

22. React Case Study

23. JSX

24. JS

25. DEMO

27. 1993
HTML
1999
HTML 4.1
2008 20142010 2012
?
THE FUTURE OF HTML IS JAVASCRIPT
CSS

28. Model
users
products
showTab
selectedValue
Models
APPLICATION
STATE
UI
STATE

29. Flux

30. ViewStoreDispatcherAction
Event Emitter App State Components

31. ADD_TO_CART
Dispatcher
Product
Store
Cart Store
dispatch
emit
emit
dispatch
dispatch

32. Components + Flux
Separation of concerns
Scalability
One-way flows
Visibility & Understanding
Encapsulation

33. Thank you! Questions?
Alex Moldovan
Full Stack Developer @ Fortech
alexnmoldovan
medium.com/@alexnm