Smart and Dumb Components

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