學習Web前端，你可選擇的高薪發展方向

近幾年前端領域不斷地湧現出新的技術，舊的技術也不斷地進行更新換代。隨著技術的不斷進步，前端開發涉及的領域，也變得越來越廣，一起來了解一下前端幾個重要的領域吧。

PC

PC (Personal Computer) 即個人電腦。目前 電腦端仍是前端一個主要的領域，主要分為面向大眾的各類網站，如新聞媒體、社交、電商、論壇等和麵向管理員的各種 CMS (內容管理系統)和其它的後臺管理系統。

其實早期並沒有 "前端工程師" 的稱號，那時候一般叫做 "網頁設計師" 或 "美工"。記得最早接觸到的網頁設計軟體是微軟開發的 "Frontpage"，後面才接觸到 "網頁三劍客" (Dreamweaver、Fireworks、Flash) 中的 Dreamweaver，直到現在的各種 IDE (整合開發環境)，如 Sublime Text、WebStorm、Visual Studio Code 、Atom 等。

對於前端工程師來說，開發 PC 端專案，最痛苦的事情莫過於 解決瀏覽器相容性問題，特別是 IE 瀏覽器不同版本的問題。值得高興的是，針對現代瀏覽器不同特性的相容問題，可以藉助構建工具的外掛來實現自動新增不同瀏覽器的特性字首，比如 Post CSS 的 Autoprefixer 外掛。

接下來我們來看一下，PC 端 第一個網頁長啥樣：

Web App

Web App 是指使用 Web 開發技術，實現的有較好使用者體驗的** Web 應用程式**。它是執行在手機和桌面端瀏覽中，隨著移動端網路速度的提升，Web App 為我們提供了很大的便利。此外近兩年 Google 提出了一種新的 Web App 形態，即  PWA(漸進增強 Web APP) 。

PWA 意圖讓 Web 在保留其本質（開放平臺、易於訪問、可索引）的同時， 在離線、互動、通知等方面達到類似 App 的使用者體驗。PWA 其具體技術包括 Service worker、 Web App Manifest、 Cache API、 Fetch API、 Push API、 Web Push Protocol、 Notification 等等。

Web App 的主要優點：

• 開發成本低
• 內容更新快
• 升級無需通知使用者，自動升級
• 能夠跨多個平臺和終端

Web App 的主要缺點：

• 使用者體驗短期內還無法超越原生應用
• 離線工作的能力較弱
• 訊息推送不夠及時
• 無法獲取系統級別的通知，提醒，動效等等

WeChat

WeChat (微信) 這個平臺，擁有大量的使用者群體，因此它也是我們前端開發另一個重要的領域。微信的公眾號與訂閱號為市場營銷和自媒體從業者，打造了一個新的天地。我們以微信公眾號為例，來分析一下微信公眾號的主要作用：

• 資訊推送
• 使用者服務
• 使用者互動

此外除了公眾號與訂閱號外，微信又推出了微信小程式。微信小程式是一種全新的連線使用者與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

微信小程式的主要優勢：

• 不用安裝，即開即用
• 相比於 App 開發來說，小程式開發成本更低
• UI 和操作流程比較統一，降低使用者的使用難度
• 基於微信平臺，推廣更容易、更簡單

Hybrid App

**Hybrid App (混合應用) **是指介於 Web App、原生 App (主要是 Android 或 iOS )之間的 App，它兼具原生 App 良好使用者互動體驗的優勢和 Web App 跨平臺開發的優勢。

混合應用功能按網頁語言與程式語言的混合，通常分為三種型別：多View混合型，單View混合型，Web主體型。最早的混合應用開發技術，是基於 Phonegap/Cordova 技術。Cordova 為開發者提供了一組裝置相關的 API，透過這組 API，移動應用能夠以 JavaScript 訪問原生的裝置功能，如攝像頭、麥克風等。

目前主流的混合應用開發框架有：React Native、Onsen UI、Ionic、Framework 7、Native Script 和 Weex 等。這裡就不詳細展開，對各個框架進行詳細對比和分析，有興趣的讀者可以自行查閱一下相關資料。接下來我們來了解一下混合應用的優缺點。

混合應用的主要優點：

• 開發成本低
• 節省跨平臺的時間和成本
• 可以訪問硬體裝置的功能
• 可以打包成 App，釋出到 App Store 或各大安卓應用平臺

混合應用的主要缺點：

• 使用者體驗不如原生 App
• 應用效能也不如原生 App
• 技術還未成熟

Game

HTML5 遊戲從 2014 年 Egret 引擎開發的神經貓引爆朋友圈之後，就開始一發不可收拾。不過現在遊戲開發變得越來越複雜，需要製作各種炫麗炫麗的效果，還要製作各炫麗於 2D 或者 3D 的場景。為了降低遊戲的開發難度，加快遊戲的開發進度，國內外不同廠商推出了眾多遊戲開發引擎。

HTML 5 主要的開源遊戲引擎：

• phaser
• pixi.js
• Babylon.js
• whs.js
• egret
• cocos2d-html5

Desktop

桌面應用軟體，就是我們日常生活中電腦中安裝的各類軟體。早期要開發桌面應用程式，就需要有專門的語言 UI (介面) 庫支援，如 C++ 中的 Qt 庫、MFC 庫，Java 的 Swing、Python 的 PyQT 等，否則語言是沒辦法進行快速介面開發。

隨著 Web 技術的不斷髮展，目前藉助  NW.js、Electron 等開發框架，前端也可以開發桌面應用了。其中口碑不錯的開源 IDE -  Visual Studio Code 就是使用 Electron 開發的。使用 Web 技術，主要的優勢是它的跨平臺能力和開發效率。但也有它對應的缺點，就是執行效率不如使用專門語言開發的桌面應用。

Server

Node.js 一發布，立刻在前端工程師中引起了軒然大波，前端工程師們幾乎立刻對這一項技術表露出了相當大的熱情和期待。看到 Node.js 這個名字，初學者可能會誤以為這是一個 Javascript 應用，事實上，Node.js 採用 C++ 語言編寫而成，是一個 Javascript 的執行環境。

Node.js 讓 JavaScript 能夠執行在服務端，這個想法簡直太棒了。這使得前端開發人員不用再去學服務端開發語言，如 PHP、Java、Ruby 和 C# 等，也可以進入服務端的開發領域。當然學習的過程可能對於大多數純前端開發人員來說，會比較痛苦和漫長。

Node.js 主要的 Web 開發框架：

• Express
• Koa
• Egg
• Nodal
• Sails
• Loopback

當然前端涉及的領域，還不止這些。較新的領域還有， 資料視覺化、 IOT (物聯網)、 機器學習等。網上也有大神專門整理了前端開發人員的技能圖譜，有興趣的讀者可以參考一下，但一定要做好心理準備，不要被嚇到哦。裡面介紹的是綜合的技能，對於初學者的話，只要先學 HTML/HTML5、CSS/CSS3 和 JavaScript 的基礎知識，等入門後在參考技能圖譜，好好規劃一下學習或進階線路喲。

最後，這篇文章的目的不是為了炫耀前端開發有多牛逼，只是想作為有意向入行前端或剛入門前端人員的參考資料。俗話說得好， 術業有專攻，希望新時代的前端開發者，能先專攻某個領域，然後再擴充套件其它領域，即先有深度再有廣度。

這裡推薦一下我的前端學習交流扣qun：784783012 ，裡面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，從企業招聘人才需求 到怎麼學習前端開發，和學習什麼內容都有免費系統分享。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選：  加入