smart and dumb components
TRANSCRIPT
DUMB & SMARTCOMPONENTS
@hirez_io
@shai_reznik
Long Time Front End
teacher, husband, daughter, improv,
mud wrestling
NG-WAT
SURVEYCOMPONETS?
REDUX / FLUX? RX?
THIS TALK
DATA FLOW
COMPONETS
SMART AND DUMB
STORYTIME!
ANGULAR?
Seriously?
move to React
and Flux bro...
This is NOT Jeff Cross
moving to react & flux...
A DAY LATER
Use REDUX!Use REDUX!
FLUX?FLUX?
So 2015...So 2015...
refactoring to REDUX...
A WEEK LATER
REDUX?
IT'S AWEFUL!
DON'T USE REDUX
It'll KIDNAP
your children!!!
REDUX?
CYCLE.JS dude...
It's much more FRP...
TOO MUCH STUFF!
TOO MANY WORDS!
FLUX
REDUX
REFLUX
CYCLE.JS
RXJS
NG-RX
RX-JFLUX
ELM
I FEEL DUMB
BUT...
I ALSO
LOVE IT!
IT'S GREAT
BECAUSE...
IT'S INSPIRING!
DON'T RUSH TO
CHANGE YOUR STACK
BUT DO LEARN THE
BACKGROUND
WE'RE DEALING WITH
THE SAME PROBLEM
DATA FLOW
FLUX / REDUX
1 way data flow
CYCLE + RX.JS
1 way data flowwith observables
EVERYTIME I HEAR ABOUT OBESERVABLES
DATA FLOW
DATA FLOW
VIEW LOGIC
CLIENT APP
DATA FLOW
VIEW LOGIC
CLIENT APP
DATA FLOW
VIEW LOGIC
DATA FLOW
VIEW
app brain
DATA FLOWcomponent tree app brain
WHAT'S A COMPONENT?
?
STORYTIME!
Back in the old days...
Tab 2 Tab 3
SIDE BARLinkLinkLinkLinkLinklink
Tab 1LOGO
ng-controller
ng-include
ng-include
Tab 2 Tab 3
SIDE BARLinkLinkLinkLinkLinklink
Tab 1LOGO
Tab 2 Tab 3
SIDE BARLinkLinkLinkLinkLinklink
Tab 1LOGO
Tab 2 Tab 3
SIDE BARLinkLinkLinkLinkLinklink
Tab 1LOGO
REACT
COMPONENT
+ =
DIRECTIVES!!!
NOT EXACTLY...
DIRECTIVE
DIRECTIVE
2 way binding
LESS RESTRICTIVE
ANGULAR 2@Component({ selector: 'my-component', templateUrl: ' my-template.html'})export class MyComponent { constructor() { }}
ANGULAR 2@Component({ selector: 'my-component', templateUrl: ' my-template.html'})export class MyComponent { constructor() { }}
1 way data binding!
@Input() myProperty
;
ANGULAR 1.5angular.module('myApp')
.component('my-component', {controller: MyComponent,
templateUrl: ' my-template.html'})
function MyComponent {}
ANGULAR 1.5angular.module('myApp')
.component('my-component', {controller: MyComponent,
templateUrl: ' my-template.html'})
function MyComponent {}
1 way data binding!
myProperty: “<“
PARENTCOMPONENT
CHILDCOMPONENT
COMPOSITION
PARENTCOMPONENT
CHILDCOMPONENT
eventsstate
API
injectsSERVICES
API
COMPONENT
app braincomponent tree
?
OPTION #1
ROOTAPP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT
OPTION #1
ROOTAPP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT
state
OPTION #1
ROOTAPP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT
events
NOT OPTIMAL
<child1 handle-click=”child1Click()”></child1><child2 handle-click=”child2Click()”
grandchild1-data=”data.items”grandchild2-data=”data.filters”grandchild3-data=”data.user”></child2>
ROOT TEMPLATE
NOT OPTIMAL
<child1 handle-click=”child1Click()”></child1><child2 handle-click=”child2Click()”
grandchild1-data=”data.items”grandchild2-data=”data.filters”grandchild3-data=”data.user”></child2>
ROOT TEMPLATE
OPTION #2
ROOTAPP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT
CAN'T REUSE
COMPONETS!
DUMB & SMARTCOMPONENTS
WHAT IS A DUMB COMPONENT?
EXAMPLES
WELL... THAT WAS DUMB...
ACTUALLY...
https://medium.com/@dan_abramov
https://medium.com/@dan_abramov
HIGHER ORDER COMPONENTS
BE THAT GUYBE THAT GUY
DUMBCOMPONENTS
PARENT
DUMB
eventsstate
REUSABLE
EXMAPLES:select, user-card, panel...
SMARTCOMPONENTS
SMART
injects
APP LEVELSERVICES
SMART
methods
state
APP
OPTION #1
ROOTAPP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT
OPTION #2
ROOTAPP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT
OPTION #3
SMARTAPP LOGIC
DUMB SMART
DUMB SMART
DEMOTIME!
AND... WE'RE BACK!
BONNIE RECOMMENDS
DUMB:
MOCKUPS + ONGOING REFACTORING
SMART:
ALL THE REST...
MORE TO COVER
* PRESENTATION STATE?
* ”OK” COMPONENTS?
* MORE...
SUMMARY✔USE COMPONENTS
✔DUMB IS MORE REUSABLE
✔GET INSPIRED FROM OTHERS!
THANK YOU!
@hirez_io @shai_reznik
Sign up for free