【第1162期】2018 要學習的優秀 JavaScript 庫與知識

2021-01-20 前端早讀課

前言

關於2017年回顧的文章,也曾分享過幾篇了,當看到這篇的時候想去找找看在2017年初的時候有沒分享過2017值得學習的庫,可惜翻看了只有講到前端工具的趨勢。那2018年有哪些可以學的呢?今日早讀文章由@gy134340翻譯分享。

正文從這開始~

去年,我寫了一篇關於 2017 需要學習的技術 的文章。今年有一些驚喜。

我們致力於回答 「在你投資學習的時候,哪些最高效?」 的問題


JavaScript 有最多的包,取得壓倒性勝利。

首先,軟體吞噬了世界,web 吞噬了軟體,同時 JavaScript 吞噬了 web。而在 2018 年,React 正在吞噬 JavaScript。

React 在 2017 年贏得了人氣之戰。

從 Google 趨勢可以看出,還是有很多開發者基於 Angular 開發:

但是 React 持續的贏得用戶滿意度。它迅速增長並遠遠拋開 Angular (以及其他) 框架。

Vue.js 呢? 我聽說它很火

每個人都喜歡口頭上談及相關的替代選項,比如 Vue.js。這是我去年說的:

Vue.js 有很多的 GitHub star 和下載量。如果情況繼續發展的話,它在 2017 年將會表現的很好,但我不認為它會在下一年裡替換 Angular 或者 React。所以在你學習 React 或者 Angular 之後再學習它吧。

Vue.js 在 2017 年表現出色,贏得了很多新聞頭條和人們的興趣。像我所預測的那樣,它沒有趕上 React, 同時我也肯定的說在 2018 年也不會發生。即便如此,它可能在 2018 年超過 Angular:

Vue.js 下載量/月

如你所見, Vue.js 正在趕上 Angular 的下載量:


angular/core 下載量/月

但是 React 有很強的領先趨勢和與之相同的增長率:

React 下載量/月

Vue.js 比 React 增長的更快,那與 2017 年 React 和 Angular 的對比有什麼不同呢?

在 2016 年末,JavaScript 世界準備好迎接新的框架了。Angular 的用戶非常的不滿,React 的用戶則與之相反,許多人想學習 React,很少人願意學習 Angular。在 2017 年年尾,Angular 2 之後的用戶滿意度還是不到一半,只有 49%。

React 和 Vue.js 則是完全不同的情節React 的用戶滿意度更高 (93% 對比 90%)。2017 年早期,從 React 轉向 Vue 的最大的刺激是 React 的開源許可證的問題。Facebook 聽取了用戶的建議後來更改了協議。

在這一階段,我看不到任何跡象可以讓市場從 React 切換到其他的。Vue.js 從 React 手中奪取用戶要比從 jQuery 和 Angular 那裡難的多。

從 Angular 和 jQuery 那裡奪取用戶有很多空間,但是從 React 那裡獲取用戶來獲得持續的增長將會很快碰到瓶頸。

我預測 Vue.js 這種快速的增長只會持續一到兩年,它會在頂部與 React 進行激烈的競爭,然後會停在第二位,除非有大的改變可以打破這個平衡。


jQuery 涼了。

在職位列表中, React 完全取代了 jQuery 之前的位置——這是十年來第一個超越 jQuery 的庫¹。我們看到一個時代的終結。

React 取代了十年來 jQuery 第一的位置(來源: Indeed.com)


對比一下去年的圖:

jQuery 2016 年是這樣的

有趣的點在於其他庫的增長值大於 jQuery 滑落的值。總的來說,庫相關的職位在去年增長了 10k 或更多。

在職位的增加下,我們還看到平均工資的增長$110k 對比 2016 年的 $93k。通貨膨脹同期保持在2%以下,這也不會過多的影響這一爆炸式增長。

顯然,在 2018 還有是賣方市場。

1. 方法: 職位的搜索在 Indeed.com 完成。為了增強數據的可靠性,我成對的搜索 「軟體」 相關的關鍵字擴大相關性,然後乘以大約 1.5 (粗糙的區分那些編程工作列表使用 「軟體」 關鍵字和不使用的)。所有相關的都按日期排序記錄相關性,其結果不一定 100% 準確,但是已經足夠用來在此文中表示粗略的度。

在看了今年的數據之後,我強烈用最廣泛使用的 React 來開發應用,包括移動端應用(PWAs, React Native),web 應用,大部分的生產力工具,以及桌面媒體應用(Electron)。

某些明顯的情況下,其他的可能更為適用好:輕量的營銷頁面(完全不需要框架),3D 遊戲,AR/VR。對於 3D 的內容,看看 Unity, Unreal, 或者 PlayCanvas。即便如此,React 也可以作為 3D 內容的 UI 庫。

我強烈不建議轉向其他可以備選的前端框架。這並不是說它們不好,只是它們不是市場上 React 有力的競爭者。記住,這個列表是關於投資回報率,而不是哪一個技術是最棒的。


瀏覽 React 的職位列表,我注意到很多本不應該屬於前端工作的有趣的趨勢:


React 已經脫離了它 web 的土壤

靈活性是 React 最大的賣點。不像其他框架,採用 React 並不意味著關注它的數據模型,甚至瀏覽器和 DOM。事實上,我發現不少 React 的工作需求完全沒有提到 JavaScript。

React 提供了基於其標準的豐富的充滿活力的生態系統,這些從 jQuery 統治 web 以來從來沒有看到過。

問題不再是「哪一個框架?」
問題是 「什麼技術可以更好的搭配 React?」

沒有任何事物可以在 2018 改變 React(也許 2019 也是)。你很安全。JavaScript 疲勞漸漸穩定了。我們有了一個偉大的構造應用的框架,同時有著相關的優秀的生態系統。


像去年一樣,你不能錯誤的關注一些要點,但是你應該更加重視 React 應用的函數式編程。

React 有兩點優秀之處:

確定性的視圖渲染

將視圖層從 DOM 操作中抽象出來

確定性通過使用純函數構建應用來實現,這本質上也是函數式編程的定義。

考慮這一點, 這是一些你需要學習的內容:

基礎的 ES6 語法

類的語法和它的各種陷阱 — 可以對 React 組件使用類,但是應該避免繼承你自己的類,避免 instanceof, 避免類的使用者使用 new關鍵字。

函數式編程 和 軟體組成

Currying

閉包

純函數

Promises

Generators和異步函數

TDD

RAIL 性能模型

Progressive Web Applications (PWAs): 看一下 「Native Apps are Doomed」 和 「Why Native Apps Really Are Doomed」

GraphQL 在 2017 年成熟了很多,非常快速的取代 REST API, Apollo 採用了內置的離線客戶端緩存架構讓 Apollo 和 GraphQL 成為 2018 Redux 的一個真正的備選方案(或補充)。



這裡是一些我發現的最有用的庫和工具:

React

Redux

Redux-Saga 管理異步 IO 分離副作用

Next.js — Node 和 Express 的服務端渲染, 自動的分離打包, styled-jsx

Material UI

Storybook

Cheerio 用來做 React 組件的單元測試(相比 Enzyme 我更喜歡它)

Lodash (我更傾向於 lodash/fp)。只導入需要的包避免增大打包體積。

Babel: 編譯 ES6 使它在更老的瀏覽器上運行

Webpack: 最流行 JavaScript 打包工具,向 kit/boilerplate找一些簡單的樣例來快速的開始。

ESLint: 提早檢測語法錯誤和樣式問題,在 code review 和測試驅動開發之外最好的可以減少你代碼裡錯誤的工具。

Ramda— 主要是為了 lenses 和 transducers.

Node & Express

RxJS: 讓 JavaScript 可觀察,最近我一直在使用 transducers,記著使用 patch imports 來減小包體積。

TypeScript2017 年表現不錯, 但我認為它增加應用的複雜度的弊端大於它的幫助,它的主要缺點是過分依賴注釋而不是接口,同時對高階函數的類型有無法形容的扭曲,我做了一整天的試用,這些情況仍然存在:「靜態類型之秘」 和 「你也許不需要 JavaScript」。Flow 跟 TypeScript 有相同的問題同時開發者工具也不如 TypeScript 的棒。


所有的這些都是 2018 研究與開發領域真實的工作:

Progressive Web Apps (PWAs)

區塊鏈與金融科技

醫療科技

AR/VR — Hololens, Meta, 和 ODG 現在可以出貨了。 ODG R-9 本來預計 2017 發售但是很有可能放在 2018。MagicLeap 承諾 2018 發布。AR 將會比過去手機更加改變人們的體驗。

3D 列印

AI

無人駕駛

量子計算也將改變世界,但是也許在 2019 或者更晚改變才會開始。目前有在網上工作的量子計算機,但是他們還做的不是很多。現在對於大多數開發者來說開始試驗性生產還太早。微軟最近發布了它的量子計算程式語言 Q#,IBM 和 Google 也繼續大量投資自己的量子云計算市場。

如果你想學習量子計算,你也許需要學習 線性代數,同時也有對於量子計算也有一些基於 lambda 演算 的函數式探索。

很有可能,像我們看到的 AI, 雲 API 將會被開發出來讓有不同數學背景的人來更好的利用好量子計算的能力。

2019年的時候,我們在回過頭來看看這篇的內容,會不會有驚訝呢?

最後,為你推薦

【第1154期】2017 年 JavaScript 發展狀況回顧

【第1152期】2017 JavaScript 調查報告概述

關於本文
譯者:@gy134340
譯文:https://github.com/xitu/gold-miner/blob/master/TODO/top-javascript-libraries-tech-to-learn-in-2018.md(掘金翻譯)
原文:https://medium.com/javascript-scene/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6

作者:@Eric Elliott
校對者:@moods445, @vuuihc


你心目中2018年最值得學習的技術是什麼呢?

相關焦點

  • numpy庫學習總結(基礎知識)
    最近在學習Python中OpenCV庫,學習花了很多時間,發現基礎知識很重要,尤其是numpy這個庫,在進行程序開發時,處理大量類似數組這種數據結構時,它的重要性等同於Python中的列表,像前篇我們寫的《使用Python中OpenCV庫創建一幅圖片的RGB通道圖片》中,對於圖片的處理,大部分時間我們是在跟類似數組這種數據結構在打交道
  • 第7期「學習強國」上海學習平臺答題挑戰賽題庫來咯
    今天要給大家送上「學習強國」上海學習平臺答題挑戰賽第七期的題庫答題時間:1月11日周六8時 ~ 1月15日周三24時。答題入口:在「上觀新聞」App中打開《學習強國答題挑戰賽——第7期挑戰入口》,點擊右上角「立即答題」按鈕,開始答題。
  • 面試資源、公共API、多樣化學習路徑,這10個GitHub庫開發者必看
    其中一些庫可以幫助大家學習新知識,還有的可以幫助構建很酷的東西,不論如何所有庫都能夠幫助你成為更好的軟體工程師。1.它適合的人群是軟體工程新人(不過仍需了解計算機科學知識),並對如何成為可靠性工程師或運維工程師提供建議。作者創建該庫的初衷是制定個人 to-do list 來追蹤自己的學習過程。每天學習 8-12 小時,學習數月後,他最終得到了夢想中的工作,成為亞馬遜的軟體開發工程師。
  • 七天學會javascript第一天javascript介紹
    javascript介紹javascript數據類型javascript運算符javascript對象javascript Date對象javascript String對象JavaScript常用於實現一些前端效果。前些年流行的flash已經慢慢的被淘汰,js盛行起來。javascript :客戶端編程。javascript是由客戶端去解釋運行的。
  • SCP1162,未知之洞,SCP基金會系列
    機動特遣隊Zeta-9「鼴鼠」特工Parks在一次調查被SCP184感染區域的途中大概位置是在當時維護隧道的混凝土地面上他的手電筒意外掉了下來剛好下面有一個洞於是將手伸入洞中尋找沒想到 並沒找到掉入其中的手電筒卻發現了這個SCP1162
  • 學習前端需要知道哪些內容學習起來更容易
    那麼對於零基礎轉行學習的同學肯定以下一些疑問:web前端需要學習哪些知識,web前端的學習路線,以及學習web需要多長時間的問題。第一,想學web前端需要學什麼知識?htmlcss,css3,javascript,jQuery,easyUI,html5……首先學這些基本的吧!
  • 在JavaScript中,使用replace()、test()和exec()方法匹配字符串
    JavaScript核心代碼如下:<script type="text/javascript">var str = "Hello Microsoft!";var res = str.replace(/Microsoft/i, "Google");document.write(res);</script>replace()方法的參數說明如下:第1個參數可以是查找的字符串,也可以是一個正則表達式,此例子中是一個正則表達式。第2個參數是最終要替換為的新字符串。
  • javascript在自動化測試項目中的應用「軟體測試開發入門教程」
    或者在自動化測試中應用過可能很多朋友javascript都是在Html中應用。我們做測試就是會應用在自動化測試當中不管學什麼技術,都要活學活用。基礎比較差的朋友,如果你覺得前方高能,可以先去把基礎鞏固一下,我始終認為一個點如果你在網際網路行業,做測試工程師。
  • 不可思議的SCP-1162「牆上的洞」,裡面能找到你曾經丟失的物品!
    描述SCP-1162是一個在煤渣磚牆上的洞,當有人將手臂伸進其中足夠深時SCP-1162的特性將會顯現出來,洞的深度因人而異,但是他們都會在洞中接觸到一個小到可以從洞口拿出的物體,當人接觸到物品時其另一件物品會消失,從洞中取出的物品被認為是測試者曾經丟失或者是在他們生命中尋找的某件東西
  • 《中國科學: 物理學 力學 天文學》(中英文版)2018年度優秀約稿及審稿人獎評選揭曉
    近期, 《中國科學: 物理學 力學 天文學》(中英文版)評選出了2018年度優秀約稿及審稿人獎, 以下為名單:一、
  • 軟體開發要學習什麼樣的知識
    據中國網際網路發展統計報告書(CNNIC)2019年8月發表的第44部統計報告截至2019年6月,我國網際網路用戶已達到8.54億,增長25人。2018年底達到9800萬人,網際網路普及率達到61.2%,增加了6個百分點。
  • 分享幾個javascript實用函數
    從本文開始小編將定期發布javascript相關的代碼集錦,每次發十個與大家分享,首先是數組篇,也許有人會說,可以用常用的lodash的等庫啊。但是小編覺得,去讀lodash源碼的人並不多吧,所以分享的代碼集錦權當一種學習了,首先開始的是數組篇,基於es6 規範allallEqual找出數組中滿足篩洗條件中的所有元素.any// 找出數組中滿足篩洗條件中的所有元素.
  • 教育部老幹部工作簡訊2018年第八期(總第104期)
    要以更高的政治站位構建教育脫貧攻堅長效機制,推動教育脫貧攻堅向縱深發展。要把巡視作為推進教育事業改革發展的強大動力,全面落實中央關於教育的決策部署,堅決完成教育脫貧攻堅任務,為奪取全面建成小康社會決勝階段的偉大勝利作出新的更大貢獻。  ★ 10月24日,教育部黨組學習貫徹全國教育大會精神推進會召開。部黨組書記、部長陳寶生主持會議並講話。
  • 50個實用的JavaScript工具
    圖像處理  Reflection.js  是一個能夠給圖片加倒影效果的JavaScript庫。  typeface.js  提供了一個字體的解決方案,你能使用任何字體顯示,不管客戶端是否安裝了這種字體,即使不使用Flash(sIFR使用Flash)。
  • 學習筆記,從NumPy到Scrapy,學習Python不能錯過這些庫
    在網絡上看到幾位前輩寫了關於python深度學習庫的文章,對於小小白來說,因為我剛開始學python,我得承認自己看完後依然覺得雲裡霧裡的,不知道這些庫到底對我有什麼用處。所以我到網絡上搜集補充關於這些庫的說明內容,感覺在這個整理資料的過程中,對於這些python程序庫了解了更多,以下是我整理的學習筆記。
  • 西南交通大學網絡教育2020-2021學年第1期優秀畢業生評選程序及時間
    西南交通大學網絡教育2020-2021學年第1期優秀畢業生評選程序及時間 2020-11-23 | 來源:網絡 https://www.eol.cn
  • 一天一點JavaScript編程知識:Animation動畫
    PS:供複製的代碼,但是請注意,圖片資源需要調整一下<html> <head> <title>JavaScript Animation</title> <script type = "text/javascript"> var imgObj = null; function init() { imgObj
  • 第3屆全國青少年物理知識能力展示活動即將開幕
    據悉,第3屆全國青少年物理知識能力展示活動即將於年底舉辦,此次競賽由中國智慧工程研究會智慧教育工程委員會主辦,中華學習輔導網承辦。據業內教育專家分析,本屆全國青少年物理知識能力展示活動「含金量」很高,對於廣大高考生來說,是一次不可多得的「跳板」。
  • CAXA CAPP教程:知識庫查詢的使用及設置
    眾所周知,CAXA工藝圖表自帶了工藝知識庫管理工具,那麼,我們如何快速的在工藝知識庫裡查找的我們需要的工藝知識並填寫工藝卡片呢?接下來我們將一起學習知識庫查詢功能的使用以及對應知識庫的相關設置。  知識庫查詢功能的使用  1、 打開知識庫查詢開關  打開CAXA工藝圖表軟體,單擊【選項】―【知識庫查詢開關設置】,選擇「開」,如圖一所示。
  • 2018年教師招聘考試每日一練185期(視頻版)
    A.比較難的任務B.比較容易的任務C.難度適中的任務D.非常難或非常容易的任務4.要學生關注歷史與地理、化學與生物、數學與物理等學科之間的關係,這屬於學習遷移中的( )。A.橫向遷移B.縱向遷移C.正遷移D.負遷移5.