33
Component Based UI Architecture Alex Moldovan Full Stack Developer @ Fortech alexnmoldovan medium.com/@alexnm
| Date post: | 23-Jan-2018 |
| Category: |
Technology |
| Upload: | itcamp |
| View: | 461 times |
| Download: | 1 times |
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
