2021前端發(fā)展方向

轉(zhuǎn)載至:https://www.cnblogs.com/qianduanpiaoge/p/14300390.html

2021前端發(fā)展方向

2021前端會有什么新變化,首先需要搞清楚我們關(guān)注這些新技術(shù)的目的是什么?

相信對于關(guān)注這個問題的人包括我來說艰额,除了了解技術(shù)發(fā)展風(fēng)向作為飯后談資以外更啄,最重要的是看能不能在公司內(nèi)部落地纳令、做出一番成績來柠贤,當(dāng)然升職加薪那都是后話了帮孔。

回望過去

首先定義一下我說的“過去”是2019年及以前歹茶。

以史為鏡,可以知興替你弦【颍回望一下過去,有利于我們對未來做出更好的判斷禽作。我們先細(xì)數(shù)一下過去的幾年間大廠的前端都在做什么尸昧。

前端工程化

這個應(yīng)該是前幾年社區(qū)討論的最多、面試問到最多的一個名詞旷偿,那么什么是前端工程化呢烹俗?我覺得需要從以下幾個概念開始講起。

模塊化

先說JavaScript的模塊化萍程。

從ES6開始幢妄,JavaScript語言有了自己原生支持的模塊化方案——ES6 Module,這樣有個好處茫负,前端們不用去使用社區(qū)定制的模塊加載方案蕉鸳,直接使用統(tǒng)一的就好。統(tǒng)一模塊方案之后,既可以不用額外引入模塊化解決方案的代碼潮尝,又可以為后面的自動化統(tǒng)一處理做好準(zhǔn)備榕吼。

再說CSS的模塊化。

CSS模塊化主要是解決的CSS類名沖突的問題勉失,比如常見的BEM約定以及社區(qū)豐富的CSS module解決方案羹蚣,有了這些東西,前端工程多人開發(fā)就可以優(yōu)雅的解決類名沖突的問題乱凿。

組件化

隨著React生態(tài)和Vue生態(tài)在國內(nèi)各大前端團(tuán)隊的落地顽素,組件化開發(fā)已經(jīng)是標(biāo)配了,并且開源社區(qū)也沉淀出了以Element徒蟆、Ant Design為代表的優(yōu)秀組件庫胁出。

大廠的程序員們在組件的概念上又做了一層抽象和封裝,比如以業(yè)務(wù)組件和業(yè)務(wù)區(qū)塊為抽象的中后臺前端解決方案Ant Design Pro后专,并且它還在前端工具庫、前端UI設(shè)計語言等等方案做了統(tǒng)一输莺。

自動化

首先是開發(fā)的自動化戚哎。

webpack和nodejs在開發(fā)的自動化上起了很大的作用。前端項目本地化開發(fā)的server由nodejs(常用嫂用,也不一定非得是nodejs)提供型凳,開發(fā)過程中的各種輔助性plugin和loader都由webpack生態(tài)提供,上線前的代碼打包嘱函、代碼分割甘畅、資源處理也由webpack操作,可以說過去幾年間很多前端在職業(yè)晉升上都吃了引入webpack和nodejs的紅利往弓。

再說babel疏唾,有了babel的配合,前端可以寫高版本的JavaScript方法函似,配合webpack loader磁奖,自動編譯成低版本JavaScript茸塞,前端能力再次得到提升。

其次是部署發(fā)布的自動化。

這個應(yīng)該是很多大廠前端基建團(tuán)隊做的事情橄务,比如持續(xù)發(fā)布、版本控制傻铣、內(nèi)部cdn建設(shè)等等廉侧。

大前端

這也是個在過去幾年炒的很熱的詞,不過這個詞不僅僅是炒作啤握,它也實實在在的擴(kuò)展了前端的能力以及現(xiàn)有的公司組織架構(gòu)鸟缕,比如據(jù)我所知有的公司移動端和前端就會劃分到同一個團(tuán)隊管理,統(tǒng)稱大前端團(tuán)隊排抬。

nodejs

這個在前端工程化部分已經(jīng)說過一些叁扫,這里再次提起是因為在工程化中nodejs扮演的角色是提供nodejs環(huán)境以及部分后端能力三妈,而在大前端團(tuán)隊里是實實在在的存在nodejs工程師角色和nodejs項目的。比如說在前后端分離的過程中莫绣,部分公司(比如阿里淘寶)會發(fā)展出一個中間層的東西畴蒲,這可以理解為是一個大前端團(tuán)隊維護(hù)的業(yè)務(wù)接口聚合層,前端寫接口肯定是使用nodejs最順手对室,而且nodejs生態(tài)也在蓬勃發(fā)展模燥,比如早些年的TJ大神一人之力扛起半個nodejs生態(tài)圈,涌現(xiàn)了koa掩宜、express這樣的基于中間件的開發(fā)庫蔫骂,再到后來阿里巴巴的egg,再到Nest.js牺汤,現(xiàn)在基本已經(jīng)沒有裸寫nodejs api的了辽旋。

跨端

先說說手機(jī)端

首先,最直接的跨端就是在APP殼子里面套HTML頁面來開發(fā)檐迟,這種方案也催生了很多hybrid解決方案补胚,前端也需要去了解客戶端的知識以及JavaScript Bridge的設(shè)計,同時也減少了APP客戶端工程師的崗位??

然后追迟,隨著React生態(tài)蓬勃發(fā)展溶其,F(xiàn)acebook開源了一個跨平臺移動應(yīng)用開發(fā)框架——ReactNative,它可以讓你以React的前端語法來開發(fā)移動應(yīng)用敦间,本質(zhì)就是虛擬DOM映射原生UI元素瓶逃、通過bridge調(diào)用原生API,這種思路讓前端的觸手伸到了移動開發(fā)廓块,也促成了大前端團(tuán)隊的建設(shè)厢绝。Vue生態(tài)也有阿里發(fā)起的Weex移動開發(fā)框架,原理類似带猴。

再后來代芜,F(xiàn)lutter出現(xiàn)了,它也是一個跨端的開發(fā)框架浓利,準(zhǔn)確來說它和JavaScript生態(tài)關(guān)系不大挤庇,使用Dart語言開發(fā)APP,并且有自己的跨平臺自繪引擎來保證多端UI表現(xiàn)一致贷掖,但因為也是一種跨端的解決方案嫡秕,所以也受到了大量前端工程師的關(guān)注和學(xué)習(xí)。

最后苹威,還是要提一嘴小程序昆咽,這個技術(shù)方案其實是商業(yè)的產(chǎn)物,各個公司都想把內(nèi)容和生態(tài)留在自家的APP里,所以從微信小程序開始(微信不是最早掷酗,但是發(fā)展的最好)调违,阿里、百度泻轰、字節(jié)跳動等等這些公司都有了自家的小程序技肩。

再說說桌面端

桌面端據(jù)我了解使用的比較多的是Electron,它可以讓前端以JavaScript來開發(fā)出桌面應(yīng)用浮声,比如字節(jié)跳動的飛書桌面端就是使用Electron來做的虚婿。

總結(jié)過去

從過去這些發(fā)展的技術(shù)可以看出來,前端主要是在做統(tǒng)一化泳挥、工程化然痊、生態(tài)化的事情,從早些年間的刀耕火種跨越到比較完善的工程化開發(fā)屉符,前端的能力范圍也得到了擴(kuò)展剧浸,以前不能做的事情現(xiàn)在可以做了。

很多互聯(lián)網(wǎng)公司的前端高p也是在這一波浪潮中晉升矗钟,得到了更好的職業(yè)發(fā)展唆香。

分析現(xiàn)在

首先定義一下我說的“現(xiàn)在”是2020年左右。

現(xiàn)在基本上各大公司的前端工程化改造大體完成真仲,各種改造方案袋马、組件庫都層出不窮初澎,所以前端又有新玩法了秸应。

Serverless

準(zhǔn)確來說,Serverless并不是前端的技術(shù)領(lǐng)域碑宴,因為它解決的是讓開發(fā)者不用關(guān)心服務(wù)器底層架構(gòu)和運(yùn)維工作软啼,形成一種“無服務(wù)器”的假象。

那為什么這個技術(shù)在前端領(lǐng)域會受到追捧呢延柠?

因為這個技術(shù)剛好解決了整個開發(fā)鏈條中前端缺失的能力祸挪,即服務(wù)端底層和運(yùn)維能力。各個大公司的前端團(tuán)隊也都在嘗試把Serverless落地贞间,比如在知乎上就可以看到很多關(guān)于Serverless的布道贿条。

NoCode和LowCode

在我看來,低代碼(LowCode)和零代碼(NoCode)產(chǎn)品增热,是前端對現(xiàn)有能力整合之后整以,對其他領(lǐng)域的一種擴(kuò)張和賦能。其實各大公司在某些特定業(yè)務(wù)場景中早已經(jīng)有相關(guān)的產(chǎn)品落地了峻仇,比如廣告業(yè)務(wù)公黑、電商運(yùn)營的繁多的落地頁需求可以使用零代碼產(chǎn)品來解決,全程不需要代碼參與。

那既然之前有凡蚜,現(xiàn)在為什么又提起低代碼和零代碼呢人断?我覺得原因有兩個:

之前解決的只是某些特定業(yè)務(wù)場景的問題,現(xiàn)在想把這種能力逐漸擴(kuò)展到更多的業(yè)務(wù)場景朝蜘,比如擴(kuò)展到公司外部恶迈,來做toC的使用。

之前解決的只是頁面級的問題芹务,現(xiàn)在想解決應(yīng)用級的問題蝉绷。

總結(jié)現(xiàn)在

當(dāng)然了,現(xiàn)在的討論的比較多的枣抱、正在進(jìn)行中的技術(shù)和解決方案肯定不止我說到的這兩種熔吗,歡迎大家補(bǔ)充。
目前大公司的前端們也在結(jié)合業(yè)務(wù)在做這方面的事情佳晶,如果你所在的團(tuán)隊在做相關(guān)的事情桅狠,不如加入進(jìn)去,不管是技術(shù)或職業(yè)發(fā)展轿秧,都會有比較好的收獲中跌。

展望未來

React Server Component

這個目前還在提案中,未來成熟之后極有可能改變前端的開發(fā)方式菇篡,前端React生態(tài)的范圍又向服務(wù)度端擴(kuò)展了漩符,一波新的基礎(chǔ)建設(shè)、技術(shù)方案可以考慮了驱还。

Serverless大規(guī)模落地

按照現(xiàn)在社區(qū)以及各大公司內(nèi)部的發(fā)展嗜暴,Serverless應(yīng)該會在2021有大規(guī)模的落地,運(yùn)維崗位會進(jìn)一步減少

NoCode和LowCode持續(xù)發(fā)展

低代碼這個概念在2021年初因為釘釘發(fā)布會被再次帶火议蟆,因為釘釘?shù)氖褂昧恳约皌oB端市場有很多內(nèi)部應(yīng)用的搭建需求闷沥,所以它強(qiáng)調(diào)這個概念也不奇怪。

相信有像阿里釘釘這樣的企業(yè)的推動咐容,低代碼和零代碼會發(fā)展的更好舆逃。

不用焦慮

說了這么多,是不是更焦慮了戳粒?其實不用路狮。

React核心成員Dan Abramov都大方承認(rèn)了他并不了解Flex、Webpack等等技術(shù)蔚约,沒試過Serverless等等“時髦”技術(shù)奄妨,很多你會的技術(shù)他不會,照很多招聘標(biāo)準(zhǔn)來看他還評不上阿里P7炊琉,但是這并不影響他能成為React核心成員展蒂,以及他在他自己擅長的領(lǐng)域的造詣又活。

所以,不用都會锰悼,選定一個自己喜歡的柳骄、能做出成績的技術(shù),深入下去吧箕般!

最后

前端學(xué)習(xí)是一條漫長的道路耐薯,我們要學(xué)習(xí)的東西不僅僅只有表面的 技術(shù),還要深入底層丝里,弄明白下面的原理曲初,只有這樣,我們才能夠提高自己的競爭力杯聚,在當(dāng)今這個競爭激烈的世界里立足臼婆。

千里之行始于足下,愿你我共勉幌绍。

金三銀四快到了颁褂,送給大家一個小福利,下面是我在工作之余整理的一些面試題傀广,包含HTML颁独、CSS、JavaScript伪冰、服務(wù)端與網(wǎng)絡(luò)誓酒、Vue、瀏覽器贮聂、react等等靠柑。

HTML 篇

  • 圖片中 title 和 alt 區(qū)別?
  • Html5 有哪些新特性寂汇、移除了哪些元素
  • 瀏覽器是怎么對 Html5 的離線儲存資源進(jìn)行管理和加載的呢
  • 行內(nèi)元素有哪些病往?塊級元素有哪些捣染? 空(void)元素有那些骄瓣?
  • canvas在標(biāo)簽上設(shè)置寬高 和在style中設(shè)置寬高有什么區(qū)別
  • 瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢?

CSS 篇

  • CSS中l(wèi)ink與@import的區(qū)別:
  • position的absolute與fixed共同點與不同點:
  • BFC 有什么用
  • 清除浮動的幾種方式
  • Css3 新增偽類 - 偽元素
  • IE盒子模型 耍攘、W3C盒子模型
  • display:inline-block 什么時候不會顯示間隙榕栏?
  • 行內(nèi)元素float:left后是否變?yōu)閴K級元素?

由于內(nèi)容較多蕾各,為了避免閱讀體驗僅展示部分面試題扒磁,完整版的面試題+解析,【點擊我】免費(fèi)獲取式曲。

image

JavaScript篇

  • js的各種位置妨托,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的區(qū)別缸榛?
  • js拖拽功能的實現(xiàn)
  • 異步加載js的方法
  • js的防抖
  • 繞不過去的閉包
  • 說說你對作用域鏈的理解
  • JavaScript原型,原型鏈 ? 有什么特點兰伤?
  • 請解釋什么是事件委托/事件代理
  • Javascript如何實現(xiàn)繼承内颗?

Vue

  • vue中 key 值的作用
  • Vue 組件中 data 為什么必須是函數(shù)?
  • vuex的State特性是敦腔?
  • 介紹一下Vue的響應(yīng)式系統(tǒng)
  • computed與watch的區(qū)別
  • 介紹一下Vue的生命周期
  • 為什么組件的data必須是一個函數(shù)
  • 組件之間是怎么通信的

由于篇幅有限均澳,只能分享部分面試題,更多面試題及答案可以【點擊我】閱讀下載哦~無償分享給大家符衔,算是一個感恩回饋吧

image

React

  • 介紹Redux找前,主要解決什么問題?數(shù)據(jù)流程是怎么樣的判族?多個組件使用相同狀態(tài)如何進(jìn)行管理躺盛?
  • React-Redux到react組件的連接過
  • Redux中間件是什么東西,接受幾個參數(shù)
  • redux請求中間件如何處理并發(fā)
  • 如何配置React-Router
  • 路由的動態(tài)加載模塊
  • React生命周期及自己的理解形帮,以及V16對生命周期的修改
  • 為什么使用虛擬dom颗品?

瀏覽器

  • 跨標(biāo)簽頁通訊
  • 瀏覽器架構(gòu)
  • 瀏覽器下事件循環(huán)(Event Loop)
  • 從輸入 url 到展示的過程
  • 重繪與回流
  • 存儲
  • Web Worker
  • V8垃圾回收機(jī)制
  • 內(nèi)存泄露
  • reflow(回流)和repaint(重繪)優(yōu)化
  • 如何減少重繪和回流?
  • 一個頁面從輸入 URL 到頁面加載顯示完成,這個過程中都發(fā)生了什么沃缘?
  • localStorage 與 sessionStorage 與cookie的區(qū)別總結(jié)
image

更多面試題及答案可以【點擊我】閱讀下載哦~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末躯枢,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子槐臀,更是在濱河造成了極大的恐慌锄蹂,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件水慨,死亡現(xiàn)場離奇詭異得糜,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)晰洒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門朝抖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人谍珊,你說我怎么就攤上這事治宣。” “怎么了砌滞?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵侮邀,是天一觀的道長。 經(jīng)常有香客問我贝润,道長绊茧,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任打掘,我火速辦了婚禮华畏,結(jié)果婚禮上鹏秋,老公的妹妹穿的比我還像新娘。我一直安慰自己亡笑,他們只是感情好拼岳,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著况芒,像睡著了一般惜纸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上绝骚,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天耐版,我揣著相機(jī)與錄音,去河邊找鬼压汪。 笑死粪牲,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的止剖。 我是一名探鬼主播腺阳,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼穿香!你這毒婦竟也來了亭引?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤皮获,失蹤者是張志新(化名)和其女友劉穎焙蚓,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體洒宝,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡购公,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了雁歌。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片宏浩。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖靠瞎,靈堂內(nèi)的尸體忽然破棺而出比庄,到底是詐尸還是另有隱情,我是刑警寧澤较坛,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布印蔗,位于F島的核電站扒最,受9級特大地震影響丑勤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜吧趣,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一法竞、第九天 我趴在偏房一處隱蔽的房頂上張望耙厚。 院中可真熱鬧,春花似錦岔霸、人聲如沸薛躬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽型宝。三九已至,卻和暖如春絮爷,著一層夾襖步出監(jiān)牢的瞬間趴酣,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工坑夯, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留岖寞,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓柜蜈,卻偏偏與公主長得像仗谆,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子淑履,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容