從后端開發(fā)轉(zhuǎn)職前端開發(fā)，我學到了什么？
來源：Pexels
從后端開發(fā)轉(zhuǎn)職到前端開發(fā)真的不容易。
特別是當你已經(jīng)習慣了后端開發(fā)的工作模式，習慣了構(gòu)建數(shù)據(jù)結(jié)構(gòu)，編寫類似于測試驅(qū)動開發(fā)的測試，習慣了使用持久層、倉庫和數(shù)據(jù)庫圖表，以及給前端創(chuàng)建API接口。
凡此種種，不勝枚舉。后端有其復雜性，所以大部分人沒有時間學習前端開發(fā)的內(nèi)部運作方式。
我也是。
甚至可以說，基本上已經(jīng)與后端綁定了，直到我被迫轉(zhuǎn)職，調(diào)崗到前端，從此我能為最好的、擁有強大UI交互性的產(chǎn)品編寫代碼，無需過多依賴前端框架，無需框架提供的黑盒幫我挑重擔，還能創(chuàng)造很棒的app。
以下是我從后端轉(zhuǎn)職前端開發(fā)至今的經(jīng)驗：
一切都與用戶界面和用戶體驗有關(guān)
在后端，讓人最為擔心的就是數(shù)據(jù)結(jié)構(gòu)，數(shù)據(jù)庫結(jié)構(gòu)和性能，代碼架構(gòu)，服務(wù)，以及開發(fā)前端工程師能理解并使用的強大API。
前端則非常不同。開發(fā)人員需要關(guān)注用戶界面，關(guān)心用戶如何與app互動，然后量化評估用戶體驗。有時你需要自己設(shè)計用戶體驗，然后改進應(yīng)用程序流程。
我喜歡前端開發(fā)的一點是可以直接解決用戶需求、關(guān)注他們的體驗。前端的方法跟后端不同，因為前端以用戶為中心，一切都圍繞著如何讓用戶更舒適地使用你開發(fā)的app，而不是處理數(shù)據(jù)結(jié)構(gòu)。
在項目開始時，把UI擺在第一位，思考應(yīng)用流程
在我開展個人項目來提升前端技能時，關(guān)于“用戶點擊按鈕、與UI組件互動時，UI會如何運作和推進”的思考極大地改善了我的思維模式。
在后端工作時，我無法想象如何與用戶互動、如何改進用戶流程，因為我?guī)缀踔魂P(guān)心CRUD(數(shù)據(jù)庫的增刪改查)操作以及app如何將數(shù)據(jù)存儲到數(shù)據(jù)庫，包括最重要和最敏感的信息，比如公式、信用卡信息，等等。因此，當我做UI相關(guān)工作時，真的糟透了。
轉(zhuǎn)職到前端后就大不一樣了?，F(xiàn)在，我會首先考慮用戶會如何使用app并與其互動，思考他們是否會喜歡這樣的體驗。然后，我會在UI或者展示模型的基礎(chǔ)上，設(shè)計合適的后端結(jié)構(gòu)和數(shù)據(jù)庫。
思考如何提升UI復用性
自從React這樣的前端框架面世，開發(fā)人員都從“組件”出發(fā)考慮和安排UI。組件能夠在不同的頁面重復使用，這是一件好事。再也不用為重復使用UI組件白費力氣了，因為現(xiàn)在UI組件已經(jīng)標準化了。
正如我所說，轉(zhuǎn)職到前端促使我思考UI的復用性，提升了我的決策水平。在選擇符合需求和項目范圍的前端框架時，無論是React，Vue還是Angular，我都能選出正確的那一個。
如果你想把UI組件分享給不同的項目及團隊，建議看看Bit的工具，看它能否幫到你。
構(gòu)建自己的應(yīng)用模型
學著為自己的想法構(gòu)建模型也許與前端技能本身無關(guān)，但它無疑幫助我優(yōu)化了視覺效果，使我能更好地模仿自己的設(shè)計，并在前端將其編寫出來。
構(gòu)建模型這一技能不同于前端技能，但是，能夠根據(jù)模型和他人的設(shè)計編寫前端代碼，這讓我感到興奮，構(gòu)建自己的模型、用所學的前端技術(shù)將其編寫出來也讓人興奮不已。
一切都與網(wǎng)頁端性能和客戶端優(yōu)化有關(guān)
你不僅要關(guān)注用戶界面，而且要關(guān)注客戶端及網(wǎng)頁的性能。這很重要，因為用戶時不時會與瀏覽器交互，也就是與前端代碼交互。
因此，我認為有必要提高網(wǎng)頁端性能，無論是使用像本地儲存這樣的緩存策略，最大化地壓縮JavaScript代碼，用webpack打包和轉(zhuǎn)換，還是在代碼中使用動態(tài)導入。
我意識到優(yōu)化不僅來自后端，也來自前端，它能給網(wǎng)頁端應(yīng)用的用戶帶來無縫的使用體驗。
學會創(chuàng)建快速響應(yīng)的網(wǎng)頁
創(chuàng)建快速響應(yīng)的網(wǎng)頁無疑是前端開發(fā)中讓人頭疼的挑戰(zhàn)之一。開發(fā)人員必須確保UI的響應(yīng)在不同設(shè)備上都足夠快，無論用戶用的是臺式電腦、筆記本電腦還是智能手機。
在剛開始學習前端開發(fā)的技巧時，我仍視其為讓人頭疼的挑戰(zhàn)，直到我找到了其中的訣竅。準確來說，制作快速響應(yīng)的網(wǎng)頁乍看簡單，但是我沒有意識到我一直以來都錯了。
當然，如果打算依賴前端的框架，這個麻煩自然不復存在。但是，我們不想過多地依賴框架，想從頭開始，自己學習前端開發(fā)是如何運作的。
來源：Pexels
學習搜索引擎優(yōu)化(SEO)
SEO是提升app主頁排名背后的驅(qū)動力，所以學會SEO也是非常重要的。
SEO常用于前端app中，幫助顧客或app提升排名，這樣潛在的用戶就能很快看到app并使用它。
因為學習了前端技術(shù)，我能肯定SEO是一項必須掌握的重要技術(shù)，它甚至能為用戶或者app本身提高銷量。
善用層疊式樣表 (CSS)
CSS是前端開發(fā)的一個重要組成部分。如果你無法掌握CSS技能，不知道如何用CSS排列UI組件，你是無法在前端部門立足的。
一開始，這對我來說非常困難。我沒有敏銳的設(shè)計眼光，也不知道如何按照喜好合理排列UI組件。但隨著我對前端開發(fā)的學習、逐漸掌握了CSS，這就像第二天性一樣，我再也無需苦惱了。
因此，通過轉(zhuǎn)職到前端開發(fā)部門，我出色地掌握了CSS。
學會不再過于依賴前端框架
我必須承認，作為曾經(jīng)從事后端工作的人，我依賴前端框架只是為了完成工作，以及把產(chǎn)品轉(zhuǎn)給他人接手。
我以前在一家初創(chuàng)企業(yè)工作時，只掌握了后端技能，我一直依賴前端UI庫和框架做下拉菜單和側(cè)邊欄，但是這樣很容易把事情復雜化，前端代碼也變得難以維護，因為哪怕是一小段基礎(chǔ)代碼都離不開前端庫。
轉(zhuǎn)職成為全職前端開發(fā)人員讓我更自由。因為，僅僅為了讓前端UI更好看、互動更流暢，除了框架還有許多其他的方法。要說轉(zhuǎn)職到前端有什么不同的話，那就是你可以自由決定如何排列前端組件、讓它們動起來，而無需過度依賴框架。
想要成為設(shè)計師
這很有趣。當我從后端轉(zhuǎn)職到前端，想要自學設(shè)計。比如說，從無到有設(shè)計一切，然后用我過去幾年掌握的前端技能把我的設(shè)計碼出來。然后我有了學習Adobe Photoshop的想法，當然這也需要幾個月的時間磨練技巧。
但是，毫無疑問，前端的工作豐富了想象力，同時，我也為能夠?qū)W習設(shè)計感到興奮!
來源：Pexels
從一個前后端人員的角度來看，前端的工作一開始真的非常有挑戰(zhàn)性，直到我扎實掌握了前端的基礎(chǔ)技能，開發(fā)app對我來說就像第二天性一樣了。
如果你問不同的人，其他人可能第一眼就覺得前端編程非常簡單，但對于我來說，一開始前端編程絕對是個挑戰(zhàn)。
現(xiàn)在，網(wǎng)頁開發(fā)生態(tài)系統(tǒng)日新月異，我認為學習前端技能對我的職業(yè)生涯有益，能夠更多地幫助我的客戶，所以我馬上投身于前端的浪潮，開始學習前端技術(shù)。
對于那些想要從后端轉(zhuǎn)職到前端但是又不知道從何處著手的人，以下是我的建議：放手去做，勤加練習，夯實基礎(chǔ)，掌握對的技能/技術(shù)，在前端開發(fā)的舞臺上大展身手吧!
