程式設計師的自我修養

TechCCU 2016

Transcript

1. 程式設計師的
 ⾃自我修養 KUDO@CSIE.IO
2. github.com/Kudo . @kudochien . kudo@csie.io ABOUT ME ▸ CCUCSIE 2002 - 2008, BS + MS (GAIS Lab) ▸ CNA 2002 - 2008 ▸ Trend Micro, startups… ▸ TechCCU 2014 / 2015 ▸ 打雜⼯工，⼈人⽣生立志解 Bugs ▸ 今年年是 CloudMosa 偽前端⼯工程師
3. 序 TECHCCU 2014
4. 序 TECHCCU 2015 ⼯工程師的⽣生涯規劃
 從 REACT NATIVE 開始
5. TEXT Balance CC From: https://www.flickr.com/photos/54027476@N07/5000518184/
6. CC From: https://www.flickr.com/photos/drb62/2623135401/ CC From: https://www.flickr.com/photos/anned/8700093610/ CC From: https://www.flickr.com/photos/maf04/5966652501 美感 追根究底 快速學習
7. 美感 CC From: https://www.flickr.com/photos/maf04/5966652501
8. CC From: https://www.flickr.com/photos/iamshinji/3063220244/ Code level beauty
9. BREAK COMMON CODE
10. 美感 DESIGN PATTERNS ▸ Factory ▸ Singleton ▸ Decorator ▸ Adapter ▸ Strategy ▸ Composite ▸ …
11. ⼤大話設計模式 程杰
12. 美感 SOLID ▸ SRP ▸ Single responsibility principle ▸ OCP ▸ Open/close Principle ▸ LSP ▸ Liskov substitution principle ▸ ISP ▸ Interface segregation principle ▸ DIP ▸ Dependency inversion principle
13. Beautiful Code
 美麗程式
14. FUNCTIONAL PROGRAMING
15. 美感 TEST ▸ Unit test ▸ Functional test ▸ Integration test
16. 美感 UNIT TEST ▸ 寫出好測試的程式 ▸ Dependency Injection (DI) ▸ Mock object ▸ Case: USB pendrive test program
17. CC From: https://www.flickr.com/photos/75487768@N04/16577863294/ Architecture level beauty
18. TEXT All in one controller From: https://www.flickr.com/photos/127130111@N06/15843976929/
19. ALL PROBLEMS IN COMPUTER SCIENCE CAN BE SOLVED BY ANOTHER LEVEL OF INDIRECTION. David John Wheeler 美感
20. 美感 MVC
 (MODEL VIEW CONTROLLER) From: https://en.wikipedia.org/wiki/Model-view-controller
21. 美感 MVVM (MODEL VIEW VIEW-MODEL) From: https://en.wikipedia.org/wiki/Model-view-viewmodel
22. 美感 MVP (MODEL VIEW PRESENTER) From: https://en.wikipedia.org/wiki/Model–view–presenter
23. MVW WHATEVER Ref: https://plus.google.com/+AngularJS/posts/aZNVhj355G2
24. 美感 FLUX From: https://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html
25. 美感 MODEL 的分層 - DDD (DOMAIN-DRIVEN DESIGN) From: https://github.com/zkavtaskin/Domain-Driven-Design-Example
26. 美感 THE EVOLUTION OF A SOFTWARE ENGINEER ▸ https://medium.com/@webseanhickey/the-evolution-of-a- software-engineer-db854689243 ▸ 獨孤求敗 ▸ 劍器資料
27. 追根究底 CC From: https://www.flickr.com/photos/drb62/2623135401/
28. 程式設計師的⾃自我 修養－連結、載入、 程式庫 俞甲⼦子、⽯石凡、潘愛⺠民
29. 跟 BUG 正⾯面對決
30. 追根究底 是否曾經遇過這樣的狀狀況 !? ▸ 把⼀一⾏行行拿掉程式就正常了了 ▸ 先做 A 再做 B 就不會 crash 了了 ▸ 降低 thread 的數量量就可以了了 ▸ 不要跑 Daemon mode 就可以了了
31. 追根究底 DEBUG CASE - I ▸ 程式不正常，好像沒有在跑 ▸ 看 Debug log ▸ 沒 Debug log ▸ Process Monitor by SysInternals ▸ IE Protected Mode
32. 追根究底 DEBUG CASE - II ▸ 使⽤用⼿手機瀏覽器開了了多個分⾴頁之後，⼿手指滑動會很慢、耗電 量量⾼高、⼿手機變燙 ▸ Profiling ▸ CPU / RAM / Power Consumption ▸ Gesture Recognizer ▸ Reverse Engineering
33. PROFILING AS SINGLE TRUTH
34. 追根究底 充滿好奇⼼心 ▸ 好奇別⼈人的 Bug 怎麼解的 ▸ 好奇⼈人家的技術是怎麼做到的 ▸ 好奇為什什麼⼈人家的程式就是比較快、比較省記憶體
35. 快速有深度 的學習 CC From: https://www.flickr.com/photos/anned/8700093610/
36. 愛上看CODE ▸ Thinker ⼤大⼤大的⽂文章 ‣ 讀 code 和讀⽂章應該差不多 ‣ http://www.codemud.net/~thinker/GinGin_CGI.py/show_id_doc/498 ‣ 閱讀程式碼的⼼理層⾯ ‣ http://www.codemud.net/~thinker/GinGin_CGI.py/show_id_doc/497
37. 快速有深度的學習 擁抱新技術 !? ▸ ROR 開發速度很快 ▸ NodeJS 執⾏行行速度很快 ▸ Swift 是⼀一個很棒的程式語⾔言 ▸ AngularJS, ReactJS ▸ NoSQL MongoDB ▸ 不要⼈人云亦云 ▸ 要知道⾃自⼰己要的是什什麼 ▸ 深度研究
38. 快速有深度的學習 依程式語⾔言特性因地制宜 ▸ ElasticSearch reindex ▸ ⽤用 NodeJS 超痛苦 ▸ 先天 asynchronous 特性 ▸ 改⽤用 Python 好多了了
39. REACT IS NOT ONLY VDOM
40. 快速有深度的學習 跟上 FRONTEND 技術變化 ▸ JavaScript ▸ jQuery ▸ BackboneJS ▸ AngularJS ▸ ReactJS ▸ VueJS ▸ AngularJS2 ▸ CSS ▸ CSS ▸ SASS ▸ CSS Modules
41. 快速有深度的學習 * WEEKLY ▸ CodeTengu Weekly ▸ Android Weekly ▸ iOSGoodies ▸ Python Weekly ▸ CSS Weekly ▸ egghead.io ▸ Livecoding.tv
42. CONTRIBUTION To open source projects
43. 快速有深度的學習TEXT FLOWSTATD ▸ https://speakerdeck.com/kudochien/flowstatd
44. 快速有深度的學習TEXT 如果下半輩⼦子只想 DEBUG 怎麼辦 ▸ https://speakerdeck.com/kudochien/ru-guo-xia-ban-bei-zi-zhi-xiang-debug-zen-mo-ban
45. 快速有深度的學習TEXT ⼯工程師的⽣生涯規劃，從 REACT NATIVE 開始 ▸ https://speakerdeck.com/kudochien/gong-cheng-shi-de-sheng-ya-gui-hua-cong-react-native-kai-shi
46. CC From: https://www.flickr.com/photos/drb62/2623135401/ CC From: https://www.flickr.com/photos/anned/8700093610/ CC From: https://www.flickr.com/photos/maf04/5966652501 美感 追根究底 快速學習
47. @kudochien on twitter
48. REFERENCES ▸ iOS Architecture Patterns ▸ Demystifying MVC, MVP, MVVM and VIPER ▸ Flux ▸ https://facebook.github.io/flux/ 裡⾯面這段影片值得⼀一看 ▸ Contribution ▸ Check React Native - https://github.com/facebook/ react-native