iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0

前言

Flutter入門

Flutter 是 Goole 推出的開源 UI 工具包,通過 Dart 程式語言讓開發人員藉由一套代碼高效率的完成跨平台App開發,已支持 Mobile、Web、Desktop等應用平台,穩定版本從2018/12/5 釋出 v1.0.0 直到近期 2021/7/2 已發展至 v2.2.3。


參賽過程 2021/9/8 釋出 v2.5.0

官方說明這是歷史上的一次大改版,主要在於效能的表現。


Flutter官網首頁提到的三項特色如下:

  • 快速開發

在開發過程透過熱重載(hot reload)的方式提供毫秒級的更新體驗。

以往原生App開發在異動程式碼後需要經過重新編譯、打包、安裝後才能確認異動的內容,有些應用程式的狀態還會被重置,雖然這個過程會視App大小、複雜度而有所不同,但總是需要花費一段以秒為單位的時間。

  • 富有表現力與彈性UI設計

豐富的widget設計讓開發人員自定義想要的介面設計,透過不同類型功能的widget部件能夠快速"組合"出不同的介面。

  • 原生效能

Flutter App運行在其渲染引擎上,有自己的佈局以及繪圖系統,在不同的平台上透過分層式的設計架構提供良好的效能體驗。

相關 App 的開發技術

目前 App 的開發技術有許多種類型,這邊做個簡單的分類與介紹 。

Web PWA

漸進式網路應用程式(Progressive Web Apps),透過 html、css、javascript 技術與響應式網頁設計,在行動裝置透過瀏覽器提供類似App的操作體驗。

Native App

原生(Native) App是指在iOS或是在Android作業系統透過其對應的開發工具與程式語言結合底層SDK開發而成,也是目前應用程式的主要開發方法,其優點是整合度與效能體驗是最好的,但是若公司想要在兩大平台上推行App,就需要有不同人力協助開發與維護兩套代碼,相對成本會比較高。

Hybrid

因為上述開發成本的關係,目前已經有許多框架被提出,希望能過藉由開發一次代碼而達到部署不同平台的方案,這些框架技術透過某些方式與原生SDK配合建構出相對應的程式運行環境。

  • H5 + Native

主要結合 Web + Native 技術,在 Native App上透過 Webview 載入 Web App,這類型的混搭方式適合本身對於網路技術已成熟但是 Native App 尚在起步的狀況,可以快速以網頁技術完成功能需求,對於整體的開發難度與成本可以大幅的降低。

框架:Cocos、Cordova

  • Javascript + Native 渲染

使用 Javascript 的程式語言在搭配 React-Native SDK 開發應用程式,對已上手 React 的人員來說可以不改變原本的開發習慣便可以投入App的開發,與上述H5不一樣的地方在於其渲染是利用底層通信技術操作原生控件,效能會比運行在 WebView 上好一些。

框架:React-Native

  • 渲染引擎 + 原生

其原理是將UI運行在自制的渲染引擎上,不像 React-Native 需要使用原生控件,可以提供更順暢的開發體驗。

框架:Flutter

學習資源

從官網上提供的技術文件其實蠻詳盡的,不過其中的內容太多容易教人眼花撩亂,因此搭配著前人研究的軌跡在入門上很容易的多,強烈建議可以直接從"Flutter实战"這本書開始搭配著官網的教學文件實作練習,將會有事半功陪的效果喔。

官方網站,提供最新的技術文件並附有各種範例程式。

簡中版本的官方網站,大部份章節大都已完成翻譯以及潤稿,對於英文閱讀會花時間的可以先從這邊入門。

dart 簡中版本的官方網站

該書深入淺出的歸納 Flutter 開發必需具備的基本知識。

作者為杜文,掘金專欄作者、Flutter中文網站社區創始人。

小結

flutter 以及 dart 對於已有經驗的前端工程師來說進入的門檻不高,很適合作為 Web 轉戰 App 的一個跳板,雖然目前 Flutter 還不是職場上 App 開發的主流技術,不過隨著社群的活躍,相信前端工作的熱潮會轉移至應用程式的開發上。


下一篇
Flutter體驗 Day 2-環境設定
系列文
Flutter / Dart 跨平台App開發體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言