owned this note   changed 7 years ago  
Linked with GitHub

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

tags: 2018, R3
位置: R3
講者：曾苔眠

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

電子吉他產品特色

  • 需要足夠即時
  • 為了仿真需要很多特效

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

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

產品使用技術

  • 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
曾苔眠

  • 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 風格模組
    • angular 的管理方式會把全域變數空間弄成一團
    • 而且還會用神奇的 Angular 魔法注入更多東西

  • Nested Dependecy will be easier for management

    image via

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Components, Components, Components!..and Angular 1.5 - Pete Bacon Darwin

  • 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
Select a repo