作為一個跨平台的 Mobile App 開發者，從入門到放棄!?

Briefly introduce how to become a cross Android and iOS platforms engineer, or not.

Transcript

1. 做⼀一個跨平台的
 Mobile App 開發者
 從入⾨門到放棄!? Elvis Lin @mopcon
 2018-11-04
2. 有技術細節 技術細節極少
3. 關於我 • Elvis Lin • Android, iOS 與 React Native 永遠的初學者 • Twitter: @elvismetaphor • Blog: https://blog.elvismetaphor.me • Slides: https://speakerdeck.com/elvismetaphor
4. 個⼈人經驗的分享
 學習的⼼心得 絕對主觀
5. ⼤大綱 • Mobile App 開發流程 • 關於那些跨平台的開發技術 • 為什什麼你應該 / 不應該同時熟悉 iOS 與 Android 的開發 • 如何從⼀一個平台跨去另外⼀一個平台 • 學習資源
6. Mobile Apps 開發流程
7. Apps 開發流程 規劃 開發 建置 測試 發佈 版本管理理 Issue Tracking
 編譯 設定 介⾯面設計
8. 較好的 Apps 開發流程 規劃 開發 建置 測試 發佈 介⾯面
 設計 編寫 測試 週期性的驗收
 遇到不清楚的需求，往前反饋
9. 規劃 開發 建置 測試 發佈 介⾯面
 設計 編寫 測試 週期性的驗收
 遇到不清楚的需求，往前反饋
10. 整個流程中有很多⼯工作
 跟平台無關，也跟寫程式無關
11. 專案管理理 來來源：https://blog.asana.com/2016/11/introducing-boards/
12. 專案管理理⼯工具 • Asana • Trello • Jira • Github Issues • 還有很多，多數都⽀支援 Kanban 的顯⽰示
13. UI設計 來來源：https://blog.zeplin.io/exporting-assets-in-zeplin-50b8b4a56b05
14. UI 設計的⼯工具 • Photoshop • Sketch • Adobe XD • Zeplin • 簡化設計師跟⼯工程師之間對於畫⾯面元素⼤大⼩小與相對位置 的溝通
15. 測試 你在寫程式的時候有考慮過 QA 的感受嗎！ 沒有 因為你只想到你⾃自⼰己
16. 作為⼀一個剛入⾨門的開發者 • 熟悉你使⽤用的技術 • 學習跟 PM 溝通需求、時程 • 了了解設計師的設計所要解決的問題，與操作流程 • 跟其他的開發者⼀一起分⼯工合作
17. 跨平台的開發技術 • PWA (Progressive Web App) • Hybrid App • React Native • Flutter
18. PWA • 使⽤用現代的 Web 技術，讓網⾴頁也可以提供近似 app 的 體驗 • 可以離線使⽤用，有 cache 的機制 • 透過 service worker 在背景執⾏行行任務 • 可以提供 push notification • ⼀一次開發就可以在多個⽀支援 PWA 的瀏覽器上使⽤用
19. Hybrid App • 透過 WebView 讓開發者可以使⽤用 Javascript, CSS 開發功能 • 同時將開發的功能打包成⼀一個 app，上架到 App Store 或 Google Play • 同⼀一份程式碼可以在不同平台執⾏行行 • 主要的框架：Ionic、PhoneGap • 可以⽀支援的功能比 Native SDK 少⼀一些，反應速度較慢
20. React Native • 使⽤用 Javascript (or Typescript / ReasonML) 開發 • 如果你有 React 開發的經驗，可以沿⽤用相關的知識 • 使⽤用 Bridge 機制跟 Native UI Component 做溝通 • 提供近似 Native App 的執⾏行行速度
21. React Native 來來源：https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
22. React Native Write Once, debug everywhere? ⽔水太深
23. React Native Most people only know one or two platforms well. React Native libraries that have native bridges such as maps, video, etc. requires equal knowledge of all three platforms to be successful. 
 — Gabriel Peal @Airbnb 來來源：https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology- dafd0b43838
24. Flutter • Google 推出的跨平台框架 • 使⽤用 Dart 語⾔言開發 • 良好的⽀支援 material design • 還在 preview 的階段 • ⾃自帶渲染引擎 • 提供近似 Native App 的執⾏行行速度
25. Flutter 來來源：https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
26. Flutter 如果想要部分使⽤用 Native View，部分使⽤用 Flutter 的 Widget，「⽬目前」還沒有 看到比較完整的解決⽅方案 補充：https://medium.com/flutter-community/flutter-platformview-how-to-create- flutter-widgets-from-native-views-366e378115b6
27. 跨平台與原⽣生開發 • 沒有任何⼯工具可以適合所有問題 • ⼤大部分跨平台的技術都可以滿⾜足 80% 以上的開發需求，但 是客⼾戶、老闆、專案經理理的需求，總是會有⼀一部分來來⾃自那 另外的 20% • 在產品開發初期，跨平台的技術可以有效的降低成本，縮 短開發時間 • 如果你要使⽤用最新的技術 (ex: AR, ML)，提供最流暢的使⽤用 者體驗，Native SDK 依然是維⼀一的選擇
28. 為什什麼要同時熟悉
 iOS 與 Android 的開發 • 因為可以領兩兩份薪⽔水 • 因為很簡單 • 因為潮 • 因為⼯工程師痛過
29. 你曾經聽過 PM 這樣說 這個按鈕為什什麼沒有像 Android ⼀一樣點下 去有⽔水波紋的效果？
30. 你曾經聽過 PM 這樣說 這個清單上⾯面的內容，可不可以跟 iOS ⼀一 樣滑動之後出現刪除的按鈕？（回想⼀一下 你還在針對 KitKat 開發的年年代）
31. 你曾經聽過 PM 這樣說 為什什麼這個清單在滑過頭之後沒有 iOS 這 種彈跳的效果
32. 你曾經聽過 QA 這樣說 iOS 版的 app 在登入流程中沒有辦法直接 把簡訊裡的認證碼填到輸入框裡
 （測試環境： iOS 10）
33. 你從設計師⼿手上拿到了了⼀一份 Android 版的 Layout 來來源：https://iosdesignkit.io/templates/
34. 使⽤用者並不在意你的 app 是⽤用 什什麼技術開發，他只希望你可以 提供⼀一致並且良好的使⽤用者體驗
35. 不同平台有各⾃自的特性
36. 返回鍵 • iOS 沒有實體的返回按鈕 • Android 的實體返回按鈕的操作要跟 Navigation Bar / ToolBar 的返回按鈕的⾏行行為要⼀一致 • 如果不希望返回按鈕可以按怎麼辦？怎麼設計才不會讓使 ⽤用者操作起來來很奇怪？
37. 背景執⾏行行 • 預設情況下，iOS 的 app 進入到背景後就會進入 Suspended Mode，程式會暫停執⾏行行 • Android 在進入背景後 background thread 的操作會繼續執 ⾏行行 • Android 的 service 可以提供跨 process 的存取，iOS 在跨 process ⾏行行為的共⽤用上只提供部分功能
38. 跨 iOS 或 Android 的 ⾨門檻降低
39. 兩兩個平台互相模仿 • iOS 12 提供更更多跨 app 操作的⽅方式 • Android 在 Oreo 之後對 background service 加入了了⼤大量量的限 制
40. Kotlin 跟 Swift 語法相似 來來源：http://nilhcem.com/swift-is-like-kotlin/
41. 為什什麼不需要同時熟悉
 iOS 與 Android 的開發 • ⼈人的時間是有限的 • 如果你在⼀一間⼤大公司⼯工作，iOS 跟 Android 的開發者通常不 會是同⼀一個⼈人 • 雖然你會 Android 與 iOS 的開發，同⼀一個時間裡還是只會專 注在⼀一個平台的開發上
42. 為什什麼不需要同時熟悉
 iOS 與 Android 的開發 • 公司更更偏好的事會⼀一種前端技術（Android / iOS / Angular / React ）跟⼀一種後端技術（ex: Spring, Express.js, Laravel and etc）的⼈人 • 同⼀一個 feature，backend API 跟 client 的開發可以是循序式 的，但是 Android 跟 iOS 的開發通常會是並⾏行行的 • ⼩小團隊通常會直接使⽤用跨平台開發的技術 • 你的薪⽔水並不會變兩兩倍
44. 如果你還是想要學習另 ⼀一個平台的開發.....
45. 建立⼀一個學習地圖 • 先熟習其中⼀一個平台的開發 • 根據你在⼀一個平台的經驗評估你在另外⼀一個平台學習的順 序 • 參參考官⽅方⽂文件的介紹順序 • ⼩小⼼心被原本平台的觀念念給限制住
46. 建立⼀一個學習地圖 Android iOS Activity UIViewController RecyclerView UITableView SharedPreference UserDefaults Retrofit Alamofire
47. 第⼀一階段的地圖（建議） • Lifecycle • Layout • (iOS) AutoLayout • (Android) ConstraintLayout • Network & Multi-thread • Background Task
48. 第⼆二階段的地圖（建議） • App Architecture • ex: MVVM • Access system service • Geolocation • Bluetooth
49. 有輸入也要有輸出 • 光看食譜是不可能成為⼤大廚的
50. ⽤用任務驅動 • 替學習的技術安排⼀一個具體應⽤用的場景 • 透過完成這個功能，了了解⾃自⼰己哪些地⽅方已經理理解，哪些地 ⽅方還不夠熟悉
51. 將⽬目標拆解 • 以終為始，設定⼀一個⼤大⼀一點的學習⽬目標 • 將⽬目標拆解，將⼤大⽬目標拆解，為每⼀一個⼩小⽬目標設定⼀一個學 習重點 • 藉由⼩小⽬目標加速你學習的反饋
52. 加入社群 • 社群中有各種程度的開發者 • 可以跟初入⾨門的⼈人學習他們學習的技巧、經驗 • 可以跟有經驗的開發者請教減少走彎路路的機會
53. 分享 • 寫⽂文章 • 在聚會演講 • 在討論區回答其他⼈人的問題 • 費曼學習法（feynman learning technique）
 https://youtu.be/_f-qkGJBPts
54. 學習資源 • 官⽅方⽂文件 • WWDC • Google IO • 關注開發者 • 電⼦子報
55. 官⽅方⽂文件 • Android
 https://developer.android.com/docs/ • Codelabs: https://codelabs.developers.google.com/? cat=Android • iOS
 https://developer.apple.com/develop/ • Video: https://developer.apple.com/videos/tutorials
56. 其他教學資源 • raywenderlich.com • udemy.com • udacity.com • Tutorial videos on Youtube • 初學者可以從影片開始，跟著⼀一步⼀一步做比較有帶入感 • 有經驗的開發者直接看⽂文件可以節省你的時間
57. 年年度開發者⼤大會 • Google IO https://events.google.com/io/ • WWDC https://developer.apple.com/wwdc/ • 通常活動結束後，官⽅方會很快地釋出各個議程的影片 • 了了解最新的功能，但是要注意「這些功能不⼀一定可以⾺馬上 ⽤用在 production 環境」
58. 追蹤重要的開發者 • 40 leading Android developers to follow on Twitter
 https://techbeacon.com/40-leading-android-developers- follow-twitter • 52 people every iOS developer should follow on Twitter
 https://medium.com/app-coder-io/52-people-every-ios- developer-should-follow-on-twitter-25ca8915369a • Who to follow on Twitter if you’re a frontend developer
 https://medium.com/@sapegin/who-to-follow-on-twitter- if-youre-a-frontend-developer-b7873e787480
59. 為什什麼追蹤這些開發者 • 了了解⽬目前在這個領域技術的趨勢 • 了了解這個領域技術的變遷 • 學習⾼高⼿手思考問題的⽅方式 先從關注幾個你真的有興趣的開發者開始 記得連他/她們的 github ⼀一起追蹤
60. 訂閱電⼦子報（國外） • Android Weekly
 https://androidweekly.net/ • iOS Dev Weekly
 https://iosdevweekly.com/ • React Native Newsletter
 http://reactnative.cc/
61. 訂閱電⼦子報（台灣） • CodeTengu Weekly（碼天狗週刊）
 https://weekly.codetengu.com/ • TechBridge Weekly
 https://weekly.techbridge.cc/
62. 如何更更好的使⽤用電⼦子報 • 訂了了就要讀 • 不要貪多，先從⼀一份電⼦子報⼀一個禮拜⾄至少讀⼀一篇⽂文章開始 • 準備⼀一個記事本，對每⼀一期電⼦子報做⼀一個關鍵字摘要，只 要寫下關鍵字就好，如果關鍵字重複出現，就表⽰示這個技 術需要去關⼼心（電⼦子報的資料科學...誤）
63. 好書
64. 「學徒模式」摘要 • 跟專家⼀一起⼯工作、閱讀別⼈人的程式碼 • 建立⾃自⼰己的拋棄式玩具，透過動⼿手開始做來來學習 • 紀錄個⼈人所學 • 熱於分享（寫⽂文章、回答問題、演講），教學相長 • 找到適合⾃自⼰己的⼯工具 • 培養成長⼼心態 ( Growth Mindset ) • 隨時注意⾃自⼰己的學習狀狀況 • ……, and etc
65. 只是把同⼀一套技術
 學了了兩兩次？ 這是⼀一個很好的問題
66. 學習的重點 • 關注在差異異⽽而非相似的內容 • 找到可以互相交流的夥伴 • 重點不是你學到了了什什麼，⽽而是你有沒有建立⼀一個有效的學 習流程 • 以上的答案只是我⽬目前想到最好的回答，歡迎⼤大家提出更更 好的建議
67. 總結 • 寫程式只是開發過程的⼀一部分 • 所有的技術都是不停的迭代，⼯工程師只能不停的學習 • 好的學習⽅方式 • 具體的⽬目標、快速的反饋、分享 • 建立正確的學習流程比學習什什麼更更重要
68. 補充資料 • Blurring the Line between Native and Web
 https://youtu.be/yd-Xztr4fyY • Cross-platform Progressive Web Apps
 https://youtu.be/2kv9tH_IYtQ • Android Developer Youtube Channel
 https://bit.ly/2iZ2LkC • WWDC 2018
 https://developer.apple.com/videos/wwdc2018/
69. Thank you :)