This document discusses replacing TypeScript with Dart for a new product. In 2016, TypeScript was initially chosen for its static typing and classes, but circular reference issues arose. Dart was then considered but had performance and ecosystem issues in version 1. Dart version 2 improved performance but dropped some features and Dart2JS stacktraces remained difficult to read. Ultimately Dart was chosen over continuing to use TypeScript due to the effort required to fix existing code issues.

1. Why we replaceTypeScript with Dart
JumperChen

2. About Me
• 名字: 陳威亨 – Jumper Chen
• 公司: 普奇科技 - ZK (Potix Corporation)
• 職位: R&D Director
• 負責: KeikaiTeam, QuireTeam, and ZK FrameworkTeam
• 學歷: III Java養成班 EEIT 24期 – (14 years ago)
• Personal Events:
• EnglishCareer 雜誌專訪 2019 - 藍領幹部轉職程式設計師
• 30 (遠見) 雜誌專訪 2016 - 黑手，Debug自己的人生
• iThome 雜誌專訪 2009 - 從機車行黑手變成程式開發的黑手
• iThome 雜誌專訪 2009 - IE 8有機會讓網頁開發走向標準化的時代

3. 故事主角: (2016年的背景)
(web spreadsheet component)
Demo

4. 2016年的春天，選新產品的語言
• Running onWeb
• Same code base for Browser and Server
• Modern Programming Language for Developers
• Static typing analysis

5. 選了TypeScript 1.8 當作新產品的語言
• Types
• Boolean, Number, String, Array,Tuple, and so on
• Union types
• String|number
• Classes
• Public, Private, and Protected modifiers
• Interfaces
• Namespaces and Modules
• Generics

6. 當年開發TS需要用到的3rd-party libraries
• TypeScript - tsconfig.json
• Typings - typings.json
• Node.js - package.json
• SystemJS - system-config.js
• Webpack - webpack-config.js
• ts-loader (customized)
• json-loader
• uglify-js
• babel
• ts-node
• Gulp - gulpfile.js
• TSLint - tslint.json
• JSDoc - jsdoc.json
• Mocha – (testing tool)
• … (嘎拉嘎拉)

7. 2016冬天，一陣寒風(不是韓流)吹來，突
然間，發現了一個不好解的問題？

8. Circular reference issue (JS 通病)
Module A
Module BModule C

9. Circular reference issue (JS 通病)
Licensed under CC

10. 選邊站? (不是 Blue vs Green)
1. Face it
• Use tools to check (unreliable)
• Lazy import modules (very easy to forget)
2. Migrate to another Lang. (Dart) but …
• 1450+ ts files already
• 350,870 lines of code (87%, 28~30w lines)
• (3~4 工人智慧)

11. 媽祖說
叫我們酸”大的”

12. Dart 1 - 2016 Nov.
• Pros.
• Types
• Number, String, Boolean, List, Map, and so on.
• Classes
• No public, protected, and private
• (but If an identifier starts with an underscore (_), it’s private to its library)
• Interfaces (implicit)
• Generics
• Asynchronous functions
• async and await
• Dartium (without compiling to JS)
• Transforms (like AOP)

13. 宅男心中的女神
Powered by JumperChen

14. Dart 1
• Cons.
• Not friendly to integrate with JS world
• 一個Browser，各自表述 
• Less Library
• Game-loop, R-Tree, RB-Tree, IntervalTree, BNF Parser Generator, Socket.io, Socket.io-client,
Dquery, Bootstrap, StAX XML parser …
• Small Ecosystem
• Performance issue
• String Operations (Dart String operation much slower than Java)
• https://github.com/dart-lang/sdk/issues/29131
• Map I/O (the Map implementation in dart2js is 3 times slower than JS version)
• https://github.com/dart-lang/sdk/issues/28210
• async/await syntax too slow
• Implement a fake future (calls Sync())
• https://github.com/dart-lang/sdk/issues/29189

15. Dart 1
• String Operations (Dart String operation much slower than Java)
FileSize Java Dart
20 MB
File Length: 20,375,011
Parsing time: 572ms
Object creation times: 3,395,835
File Length: 20,375,011
Parsing time: 938ms
Object creation times: 3,395,835
163 MB
File Length: 163,000,011
Parsing time: 4,060ms
Object creation times: 27,166,668
File Length: 163,000,011
Parsing time: 6,223ms
Object creation times: 27,166,668
326 MB
File Length: 326,000,011
Parsing time: 7,202ms
Object creation times: 54,333,335
File Length: 326,000,011
Parsing time: 11,871ms
Object creation times: 54,333,335

16. Dart 1
• Async await syntax (run 10,000 times)
// case 1
foo() async {
return 1;
}
// case 2
Future<int> bar() {
return new Future.value(2);
}
// case 3
baz() {
return 3;
}
Case 1 - Async and Await: 130ms
Case 2 - Future: 79ms
Case 3 - Sync: 0ms
main() async {
var f = await foo();
// change to ->
bar().then((b) {
// b ...
});
}
用到的地方全部要改寫用
bar().then()…

17. 當初的女神…
Photo by Damir Spanic on Unsplash

18. Dart 2 – 2018 Aug.
• Pros.
• Performance boost
• Type system (will cause runtime error)
• 而且 (7400+ errors need to be fixed) - 純工人智慧
• Cons.
• Drop Dartium
• DropTransforms
• Workaround: conditional exports
• Chrome or DartDevC (DDC)
• 目前測到的感覺，DDC沒問題不代表JS不會有問題 (老症狀)
• Dart2JS 的stacktrace (火星文)

19. Dart 2
• Dart2JS 的stacktrace (火星文)

20. Dart 2
• Source map 反推 (依舊是火星文)
都是Dart自
己的async
stracktrace

21. 發大財
祝大家寫Web