複合框架遷徙的正確姿勢 — AngularJS 到 React
===

###### tags: `2018`, `R3`

##### 位置: R3
##### 講者：曾苔眠

簡報 https://speakerdeck.com/alxtz/refactoring-from-angularjs-to-react

---

## 電子吉他產品特色
- 需要足夠即時
- 為了仿真需要很多特效

> 總覺得音樂產品需要強即時性的，用 electron 之類 web 介面怪怪的，不會太慢嗎？
> [name=Gold Holk]

> 音訊處理方便需要即時性的(所以用 C++)，不過使用者介面比較沒差，大部分都是在做參數調整 + 資料視覺化(也比較不會有人真的邊彈吉他邊看)
> [name=曾苔眠]

## 產品使用技術
- eletron-like desktop framwork
- AngularJS as UI framwork

## problems
- rewrite from 5yo codebase
- Recompile time > 40s
- Outdated Abstraction
- Several 3000+ line bhemoths
- Legacy Tool
- Chaos code-style

## Turing point
> 是說是 turning 吧?
> 只是說講者打 Turing

> 不好意思，簡報錯字太多 Orz
> [name=曾苔眠]

- Front-end Tech-Lead promoted to Project Owner
- Bringing Engineering Health into team
- 像是 GitHub 專案上常見的 status badge

## Tip A
### Always Communicate
- Transparency is important in Agile.
- 與團隊溝通，把問題提出來增加資訊透明，不把問題提出來違反敏捷原則。
- Only When problem expressed, It could be solved.
- 把問題提出來才能解決

## Tip B
### If expected codebase lifetime will longer then 1-year
### Caring Engineering Health

## Tip C
### It's your job to defend the clean code.

我們會舉辦讀書會，一起讀clean code。
你與需求方都有同等專業與需要來維護你的程式碼品質。

## 3 main problems

## 1. DI & $events are't scalable
Angular與後面的framework有差距一段不小的時間。

### DI -> Dependecy Injection
- 模組化的問題
- [angular 用 AMD 風格模組](https://ithelp.ithome.com.tw/articles/10191478)
- angular 的管理方式會把全域變數空間弄成一團
- 而且還會用神奇的 Angular 魔法注入更多東西

- Nested Dependecy will be easier for management
[image via](https://maxogden.com/nested-dependencies.html)

#### Solution

- replace angular1 module with CommonJS/ES6 module

### $events

- Hard to trace when events grows
- 單純以事件驅動，邏輯增加時難以除錯。（想比如 redux ）

#### solution
Redux

## Reasons to use Redux

抽象層夠厚，不與任何框架相依。
view 組織較有邏輯，相對好除錯。
而且與其他框架的橋接 library 夠多

## Combo - Components in AngularJS

{%youtube AMwjDibFxno %}
[Components, Components, Components!...and Angular 1.5 - Pete Bacon Darwin](https://www.youtube.com/watch?v=AMwjDibFxno)

- Angular的改變，若還要使用Angular可以考慮。
- Works similar to the Web Components Standard
- introduced in Angular 1.5

## 2. Build tools
Gulp -> Webpack

### Reasons from Gulp to NPM + Webpack
- Support CommonJS module, url rewrite out of the box
- Better dev experience with dev-server
- 更好的開發體驗。
- easier module auditing in build time

## 3. React

### Why
- More mature eco-system
- Easier to hire / get in project
- 比較好找人
- Familiar with team member
- 團隊裡大家都會

### How to

#### Total Rewrite
- `rm -rf ./`
- Too Risky for Production Project
- Hard to Estimate time
- only apply for corner cases

#### Progressively Rewrite
- React and Angular Co-exists
- Actually many libs doing this

## Summary
- .
- Engineering Health
- Self-aware is key to clean code

- problems
- nested dep is smore calable
- redux for cross framework