前端技術未來三年前瞻性思考

大家好,我是若川。今天推薦云謙大佬的一篇好文章,值得收藏。點擊下方卡片關注我、加個星標,或者查看源碼等系列文章。學習源碼整體架構系列、年度總結、JS基礎系列


習慣從業務場景、用戶體驗、研發速度、維護成本四個維度來看框架等前端技術,大部分的技術點都能找到合適的位置,解的問題是如何快速上線和維護滿足業務的好用的產品

業務場景

這部分解從框架的角度看業務需要。

框架負責,

  1. 對接后后端框架

  2. 對接輸出環節,包括支付寶容器,pc 和 mobile 瀏覽器,組件研發等

  3. 對接二方服務,包括統計,鑒權等

未來三年,

  1. 更多的業務有移動辦公需求,小程序會繼續加量

  2. 更多復雜場景的出現,包括重型應用,應用集群等,WebAssembly,微前端,Module Federation 等技術會在此發揮作用

  3. 標準應用中 NoCode/LowCode 的占比逐漸增大,開發者逐漸習慣這種研發方式,包括云鳳蝶或更垂直的 NoCode 平臺,imgcook 等

  4. 需要對接的業務場景越來越多,框架層需要做取舍、收斂和適時的減法

用戶體驗

什么是默認好用?以及如何做到默認好用。

要有更好的用戶體驗,前端 + 設計師需負責,

  1. 前端尺寸要小,這樣頁面載入更快

  2. 合理的 Code Splitting、Bundle Splitting 和按需加載策略,這樣重要內容載入更快

  3. UI 好看,交互流暢且好用

  4. 合理的緩存和預加載策略,這樣頁面切換更快

之前覺得 5G 來了尺寸肯定不是問題,直到我看到需要下載 60M JS 資源的頁面,內網環境打開頁面都要 8s+。現在的圖形庫、UI 庫根本不把尺寸當回事。

未來三年,如果我們希望有更好的用戶體驗,

  1. 圖形庫、UI 庫自己得做瘦身/按需加載/正確的 tree-shaking/設計合理的按需編譯

  2. 更多框架層內置的性能優化方案

  3. 框架接管請求層,不止是發請求,基于路由,提供緩存和預加載策略

  4. 混合研發如果成為主流,需要解沙箱滿的問題,參考?tech ui 首頁,換 module federation 或者坐等瀏覽器實現標準的沙箱環境

研發速度

這部分解如何快速完成研發,并交付上線。

各方配合,不止是框架,

  1. 工具提速、框架瘦身、TS 定義等

  2. 組件封裝,包含 antd/antv/tech-ui

  3. 數據準備,包含 oneapi

  4. 交付流暢性,包含 DEMO 中心,MOCK 平臺,聯調最佳實踐等

  5. 輔助工具

未來三年,

  1. 編譯速度肯定會大幅提升,路肯定不止一條;重 CPU 部分會基于 Rust/Go 實現但不是整體,整體方案的終態我更傾向 npm pre-built cdn + bundless 的組合;這不止是框架/工具等事,ui 庫和工具庫也許合理規劃和配置,不然一個項目用 5 個圖形庫 + 10 個依賴 antd 等庫,10000+ 的文件要編譯,怎么搞也是快不起來

  2. 更多垂直領域高級別的封裝,集成框架/UI/數據/數據流,快速產出中臺應用,形態可能是平臺,也可能是 ProCode;封裝等級越高,開發越快,但定制越難,需權衡

  3. 命令行在很多場景下不夠用,借助輔助工具可進一步提效;形態有編輯器插件、Chrome 插件和 In-Context Editing

維護成本

產品不僅要開發,還要維護,何況框架和依賴庫還在不斷升級。

成本問題包括,

  1. 新人的上手成本

  2. 開發人員迭代的接手成本

  3. 技術棧升級成本

未來三年,對于框架而言,

  1. 降低技術棧升級成本。這需要框架有更好的頂層設計,更好的抽象,抹平底層技術棧,解 3-5 年后依賴的技術棧變更后遷移成本最小化的問題;功能方面權衡一方集成/二方提供/三方引入,設計上適度集成,適度組合,適度 eject

  2. 寫一樣的代碼。持續打磨最佳實踐,方案唯一化,一不是絕對的一,而是特定場景下的一;框架支持多端適配,未來是 PC + 小程序,長遠看,多套寫法應該走向統一


最近組建了一個江西人的前端交流群,如果你也是江西人可以加我微信 ruochuan12 拉你進群。


·················?若川出品?·················

今日話題

略。歡迎在下方留言~? 歡迎分享、收藏、點贊、在看我的公眾號文章~

一個愿景是幫助5年內前端人走向前列的公眾號

可加我個人微信?ruochuan12,長期交流學習

推薦閱讀

我在阿里招前端,我該怎么幫你?(現在還能加我進模擬面試群)

若川知乎問答:2年前端經驗,做的項目沒什么技術含量,怎么辦?

點擊方卡片關注我、加個星標,或者查看源碼等系列文章。
學習源碼整體架構系列、年度總結、JS基礎系列

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275895.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275895.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275895.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

微信臨時素材接口_在接口中表達臨時性

微信臨時素材接口When interacting with today’s graphic user interfaces (GUI), we experience a sense of realism. As of now, certain aspects of realism (for example animations) create the appearance that user interface graphics behave in accordance with the …

程序員,當你寫程序寫累了怎么辦。

記得泡泡網的CEO李想說過這樣一句話,大體就是:做一件事情,一開始是興趣使然,然而當三分鐘熱度過去之后,就要靠毅力支撐自己來完成它。至少我到現在是能非常深刻的體會這句話。一開始再怎么喜歡做一件事,要想…

mysql 導致iis 假死_解決IIS無響應假死狀態

1 查看服務器iis的w3wp.exe對應的應用程序池在IIS6下,經常出現w3wp的內存占用不能及時釋放,從而導致服務器響應速度很慢。今天研究了一下,可以做以下配置:1、在IIS中對每個網站進行單獨的應用程序池配置。即互相之間不影響。2、設…

Swift 5將強制執行內存獨占訪問

Swift 5將帶來改進的Swift程序內存安全性,在程序的其他部分修改變量時,不允許通過其他變量名來訪問這些變量。這個變更對現有應用程序的行為和Swift編譯器本身都有重要影響。Swift 5將帶來改進的Swift程序內存安全性,在程序的其他部分修改變量…

GitHub 支持上傳視頻文件啦!

大家好,我是若川。今天周六,分享一篇熱點新聞。文章較短,預計5分鐘可看完。近日 Github 宣布支持了視頻上傳功能,意味著,大家在提 issue 時可以攜帶視頻了,這極大地提高了開發者和維護者的效率,…

ui設計 網絡錯誤_UI設計人員常犯的10個錯誤

ui設計 網絡錯誤重點 (Top highlight)1.不考慮范圍 (1. Disregarding scope)It’s not uncommon for designers to introduce features that will overcomplicate the development process while bringing no additional value to the application. Focusing on the business o…

灰色的生命

也許幸福從來沒有在我身邊也許是已經在我身邊但我抓不住,摸不著 你的出現讓我驚奇為我灰色的生命添上了從沒見過的色彩我不相信這一切都是我的 不相信總是害怕相信了之后卻要面對殘酷的現實 但為何你讓我相信所有抓住了希望卻又轉過身沒有離去但讓一切停止望著你不想說…

小程序 node.js mysql_基于Node.js+MySQL開發的開源微信小程序B2C商城(頁面高仿網易嚴選)...

高仿網易嚴選的微信小程序商城(微信小程序客戶端)界面高仿網易嚴選商城(主要是2016年wap版)測試數據采集自網易嚴選商城功能和數據庫參考ecshop服務端api基于Node.jsThinkJSMySQL計劃添加基于Vue.js的后臺管理系統、PC版、Wap版項目截圖功能列表首頁分類…

前端菜鳥筆記 Day-5 CSS 高級

文章大綱來源:【Day 5】CSS 高級 CSS 選擇器CSS 拓展CSS 單位CSS 參考手冊CSS 選擇器 內容引用:CSS 選擇器 元素選擇器 html { ... } 復制代碼選擇器分組 h2, p { ... } 復制代碼類選擇器 .important { ... } p.warning { ... } .important.warning { .…

推薦幾個干貨超多助你成長的前端大佬

不得不說,如今比前些年學習資料多很多了。現在的前端公眾號也挺多的,這里推薦幾個前端大佬運營的公眾號,都是聚焦前端垂直領域的優質公眾號,關注這些公眾號至少可以:1、了解現在前端技術發展情況和未來發展趨勢&#x…

背景圖片_背景

背景圖片A designer’s journey is one that’s littered with many portfolios. Many of which have been reduced to a mere 404 error page, an abandoned link or another archive in the folders. Recently, while updating my portfolio, all the forgotten versions tha…

解決《Mobile繪制背景圖片》中的問題

與PC平臺的開發相比,Mobile的開發麻煩了許多,至少這是我的感覺 。 謝謝--“ Fly Pig(^^)” 的文章《Mobile開發(繪制背景圖片) 》 http://www.cnblogs.com/Bright-Liang/archive/2009/06/11/1501309.html 不過對于我這種低手來說&…

mysql 5.6.31 winx64_詳解介紹MySQL5.6.31winx64.zip安裝配置的圖文教程

這篇文章主要介紹了MySQL5.6.31 winx64.zip 安裝配置教程詳解,非常不錯,具有參考借鑒價值,需要的朋友可以參考下#1. 下載##2.解壓到本地 修改必要配置my*.ini#3.mysql installadmin模式啟動cmdcd mysql目錄/bin執行安裝: mysqld -install啟動…

如何使用Gitbook創建html技術文檔

故事背景:很多時候對外發布的產品需要一份html格式的文檔 首先要了解的是 word直接轉成html是不現實的,需要通過md文件來轉換。 我們本節課討論的Gitbook即是在MD基礎上進行操作的。 所以任務一:安裝typora軟件,用于編輯md文件&am…

徒手擼了個markdown筆記平臺

大家好,我是若川。今天分享一篇markdown筆記平臺的項目文章。點擊下方卡片關注我、加個星標,或者查看源碼等系列文章。學習源碼整體架構系列、年度總結、JS基礎系列一、前言作為開發者,我覺的用markdown寫文檔是一件很酷的事情。在之前&#…

This week I’ve been forging background illustrations for my website, epdillon.com (launching soon). I’ve been using Adobe Illustrator to do all the major casting, dabbling in Figma only to temper the colours. Fresh from the design furnace, my hands are a…

【轉】Vector與ArrayList區別

在寫java的時候,基本上都喜歡用arraylist,甚至我都不知道有個vector的存在。查了一下發現又是線程安全問題。。。咋個線程安全天天圍著我轉呢。。。多得阿里巴巴,讓我開始認識java的所謂線程安全問題。 the following is from:htt…

pyqt控件顯示重疊_Python編程:一個不錯的基于PyQt的Led控件顯示庫,建議收藏學習...

1、控件說明在Github上,偶然發現了一個基于PyQt5的第三方Led指示燈控件庫,使用起來非常方便,控件外觀也比較漂亮,更難能可貴的是作者源代碼寫得比較簡潔,僅僅才約200行左右,可以作為一個在PyQt中寫自定義控…

編寫高質量可維護的代碼:優雅命名

大家好,我是若川。今天分享一篇關于如何命名更優雅的文章。點擊下方卡片關注我、加個星標,或者查看源碼等系列文章。學習源碼整體架構系列、年度總結、JS基礎系列本文首發于政采云前端團隊博客:編寫高質量可維護的代碼:優雅命名ht…

繼春晚不宕機后,百度云這次拿下攜程大單

今年春晚,百度和央視聯手發放高達9億現金紅包的消息,想必讓不少人替百度捏了把汗。根據統計,春晚期間,全球觀眾參與百度App紅包互動次數累計達到208億次,日活從1.6億沖上3億關口,這么大的瞬時流量沖擊是百度…