學習前端的未來在哪裡？今天詳細的談一下

来源:https://www.cnblogs.com/coderhf/archive/2020/05/14/12889933.html
-Advertisement-
Play Games

以下我說的都是個人觀點，比較巨集觀粗淺，主要針對的是前端工程師本身，沒有深入技術和業務細節，請謹慎參考。 職能概覽 前端工程師首先是個程式員，其次也是個軟體工程師，他們工作在離用戶最近的地方，負責人機交互和用戶體驗，雖然叫“前端”，但其實他們的工作邊界其實已經很寬了。 展望未來，我想前端的工作會繼續分 ...


以下我說的都是個人觀點，比較巨集觀粗淺，主要針對的是前端工程師本身，沒有深入技術和業務細節，請謹慎參考。

職能概覽

img

前端工程師首先是個程式員，其次也是個軟體工程師，他們工作在離用戶最近的地方，負責人機交互和用戶體驗，雖然叫“前端”，但其實他們的工作邊界其實已經很寬了。

展望未來，我想前端的工作會繼續分化，也會繼續融合，分工是工業革命以來社會高效協作的主要推動力，以後很長一段時間應該也會維持這種形態，融合的原始推動力也是提高效率。分化和融合是不斷的演化和互吸收轉化的，不過核心的東西我想還是不會有太大變化。

觀點

1.繼續分化（領域、行業、技術棧）

2.繼續融合（端技術、Web全棧技術、人工智慧與端技術）

3.核心不變（電腦科學本質、軟體工程思想與實踐、程式員職業素養）

img

1. 繼續分化

領域

前端領域會繼續分化，例如阿裡內部的前端就已經有中後臺、圖形、端技術、泛Node、開發者服務5個大方向了，每個大方向也會細分，舉一些例子：

  • 中後臺：有雲控制台、信息&資產管理平臺、內部研發&項目管理平臺、人工智慧&機器學習平臺、數據研發分析平臺，企業內部信息平臺等。具體產品如阿裡雲控制台、ERP、PAI、DeepInsight、阿裡內外、Basecamp等。

  • 圖形：有基礎圖形庫、3D圖形、數據可視化、流程圖等。具體產品如G2、DataV、阿裡雲城市大腦、滴滴智能交通調度圖、雙十一大屏等。

  • 端技術：有移動端（iOS、Android、MobileWeb、PWA、小程式）、PC端（客戶端、Web端）、觸屏電腦、各種監控大屏、智能手錶手環，智能汽車&家居屏幕等。具體產品如淘寶支付寶的App、PC主站、移動H5站，阿裡郎、VS Code、雙十一大屏、UC瀏覽器UWP版本、各種智能手錶、手環、汽車、家居屏幕等。

  • 泛Node：有工具鏈、Web框架、IoT、客戶端（Electron、NW）等。具體產品如DEF/Atool/F2E-Test（阿裡前端開發者工具）、Egg.js、阿裡雲的IoT應用、VS Code等。

  • 開發者服務：有應用開發運維平臺、組件市場等。具體產品如阿裡雲的應用搭建平臺Boat、Fusion-Design組件市場，支付寶小程式開發者工具等。

行業

  • 2B

  • 信息管理、財務、建築、航天、水利、金融、製造等傳統行業軟體以及阿裡提出的五新：新零售，新製造，新金融，新技術和新能源，新技術賦能傳統行業

  • SAAS軟體及服務：如Teambition、Trello、釘釘企業版、Basecamp、Growing.io

  • 2C

  • 移動App：如微信、微博

  • PC工具應用：如Google Doc

  • 產品展示類網站：如阿裡雲、支付寶官網

技術棧

  • React（Native）

  • Angular（NativeScript）

  • Vue（Weex）

2. 繼續融合

端技術

  • 前端、客戶端技術思想的融合

  • 組件化（組件化搭建頁面）

  • 組件生命周期鉤子函數（如iOS ViewController）

  • MV*（如MVVM設計就來源於微軟客戶端開發框架）

  • 大前端的統一

  • 虛擬DOM技術：React/ReactNative/ReactCanvas

  • 各種移動設備內核和引擎的統一：WebKit/V8

  • Web技術文檔的統一：Mozilla Web Docs

Web全棧技術

  • 前端、後端技術思想的融合

  • MV*（如前端的第一個MVC框架Backbone.js就來自於Ruby on Rails開發者）

  • AOP、依賴註入（Angular）

  • GraphQL（SQL）

  • IndexedDB（Database）

人工智慧與端技術

  • 人工智慧、前端技術的融合

  • 端是最終觸達用戶的節點

  • 端數據採集->後端機器學習、數據分析->智能推薦呈現

  • 物聯網、前端技術的融合

  • 智能家居/汽車/工業設備可能是有屏幕的，同時可以基於如JerryScript這樣的JS執行引擎使用Node.js開發聯網應用

 

“大清亡於閉關鎖國，學習技術需要交流和資料”。 在這裡我給大家準備了很多的學習資料免費獲取,每天都有包括但不限於技術乾貨、大廠面試題系列、技術動向、職業生涯、行業熱點、職場趣事等一切有關程式員的分享.web前端小白進階方法筆記,學習資料,面試題和視頻,項目源碼免費領取

 

### 3. 核心不變

電腦科學本質/軟體工程思想與實踐/程式員職業素養。

電腦科學基礎：如基本的操作系統概念和電腦組成原理，演算法和數據結構基礎等等。

軟體工程思想與實踐：如軟體開發模式，設計模式，架構思維，自動化思維，單元測試集成測試，UML等等。

程式員職業素養：如對代碼整潔和可讀性的追求，對軟體開發的熱情，對編程技藝的自我提升等等。

歷史回顧

回顧過前端的演化，主要參見最底下的相關資源，下圖簡要回顧一下95年以來軟體開發和前端歷史：

img

前端的未來

那些生存空間越來越小的產業

  • 小規模移動App：移動App市場被一些巨頭把持，小規模App生存空間越來越小

  • PC信息導航類網站（網址、購物、論壇、生活）：現在移動優先，而且有智能推薦，並且是強社交

無界面交互

Web前端能做一些事，主要是大前端的範疇

  • 會話式界面（視頻語音會話、語音搜索：WebRTC，開源語音庫：Common Voice）

  • 感官式界面（視覺：WebAR/WebVR）

  • 無界面，未來會有大量IoT設備（IoT有自己的通信協議和規範，前端的工作是在用戶看不見的後臺）

富界面交互

大量工作需要前端來做：

  • 日常辦公軟體（複雜應用，並且慢慢從桌面程式演化為Web）：Office、Email、文檔管理、產品設計、項目管理、代碼編輯器

  • 大數據/AI配套軟體（複雜應用，並且慢慢從桌面程式演化為Web）：需要大量的後臺系統來做數據分析/機器學習

  • 播放器/游戲：H5代替Flash，如Web Audio、Web Video、Canvas

  • 容器/DSL/內核/小程式：支付寶/微信/釘釘容器，內核（也就是UC、QQ瀏覽器內核），及其自定義DSL（如果將來手機的底層能力都可以上浮到小程式，很有想象空間）

  • 產品信息展示類網站（炫酷應用）：各種智能設備官網、大企業官網

未來在哪裡？

img

回顧觀點

  1. 繼續分化（領域細分、行業細分、技術棧細分）

  2. 繼續融合（端技術融合、Web全棧、人工智慧與端技術的融合）

  3. 核心不變（電腦科學本質、軟體工程思想與實踐、程式員職業素養）

一些建議

  1. 關心人工智慧的發展，思考TA在前端領域可能產生的應用場景

  • 視覺稿自動生成代碼

  • 根據用戶使用習慣自動排出最符合該用戶習慣的界面

  • 收集用戶數據在前端實時做學習和分析，如deeplearn.js

  1. 相信前端的未來，Web的力量

  • WebKit

  • V8

  • Flexbox：Yoga

  1. 結合公司業務特點有重點的關註前端的某些方面，畢竟技術服務於業務

“大清亡於閉關鎖國，學習技術需要交流和資料”。這是我的知乎專欄的一篇導航性文章，裡面彙集了web前端技術乾貨、前端面試題系列、技術動向、職業生涯、行業熱點、職場趣事等一切有關於程式員的高質量文章和學習資料分享。阿裡名廠標準web前端高級工程師教程目錄大全,從基礎到進階,看完保證您的薪資上升一個臺階

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • deno初體驗/安裝與helloworld
    1 安裝 ①Windows安裝 A. 下載編譯好的可執行程式 github發佈頁下載官方編譯好的程式，是一個zip壓縮包，裡面就一個簡簡單單的deno.exe程式，把它放到你喜歡的位置，我放在了 ，那麼添加個環境變數就可以使用了。 不會添加環境變數的同學，建議百度學習。 B. 使用curl命令 cu ...
  • [書籍精讀]《JavaScript設計模式與開發實踐》精讀筆記分享
    寫在前面 書籍介紹：本書在尊重《設計模式》原意的同時，針對JavaScript語言特性全面介紹了更適合JavaScript程式員的了16個常用的設計模式，講解了JavaScript面向對象和函數式編程方面的基礎知識，介紹了面向對象的設計原則及其在設計模式中的體現，還分享了面向對象編程技巧和日常開發中 ...
  • 順序跳躍顯示數組中的值
    小練習 順序跳躍顯示數組中的值 <input type="text" id="t" size="60"> <button id="s">stop</button> <script> var tt=document.getElementById('t'); var s=document.getElem ...
  • 2020前端練習 —— 超級無敵簡易版博客園
    @ 2020.5.14 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit ...
  • 弔打面試官系列-58道vue面試題
    1.vue優點？ 2.vue父組件向子組件傳遞數據？ 3.子組件像父組件傳遞事件？ 4.v-show 和 v-if指令的共同點和不同點？ 5. 如何讓CSS只在當前組件中起作用? 6. 的作用是什麼? 7.如何獲取dom? 8.說出幾種vue當中的指令和它的用法？。 9. vue-loader是什麼 ...
  • 從零開始的HTML筆記——初識HTML
    HTML學習 一個例子 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>第一個頁面</title> 6 </head> 7 <body> 8 <h1>我的第一個標題</h1> 9 <p>我的第一個段落。</p ...
  • 十年前端工程師教你Vue CLI 首屏優化技巧
    前言 之前用 vuecli做了個博客，是一個單頁面項目，大概有十個路由。 直接 npm run build打包出來，有一個 1M的巨大 js文件。 先掛載到伺服器上試試 好家伙 這載入時間 仿佛過了半個世紀 首屏頁面整整載入了 9s 光載入那個大文件就花了 8s 這必須得做個優化了，沒有用戶能忍受 ...
  • 前端是做什麼的？工作內容有哪些？
    隨著互聯網全面進入移動時代，前端逐漸成為互聯網行業中的重要角色。前端是做什麼的？工作內容有哪些？簡單來講，前端要做的就是將產品的UI設計稿在用戶終端上實現，因此可以說用戶看到的所有視覺和交互都是前端的工作領域。根據這個定義，我們可以把前端的工作內容總結為根據產品的需求，配合開發和UI設計部門完成前端 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類