正文開始：
面向 2018 年，我覺得前端有這麼三個方向可以突破：
前端邏輯層（包括三大框架，webpack，前端資料管理）當然還可以說，有 electron 這樣開發桌面應用的，但是我覺得大部分人的規劃還是在 web 領域範疇的。前端互動層（包括 css3，canvas，svg，vr 等，以及對應效能優化）
node 伺服器層 （即伺服器領域，以及前端開發工具的開發）
一、前端邏輯層
前端邏輯層解決的問題：前端的渲染問題。 其實就是，從後端拿到的各種資料（資料庫的結構化資料，各種素材），如何組合成頁面元素。
前端的渲染，其實就是 模板 + 資料 = 頁面
① html 負責結構
② css 負責樣式
③ js 負責邏輯
只有模板沒有後端資料的頁面我們可以理解為靜態頁面 而我們目前主流的三大框架，則提供 模板與資料之間的對映關係。 在邏輯層的研究，主要就是學習並熟練三大框架： vue, react, angular
這一塊是我們 90% 前端，日常工作的主要部分。也是很多公司面試會去重點考察的內容。 但是，目前的**已經不是，你會個新框架就可以任性拿 offer 的時期了。 前端的井噴的情況下，僅僅會一些基礎知識是不夠的。你必須往下深挖。
可以深挖的部分
①框架部分： 舉個例子，如 vue+ vuex+ vue-router+axios 的全家桶 react 和 angular 的也類似，有這麼一套全家桶。 要想在前端競爭中取得優勢，需要在這些框架的原理上深挖。 研究：
a. 原始碼和實現原理 （理論）②構建部分： webpack + npm/yarn + 腳手架（如 vue-cli） +sass 構建部分，其實是一塊很容易出區分度的領域。你研究透一點，你就越能駕馭住專案的變化。 研究：b. 常見的應用場景和常見問題的實現 （經驗）
c. 同類問題的橫向對比（比如用了vuex 需要了解一下 redux是怎麼實現的）
a. webpack 的配置和對應應用場景③**規範部分： es6 + ts + css 規範 等等等 **規範不多說，前端的 js 和 css 都是設計得很粗糙的語言。如果你想 hold 住更大型的專案，那麼規範是你不可忽視的地方。b. npm的命令使用，以及一些高階的用法（架設私有npm或者自己寫全域性包等）
c. 腳手架快速搭建的過程，以及如何自定義更改
邏輯層部分，是我們通常意義上理解的前端本職。
二、前端互動層
所謂互動層，可以理解為我們常說的 特效。 當前的趨勢下，移動端瀏覽器的效能逐步提公升。未來乙個大的趨勢就是 前端開發的效果，正無限逼近原生效果
同時一些大廠也在紛紛提前布局了，之前驚豔四方的天貓造物節 h5 **造物節 - 風靡朋友圈的 h5 怎麼做的？
如果我們要在這波浪潮上取得先機，那麼就必須提前學習。 也許再過三年，前端的開發特效的能力，也會成為標配技能。
可以分三塊來看
呈現效果學習： 很多同學不是不會特效，而是不知道要實現成什麼樣子。用前端的各種東西鼓搗了，終於出來了特效，但是效果卻很難看。 不不不，做特效，應該先把特效樣子調好了再去做。 建議學習 adobe effects （ae），直觀地看動效是什麼樣子，然後再翻譯成前端的動效。
相關技術手段實現 前端目前實現動畫特效的八種方式 : （
①gif: 設計直接出 gif，前端直接用②逐幀動畫： css3 step 屬性 或 js 製作逐幀動畫
③css3 ： transition/ transform/animation
④svg : svg 很適合移動端
⑤canvas: canvas 適合一些比較大面積的動效
⑥flash 轉 canvas : 這個我不了解
⑦video: 用 h5 video 標籤
⑧js 動畫： 可以配合平台提供的 api（重力感應等）開發更複雜的動效
三、node 服務層
node 在前端應該是無人不知了。在實際使用中 node 的使用場景應該有這幾個：
① 作為前端構建輔助工具： 如各種腳手架中，經常有 node 的參與
② 作為服務端做渲染層： 實現介面合併和模板渲染
那麼如果要學習的話，要從**入手呢？ 學習乙個新技術，我個人的方式都是 先把原生的文件，快速過一遍，然後學框架。
不看原生的，很容易學一套框架，就是一次學習量。 學習原生知識，可以讓你學框架速度提公升。
框架裡面常用的：
①express
②koa
③基於以上兩者衍生的框架
④其餘框架
我建議新手學習 express 框架。理由很簡單，易學，使用多，教程多。 我個人想學習的 node 框架是天貓的 egg.js 。
推薦理由是
①大廠開發，面向工程
②經受住了雙十一的考驗，質量有保障 總結
前端是端工程師，一切特性依賴於客戶端。 因此各位前端的同仁，除了上述的功能外，還是要多留意瀏覽器以及移動端環境的變遷。 一些類似與 http2 協議，pwa，opengl 等技術，都隨時有可能改變前端的工作方式。
我上面列了那麼多，其實我很多都沒有學過（手動狗頭）。但是除了技術能力，也許以下幾個綜合能力，對於前端 er 也是要注意的
①自我規劃能力：對於技術領域的趨勢的洞察，以及個人對應的學習計畫
②快速學習能力：搜尋能力（利用網上的各種知識），知識遷移能力
③溝通能力和知識輸出能力： 面向產品，以及面向後端，面向社群同仁
原文：
2019 年，學習WEB前端開發應該關注哪些新技術
隨著近年來前端的一波又一波技術浪潮，前端早已經告別了切圖的時代，迎來的是規模化，工程化的大路。但是在如此多變的技術浪潮下，我們如果想成為成熟的前端開發工程師，走上專業化的開發道路，我們都需要學會哪些技術呢？首先我們來回顧一下 2017 年以來新的前端技術和新的方向。說到學習前端必須掌握的，我們不得不...
工作3年的Web前端開發工程師應該具備的習慣
持續學習的習慣 技術一直在發展，所以程式設計師必須有持續學習的能力，不然被淘汰是遲早的事。思考的習慣 很多web前端程式設計師都是上司分什麼任務，按照需求文件來做。但是需求文件也是人寫的，既然是人寫的有時候就會有錯誤，不會思考的程式設計師就會照著做。所以建議程式設計師拿到需求要先自己分析，看看有沒有...
開發web前端 web前端 開發筆記
我是孟噠噠一名web前端開發工程師，今天給大家分享一下web前端是的一些筆記應用，希望對你們有幫助。物件導向是乙個開發思想，它把注意點都放到了物件上。物件導向強調的幾個概念 1 類 類是一批具備相同屬性和行為的事物的抽象，為什麼是抽象？因為不是具體的，也就是說不是實實在在存在的東西 看不見摸不著 2...