2019年前端工程師應該學什麼?
參加工作三年多了,最近業務不是很忙,心裡反而空落落的。最近參與了一個公司UI庫開發,發現自己不懂的東西實在太多。以此為契機吧:
1. 有必要把近兩年的經驗知識沉澱一下,與標準和文件進行一一印證,查漏補缺。 2. 工具不僅要會用,用的好,還要知道原理。 3. 即便是有些知識暫時用不到,作為一名有點追求的工程師,應該提前做一些知識儲備。寫到此處驚覺自己這兩三年在技術上還是成長了的,2016年我需要看著前輩們的分享,大家說有用我就學,聽前輩的總沒錯,2019年我可以根據自己的經驗和體會總結出該怎麼去系統的學習了,並且輕重緩急自己心裡都有底。
現在返回到標題,前端工程師應該學什麼?我寫了一個大綱,但裡面的學習目標是對自己說的,發出來一是為了跟大家分享一下,共同學習;二是希望你們幫我看看,有沒有遺漏下的。
我的自我定位並沒有找準,前端領域太廣,到底哪個點最適合自己,並且值得深入鑽研?我不知道。但先全學一遍,查漏補缺總沒錯的。
我覺得自己仍然,仍將,一直都會是一名前端小學生。
本文沒有勸退效果,請放心閱讀。如果你是應屆生,找準自己的定位,慢慢來。
前端工程師
一、語言基礎
HTML相關
- HTML標準,跟進了解最新的HTML標準更新。
- HTML標籤語義化,巢狀標準等。
- 可訪問性。
學習目標:重新梳理各標籤關係。面向國際、未來的網頁結構,符合可訪問性規範。
CSS 相關
- CSS標準,跟進了解最新的CSS標準更新。
- CSS屬性,最新屬性等。
- CSS程式設計,Houdini。
- Web Fonts
學習目標:重新梳理css屬性之間的關係,更多的功能嘗試使用css實現。掌握關注最新的css發展。
JavaScript相關
- ECMAScript標準,最新提案等,瀏覽器DOM,BOM。
學習目標:熟悉JavaScript的基礎API,引數搞清楚。掌握最新的JavaScript語言動向。
Node.js相關
- Node.js 全域性API,原生模組等,瞭解最新的Node.js動向。
學習目標:熟悉Node.js基礎原生API的作用和使用。為學習服務端開發打下基礎。
TypeScript(TS)
- TS大火,成未來開發趨勢。
- TypeScript的使用。與JavaScript API的區別
學習目標:熟練使用TypeScript。
AssemblyScript(AS)
- 除了可以將c\c++,Rust,Kotlin,Golang等高階語言轉譯為WebAssembly位元組碼外,一門全新的語言AS也可以。AS是TS的嚴格子集,可以一併學習為WebAssembly開發打下基礎。
- AssemblyScript的語法和使用
學習目標:瞭解基礎語法,可以將AssemblyScript檔案編譯成.wasm格式。有了它,可以不用去複習C/C++了。
Dart
- Flutter持續火熱,Dart作為開發基礎,應該掌握
- Dart的語法,瞭解與JavaScript的區別。
學習目標:熟練使用Dart語言。
Markdown
- 語法,使用。
- 寫文章,寫文件必備
學習目標:熟練使用Markdown寫文章,專案文件等。
Shell指令碼
- 語法,常用函式
學習目標:可以使用shell編寫出比較常見的程式。
SQL語言
- 常用語法,函式
學習目標:可以寫出常見的CARD查詢的sql語句。
二、計算機基礎
資料結構與演算法
- 經典演算法的思路
- 常用的資料結構
學習目標: 熟練掌握經典的算數思想,以便應用到業務程式碼中來,會在合適的場景選擇最優的資料結構。
計算機網路
- HTTP協議,TCP協議,UDP協議
- HTTPS,HTTP2
- DNS
- WebSocket
學習目標:掌握並瞭解這些網路協議的原理,可以用以實踐。
電子計算機組成原理
- 進位制
- Unicode,ASCII,UTF-8等編碼
- 計算機工作原理
學習目標: 瞭解自己的夥伴,為了解“雲”主機、虛擬主機奠定基礎。
作業系統
- 計算機作業系統原理
- Linux作業系統的使用
學習目標:瞭解作業系統是如何工作的,可以自主使用linux作業系統,掌握常用的命令。
三、進階
工程化
- webpack
- rollup
- babel 使用與原理,可以用來與ECMAScript最新語法一一印證。
- eslint,stylelint,prettier等程式碼風格與語法審查工具的使用
- unit test庫或工具的使用
- sass程式設計,語法
- postcss後處理器
- uglify原理與實現
- 多人git協作流程
- gitlab的搭建與使用
- CI/CD
- git hooks, husky,commitlint
- 文件輸出,StoryBook,gitDoc,gitbook等
- npm, lerna
- yarn
- markdown render。markdown寫的示例可線上執行
- 模組化,js模組化在ECMAScript和Node.js已經學習過,這裡主要是指css模組化的幾種方式
- 資料mock
學習目標:可以從無到有快速搭建起一個多人協作的現代化前端工程專案,選擇合適的工具提高開發效率,保持團隊成員程式碼風格統一,並最大限度的利用工具保障程式碼質量。
元件化
- Vue
- React
- WebComponents
- 瀏覽器相容性,canIUse
學習目標:熟練使用Vue,React進行開發,瞭解元件化未來趨勢WebComponents。掌握資料驅動思想,掌握經典的雙向繫結實現原理,閱讀原始碼,深入瞭解。掌握衍生產物如前端路由,資料管理的設計思想和實現。
基於Node.js的Web服務開發
- koa
- express
- pm2
- RESTFul 風格
- 程序管理
- 資料持久 MongoDB,mysql等
- 資料快取 redis等
- 長連結服務
- SSR
- Docker
- Nginx配置, openresty
- 雲主機,共享主機等
學習目標:可以獨立完成Web服務的搭建和部署。
基於Node.js的CLI開發
- 常用的CLI開發庫和原理
- 比較流行的CLI庫的設計思想,實現思路
學習目標:可以獨立開發CLI,當有需求時,可以快速定位到此方案。
桌面應用開發
- Electron
- NW.JS
學習目標:瞭解一種基於JavaScript的桌面應用的開發,當有需要時,可以迅速定位到此技術方案。
移動應用開發
- Flutter 及相關衍生技術
- React Native及相關衍生技術
- PWA
- WEEX
學習目標: 瞭解和掌握。可以使用Flutter或RN開發一個移動APP。瞭解PWA。
第三方平臺開發
- 微信小程式
- 支付寶小程式
- 百度小程式
- 快應用
- wepy
- mpvue
- taro
- …
學習目標:可以快速上手任何一種開發小程式。瞭解小程式的實現方案。瞭解業內流行的小程式開發庫的實現思路。
外掛開發
- chrome外掛API
- DevTool擴充套件
- VSCode等IDE外掛開發
學習目標:瞭解外掛可以做到什麼,當有需要時,可以迅速定位到此方案來。
瀏覽器工作原理
- 排版引擎,瀏覽器渲染原理
- 指令碼解釋引擎,指令碼執行原理,v8
- headless無頭瀏覽器,puppeteer
學習目標:掌握瀏覽器工作原理,可以應用在效能優化和自動化測試上。
效能優化
- RAIL 模型
- 硬體基礎:幀、幀率、顯示器繪圖原理
- 漸進式網頁指標(Progressive Web Metrics,簡稱 PWM’s)
- 常用的效能優化手段
學習目標:瞭解效能優化手段,寫出效能優異的Web應用。
Web瀏覽器安全
- 瀏覽器安全策略:同源策略,內容安全策略,沙箱
- 常見的攻擊方式:XSS,CSRF
- 其它:CRLF攻擊, DNS劫持和DNS汙染,點選劫持,瀏覽器外掛漏洞攻擊等
- 瞭解常見對稱加密和非對稱加密演算法
學習目標:瞭解常見的Web瀏覽器攻擊手段,避免寫出有安全隱患的網站。
Web伺服器安全
- 常見攻擊手段:目錄遍歷,DDOS,重放,密碼破解,SQL注入
- 其它攻擊手段:CC攻擊,埠滲透
學習目標:瞭解常見伺服器攻擊手段和原理,避免寫出有明顯漏洞的Web服務。
監控統計
- 前端指令碼錯誤監控:錯誤堆疊形式,實時監控實現方式
- 前端效能監控:效能指標,實現方案
- 服務端監控:硬體監控,系統監控,應用監控,網路監控,流量分析,日誌監控,安全監控,API監控(可用性、正確性、響應時間),效能監控,業務監控
學習目標:掌握如何自主建設或搭建開源監控平臺。瞭解一些常見的監控指標的含義。如效能相關的指標TTLB、QPS是什麼意思,業務相關的指標PV,UV,CTR等等代表什麼。
視覺化
- canvas進階
- svg進階
- WebGL基礎
- 計算機圖形學
- 常用庫:ECharts, D3等
學習目標: 這是面向未來的前端技術。瞭解常見的視覺化技術方案,當有需求時可以迅速定位方案。關注並可使用最新的技術開發酷炫的應用,實現資料視覺化。
SEO
- 搜尋引擎爬蟲原理
- 搜尋引擎權重演算法
- 與SEO相關的網頁標籤
學習目標:瞭解搜尋引擎的實現原理以及搜尋結果的排序演算法。如果是對外的網站,可以自主完成簡單的SEO,使網站在搜尋引擎中的排名儘可能高些(不是花錢競價排名喲)。
開發與除錯
- 瀏覽器指令碼除錯
- Node.js 除錯
- Chrome Dev Tools進階使用(環境模擬,渲染效能,記憶體使用,端點除錯,抓包,控制檯內建函式等等)
- IDE
- 使用幫助開發的外掛,如拼寫檢查等。
學習目標: 熟練掌握Chrome除錯工具的使用,對於指令碼開發、效能優化都大有裨益。掌握Node.js服務的除錯方法。
UI庫
- UX基礎
- 色彩原理,色光三原色,網頁色彩表示方法
- 網頁色彩搭配原則,色彩心理學
- 常用UI元件的實現
- 常見UI元件的使用和原始碼
學習目標: 具備一定的美感和使用者體驗關注度,當沒有設計師參與時,可以自主設計一些互動方案,瞭解常見UI元件代表的含義,可以在合適的需求上使用合適的元件。瞭解常用UI元件的設計與實現思路,可獨立開發UI元件庫。
WebAssembly
- 原理
- 優勢
- 簡單應用開發
學習目標: 瞭解WebAssembly位元組碼的開發流程,瞭解其在瀏覽器中的執行方式,當需要時,可以快速定位到此方案。
WebRTC
- 實時通訊方案
- 瞭解並進行可簡單開發
學習目標: 瞭解並關注WebRTC技術,瞭解其標準,實現原理,當需要時,可以快速定位到此方案。
WebXR
- 使用JavaScript開發VR和AR
- 瞭解WebXR API,跟進草案程序
學習目標: 瞭解並關注WebXR技術,瞭解其標準,實現原理,當需要時,可以快速定位到此方案。
WebAuthn
- 使用瀏覽器進行生物鑑權
- 瞭解WebAuthn API,並進行簡單使用
學習目標: 瞭解並關注WebAuthn技術,瞭解其標準,實現原理,當需要時,可以快速定位到此方案。
本文釋出於《一個小學生的部落格》,轉載請註明出處。
全文完。