Flutter是由谷歌開發的開源移動UI框架,可快速在不同平臺上構建高質量原生用戶界面。Flutter支持現有的所有代碼,在世界各地受到越來越多開發者的追捧。到目前為止,全球已發布了近50萬個使用Flutter的應用程序,其中包括來自字節跳動等大型公司的應用程序,以及谷歌三十個團隊的應用程序。據Statista和SlashData的分析師表示,Flutter是2021年最受歡迎的跨平臺UI工具。
圖源Flutter產品經理Tim Sneath博客
2月4日,Flutter穩定版2.10重磅推出,該版本在春節期間發布,距離上次的發布還不到兩個月。但即使在這么短的時間內,我們已經關閉了1843個issues以及來自全球115名貢獻者的1525個PR。此次版本更新包括Flutter對Windows的重大支持更新、部分性能改進、不同平臺的新增功能以及一些工具的改進。
Flutter 2.10 新特性一覽
1. 性能改進
Flutter 2.10版本初步支持由Flutter社區成員knopp提供的繪制臟區管理功能。他為iOS/Metal上的單個臟區域啟用了選擇性重繪。這將大大縮短部分基準測試中的九十分位和九十九分位的光柵化時間,并將這些基準測試中的GPU占用率從90%以上降低到10%以下。
除此之外,該版本還對圖片格式進行了優化。開發者可以更有效地調節圖層透明度。基準測試中每幀光柵化時間至少縮短了三分之一。
在profile和release模式下,Dart代碼以AOT方式進行編譯。這段代碼解鎖了許多編譯器優化和激進的tree-shaking。但是由于類型流分析必須涵蓋整個程序,因此對性能有些影響。2.10版本帶來了更快的類型流分析實現,在基準測試中,Flutter應用程序的總體構建時間縮短了約10%。
2. iOS更新
除了性能改進之外,Flutter 2.10版本還在各平臺增加了不同的增強功能。例如開發者luckysmg帶來了流暢的iOS鍵盤動畫、iOS相機插件的穩定性提高,以及為64位架構的iOS系統加入了減少內存使用的新功能——壓縮指針。
3. Android更新
同時Flutter 2.10版本針對Android進行了改進。當開發者創建新應用時,Flutter可支持最新版本的Android,即Android 12。此外,在此版本中,我們啟用了MultiDex。如果開發者使用的是低于21的Android SDK版本,并超過了 64K方法數限制,只需將 --multidex 傳遞給flutter build appbundle 或是flutter build apk ,就能夠支持MultiDex。
4. Web更新
Flutter版本中同樣包括對于Web的改進。在之前的版本中,當鼠標拖動到多行文本框的邊緣時,它不會同步滾動。而在2.10版本中,選擇光標拖出了文本框后,文本框會進行滾動,瀏覽并選中對應的內容。該功能適用于Wed和桌面應用程序。
5. Material 3
Flutter 2.10是向Material 3過渡的開始,其中包括從單一顏色生成成整個配色方案的功能。
開發者可以使用任意顏色創建新的ColorScheme類型。ThemeData 的構造函數還包含一個新的 colorSchemeSeed參數,可以直接從顏色生成主題。此外,該版本包括了 ThemeData.useMaterial3 的參數,可將Widget切換到新的Material 3外觀。
Flutter還增加了1028個新Material圖標。
除上述功能以外,Flutter 2.10還在集成測試、DevTools以及VSCode等進行了改進,并徹底移除了Dev渠道以及對 iOS 9.3.6支持。
對于此次版本更新,最引人關注的莫過于穩定支持Windows應用開發,對此,Flutter產品經理蒂姆·斯內斯(Tim Sneath)發文進行了詳細解讀,讓我們一起來看一下。
已為Windows做好準備的Flutter
圖源Flutter官網
Flutter旨在創建高效跨平臺軟件框架,在過去幾年取得了長足發展。Flutter可為 Android、iOS、Linux、Windows、macOS 以及網頁開發應用,并兼容現有的所有代碼。受到了全球各地區開發者的支持信賴。
谷歌表示:“今天標志著這一愿景的重大擴展,首次發布了對Windows作為應用目標的支持,使Windows開發者能夠受益于移動開發者一直享有的同樣的生產力和力量”。
為實現這一目標,谷歌一直致力于Flutter開發。五年前,谷歌曾推出Flutter Alpha,該版本大大提高了移動操作系統的開發速度。Flutter應用程序可使用Dart編寫,實現了在Android、iOS、Windows、macOS和Linux、Web以及嵌入式設備上運行。
然而, 要想實現Flutter桌面支持并非易事,必須重新針對Windows進行設計,桌面應用需要兼容鍵盤和鼠標等不同硬件以及不同大小的屏幕,同時對于輸入法、視覺樣式等也有不同的需求,還要支持文件系統選擇器以及Windows注冊表等數據存儲的各種內容。
正如Flutter對Android和iOS的支持一樣,Flutter的Windows結合了Dart框架以及C++ 引擎。Windows和Flutter 通過嵌入層進行通信,該嵌入層承載Flutter引擎并負責翻譯和分發Windows信息。Flutter與Windows可將UI繪制到屏幕上,并與現有的 Windows模式相配合。
圖源來自Flutter和Dart產品經理博客
開發者可在Windows上使用Flutter框架的所有功能,并通過Dart或C++ 編寫的平臺插件與Win32、COM和Windows Runtime API進行通信,同時Flutter團隊還對許多常用插件進行調整以支持Windows,其中包括camera、file_picker以及shared_preferences 。更重要的是,Flutter社區中還添加了大量對其他包的Windows支持,其中涵蓋了從Windows 任務欄集成到串行端口訪問的所有內容 。
已有數百個包經過調整以支持為Windows構建的Flutter應用程序
對于完全定制的 Windows UI,您還可以使用包fluent_ui來flutter_acrylic創建一個可以精美地表達 Microsoft Fluent 設計系統的應用程序。使用該msix工具,您可以將您的應用程序包裝在一個安裝程序中,該安裝程序可以上傳到 Windows 上的 Microsoft Store。
總的來說,Flutter 2.10的推出實現了在Windows上的快速運行,并且可以傳輸到其他桌面或移動設備以及Web。以下是早期示例:
圖源自Flutter官網
圖源自Flutter官網
圖源自Flutter官網
該版本推出后,微軟Windows開發者平臺公司副總裁Kevin Gallo表示:”我們很高興看到Flutter實現對創建Windows應用程序的支持。作為一個開放平臺,Windows歡迎所有開發人員的加入。Flutter能實現Windows應用支持并在Microsoft Store上架,表明其對我們的信任,期待Flutter在Windows上的發展!”
除此之外,許多Flutter合作伙伴也在增加對Windows的支持,其中包括:
作為低代碼Flutter應用程序設計工具,FlutterFlow宣布支持Windows并將幫助Flutter開發人員構建專為桌面使用的功能。
本地數據存儲工具Realm的最新版本支持使用Flutter構建Windows應用程序,使用Dart FFI快速訪問底層數據庫,并增加了對 iOS 和Android等移動平臺的現有支持。
Nevercode已更新Codemagic CI/CD 工具以支持Windows,使用戶能夠在云中測試并構建Windows應用程序,并自動部署到Microsoft Store。
Syncfusion已更新小部件支持Windows。數據可視化組件等支持創建PDF文件和 Excel表格。
Rive宣布了其圖形工具套件即將推出Windows版本,開發人員可創建可以使用狀態機實時響應代碼的交互式矢量動畫。他們還將推出Windows應用程序,在性能和內存上有著不俗的表現,很快將在Microsoft Store中提供下載。
目前看來,大家對于Flutter 2.10的評價依舊非常好。@開發者,對于Flutter 穩定支持Windows,你做好準備了嗎?是否已經Demo起來了呢,歡迎留言分享。
【參考資料】
https://www.theregister.com/2022/ 02/04/flutter_windows_production_release/
https://medium.com/flutter/announcing-flutter-for-windows-6979d0d01fed
https://medium.com/flutter/whats-new-in-flutter-2-10-5aafb0314b12
《新程序員003》正式上市,50余位技術專家共同創作,云原生和數字化的開發者們的一本技術精選圖書。內容既有發展趨勢及方法論結構,華為、阿里、字節跳動、網易、快手、微軟、亞馬遜、英特爾、西門子、施耐德等30多家知名公司云原生和數字化一手實戰經驗!
在企業構建大規模Web應用時,開發人員往往著眼于如何改進現有功能集,以及提高應用的可擴展性。而對于質量檢查人員,他們更關心的是,Web應用的整體性能、可用性、以及使用中的兼容性等方面。畢竟,如果您的Web應用產品是準備面對廣大區域性用戶、乃至全球的消費者的話,那么他們可能通過五花八門的瀏覽器、設備、操作系統、及其各種組合,來訪問您所提供的服務。
目前,針對此類需求最經濟、最有效的方法便是:實施基于云的自動化瀏覽器測試。其中,業界最常用的手段便是采用Selenium測試。下面,讓我們一起深入了解采用Selenium云端測試對于跨瀏覽器性能檢測的重要性。
眾所周知,針對本地托管網站的響應式測試,是成功實現在線業務的關鍵。為了確保網站的內容能夠恰當地呈現在不同種類的設備、及其屏幕上,測試人員需要提供一臺配置高端的計算機,并在上面安裝不同的操作系統和Web瀏覽器版本(例如Chrome、Firefox、Safari等)的組合。顯然,這種本地測試的方法不但費時費力,而且無法保證測試的覆蓋率。測試人員亟待通過自動化測試,來覆蓋各種可能性的測試用例。
作為一種非常流行的開源測試框架,Selenium可以被用來創建各種可擴展的測試用例。它不但能夠模擬用戶與目標網站之間的交互,而且可以使用由Java、Python、PHP、Ruby、C#等多種語言編寫的測試腳本,實現自動化的跨瀏覽器測試。
歸納起來,Selenium框架的主要特點包括如下方面:
更多有關Selenium的詳細介紹
總的說來,使用Selenium進行跨瀏覽器測試,可以在吞吐量、測試性能、并行性、覆蓋范圍等方面提供優勢。具體而言,在云端使用Selenium測試的好處主要體現在如下方面:
下表總結了Selenium的功能類別與對應的工具:
為了著手在云端開展Selenium測試,我們選擇LambdaTest(請參見--https://www.lambdatest.com/)作為基于云的跨瀏覽器測試平臺。您可以在該平臺上執行以下任務:
下面是使用LambdaTest在云端進行Selenium測試的具體步驟:
步驟1:建立帳戶
首先,您需要先在LambdaTest上完成注冊。如上圖所示,您可以通過訪問注冊頁面--https://accounts.lambdatest.com/register,來創建一個新的帳戶。完成后,請保存用戶名和訪問令牌,以便在登錄LambdaTest儀表板時使用。
步驟2:選擇定價方案
根據測試的要求,您可以選擇適當的定價方案。目前,LambdaTest有Lite、Live、Web與移動瀏覽器自動化、以及Web自動化四種方案可供選擇。您雖然可以隨時對已選定的方案進行升/降級,但是其更改只能反映在下一個結算周期中。有關這四種方案的詳細說明,請參見定價頁面--https://www.lambdatest.com/pricing。
步驟3:瀏覽器功能生成器(Browser Capabilities Generator)
由于要在云端執行測試,因此您需要在Selenium Grid云上配置各種屬性,其中包括:選擇編程語言,指定用于測試的操作系統、瀏覽器類型、分辨率、以及版本號。
如上圖所示,您可以登錄平臺,使用功能生成器來生成相關功能,以便執行跨瀏覽器的各種測試。之后,您需要轉到“自動化”選項卡,以監視自動化瀏覽器的測試狀態。同時,每一個測試都將具有與之相關聯的測試ID和內部版本ID。其格式為--https://automation.lambdatest.com/logs/?testID=< test-id >&build=< build-id >。
有了前面的基礎,下面讓我們來看一個Python示例,它演示了如何使用LambdaTest上的遠程Selenium Grid,在云端進行Selenium測試。
串行測試(Serial testing)是一種以串行方式(即,逐個順次進行)執行測試的實踐。它會在上一個測試完成之后,再執行下一個測試。使用串行測試的缺點是:由于沒有充分利用Selenium測試框架和云基礎架構的資源,因此它增加了測試執行的時間。針對此類測試,我們來討論如下的測試步驟:
具體實現代碼為:
Python
1 # Python example demonstrates Selenium testing on the Cloud using LambdaTest platform 2 import time 3 import unittest 4 import selenium 5 import urllib3 6 import time 7 import warnings 8 from time import sleep 9 from selenium import webdriver 10 11 test_url = "https://www.duckduckgo.com" 12 13 # Desired browser capabilities generated using LambdaTest Capabilities Generator 14 # https://www.lambdatest.com/capabilities-generator/ 15 16 desired_capabilities = { 17 "build" : "Selenium testing on the Cloud using LambdaTest", 18 "name" : "Selenium testing on the Cloud using LambdaTest", 19 "platform" : "Windows 10", 20 "browserName" : "Chrome", 21 "version" : "72.0" 22 } 23 24 class SeachTest(unittest.TestCase): 25 def setUp(self): 26 print("Start - SetUp") 27 28 # Ignore ResourceWarning related warnings 29 warnings.filterwarnings(action="ignore", message="unclosed", category=ResourceWarning) 30 31 urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning) 32 user_name = "user-name" 33 app_key = "app_key" 34 35 # Username and Access Token to use the LambdaTest platform 36 remote_url = "https://" + user_name + ":" + app_key + "@hub.lambdatest.com/wd/hub" 37 self.driver = webdriver.Remote(command_executor=remote_url, desired_capabilities=desired_capabilities) 38 39 print("End - SetUp") 40 41 def test_selenium_on_cloud(self): 42 print("Start - test_selenium_on_cloud") 43 self.driver.maximize_window() 44 self.driver.get(test_url) 45 46 # time.sleep(5) 47 sleep(5) 48 49 # Locate the element using the Inspect tool of the browser 50 elem = self.driver.find_element_by_xpath("//*[@id='search_form_input_homepage']") 51 elem.send_keys("Lambdatest") 52 53 # Execute the search 54 elem.submit() 55 56 # Sleep for 10 seconds in order to see the results 57 sleep(5) 58 59 print("End - test_selenium_on_cloud") 60 61 def tearDown(self): 62 print("Start - tearDown") 63 # Close the browser. 64 self.driver.quit() 65 66 print("End - tearDown") 67 68 if __name__ == '__main__': 69 unittest.main()
而如下代碼提供了:可登錄平臺的用戶名和訪問令牌的組合。
user_name = "user-name" 2 app_key = "app_key" 3 4 # Username and Access Token to use the LambdaTest platform 5 remote_url = "https://" + user_name + ":" + app_key + "@hub.lambdatest.com/wd/hub"
我們使用LambdaTest Capabilities Generator來生成瀏覽器和平臺的功能,同時需要選擇用于實現的編程語言,以及瀏覽器規格。在此,我們的Python代碼為:
desired_capabilities = { 2 "build" : "Selenium testing on the Cloud", 3 "name" : "Selenium testing on the Cloud using LambdaTest", 4 "platform" : "Windows 10", 5 "browserName" : "Chrome", 6 "version" : "72.0" 7 } 8 9 ……………………………………………………………………… 10 ……………………………………………………………………… 11 self.driver = webdriver.Remote(command_executor=remote_url, desired_capabilities=desired_capabilities)
使用瀏覽器的檢查工具,我們可以找到Web元素的詳細信息,在該例子中,即為DuckDuckGo主頁上的搜索框。
我們在Selenium中、以及代碼中都使用到了XPath元素的屬性。
# Locate the element using the Inspect tool of the browser 2 elem = self.driver.find_element_by_xpath("//*[@id='search_form_input_homepage']") 3 elem.send_keys("Lambdatest")
為了演示云端Selenium測試,我們使用了unittest框架,以及Selenium測試套件,從終端調用python命令—“python ”來執行。
您可以通過導航到相應的測試ID和內部版本ID,以檢查該自動化測試的狀態。
Selenium中的并行測試(Parallel testing)是指:通過并發運行自動化測試套件或用例,來減少測試的執行時間。雖然測試套件的組合是在多臺服務器上被并行執行,但是每臺服務器一次仍然只運行一個測試。
為了在LambdaTest上快速執行,我們在不同服務器上,以并發的方式來觸發會話。如下圖所示,我們調用了兩個并發的會話。有關并行執行的測試案例、以及具體的定價方案,請參見:https://www.lambdatest.com/pricing。
我們設計了在Chrome和IE兩種瀏覽器中開展并行測試的案例,它們遵從上述串行測試的步驟。因此,在LambdaTest服務器上的并發會話為2比2。
在具體實現中,我們使用LambdaTest Capabilities Generator生成了針對Chrome和IE瀏覽器的兩種瀏覽器功能。
其中,測試1的Chrome瀏覽器功能代碼為:
desired_capabilities = { 2 "build" : "Parallel Testing - Selenium testing on the Cloud [Chrome]", 3 "name" : "Parallel Testing - Selenium testing on the Cloud [Chrome]", 4 "platform" : "Windows 10", 5 "browserName" : "Chrome", 6 "version" : "72.0" 7 }
測試2的IE瀏覽器功能代碼為:
desired_capabilities = { 2 "build" : "Parallel Testing - Selenium testing on the Cloud [IE]", 3 "name" : "Parallel Testing - Selenium testing on the Cloud [IE]", 4 "platform" : "Windows 7", 5 "browserName" : "Internet Explorer", 6 "version" : "11.0", 7 "ie.compatibility" : 11001 8 }
其余的實現代碼與串行測試相同。下面展示的是針對IE瀏覽器的實現代碼:
# Python example demonstrates Selenium testing on the Cloud using LambdaTest platform 2 import time 3 import unittest 4 import selenium 5 import urllib3 6 import time 7 import warnings 8 from time import sleep 9 from selenium import webdriver 10 11 test_url = "https://www.duckduckgo.com" 12 13 # Desired browser capabilities generated using LambdaTest Capabilities Generator 14 # https://www.lambdatest.com/capabilities-generator/ 15 16 desired_capabilities = { 17 "build" : "Parallel Testing - Selenium testing on the Cloud [IE]", 18 "name" : "Parallel Testing - Selenium testing on the Cloud [ChromeIE]", 19 "platform" : "Windows 7", 20 "browserName" : "Internet Explorer", 21 "version" : "11.0", 22 "ie.compatibility" : 11001 23 } 24 25 class SeachTest(unittest.TestCase): 26 def setUp(self): 27 print("Start - SetUp") 28 29 # Ignore ResourceWarning related warnings 30 warnings.filterwarnings(action="ignore", message="unclosed", category=ResourceWarning) 31 32 urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning) 33 # user_name = "user-name" 34 # app_key = "app_key" 35 user_name = "himanshu.sheth@gmail.com" 36 app_key = "fbI6kxucn5iRzwt5GWYiNvaPb4Olu9R8lwBsXWTSaIOebXn4x9" 37 38 # Username and Access Token to use the LambdaTest platform 39 remote_url = "https://" + user_name + ":" + app_key + "@hub.lambdatest.com/wd/hub" 40 self.driver = webdriver.Remote(command_executor=remote_url, desired_capabilities=desired_capabilities) 41 42 print("End - SetUp") 43 44 def test_selenium_on_cloud(self): 45 print("Start - test_selenium_on_cloud") 46 self.driver.maximize_window() 47 self.driver.get(test_url) 48 49 # time.sleep(5) 50 sleep(5) 51 52 # Locate the element using the Inspect tool of the browser 53 elem = self.driver.find_element_by_xpath("//*[@id='search_form_input_homepage']") 54 elem.send_keys("Lambdatest") 55 56 # Execute the search 57 elem.submit() 58 59 # Sleep for 10 seconds in order to see the results 60 sleep(5) 61 62 print("End - test_selenium_on_cloud") 63 64 def tearDown(self): 65 print("Start - tearDown") 66 # Close the browser. 67 self.driver.quit() 68 69 print("End - tearDown") 70 71 if __name__ == '__main__': 72 unittest.main()
如下圖所示,在并行執行中,針對不同瀏覽器的兩個.py文件,都會在同一處被終端所調用。
從LambdaTest的執行快照中,我們可以看出:并行測試的并發會話數越多,總體執行時間就越短。
雖然Selenium是用于自動化Web瀏覽器測試的強大框架,但是如果我們將其用于本地基礎架構的測試,那么測試設備的性能、可擴展性、以及吞吐量都會受到限制。因此,企業需要在云端針對Web應用、網站和移動應用進行Selenium測試。而并行測試的方式,往往能夠加速整個執行的進程。為了獲得更好的可擴展性和更優越的性能,我們可以使用LambdaTest之類的云平臺,在Selenium中進行各種跨瀏覽器的功能性測試。
文章來源:https://developer.51cto.com/art/202012/636453.htm