Tweet
Tweet

Slide 1

Slide 1 text

程式設計師的
 ⾃自我修養 [email protected]

Slide 2

Slide 2 text

github.com/Kudo . @kudochien . [email protected] ABOUT ME ▸ CCUCSIE 2002 - 2008, BS + MS (GAIS Lab) ▸ CNA 2002 - 2008 ▸ Trend Micro, startups… ▸ TechCCU 2014 / 2015 ▸ 打雜⼯工，⼈人⽣生立志解 Bugs ▸ 今年年是 CloudMosa 偽前端⼯工程師

Slide 3

Slide 3 text

序 TECHCCU 2014

Slide 4

Slide 4 text

序 TECHCCU 2015 ⼯工程師的⽣生涯規劃
 從 REACT NATIVE 開始

Slide 5

Slide 5 text

TEXT Balance CC From: https://www.flickr.com/photos/54027476@N07/5000518184/

Slide 6

Slide 6 text

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 美感 追根究底 快速學習

Slide 7

Slide 7 text

美感 CC From: https://www.flickr.com/photos/maf04/5966652501

Slide 8

Slide 8 text

CC From: https://www.flickr.com/photos/iamshinji/3063220244/ Code level beauty

Slide 9

Slide 9 text

BREAK COMMON CODE

Slide 10

Slide 10 text

美感 DESIGN PATTERNS ▸ Factory ▸ Singleton ▸ Decorator ▸ Adapter ▸ Strategy ▸ Composite ▸ …

Slide 11

Slide 11 text

⼤大話設計模式 程杰

Slide 12

Slide 12 text

美感 SOLID ▸ SRP ▸ Single responsibility principle ▸ OCP ▸ Open/close Principle ▸ LSP ▸ Liskov substitution principle ▸ ISP ▸ Interface segregation principle ▸ DIP ▸ Dependency inversion principle

Slide 13

Slide 13 text

Beautiful Code
 美麗程式

Slide 14

Slide 14 text

FUNCTIONAL PROGRAMING

Slide 15

Slide 15 text

美感 TEST ▸ Unit test ▸ Functional test ▸ Integration test

Slide 16

Slide 16 text

美感 UNIT TEST ▸ 寫出好測試的程式 ▸ Dependency Injection (DI) ▸ Mock object ▸ Case: USB pendrive test program

Slide 17

Slide 17 text

CC From: https://www.flickr.com/photos/75487768@N04/16577863294/ Architecture level beauty

Slide 18

Slide 18 text

TEXT All in one controller From: https://www.flickr.com/photos/127130111@N06/15843976929/

Slide 19

Slide 19 text

ALL PROBLEMS IN COMPUTER SCIENCE CAN BE SOLVED BY ANOTHER LEVEL OF INDIRECTION. David John Wheeler 美感

Slide 20

Slide 20 text

美感 MVC
 (MODEL VIEW CONTROLLER) From: https://en.wikipedia.org/wiki/Model-view-controller

Slide 21

Slide 21 text

美感 MVVM (MODEL VIEW VIEW-MODEL) From: https://en.wikipedia.org/wiki/Model-view-viewmodel

Slide 22

Slide 22 text

美感 MVP (MODEL VIEW PRESENTER) From: https://en.wikipedia.org/wiki/Model–view–presenter

Slide 23

Slide 23 text

MVW WHATEVER Ref: https://plus.google.com/+AngularJS/posts/aZNVhj355G2

Slide 24

Slide 24 text

美感 FLUX From: https://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html

Slide 25

Slide 25 text

美感 MODEL 的分層 - DDD (DOMAIN-DRIVEN DESIGN) From: https://github.com/zkavtaskin/Domain-Driven-Design-Example

Slide 26

Slide 26 text

美感 THE EVOLUTION OF A SOFTWARE ENGINEER ▸ https://medium.com/@webseanhickey/the-evolution-of-a- software-engineer-db854689243 ▸ 獨孤求敗 ▸ 劍器資料

Slide 27

Slide 27 text

追根究底 CC From: https://www.flickr.com/photos/drb62/2623135401/

Slide 28

Slide 28 text

程式設計師的⾃自我 修養－連結、載入、 程式庫 俞甲⼦子、⽯石凡、潘愛⺠民

Slide 29

Slide 29 text

跟 BUG 正⾯面對決

Slide 30

Slide 30 text

追根究底 是否曾經遇過這樣的狀狀況 !? ▸ 把⼀一⾏行行拿掉程式就正常了了 ▸ 先做 A 再做 B 就不會 crash 了了 ▸ 降低 thread 的數量量就可以了了 ▸ 不要跑 Daemon mode 就可以了了

Slide 31

Slide 31 text

追根究底 DEBUG CASE - I ▸ 程式不正常，好像沒有在跑 ▸ 看 Debug log ▸ 沒 Debug log ▸ Process Monitor by SysInternals ▸ IE Protected Mode

Slide 32

Slide 32 text

追根究底 DEBUG CASE - II ▸ 使⽤用⼿手機瀏覽器開了了多個分⾴頁之後，⼿手指滑動會很慢、耗電 量量⾼高、⼿手機變燙 ▸ Profiling ▸ CPU / RAM / Power Consumption ▸ Gesture Recognizer ▸ Reverse Engineering

Slide 33

Slide 33 text

PROFILING AS SINGLE TRUTH

Slide 34

Slide 34 text

追根究底 充滿好奇⼼心 ▸ 好奇別⼈人的 Bug 怎麼解的 ▸ 好奇⼈人家的技術是怎麼做到的 ▸ 好奇為什什麼⼈人家的程式就是比較快、比較省記憶體

Slide 35

Slide 35 text

快速有深度 的學習 CC From: https://www.flickr.com/photos/anned/8700093610/

Slide 36

Slide 36 text

愛上看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

Slide 37

Slide 37 text

快速有深度的學習 擁抱新技術 !? ▸ ROR 開發速度很快 ▸ NodeJS 執⾏行行速度很快 ▸ Swift 是⼀一個很棒的程式語⾔言 ▸ AngularJS, ReactJS ▸ NoSQL MongoDB ▸ 不要⼈人云亦云 ▸ 要知道⾃自⼰己要的是什什麼 ▸ 深度研究

Slide 38

Slide 38 text

快速有深度的學習 依程式語⾔言特性因地制宜 ▸ ElasticSearch reindex ▸ ⽤用 NodeJS 超痛苦 ▸ 先天 asynchronous 特性 ▸ 改⽤用 Python 好多了了

Slide 39

Slide 39 text

REACT IS NOT ONLY VDOM

Slide 40

Slide 40 text

快速有深度的學習 跟上 FRONTEND 技術變化 ▸ JavaScript ▸ jQuery ▸ BackboneJS ▸ AngularJS ▸ ReactJS ▸ VueJS ▸ AngularJS2 ▸ CSS ▸ CSS ▸ SASS ▸ CSS Modules

Slide 41

Slide 41 text

快速有深度的學習 * WEEKLY ▸ CodeTengu Weekly ▸ Android Weekly ▸ iOSGoodies ▸ Python Weekly ▸ CSS Weekly ▸ egghead.io ▸ Livecoding.tv

Slide 42

Slide 42 text

CONTRIBUTION To open source projects

Slide 43

Slide 43 text

快速有深度的學習TEXT FLOWSTATD ▸ https://speakerdeck.com/kudochien/flowstatd

Slide 44

Slide 44 text

快速有深度的學習TEXT 如果下半輩⼦子只想 DEBUG 怎麼辦 ▸ https://speakerdeck.com/kudochien/ru-guo-xia-ban-bei-zi-zhi-xiang-debug-zen-mo-ban

Slide 45

Slide 45 text

快速有深度的學習TEXT ⼯工程師的⽣生涯規劃，從 REACT NATIVE 開始 ▸ https://speakerdeck.com/kudochien/gong-cheng-shi-de-sheng-ya-gui-hua-cong-react-native-kai-shi

Slide 46

Slide 46 text

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 美感 追根究底 快速學習

Slide 47

Slide 47 text

@kudochien on twitter

Slide 48

Slide 48 text

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