owned this note   changed 7 years ago  
Linked with GitHub

做一個跨平台的 Mobile App 開發者，從入門到放棄！？

tags: 2018, R2
位置: R2
講者：林英傑


投影片

開發經驗

  • Android 八年
  • iOS 三年
  • React Native 一年

學習心得分享大綱

  • Mobile App 開發流程
  • 關於那些跨平台的開發技術
  • 為什麼你應該/不應該同時熟悉 iOS 與 Android 的開發
  • 如何從一個平台跨去另外一個平台
  • 學習資源

Mobile App 開發流程

規劃 -> 介面設計 -> 開發 -> 建置 -> 測試 -> 發佈

較好的開發流程

規劃 -> 介面設計 -> 編寫測試 -> 開發 -> 建置 -> 測試 -> 發佈
通常測試跟開發會一起做

規劃 -> 介面設計 -> 編寫測試 -> 開發 -> 建置 -> 測試 -> 發佈

  • 週期性的驗收遇到不清楚的需求，往前反饋

  • 整個流程中有很多工作跟平台無關，也跟寫程式無關

專案管理
UI 設計
  • Photoshop
  • Sketch
  • Adobe XD
  • Zeplin
    • 簡化設計師跟工程師之間對於畫面元素大小與相對位置的溝通

測試

你有在寫程式的時候有考慮過 QA 的感受嗎？
沒有因為你只想到你自己
林英傑

跨平台的開發技術

  • React native
  • Flutter
PWA
  • 使用現代的 Web 技術，讓網頁也可以提供近似 app 的體驗
  • 可以離線使用，有 cache 的機制
  • 透過 service worker 在背景執行任務
  • 可以提供push notification
  • 依次開發就可以在多個支援PWA的瀏覽器上使用
Hybrid App
  • 透過 WebView 讓開發者可以使用 JavaScript、 CSS 開發功能
  • 同一份程式碼可以在不同平台執行
  • 主要的框架：Ionic、PhoneGap
  • 可以支援的功能比NativeSDK少一些，反應速度較慢
React Native
  • 使用 JavaScript(or Typescrpit / ReasonML)開發
  • 如果你有React開發的經驗，可以沿用相關的知識
  • 使用 Bridge 機制跟 Native UI Component 做溝通
  • 提供近似 Native App的執行速度

Write Once, debug everywhere?

Airbnb 為什麼放棄
  • 因為要會三個語言、三個平台
Flutter
  • Google 推出的快平台框架
  • 使用 Dart 語言開發
  • 良好的支援 material design
  • 還在preview的階段
  • 自帶渲染引擎
  • 提供近似 Native App 的執行速度

跨平台與原生開發

  • 沒有任何工具可以適合所有問題
  • 大部分跨平台的技術可以滿足 80 % 已上的開發需求，但是客戶、老闆、ˋPM 的需求，總是會有一部分來自那另外的 20 %
  • 在產品開發初期，跨平台的技術可以有效的降低成本，縮短開發時間
  • 如果你要使用最新的技術(ex: AR,ML)，提供最流暢的使用者體驗，Native SDK依然是唯一的選擇

為什麼要同時熟悉 IOS 與 Android 的開發

  • 因為可以領兩份薪水 X)
  • 因為潮
  • 因為工程師痛過

你曾經聽過 PM/QA 這樣說

  • 這個清單上面的內容，可不可以跟 IOS 一樣滑動後出現刪除的按鈕
  • 為什麼這個清單在滑過頭之後沒有 ios 這種彈跳的效果
  • ios 版的 app 在登入流程中沒有辦法直接把簡訊裡的認證碼填到輸入框裡 (測試環境iOS10以前)

使用者並不在意你的 app 是用什麼技術開發，他只希望你可以提供一致並且良好的

不同平台有各自的特性

  • 返回鍵
    • ios 沒有實體的返回按鈕
  • 背景執行

跨 ios 或 Android 的門檻降低

兩個平台互相模仿

  • 很多東西開始會互相抄來抄去

Kotlin 跟 Swift

為什麼不需要同時熟悉 ios 與 Android 開發

  • 人的時間是有限的
  • 如果你在一間大公司工作 iOS 跟 Android 的開發者通常不會視同一個人
  • 雖然你會在Android 與iOS的開發，同一個時間裡還是只會專注在一個平台的開發上
  • 公司更偏好的是會一種前端技術（Android/iOS/Angular/React）跟一種後端技術(ex:Spring, Express.js, Laravel and etc)的人
  • 你的薪水並不會變兩倍

END?

  • 聽完這麼多那還要學嗎？

如果你還是想要學習另一個平台的開發…

建立一個學習地圖
  • 先熟悉其中一個平台的開發
    • 先哪個都不重要，只熟悉就好
  • 根據你在一個平台的經驗評估你在另外一個平台學習的順序
  • 參考官方文件的介紹順序
  • 小心被原本平台觀念給限制住
    • 先把假設拋開了解
第一階段的地圖(建議)
  • Lifecycle
  • Layout
    • (iOS) Autolayout
    • (android) ConstraintLayout
  • Network & Multi-thread
  • Backgroud Task
第二階段的地圖（建議）
  • App Architecture
    • ex: MVVM
  • Access System Service
    • 藍芽、GPS等等
有輸入也要有輸出
  • 光看食譜是不可能成為大廚的
用任務驅動
  • 替學習的技術安排一個具體應用的場景
  • 透過完成這個功能，瞭解自己哪些地方已經理解，哪些地方還不夠熟悉
將目標拆解
  • 以終為始，設定一個大一點的學習目標
  • 將目標拆解，將大目標拆解，為每一個小目標設定一個學習重點
  • 藉由小目標加速你學習的反饋
加入社群
  • 社群中有各種程度的開法者
  • 可以跟初入門的人學習他們學習的技巧
  • 可以跟有經驗的開發者請教減少走彎路的機會
分享
  • 寫文章
  • 在聚會演講
  • 在討論區回答其他人的問題
  • 費曼學習法
學習資源
  • 官方文件
  • wwdc
  • 電子報
官方文件
其他教學資源
  • raywenderlich.com
  • udemy.com
  • udacity.com
  • Tutorial Videos on Youtube
  • 初學者從影片開始，跟著一步一步做比較有帶入感
  • 有經驗的開發者直接看文件可以節省你的時間
年度開發者大會
  • Google IO
  • WWDC
  • 通常活動結束後，官方會很快地釋出各議程影片
  • 瞭解最新的功能，但是要注意「這些功能不一定可以馬上用在production環境」
為什麼追蹤這些開發者
如何更好的使用電子報
  • 訂了就要讀
  • 不要貪多，先從一份電子報一個禮拜至少讀一篇文章開始
  • 準備一個記事本，對每一期電子報做一個關鍵字摘要，只要寫下關鍵字就好，如果關鍵字重複出現，就表示這個技術值得關注

學徒模式 摘要

  • 跟專家一起工作、閱讀別人的程式碼
  • 記錄自己所學

只是把一套技術學了兩次？

學習的重點

  • 關注在差異而非相似的內容
  • 找到可以互相交流的夥伴
  • 重點不是你學到了什麼，而是你有沒有建立一個有效的學習流程

總結

  • 寫程式只是開發過程的一部分
  • 所有的技術都是不停的迭代，工程師只能不停地學習
  • 好的學習方式
    • 具體的目標、快速的反饋、分享
  • 建立正確的學習流程比學習什麼更重要
Select a repo