一、2020年前端技術(shù)的火熱浪潮
在快速發(fā)展的前端領(lǐng)域，每年都有新的技術(shù)涌現(xiàn)，2020年更是如此。以下是我對(duì)這一年中最火熱的前端技術(shù)和知識(shí)點(diǎn)的總結(jié)。1. 前端框架和語言層面的熱門技術(shù)
2020年，前端框架和語言層面有著諸多引人注目的進(jìn)展。Vue3.0的發(fā)布，帶來了對(duì)TypeScript更好的支持，使得開發(fā)體驗(yàn)更加流暢。這一變革標(biāo)志著前端社區(qū)對(duì)TypeScript的重視程度日益加深，其火熱程度在今年依然排名靠前。 與此React也在十月發(fā)布了React 17的release版本，兩大主流框架的頻繁更新展示了社區(qū)和作者的共同演化。Vue 3除了支持TS外，還更新了Composition API。而React 17則集中在升級(jí)體驗(yàn)上，解決了許多之前版本的潛在問題。 至于哪個(gè)最火，這取決于個(gè)人實(shí)際的使用場(chǎng)景和喜好。但在2020年，尚未有其他框架能與Vue和React相抗衡。2. 大前端相關(guān)技術(shù)棧的蓬勃發(fā)展
3. BFF層的進(jìn)步與Serverless的普及
在BFF層，nestjs依然受到廣泛關(guān)注，越來越多的人開始學(xué)習(xí)更豐富的web框架，如egg和daruk。與此serverless在前端的普及在2020年達(dá)到了新的高潮，各大互聯(lián)網(wǎng)廠商紛紛開始推廣serverless概念，其受重視程度非同尋常。4. 工程化提效和個(gè)人素質(zhì)提升的重要性
在工程化提效方面，CI/CD和pipeline管理上線流程的技術(shù)越來越被廣泛應(yīng)用。這一基礎(chǔ)能力已經(jīng)成為業(yè)界標(biāo)配，對(duì)于不會(huì)的同學(xué)來說，可要抓緊時(shí)間學(xué)習(xí)，以提高個(gè)人素質(zhì)和技能。總結(jié)
2020年前端領(lǐng)域的技術(shù)發(fā)展日新月異，無論是前端框架、大前端相關(guān)技術(shù)棧、BFF層還是工程化提效，都有許多值得關(guān)注和學(xué)習(xí)的熱點(diǎn)。作為前端開發(fā)者，我們需要不斷跟進(jìn)技術(shù)發(fā)展的步伐，提升自身技能，以適應(yīng)不斷變化的市場(chǎng)需求。一、前端職業(yè)環(huán)境的變化與提升
在2019年之前，面試中刷Medium難度的題目似乎并沒有得到足夠的重視。到了2020年，情況發(fā)生了顯著的變化。如今，面試某些公司時(shí)，刷至少到Medium難度的題目已經(jīng)成為了一種默認(rèn)的要求。這一轉(zhuǎn)變，對(duì)于前端開發(fā)者來說，不僅是對(duì)技能的挑戰(zhàn)，更是對(duì)心智和素質(zhì)的一次提升。隨著技術(shù)的深入，前端開發(fā)者們逐漸意識(shí)到，整個(gè)職業(yè)環(huán)境正在發(fā)生變化，公司對(duì)開發(fā)者的綜合素質(zhì)要求越來越高。
二、關(guān)于使用uniapp開發(fā)App的探討
為何不推薦使用uniapp開發(fā)App？我們先來探討一下uniapp是否會(huì)取代原生開發(fā)。實(shí)際上，有可能存在使用uni-app開發(fā)的情況，但在某些情況下，開發(fā)者可能將uni.js文件和uniapp.config.js文件進(jìn)行了刪除或重命名。這時(shí)，我們需要深入檢查項(xiàng)目的其他文件，尋找相關(guān)的指示信息。
Weex是阿里巴巴開源的一套跨平臺(tái)移動(dòng)開發(fā)框架，而uni-app則是一個(gè)使用Vue.js開發(fā)所有前端應(yīng)用的框架。盡管uni-app內(nèi)置了HTML5+引擎，讓JS能夠直接調(diào)用豐富的原生能力，但其在調(diào)用HTML5+的擴(kuò)展規(guī)范時(shí)需要注意條件編譯。因?yàn)閡ni-app對(duì)JS的要求較高，許多開發(fā)者在JS方面的掌握程度有限，這可能影響到開發(fā)的效率和質(zhì)量。
uniapp是一個(gè)開放的、支持多種開發(fā)工具的多端開發(fā)框架。HBuilderX和uniapp都是DCloud公司的產(chǎn)品。HBuilderX團(tuán)隊(duì)為uniapp做了大量的優(yōu)化和定制，使得開發(fā)過程更加順暢。使用uni-app開發(fā)時(shí)需要注意，其組件具有原生調(diào)用能力，第三方的vue庫(kù)在調(diào)用原生接口時(shí)可能與某些運(yùn)行時(shí)環(huán)境不兼容。
如何評(píng)價(jià)uni-app？uniapp的寫法基于vue，上手容易，并且能滿足app的原生功能需求。調(diào)試打包以及各種配置都簡(jiǎn)單明了。在特定的場(chǎng)景下，uni-app可以作為技術(shù)選型的考慮之一。uniapp開發(fā)APP端的體驗(yàn)比之前的mui有了很大提升，整體流暢度較高，尤其是在iOS端，體驗(yàn)與原生應(yīng)用非常接近。而且，由于DCloud對(duì)各家小程序有深入了解，uni-app作為跨端框架能夠很好地抹平各端的差異。目前，uni-app已經(jīng)是最受歡迎的應(yīng)用框架之一，支撐著龐大的手機(jī)用戶生態(tài)。
關(guān)于uniapp和原生app的區(qū)別：主要在于用戶群體的不同。在微信小程序之前的用戶與APP用戶可能存在關(guān)聯(lián)問題。因?yàn)檫@部分客戶是在微信開放平臺(tái)賬號(hào)開通之前注冊(cè)的，只有openid而沒有unionid。而基于微信的賬號(hào)機(jī)制是通過unionid來確定兩個(gè)平臺(tái)的賬號(hào)是否為同一用戶。雖然uniapp具有多種優(yōu)勢(shì)，如支持多種開發(fā)工具、開發(fā)流程簡(jiǎn)單等，但它與原生app在用戶體驗(yàn)、性能等方面仍存在一定差異。因此需要根據(jù)具體需求和目標(biāo)用戶群體選擇合適的開發(fā)方式。使用uniapp跨平臺(tái)開發(fā)APP
一、uniapp簡(jiǎn)介與跨平臺(tái)開發(fā)能力
uniapp是一種基于Vue.js、Weex和小程序技術(shù)的跨平臺(tái)應(yīng)用開發(fā)框架。它的出現(xiàn)，為開發(fā)者提供了一種便捷的方式，使用一套代碼即可同時(shí)開發(fā)多個(gè)平臺(tái)的應(yīng)用。uniapp不僅支持開發(fā)微信小程序，還可以構(gòu)建安卓和iOS應(yīng)用，極大地提高了開發(fā)效率和降低了開發(fā)成本。
二、uniapp開發(fā)實(shí)踐
現(xiàn)在我正在使用mui團(tuán)隊(duì)開發(fā)的uniapp框架，開發(fā)一個(gè)簡(jiǎn)易版的頭條應(yīng)用。這個(gè)應(yīng)用包含了文章、專家、訂閱、評(píng)論等功能。在開發(fā)過程中，我深入研究了flex布局，并優(yōu)化了promise請(qǐng)求，提高了應(yīng)用的性能和用戶體驗(yàn)。
開發(fā)工具方面，我使用的是HBuilderX。這款工具對(duì)uni-app的支持非常好，極大地提高了我的開發(fā)效率。我還需要在AndroidStudio中構(gòu)建安卓應(yīng)用的Native環(huán)境以及對(duì)應(yīng)的安裝包。雖然安卓app的開發(fā)離不開AndroidStudio，但uni-app框架使得我在熟悉的前端技術(shù)棧中即可完成大部分開發(fā)工作。
三、商業(yè)前端框架與UI庫(kù)選型
在商業(yè)前端開發(fā)中，如何選擇合適的框架和UI庫(kù)是一個(gè)重要的問題。前端社區(qū)中有海量的工具可供選擇，但并沒有絕對(duì)的對(duì)與錯(cuò)。我會(huì)時(shí)常更新自己的選擇，因?yàn)殡S著學(xué)習(xí)的深入，當(dāng)初的想法可能會(huì)發(fā)生改變。
對(duì)于項(xiàng)目的開始階段，我傾向于采用基于組件的架構(gòu)（Component-based architecture），這適用于各種框架。我還會(huì)考慮模塊加載器、包管理器和自動(dòng)部署/編譯/構(gòu)建流水線等工具的選擇。例如，我會(huì)使用RequireJS、Browserify、Webpack等模塊加載器來保持Javascript（或組件）的獨(dú)立性和可維護(hù)性；在包管理器方面，我更傾向于使用npm，同時(shí)也會(huì)考慮bower來下載靜態(tài)資源；而在自動(dòng)部署/編譯/構(gòu)建流水線方面，我會(huì)選擇grunt、gulp等工具，以提高開發(fā)效率和減少重復(fù)性工作。
四、如何做出技術(shù)選型決策
在選擇前端框架和UI庫(kù)時(shí)，首先要明確項(xiàng)目的需求和目標(biāo)。了解項(xiàng)目的規(guī)模、復(fù)雜度以及團(tuán)隊(duì)的技術(shù)儲(chǔ)備等情況，都是做出技術(shù)選型決策的重要因素?？梢詤⒖忌鐓^(qū)中的其他開發(fā)者的經(jīng)驗(yàn)和建議，了解一些可選的框架和庫(kù)的特點(diǎn)和優(yōu)劣。這樣可以幫助我們?cè)谧龀鲞x擇時(shí)更加明智和理性。
五、個(gè)人開發(fā)體驗(yàn)與建議
對(duì)于個(gè)人開發(fā)者來說，使用uniapp進(jìn)行跨平臺(tái)開發(fā)是一種非常愉快且高效的體驗(yàn)。只要掌握了前端技術(shù)棧的基礎(chǔ)知識(shí)，就可以通過uniapp快速開發(fā)出適配多個(gè)平臺(tái)的應(yīng)用程序。建議初學(xué)者先從基礎(chǔ)入手，逐步深入學(xué)習(xí)前端技術(shù)棧的相關(guān)知識(shí)，并結(jié)合實(shí)際項(xiàng)目不斷實(shí)踐。也要關(guān)注社區(qū)中的最新技術(shù)和最佳實(shí)踐，不斷提高自己的技術(shù)水平和開發(fā)效率。探索前端工具鏈：從CSS預(yù)處理到測(cè)試與社區(qū)支持
一、CSS預(yù)處理與Postprocessors
從JSS到Stylus，再到Sass和CSS Modules，以及Postprocessors如css0、autoprefixer和postcss，這些工具不僅使CSS編程更加美好，而且解決了瀏覽器兼容性問題。自2015年以來，這些工具一直受到我們的關(guān)注，過去它們確實(shí)是前端開發(fā)中的痛點(diǎn)。
二、構(gòu)建框架
Bootstrap、Zurb Foundation、Elemental UI以及Material Lite等構(gòu)建框架，為web開發(fā)者提供了合作的便利。它們可以助你快速處理基本布局和樣式。若你熱衷于構(gòu)建自己的解決方案，或者你希望成為前端專家，為貴公司構(gòu)建核心視覺元素，那么這些框架將是你的得力助手。采用方法論如BEM和OOCSS，將大大提高你的工作效率。個(gè)人而言，我偏愛BEM的命名方式和基本工作流，styleguide for Brainly.com上的實(shí)踐將為你提供靈感。
三、基礎(chǔ)構(gòu)建與HTML5 Boilerplate
如果你不準(zhǔn)備構(gòu)建基本的組成，HTML5 Boilerplate是一個(gè)很好的起點(diǎn)。它為你的項(xiàng)目提供了基本的構(gòu)建結(jié)構(gòu)和工具。
四、測(cè)試工具的重要性
測(cè)試是任何項(xiàng)目不可或缺的一環(huán)，無論你是否意識(shí)到。Jasmine、Karma、Mocha、Tape、Itern等工具，都是你在測(cè)試過程中的得力助手。沒有例外的規(guī)則，一切都需要經(jīng)過嚴(yán)格的測(cè)試。
五、代碼質(zhì)量監(jiān)控與社區(qū)支持
考慮代碼質(zhì)量監(jiān)控工具如eslint、husky和editorconfig的使用。當(dāng)你遇到問題時(shí)，社區(qū)是你尋求幫助的好地方。無論是通過聊天、IRC、線下聚會(huì)還是Twitter，前端社區(qū)始終為你提供支持。
項(xiàng)目選擇與決策考量
在選擇工具之前，你需要解決一些關(guān)鍵問題。是否需要與其他人合作？團(tuán)隊(duì)成員的背景和需求是什么？你項(xiàng)目的核心關(guān)注點(diǎn)是什么？是質(zhì)量、開發(fā)速度還是可維護(hù)性？你的項(xiàng)目是否對(duì)第三方開放？是面向內(nèi)部團(tuán)隊(duì)還是外部用戶？處理的是核心項(xiàng)目還是邊緣項(xiàng)目？你的應(yīng)用是交互性的還是基礎(chǔ)的文檔頁(yè)面？是一系列項(xiàng)目的一部分還是一個(gè)獨(dú)立項(xiàng)目？考慮這些問題后，與團(tuán)隊(duì)成員溝通，共同選擇一個(gè)最適合你們的工具和技術(shù)棧。別忘了考慮SEO和服務(wù)端渲染的影響。
當(dāng)你對(duì)上述問題有了清晰的答案后，可以開始考慮你的語言選擇了。與你的團(tuán)隊(duì)一起討論，選擇一個(gè)最適合你們項(xiàng)目的語言。選擇你的技術(shù)棧：不只是糟糕的JavaScript
一、多種選擇，不止JavaScript
這里的舞臺(tái)并非只有JavaScript一種語言。你是否擁有一個(gè)js開發(fā)團(tuán)隊(duì)？或者你想嘗試一些新穎的技術(shù)來為你的項(xiàng)目帶來不一樣的活力？接下來，讓我們一起探索多種技術(shù)可能。
二、考慮ES6與Babel
隨著ECMAScript 6（ES6）的推出，前端開發(fā)得到了極大的便利。它的許多新特性大大簡(jiǎn)化了開發(fā)流程。通過Babel的兼容支持，你可以輕松地使用這些新特性而不用擔(dān)心瀏覽器兼容問題。選擇這樣的技術(shù)路徑，會(huì)使你的開發(fā)生活更加輕松。
三、類型系統(tǒng)：TypeScript的探索
你是否偏愛typed語言？開發(fā)時(shí)的類型檢查能帶來許多便利。那么，你可以考慮TypeScript，它為你提供了JavaScript的類型注解和編譯時(shí)檢查功能，使你的代碼更加健壯。
四、函數(shù)式編程的嘗試
函數(shù)式編程是否引起你的興趣？從簡(jiǎn)單的ES6庫(kù)如lodash或ramda開始，你可以逐步深入這一領(lǐng)域。這里有許多教程和書籍幫助你開啟這段旅程。如果你想要更多新穎的體驗(yàn)，試試Elm或ClojureScript等函數(shù)式編程語言。
五、全棧開發(fā)與更多選擇
你是否能夠勝任全棧工作？那么，你可以嘗試ClojureScript等后端技術(shù)棧與前端技術(shù)的結(jié)合。我們還有ScalaJS等更多編譯成JavaScript的語言供你選擇。對(duì)于喜歡框架的你，可以嘗試Angular、Backbone等流行的前端框架。如果你需要更快的開發(fā)和構(gòu)建流程，同時(shí)追求性能提升，那么Ampersand、Knockout或Aurelia等框架都是不錯(cuò)的選擇。如果你熟悉函數(shù)式編程并且喜歡ReactJS，那么Redux與ImmutableJS的結(jié)合將會(huì)是一個(gè)很好的選擇，它提供了更多函數(shù)式編程技巧和豐富的交互性體驗(yàn)。如果你需要更深入的實(shí)踐和研究精神，你還可以探索更多的前端技術(shù)棧和框架組合，以找到最適合你的技術(shù)路線。在這里，你可以根據(jù)自己的需求和興趣選擇最適合你的技術(shù)棧，開啟一段美好的技術(shù)旅程。探索現(xiàn)代前端框架：如何選擇與開始使用
======================
一、引言
隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，前端框架如雨后春筍般涌現(xiàn)。開發(fā)者面臨眾多選擇，如何挑選適合自身需求的框架，成為了關(guān)鍵。本文將帶你了解如何根據(jù)實(shí)際需求選擇并應(yīng)用前端框架。
二、了解你的需求
在選擇前端框架之前，首先要明確自己的需求。你需要考慮以下幾點(diǎn)：
1. 是否需要處理大量數(shù)據(jù)流？考慮使用 reactive streams，如 bacon 或 rxJS，或者嘗試 Cycle.js（實(shí)驗(yàn)性）。
2. 你的應(yīng)用規(guī)模如何？是否越來越大？你是否需要嚴(yán)格的驗(yàn)證和通用處理方式？這些問題將幫助你選擇適合的框架。
三、選擇框架
基于你的需求，可以從以下框架中選擇一個(gè)合適的：
1. 如果你需要構(gòu)建類桌面應(yīng)用，且應(yīng)用包含表格、圖例或其他分析功能，可以試試 ExtJS。
2. 如果你是一個(gè)為其他開發(fā)者提供服務(wù)的工作室，可能需要一套不錯(cuò)的工具集和公共用例，可以考慮 Angular。
3. 對(duì)于自由開發(fā)者來說，適應(yīng)客戶的需求是關(guān)鍵。可以嘗試使用 EmberJS 或其他流行的框架。
還有一些其他框架如 Ionic、famous、Sencha Touch 等，可以根據(jù)具體需求進(jìn)行選擇。
四、開始編碼
選擇了框架后，如何開始編碼呢？
1. 深入了解所選框架的文檔是非常重要的。這可以幫助你理解其工作原理并快速上手。
2. 可以向社區(qū)或經(jīng)驗(yàn)豐富的開發(fā)者請(qǐng)教，了解如何開始一個(gè)優(yōu)秀的前端項(xiàng)目。
3. 準(zhǔn)備所需的開發(fā)工具和資源。確保你的開發(fā)環(huán)境已經(jīng)配置好，可以開始編碼。
五、項(xiàng)目實(shí)踐與學(xué)習(xí)
實(shí)踐是檢驗(yàn)理論的最好方式。在選擇框架后，可以嘗試通過以下方式學(xué)習(xí)并實(shí)踐：
1. 如果對(duì)某些不常見的框架有疑問，可以查看 TodoMVC Examples 中的相應(yīng)示例。這有助于你更好地理解其工作原理和應(yīng)用場(chǎng)景。但請(qǐng)注意，這些示例可能并不適合大中型項(xiàng)目。
2. 通過實(shí)際項(xiàng)目來實(shí)踐和學(xué)習(xí)所選框架。從實(shí)踐中遇到的問題和挑戰(zhàn)中學(xué)習(xí)和成長(zhǎng)。成功往往來自于不斷的嘗試和努力。
總結(jié)
前端框架的選擇要根據(jù)實(shí)際需求來進(jìn)行。明確自己的需求后，從眾多框架中選擇一個(gè)合適的。通過深入了解所選框架的文檔、社區(qū)資源和實(shí)際項(xiàng)目實(shí)踐，不斷提高自己的技能并推動(dòng)項(xiàng)目的成功。記住，每個(gè)框架都有其優(yōu)點(diǎn)和適用場(chǎng)景，關(guān)鍵在于如何根據(jù)自身需求進(jìn)行選擇和應(yīng)用。
