Refactoring, from AngularJS to React

Transcript

1. W 重構 從 AngularJS 到 React Alex Tzeng fb.me/alxtz.tw
2. W About Senior-ish frontend developer Often credited as a good storyteller 
 ( not what I expected )
3. Story Time
5. A desktop app that stimulates effects unit
6. Built on an eletron-like desktop framwork Use AngularJS as UI framework
7. 2 months after joining New 2.0 project
8. Main problems Rewrite from a 5-year-old codebase Recompile time > 40s Outdated abstraction Several 3000+ line behemoths Legacy tooling Chaos coding style
9. Turing point
10. Our frontend team lead Promoted to be the product owner
11. Tips on bringing in the concepts of enginneering health into your team.
12. Always communicate Transparency is one of the most important values in Agile Tip A Only if you express the problems, then you can solve them
13. If you expected the codebase will at least last 1 year Tip B Caring about enginneering health will save your time in the long run
14. Most managers want good code, even when they are obsessing about the schedule. Tip C They may defend the schedule and requirements with passion; but that’s their job. It’s your job to defend the code with equal passion.
15. 3 main problems
16. 1. DI & $events aren’t scalable
17. AngularJS uses a modularization system called Depedency Injection
18. It actually works fine
19. The problem is we usually mess it in global
20. And auto inject with angularJS magic Makes it hard to find where the depedency come from
21. For larger projects, nested dependency would have less pain to maintain
22. Solution: replace Angular1 module with CommonJS / ES6 import
23. Before After
24. Problems with AngularJS $events
25. Hard to trace / debug when event grows No established pattern, just broadcast
26. Replacement for $events Redux
27. Reasons to use Redux Relatively easy to debug Completely framework-agnostic ( works well when migrating ) Well known enough for newcomers
28. Great choice when working with multiple frameworks
29. Components in AngularJS Combo
30. Angular 1.5 introduces Components Combo Works similar to the Web Components Standard
31. Combo
32. Combo template / render()
33. Combo template / render() props
34. Combo template / render() props lifecycles
 ComDidMount ComShldUpdate
35. Combo template / render() props lifecycles
 ComDidMount ComShldUpdate Methods
37. Ok, maybe not.
39. Components + CommonJS = Scalable AngularJS
40. 2. Build tools
41. Most legacy projects uses Gulp as its task runner
42. Reasons to move from Gulp to npm + webpack Supports CommonJS module, url rewrite out of the box Better dev experience with dev-server Easier to audit module size, compile time
43. Build JavaScript using Gulp
44. Build JavaScript using Gulp Entry files
45. Build JavaScript using Gulp Entry files Preprocessor
46. Build JavaScript using Gulp Entry files Preprocessor Output path
47. Build JavaScript using Webpack Entry files Preprocessor Output path
48. 3. Migrate to React
49. Why migrate to React More mature ecosystem Easier to hire / get in project Familiar with team member
50. How to migrate Total rewrite Progressively rewrite Rewrite per page
51. Total rewrite ( rm -rf ./ ) Too risky for production project Only apply for core components Hard to estimate time
52. Progressively rewrite React & AngularJS coexist Value backward compatibility Only rewrite when code change
53. Progressively rewrite actually simple
54. Progressively rewrite Follows web component standards Easy to reuse component design
55. Summary (Story) Care more about engineering health Self-aware is the key to clean code Refactoring using the scrum way
56. Summary (3 problems) Nested dependency is more scalable Redux for cross-framework state Gulp -> Webpack Progressively migrate to React