用於 Web 開發的 Flutter：優勢、威脅、應用

2022年，谷歌打造的軟件開發工具包Flutter正式打敗了最激烈的競爭對手React Native，成為跨平台技術的新領導者。 據谷歌報導，目前已有超過 100,000 個基於 Flutter 的應用程序向公眾發布。 儘管越來越受歡迎，但 Flutter 仍然是最著名的多平台（Android 和 iOS）移動開發工具。 同時，只有少數行業專家知道 Flutter 也可以用於 Web 應用程序！ 了解Flutter 用於 Web 開發的可能性、應用程序和風險，並發現它可以為您的業務增加什麼價值。

Flutter 正在成為市場上最令人興奮的解決方案之一，這不僅是因為它的成本效益和時間效率。 每一次更新，Flutter 的性能都越來越接近原生解決方案。 當然，許多公司選擇 Flutter for web 作為其移動產品的補充，重點放在增加客戶接觸點的數量上。 但是，是否值得僅僅因為 Flutter for web 的個別功能而考慮它？

當然是！ Flutter 支持快速開發具有復雜、獨特界面的 Web 應用程序，並且在提供類移動體驗方面首屈一指。 需要例子嗎？ 只需查看我們團隊使用 Flutter 為 Web 創建的令人振奮的客戶參與工具 PAJO。

開門見山：Flutter for web 有哪些優勢、應用和風險？ Flutter 適合 Web 開發嗎？ 閱讀更多以找出答案！

Flutter for web：讓我們從基礎開始

讓我們從最基本的信息開始：

內容： Flutter 是一個谷歌框架，允許開發人員使用一個共享代碼庫構建移動、Web、桌面和嵌入式應用程序。

時間： Flutter 的第一個穩定版本於 2018 年底發布。

原因：谷歌創建 Flutter 是為了應對移動應用程序預算的減少以及 React Native 日益流行，成為其主要競爭對手。

現在讓我們繼續討論一些更具體的技術信息。

Flutter 引起了人們對 Dart 的關注，這是一種來自 Google 的面向對象語言，根據許多領域專家的說法，它是所有移動、Web 和桌面開發的未來。 與 JavaScript（由其主要競爭對手 React Native 使用）相比，Dart 是完全面向對象和強類型的。 這對您的企業意味著什麼？ Dart 中交付的代碼更能抵抗錯誤並且更容易維護，即使在一個不斷變化的團隊中多年也是如此。 毫無疑問，Flutter 編程語言是其最大的優勢之一。

用於 Web 開發的 Flutter

您知道 Flutter 中的 Web 開發功能相對較新嗎？ 幾年前，谷歌進行了一個名為蜂鳥的研究項目。 參與 Hummingbird 的谷歌開發者小組試圖找到一種方法，從 iOS 和 Android 應用程序中使用的相同 Flutter 代碼生成網絡應用程序。

這個項目的效果在很大程度上促進了框架的發展。 雖然花了一些時間，但在 2021 年 3 月，谷歌宣布Flutter for the web 已經完全穩定，可以在商業項目中使用了。 一種代碼，一種技術，一石多鳥。

Google 的最新項目之一 Flutter for the web 是如何工作的？ 簡而言之，自 2021 版發布以來，開發人員可以將現有的 Dart 代碼編譯成 Web 產品——使用他們用於開發跨平台移動應用程序的相同 Flutter 框架。 在這種情況下，網絡只是移動應用程序的另一個設備目標——不需要任何其他網絡開發人員參與。

Flutter for web 的優勢

Flutter for web 的主要優勢是什麼？ 最重要的是，谷歌正在增加對 SDK 項目的參與，系統改進和發布（2022 年將近 20 個版本！）就是證明。 儘管 Flutter 的歷史相對較短，但它已經克服了許多早期成熟的問題。 Flutter Web 的其他最顯著優勢是什麼？

想要了解最重要的 Flutter 更新嗎？

訂閱我們的新聞

1. Flutter for web 降低開發成本

使用 Flutter for web，三個應用程序在一個技術連接的團隊中使用一個代碼庫以一種速度創建。 使用 Flutter 開發應用程序的客戶不必尋找三種不同技術的供應商，然後同步他們的工作。 無需複制，例如，相同的支付功能或社交媒體授權。 這是否直接意味著三倍的節省？ 不完全是！

當然，Flutter 大大降低了開發成本。 但是，這並不意味著跨平台應用程序開發與原生應用程序開發相同。 為跨平台提供某種功能通常會更複雜一些。 通常，跨平台乘數約為 1.2-1.5。 這意味著什麼？ 如果一項功能在一個平台上需要 X 小時的開發時間，那麼在跨平台方面則需要 (1.2-1.5) * X。 不過，與 x3 相比，x1.5 可能是您預算的成功案例。

2. 易於擴展和具有成本效益的想法驗證

成本和時間效率使 Flutter 成為 PoC 和產品創意驗證的絕佳選擇。 在幾週內，您就可以開發出一個完全可操作的應用程序，您可以輕鬆地將其發佈到應用程序商店並通過 Web 分發。 在取得潛在成功後，您可以考慮擴展您的移動和 Web 應用程序，例如，通過將跨平台移動應用程序擴展到本機應用程序。

Airbnb 等幾家行業巨頭都遵循了這條道路。 在其跨平台移動應用程序取得成功後，Airbnb 決定轉向原生解決方案，這樣可以更自由地調整產品以適應目標群體。

3.簡化維護流程

當您的申請最終成功時會發生什麼？ 它進入維護！ 與僅僱用三名開發人員維護代碼相比，與一名 Dart/Flutter 專家合作更容易且更具成本效益。 更不用說開發人員技能的任何不平衡都會導致工作節奏的變化。

考慮到不同平台上的共享外觀，開發團隊的技能也很重要。 當您決定開發三個項目時，它們的最終形態在很大程度上取決於開發人員的技能和 UI 態度。 當 iOS 用戶更喜歡圓角，而 Android 用戶不太喜歡圓角時，這兩種應用程序在影響您的產品策略方面可能會有所不同。

4.以應用程序為中心的壯觀體驗

按照 Flutter 的 Web 創始人的說法，在這個時候，Flutter 是一個完美的嵌入交互體驗的工具。 作為一個 UI 框架，Flutter 可以為網站提供以應用程序為中心的服務——因此是漸進式 Web 應用程序、單頁應用程序和增強現有 Flutter 移動應用程序的完美解決方案。 您可以在下面的機會部分閱讀更多相關信息。 但首先，讓我們最後討論一下最關鍵的 Flutter Web 風險。

Flutter for web 的威脅

如前所述，Flutter Web 是一個相對較新的項目，由跨平台專家不斷改進。 我們的 Flutter 團隊在編制 2021 年 Flutter Web 開發相關潛在風險清單時，發現了 14 個問題。 如今，Flutter 的 Web 風險列表減少了三分之一。 然而，一些問題，例如 SEO 問題或缺乏對某些瀏覽器的支持，仍然需要解決。 2022 年 Flutter for web 最顯著的缺點是什麼？

一、Flutter for web的Web應用異常

也許這不是 Flutter Web 的直接缺點，但更值得一提的免責聲明。 Android 和 iOS 應用程序的世界非常相似，大多數情況下代碼庫是 95-100% 相同的。 但是，這可能不適用於瀏覽器版本！

底部抽屜、底部選項卡菜單或水平輪播是很好的移動用戶體驗模式，但不適用於網絡。 通常，您需要僅為 Web 應用創建例外。 架構設計通常需要在移動設備和 Web 上完全不同。 在工作之初，最好在設計人員和開發人員之間建立一個圓桌討論會。 讓他們分享他們的觀點並嘗試達成共識，尤其是在您關心預算和日程安排的情況下。

2.搜索引擎優化（SEO）問題

說白了，Flutter Web 不支持 SEO。 框架的創建者如何解釋使用 Flutter 創建的 Web 應用程序的 SEO 不兼容？

Flutter Web 優先考慮性能、保真度和一致性。 這意味著應用程序輸出與搜索引擎正確索引所需的內容不一致。 對於靜態或類似文檔的 Web 內容，我們建議使用 HTML——就像我們在 flutter.dev、dart.dev 和 pub.dev 上所做的那樣。 您還應該考慮將您的主要應用程序體驗（在 Flutter 中創建）與您的登錄頁面、營銷內容和幫助內容（使用搜索引擎優化的 HTML 創建）分開。

資料來源：Flutter.dev 的 Web FAQ

據 Stack Overflow 稱，SEO 友好性是 Flutter 團隊的下一個目標之一。 然而，在這一點上，想要在 SEO 方面優化 Web 應用程序的開發人員必須使用額外的庫。

3. Flutter for web 中沒有熱重載

熱重載是 Flutter 為移動開髮帶來的最明顯的好處之一。 借助此功能，開發人員可以立即預覽前端和後端更改，並在生產的早期階段進行必要的修復。 不幸的是，熱重載還不兼容 Flutter Web。

幸運的是，在 Flutter for web 中有一種替代熱重新加載的方法：熱重啟。 熱重啟可以預覽更改，而無需重新啟動 Web 應用程序。 唯一（也是最痛苦的）區別是，與熱重載相反，熱重啟會丟失應用程序狀態——可能會降低引入開發更改的靈活性。

4.與某些瀏覽器的兼容性有限

根據 Flutter 開發人員的說法， Flutter Web 應用程序可以在四種最流行的瀏覽器上運行：

• 鉻合金
• 蘋果瀏覽器
• 邊緣
• 火狐

從理論上講，您應該確保無論用戶選擇哪種瀏覽器，您的 Web 應用程序都能高效運行。 但它在實踐中是如何運作的呢？ 一些 Flutter 開發人員報告了 Safari 的問題，並抱怨需要為多個功能執行耗時的解決方法。

Flutter Web 仍然面臨一些小困難，例如 SEO 問題、與 Safari 的兼容性有限或缺少庫。 但與此同時，毫無疑問，隨著每次更新，Flutter 變得更加高效並接近於完整的功能。 而且毫不誇張的說，一年之後，這些問題或許都將成為過去！

Flutter在Web開發中的應用

現在進入正題：誰能從 Flutter 中獲益最多？ Flutter 的創建者指出了 Flutter Web 的三個理想用例：

漸進式網絡應用程序

自 2021 年推出 Flutter 2 穩定版以來，Flutter 開發人員已經能夠構建漸進式 Web 應用程序 (PWA)：Web 應用程序不僅能夠離線運行，而且還能在通過瀏覽器運行時模仿移動設備的功能。

簡而言之，PWA 是可以安裝在任何設備上以提供類似原生體驗的網頁——與專用的 iOS 和 Android 應用程序相反，它可以在任何設備上使用。

PWA 通常被那些為廣泛的目標受眾提供產品、希望在所有消費者接觸點提供無可挑剔的用戶體驗並且必須利用每一個與潛在用戶互動的機會的公司所使用。 例子？ 星巴克、Flipboard、遊戲 2048。我打賭你至少用過這些迷人的應用程序中的一個！

單頁應用

Facebook、Gmail、谷歌地圖、Spotify——所有這些流行的應用程序至少有一個重要的共同點。 它們無需重新加載頁面即可運行。 在與單頁應用程序交互時，用戶不必等待新頁面加載 - 它從一開始就與相關內容一起存在。

SPA 響應迅速，相對容易編碼、優化和維護。 最後但並非最不重要的一點是，它們可以使用 Flutter 快速開發——並作為優質的最小可行產品。

您想閱讀更多有關漸進式 Web 和單頁應用程序的信息嗎？ 請務必閱讀我們關於為您的企業選擇合適類型的應用程序的文章！

現有的 Flutter 移動應用程序可以輕鬆轉換為 Flutter for web

向現有的基於 Flutter 的移動項目添加 Web 支持既快速又簡單：它需要創建一個 Web 目錄，然後……點擊運行按鈕！ 當然，要確保完美的性能，使 Web 應用程序響應迅速且易於導航至關重要。 但與從頭開始構建應用程序相比，在 Flutter 中將 Web 版本添加到現有的移動應用程序中確實需要花費一小部分精力。

Flutter for Web 值得一試嗎？

Flutter for Web 值得一試嗎？ 顯然，您應該自己回答這個問題。 為您的產品選擇正確的框架取決於幾個業務和技術因素，例如公司的使命、願景、預算、規模或技術堆棧。 但是，在某些特定情況下，至少值得考慮使用 Flutter Web。

首先， Flutter Web 為早期初創企業創造了前所未有的機會。 試想一下，您剛剛提出了一個絕妙的產品創意，定義了您的業務目標，並進行了競爭分析。 現在您必須盡快驗證您的 MVP——在時機結束之前。 在這種場景下，選擇 Flutter 進行 Web 開發當然是一個安全、省時、合理的選擇。

其次，Dart 編程語言的靈活性使Flutter Web 成為增強數字產品的絕佳選擇。 Flutter 支持在許多不同平台上快速開發應用程序，從而提高產品的知名度和用戶的可訪問性。

如果您在上述任何一種場景中發現哪怕是一點點您的業務情況，那當然值得對 Flutter Web 產生興趣。

什麼時候不值得考慮使用 Flutter 開發 Web 應用程序？ 甚至框架的創建者也承認，在這一點上，並不是每個網頁在 Flutter 中都有意義：

(...) Flutter 不適合包含文本豐富的基於流的內容的靜態網站。 例如，博客文章受益於 Web 構建的以文檔為中心的模型，而不是像 Flutter 這樣的 UI 框架可以提供的以應用程序為中心的服務。 但是，您可以使用 Flutter 將交互式體驗嵌入到這些網站中。 對可用圖書館的研究應該先於那裡的每個項目。

資料來源：Flutter.dev 的 Web FAQ

任何商業決策之前都應經過深入研究並諮詢多位行業專家。

Flutter for web 的（預期的）光明未來

在這一點上，為每個 Web 項目選擇 Flutter 可能不是最好的主意。 但是，我預計這個快速發展的框架會有越來越光明的未來。 為什麼？

用戶以前從未如此分散在平台之間。 移動設備和網絡瀏覽器只是冰山一角。 人們在汽車、手錶和電視機中使用應用程序。

因此，需要簡化流程，降低軟件生產成本。 Web 和移動開發的一個代碼庫已經是一種常見的模式， Flutter for Web就是一個很好的例子。

很長一段時間，我認為 Flutter Web 是一項新興技術。 我最近的工作讓我改變了主意。 Flutter 讓我想起了一個站在光明未來面前的成年青年。 對於預算很少、期限很短的想法來說，這似乎是一個很有吸引力的選擇。 Flutter 是那些想要快速、低成本地驗證自己想法的人，以及那些有想法並正在響應市場需求的人的完美選擇。