寫這篇文章的目的
作為兩年的前端狗來說,我所會的還很少,所以我也無法在字裡行間中給各位帶來啥子的技術提升,這篇文章的目的也只是對我這兩年的工作總結,我也只是在找一個答案而已.
有人會說,一個菜鳥學什麼大牛寫技術總結,是的?,文章很多地方都存在問題和缺陷,這也是我為什麼寫出來的原因,所以還請大家可以儘可能的批評我的不足,我一定不(肯定)改.
下面正文...
什麼是前端
我在面試的時候經常被問到這個問題
一直以來,前端都是是在技術鄙視鏈的下游,下面是網上某個專案的技術棧實現
對於大多數人來說,前端的工作就是撘頁面,其實沒有錯,10年以前的前端工作確實是就是對原型圖的還原,html+css+js就構成了當時網際網路的大壁江山,這既是前端的侷限性也是前端的特殊性,這既是那個時代的驕傲,卻也是那個時代的無奈,前端的程式語言從誕生開始就充滿了焦躁和不安,10天創造出的語言就像是培訓速成班的學生那樣,缺胳膊斷腿而不自知.
智慧機的出現引領了客戶端和後端的繁榮,可憐的我們既無法像後端那樣零距離接觸業務,支撐著公司的希望,也很難像客戶端那樣,給使用者帶來更好,更流暢的應用體驗,享受著流量紅利.我們夾在中間啥也不是,我們只能藉助著混合開發,把自己和使用者拉的更近一點.
後來node出現了,我們似乎看到了救世主,我們終於可以寫後端了,node的誕生催發了一系列前端工具和包管理器的產生,前端的開發流程開始變的複雜,webpack, gulp, jest, lerna, babel, npm..., 因為這些,前端界也開始有了前端架構這樣的資深角色,我們終於可以鼓起勇氣說自己不再是切圖仔了,是嗎,是吧,新技術的誕生使我們可以承擔的更多的角色,我們會寫一部分的介面api來充當一部分後端的角色,我們也有能力寫一些RN的原生應用來換髮前端的活力,我們還能用Electron來表示自己也是優秀的軟體工程師,甚至,我們甚至還有自己的os系統(沒人會用的...)來表示但凡能用js寫的終歸會用js寫的.
不過,我們一直在追求的難道不是極致的使用者體驗嗎,難道不是使用者即用即走的無負擔操作,難道不是Chromeos中所倡導的一個入口的理念.所以,你說前端是什麼.
我兩年都做了什麼
迷茫
我並非計算機科班出身,也非畢業211大學,只是一名學設計的普通本科生,可能很多前端和我一樣,都是半路轉行,轉行的那年,我花了三個月的時間補充前端知識,為啥學前端而不是java,python啥的,說實話,當時覺得前端入門簡單,會一些html,css,和基礎的js就行了,學完之後,寫了寫簡歷就開始投了,工資要的很低(當時並不是奔著高收入去的),在上海面試了幾家,有一家還是外企,蹩腳的英語交談後,我還是收到了sorry的回覆,然後就沒然後了.我已經開始思考自己的選擇是否正確,開始迷茫前面的路.
公司入坑
在上海找不到工作,房租又貴,年末的時候我就回老家了,補看了一段時間的js基礎後,大概是一月底的時候,我重拾簡歷,往返與上海杭州之間,最後,進了杭州的一家公司,前端人不多,一共加起來就三人,還有一個兼做後端開發的,三月份的時候公司準備在facebook上投放一些h5的星座類遊戲,我並沒有接觸過手機端的內容,當專案經理問我用什麼技術的時候,我也只是因為看過angular.js的一些內容,就貿然的建議使用該技術,雖然這個框架在那時比較流行,但我現在仍明白為啥當時的小夥伴會認同這個技術適合這個專案,兩個星期後,唯一的小夥伴離職了,兼職做後端的哥們也完全開始做後端了,剛入行的我就開始成為這家公司的'前端專家'了,有人勸我離開,一個人做沒什麼意思,的確,一個人寫前端確實很難,也很坑,因為你沒有交流的物件,你沒有老師帶著你,你也不知道專案的開始到釋出到落地的整個流程,你只能自己摸索前進,這是件痛苦的事.
我還是拒絕了朋友的建議,我打算自己獨挑大樑,後來我用一個月的時間重寫了星座類的專案,用了zepto工具,搭配原生js,我把頁面的大小降低了60%,這令我額外的開心,於是我開始在網上找各種手機端的優化建議,把它實施到自己的專案中,最後寫了通用的模板元件,通過配合後端ssr渲染,設定不同的遊戲型別輸出,中間也遇到了facebook的瀏覽器的各種相容問題,因為這個還學會了科學上網,開始從翻閱百度到翻閱google的路程.
遊戲的專案進行了四個月,因為投放的效益所帶來的轉化率不高,老闆打算停止這個專案,我竟然傻到向老闆建議重新優化來獲得更高的轉化率,老闆笑笑,拒絕了.這個專案也就黃了.
ERP是個開始
公司的業務在8月份的時候進行了調整,後端的業務劇增,前端這邊除了一些活動頁外,並沒有很大的需求,我也開始利用上班的時間開始大量吸收前端的內容,利用公司的資源,嘗試不同的技術,並期望利用這些技術能夠做對公司有利益的事,月底的時候,運營人員開始不斷抱怨erp不好用,我便提議重頭構建一個erp系統,框架用了當時的新貴-vue,首先打一個webpack的構建工具,重構原有的登入系統,許可權系統,分好業務模組,將原有的功能以iframe的形式嵌入,這些大概花了將近一個半月的時間.
沒辦法,因為原先的系統是後端做的,後端走了,所有的介面定義我都需要自己看,於是我花了三週的時間學了基礎的java和springboot,然後整理介面定義,引數.大家不要學我...?
基礎功能完成後就上線給運營和產品用了,剩下的業務模組採用漸進式的方式重寫(一個人寫好苦),當時並沒有什麼前端架構的意識,甚至程式碼習慣也差,腳手架的功能缺失,資料夾放置隨意,服務分離,git提交隨意,大小寫混用,釋出無流程等等,這也是小公司的缺陷,如果沒人帶,你會走很多彎路,現在回頭看自己寫程式碼,簡直就要崩潰.專案一直在持續,業務功能也隨著公司的擴大不斷增加,除了原先的帖子素材相關模組,往後陸陸續續增加了資料中心,產品編輯,H5樣板編輯,廣告分析,社交管理等等一系列模組,大概有20多個業務產品,每個產品大概有7,8個功能模組,頁面開啟開始變慢,每次更新後開啟頁面就會等待幾十秒的載入,原先的東西等待新一輪的重構.
重構風雲
其實之前的東西不算重構,只是把一個很不好的東西變成了有些不好的東西,第二年的年初,我便打算重構ERP系統和監控平臺,我開始思考如何有效的開發管理一個企業的ERP系統,如何讓使用者零感知使用狀態.服務心態從而驅動技術的革新是我這一年最大的體會.
差不多花了兩個多月的時間重構了大部分的業務模組,重構替換了react,原因是vue和typescript太不友好了,複雜的前端體系必須是以強型別為基礎的,弱型別帶來魔法效果弊端遠遠大於益處.其實對於ts還是要謹慎對待,因為加入了ts會大大增加了業務程式碼的繁瑣和難度.
除了框架的改變和強型別的加入,我重新構建了腳手架,增加dll打包模式,搭建jenkins平臺,採用自動化構建釋出,增加單元測試,用express搭建中間層實現了GraphQL,同時抽離了axios模組將其介面封裝並快取介面請求結果,自定義了form表單,chat和table三塊比較常用的業務模組(好不喜歡ant的Form),將業務模組非同步載入,優化渲染模式.
在而後的幾個月,公司的大體前端的技術棧也慢慢形成,以React為核心的企業運營系統和以express為核心的中臺系統.
再次迷茫
公司在一月初打算嘗試境外電商的專案,但是對市場的把握不大,不想浪費過多的時間在研發上,於是找我談話希望我開發一個webApp來試水,我欣然接受,卻也是沒底,對於客戶端的內容我不熟悉,這又是開拓型的產品,後來公司聽取了我的建議招了一個有webApp經驗的前端,專案最終還是用了react作為技術棧的實現,專案前後花了將近一個月,工程這邊加上聯調測試的時間差不多20天,專案在歷時2個月後宣告失敗,失敗的最大原因是物流問題沒打通,使用者經常投訴.還有一部分原因是webApp的sku出現了線上與線下的不匹配,頁面互動這些問題都沒有得到及時的反饋.物流問題我無法解決,但前端的問題,是我的責任.後來看到小菜大佬的前端架構圖,我才發現自己有多麼的不足,迷茫又開始了,直到寫完這篇文章的最後,我想,我還在找答案.下面的是個人對自己學習的看法,希望獲得大家的意見和建議.
感悟
學框架還是在學用框架
從三大框架,到三大框架的衍生,再到各個大廠的開源庫,前端有一大部分被框架所籠罩,我們的學習時間也大部分花在了學習使用各種框架上,甚至很多的培訓班都已教授框架的使用來作為課程的目的,這對嗎,這顯然不對,就是好像你會開飛機就代表你會飛嗎,我也曾經將大部分時間放到學習使用各種框架上,後來我漸漸的發現各種框架的底層思想都是大同小異,雖然實現方式不同,但思想無非是那幾種:元件化,虛擬dom,diff演算法,模板語法糖,非同步更新,ioc等等,這點上vue做的很好.真正無感知.
很多人覺得使用vue是很low的一件事,一些面試官甚至都不屑討論vue,但其實只要看了原始碼,就會發現,這裡面的黑魔法實在是太棒了,你甚至可以用到自己的專案中,一個框架的好壞不是在他的api多麼的複雜炫酷,而是他所能解決的業務場景和為此付出的代價.
其實大家工作一年以後應該都會明白這點:
我們不應該是框架的搬運工.而是程式碼的藝術家
但有時候也是無奈,業務的繁忙,頻繁的跳槽,這都很花精力,我們沒有時間去了解底層的東西,我也這樣,問題是我們應當解決它,適當的把一部分精力集中到某個你認為比較重要的專案上,極致的追求其業務架構,程式碼結構,語言規範和效能極限,因為這樣你才會深入到程式的底層.去重新認識和了解它,還有,不要頻繁的跳槽,決定你的價值的是你的能力而不是公司.
瞭解新技術
瀏覽器核心在不斷的優化變強,前端的技術也在日新月異,瞭解最新的前端技術也是一名合格前端必須的素質,GraphQL,PWA,WebAssembly這些固不必說,大家也都瞭解,相信也在一些專案運用,其實我對這些技術都是後知後覺的,往往是知乎上或者掘金上的一些文章提到,我才會去了解.其實我們應該具有更多的主動性,當然,第一個瞭解這些技術的不能代表什麼,但至少說明你的敏銳度很高,我是十分欠缺的,看一些國外的技術文章還得邊翻譯邊查名詞的解釋,不過一段時間後,你會發現這對自己的幫助很大,你會發現一些很有意思的,這邊提供一些網站供大家認識:
當然這裡的新技術不應當僅僅是前端的東西,如果是跨行取利的童鞋,最好去補充一些基礎的計算機知識,瞭解一下計算機的構成,瞭解一下1+1的物理層實現原理,這些對業務上沒幫助,但這些有助於你學習和了解其他一些語言,沒錯,如果你致力於去成為一個合格的程式設計師,你應當去學習一些中高階語言,甚至是低階語言,學學c和BASIC語言,會讓你更加了解os的,當然你也可以選擇比較火的python和java,只要你願意任何新語言都是你開啟計算機的新大門.
我的路線:
JavaScript -> Java -> C -> BASIC -> node
-> nginx
-> mysql -> mysql/MongoDB
-> 資料結構和演算法
複製程式碼學完C類語言和一些基本的資料庫,也可以嘗試使用下R語言,但請記住,如果您的目標仍是前端工程師,請不斷加強你的js基礎,無論你在學習和使用任何一種語言,都請不要放棄JS.
最後獻給諸位: 程式設計是一種修行，應用修行的產物，也是我們與世界交流的方式.