reusing logic in vue and in react

Reusing logic in vue and in react by Jesse Chen @JSDC 2019/10/26 https://2019.jsdc.tw/agenda.html

Transcript

1. reusing logic in vue and in react Jesse Chen JSDC 2019 10/26/2019
2. From Taipei, Taiwan Former KKTV web developer
 Now LINE Fukuoka Working on Creator’s Market
3. what do we really want to reuse utility methods? stateful logic
4. what is stateful logic
5. let’s reuse something simple
6. https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html
7. tl;dr • implicit dependencies • name clashes • snowballing complexity
8. implicit dependencies
9. name clashes
10. snowball complex
11. So react ditched mixin what came next?
12. https://reactjs.org/docs/higher-order-components.html#use-hocs-for-cross-cutting-concerns
13. higher order component
14. implicit dependencies?
15. name clashes?
16. HOC doesn’t solve name clashes situation name clashes?
17. concerns for HOC • still has name clashes • a lot of conventions • caveats need to be taken care of • For more information:
 https://reactjs.org/docs/higher-order-components.html#use-hocs-for-cross-cutting- concerns
18. but HOC points out • Explicit dependencies from `props` • and it’s TOP DOWN
19. https://reactjs.org/docs/render-props.html#use-render-props-for-cross-cutting-concerns
20. render props
21. render props pros • only one caveat (when using it with React.PureComponent) • Top-down dependencies is clear in the render tree • it’s a technique not a new api, it works exactly the same as a normal component • HOC: the argument is not props but a component • Mixin: doesn’t render
22. render props cons • one extra level in devTool after reusing a logic • same situation for HOCs
23. can we use those ideas in vue.js?
24. the answer is yes • Install @vue/babel-preset-jsx • Rewrite your <template> into JSX like syntax inside component’s render function
25. Then why they are not popular in vue.js
26. HOC in vue.js
27. render props in vue.js
28. HOC & render props in vue.js • HOC: more things need to be passed down • Slots • v-on • render props: any component renders render props component needs to be rewrite in JSX-like syntax
29. The ultimate reason vue still using mixin
30. is because hook is the ultimate solution for reusing logic!
31. https://reactjs.org/docs/hooks-intro.html#motivation
32. after using hook
33. reuse stateful logics • mixins: very flexible, but also introduce troubles when the app scale and complexity raised • HOCs: many conventions and caveats / wrapper hell • render props: JSX specific / wrapper hell • hooks: a new way of thinking when writing web apps
34. Thank you! Any questions?