By shai reznik - www.hirez.io In this day and age, with buzz word happiness of Redux, flux, angulax, reflux, RxJS, plux, and other things which sound like toothpastes, we are flooded with data about how data should be flooded in our apps. How to structure and componentize (if that`s even a word) large scale applications is a big challenge, and In this talk Shai will debate the current state of affairs regarding data flow, and suggest some of his own experience in toothpaste magic! www.hirez.io

1. DUMB & SMART
COMPONENTS
@hirez_io

2. @shai_reznik
Long Time Front End
teacher, husband,
daughter, improv,
mud wrestling

3. NG-WAT

6. SURVEY
COMPONETS?
REDUX / FLUX? RX?

7. THIS TALK
DATA FLOW
COMPONETS
SMART AND DUMB

8. STORY
TIME!

10. ANGULAR?
Seriously?
move to React
and Flux bro...

11. This is NOT Jeff Cross
moving to react & flux...

12. A DAY LATER

13. Use REDUX!Use REDUX!
FLUX?FLUX?
So 2015...So 2015...

15. refactoring to REDUX...

16. A WEEK LATER

18. REDUX?
IT'S AWEFUL!
DON'T USE REDUX

19. It'll KIDNAP
your children!!!

20. REDUX?
CYCLE.JS dude...
It's much more FRP...

22. TOO MUCH
STUFF!

23. TOO MANY
WORDS!

24. FLUX

25. REDUX

26. REFLUX

28. CYCLE.JS

29. RXJS

31. NG-RX

34. RX-JFLUX

36. ELM

37. I FEEL DUMB

39. BUT...

40. I ALSO
LOVE IT!

41. IT'S GREAT
BECAUSE...

42. IT'S INSPIRING!

43. DON'T RUSH TO
CHANGE YOUR STACK

44. BUT DO
LEARN THE
BACKGROUND

45. WE'RE DEALING WITH
THE SAME PROBLEM

47. DATA FLOW

48. FLUX / REDUX
1 way data flow

49. CYCLE + RX.JS
1 way data flow
with observables

50. EVERYTIME I HEAR ABOUT
OBESERVABLES

51. DATA FLOW

52. DATA FLOW
VIEW LOGIC
CLIENT APP

53. DATA FLOW
VIEW LOGIC
CLIENT APP

54. DATA FLOW
VIEW LOGIC

55. DATA FLOW
VIEW
app brain

56. DATA FLOW
component tree app brain

57. WHAT'S A
COMPONENT?
?

58. STORY
TIME!

59. Back in the old days...

60. Tab 2 Tab 3
SIDE BAR
Link
Link
Link
Link
Link
link
Tab 1LOGO

62. ng-controller
ng-include

63. ng-include

65. Tab 2 Tab 3
SIDE BAR
Link
Link
Link
Link
Link
link
Tab 1LOGO

66. Tab 2 Tab 3
SIDE BAR
Link
Link
Link
Link
Link
link
Tab 1LOGO

67. Tab 2 Tab 3
SIDE BAR
Link
Link
Link
Link
Link
link
Tab 1LOGO

68. REACT

69. COMPONENT
+ =

70. DIRECTIVES!!!

71. NOT EXACTLY...

72. DIRECTIVE
DIRECTIVE
2 way
binding
LESS
RESTRICTIVE

74. ANGULAR 2
@Component({
selector: 'my-component',
templateUrl: ' my-template.html'
})
export class MyComponent {
constructor() { }
}

75. ANGULAR 2
@Component({
selector: 'my-component',
templateUrl: ' my-template.html'
})
export class MyComponent {
constructor() { }
}
1 way data binding!
@Input() myProperty;

76. ANGULAR 1.5
angular.module('myApp')
.component('my-component', {
controller: MyComponent,
templateUrl: ' my-template.html'
})
function MyComponent {
}

77. ANGULAR 1.5
angular.module('myApp')
.component('my-component', {
controller: MyComponent,
templateUrl: ' my-template.html'
})
function MyComponent {
}
1 way data binding!
myProperty: “<“

78. PARENT
COMPONENT
CHILD
COMPONENT
COMPOSITION

79. PARENT
COMPONENT
CHILD
COMPONENT
eventsstate
API

80. injects
SERVICES
API
COMPONENT

82. app braincomponent tree
?

83. OPTION #1
ROOT
APP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT

84. OPTION #1
ROOT
APP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT
state

85. OPTION #1
ROOT
APP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT
events

86. 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

87. 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

88. OPTION #2
ROOT
APP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT

89. CAN'T REUSE
COMPONETS!

90. DUMB & SMART
COMPONENTS

91. WHAT IS A
DUMB COMPONENT?

92. EXAMPLES

93. WELL... THAT
WAS DUMB...

94. ACTUALLY...

96. https://medium.com/@dan_abramov

97. https://medium.com/@dan_abramov

98. HIGHER ORDER
COMPONENTS

99. BE THAT GUYBE THAT GUY

100. DUMB
COMPONENTS

101. PARENT
DUMB
eventsstate

102. REUSABLE
EXMAPLES:
select, user-card, panel...

104. SMART
COMPONENTS

105. SMART
injects
APP LEVEL
SERVICES

106. SMART
methods
state
APP

107. OPTION #1
ROOT
APP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT

108. OPTION #2
ROOT
APP LOGIC
COMPONENT COMPONENT
COMPONENT COMPONENT

109. OPTION #3
SMART
APP LOGIC
DUMB SMART
DUMB SMART

110. DEMO
TIME!

112. AND...
WE'RE BACK!

113. BONNIE
RECOMMENDS

114. DUMB:
MOCKUPS + ONGOING REFACTORING
SMART:
ALL THE REST...

115. MORE TO COVER
* PRESENTATION STATE?
* ”OK” COMPONENTS?
* MORE...

117. SUMMARY
✔USE COMPONENTS
✔DUMB IS MORE REUSABLE
✔GET INSPIRED FROM OTHERS!

118. THANK YOU!
@hirez_io @shai_reznik
Sign up for free