大廠技術(shù) 高級(jí)前端 Node進(jìn)階

點(diǎn)擊上方程序員成長指北，關(guān)注公眾號(hào)

回復(fù)1，加入高級(jí)Node交流群

TypeScript 是一種由微軟開發(fā)的自由和開源的編程語言。它是 JavaScript 的一個(gè)超集，而且本質(zhì)上向這個(gè)語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊獭?br>

TypeScript 提供最新的和不斷發(fā)展的 JavaScript 特性，包括那些來自 2015 年的 ECMAScript 和未來的提案中的特性，比如異步功能和 Decorators，以幫助建立健壯的組件。

下圖顯示了 TypeScript 與 ES5、ES2015 和 ES2016 之間的關(guān)系：

好的，簡(jiǎn)單介紹了 TypeScript，下面我們馬上步入正題，來開始介紹 ”這些年我收藏過的 10 個(gè) TS 項(xiàng)目“ 中的第一個(gè)項(xiàng)目 —— AVA。

AVA

?? A framework for automated visual analytics.

https://github.com/antvis/AVA

AVA（A Visual Analytics）是為了更簡(jiǎn)便的可視分析而生的技術(shù)框架。其名稱中的第一個(gè) A 具有多重涵義：它說明了這是一個(gè)出自阿里巴巴集團(tuán)（Alibaba）技術(shù)框架，其目標(biāo)是成為一個(gè)自動(dòng)化（Automated）、智能驅(qū)動(dòng)（AI driven）、支持增強(qiáng)分析（Augmented）的可視分析解決方案。

rough

Create graphics with a hand-drawn, sketchy, appearance.

https://github.com/pshihn/rough

Rough.js 是一個(gè)輕量的圖形庫（壓縮后的 <9 kB），可以讓你用手繪的方式繪制草圖。該庫提供繪制線條、曲線、弧線、多邊形、圓形和橢圓的基礎(chǔ)能力，同時(shí)支持繪制 SVG 路徑。Rough.js 可同時(shí)支持 Canvas 和 SVG。

除了生成簡(jiǎn)單的圖形之外，使用 Rough.js 也可以用來生成復(fù)雜的圖形，比如手繪風(fēng)格的地圖：

moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

https://github.com/daybrush/moveable

Moveable 可以讓你把指定的元素，變成可拖動(dòng)的，可調(diào)整大小的，可伸縮的，可旋轉(zhuǎn)的或可組合的元素。

Draggable	Resizable	Scalable	Rotatable

Warpable	Pinchable	Groupable	Snappable

n8n

Free and open fair-code licensed node based Workflow Automation Tool. Easily automate tasks across different services.

https://github.com/n8n-io/n8n

n8n 是一個(gè)免費(fèi)、開放、fair-code 許可，基于節(jié)點(diǎn)的工作流自動(dòng)化工具。它可以自托管，很容易擴(kuò)展，因此也可以與內(nèi)部工具一起使用。n8n 類似 IFTTT、Zapier，可以互聯(lián)互通包括 GitHub、Dropbox、Google、NextCLoud、RSS、Slack、Telegram 在內(nèi)的 100 多個(gè)在線服務(wù)。利用 n8n 你可以方便地實(shí)現(xiàn)當(dāng) A 條件發(fā)生，觸發(fā) B 服務(wù)這樣的自動(dòng)工作流程。

IFTTT 是一個(gè)被稱為 “網(wǎng)絡(luò)自動(dòng)化神器” 的創(chuàng)新型互聯(lián)網(wǎng)服務(wù)理念，它很實(shí)用而且概念很簡(jiǎn)單。IFTTT 全稱是 If this then that，意思是如果滿足 “this” 條件，則觸發(fā)執(zhí)行 “that” 動(dòng)作。

rrweb-io

record and replay the web.

https://github.com/rrweb-io/rrweb

rrweb 是 'record and replay the web' 的簡(jiǎn)寫，旨在利用現(xiàn)代瀏覽器所提供的強(qiáng)大 API 錄制并回放任意 Web 界面中的用戶操作。

rrweb 主要由 3 部分組成：

rrweb-snapshot，包含 snapshot 和 rebuild 兩個(gè)功能。snapshot 用于將 DOM 及其狀態(tài)轉(zhuǎn)化為可序列化的數(shù)據(jù)結(jié)構(gòu)并添加唯一標(biāo)識(shí)；rebuild 則是將 snapshot 記錄的數(shù)據(jù)結(jié)構(gòu)重建為對(duì)應(yīng)的 DOM。
rrweb，包含 record 和 replay 兩個(gè)功能。record 用于記錄 DOM 中的所有變更（mutation）；replay 則是將記錄的變更按照對(duì)應(yīng)的時(shí)間一一重放。
rrweb-player，為 rrweb 提供一套 UI 控件，提供基于 GUI 的暫停、快進(jìn)、拖拽至任意時(shí)間點(diǎn)播放等功能。

如上圖所示，在完成錄制 Web 界面中的用戶操作之后，就可以 rrweb-player 進(jìn)行暫停、快進(jìn)、拖拽至任意時(shí)間點(diǎn)等播放功能。看完之后，有些小伙伴是不是手癢了，rrweb 的作者也很貼心為我們提供了三個(gè)在線示例：

Bootstrap checkout form（https://www.rrweb.io/demo/checkout-form）
Conversational Form（https://www.rrweb.io/demo/chat）
Tetris game（https://www.rrweb.io/demo/tetris?lan=en）

Tetris 即俄羅斯方塊，適用于所有電子游戲機(jī)和電腦操作系統(tǒng)，是一個(gè)最初由阿列克謝帕吉特諾夫在蘇聯(lián)設(shè)計(jì)和編程的益智類視頻游戲。

俄羅斯方塊（Tetris）這個(gè)游戲，勾起了本人對(duì)童年的無限回憶，一波回憶殺，有木有？

hyper

A terminal built on web technologies.

https://github.com/vercel/hyper

Hyper 是使用 Web 技術(shù)開發(fā)的命令行工具，它和 VS Code 一樣，都是基于 Electron，提供實(shí)用的 Plugins 和 Themes。

開發(fā)者可以根據(jù)自己的喜好，在 Hyper 官網(wǎng) —— https://hyper.is/themes 選擇自己喜歡的主題，當(dāng)然也可以與其他用戶分享自己開發(fā)的主題：

amis

前端低代碼框架，通過 JSON 配置就能生成各種后臺(tái)頁面。

https://github.com/baidu/amis

amis 百度開源的前端低代碼框架，通過 JSON 配置就能生成各種后臺(tái)頁面，極大減少開發(fā)成本，甚至可以不需要了解前端。目前在百度廣泛用于內(nèi)部平臺(tái)的前端開發(fā)，已有 100+ 部門使用，創(chuàng)建了 3w+ 頁面。

amis 渲染器架構(gòu)圖

editor.js

A block-styled editor with clean JSON output.

https://github.com/codex-team/editor.js

Editor.js 是一個(gè)塊風(fēng)格的編輯器。塊是組成條目的結(jié)構(gòu)單元。例如，段落，標(biāo)題，圖像，視頻，列表都是塊。每個(gè)塊由插件表示。此外，Editor.js 還為開發(fā)者提供了許多現(xiàn)成的插件和一個(gè)用于創(chuàng)建新插件的簡(jiǎn)單 API。

react-hook-form

?? React hooks for forms validation without the hassle (Web + React Native)

https://github.com/react-hook-form/react-hook-form

React Hook Form 是高性能、靈活、易拓展、易于使用的表單校驗(yàn)庫。它支持以下特性：

使創(chuàng)建表單和集成更加便捷
非受控表單校驗(yàn)
以性能和開發(fā)體驗(yàn)為基礎(chǔ)構(gòu)建
迷你的體積而沒有其他依賴
遵循 html 標(biāo)準(zhǔn)進(jìn)行校驗(yàn)
與 React Native 兼容
支持 Yup, Joi, Superstruct 或自定義
支持瀏覽器原生校驗(yàn)

nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) ??.

https://github.com/nestjs/nest

Nest 是構(gòu)建高效，可擴(kuò)展的 Node.js Web 應(yīng)用程序的框架。它使用現(xiàn)代的 JavaScript 或 TypeScript（保留與純 JavaScript 的兼容性），并結(jié)合 OOP（面向?qū)ο缶幊蹋現(xiàn)P（函數(shù)式編程）和FRP（函數(shù)響應(yīng)式編程）的元素。

在底層，Nest 使用了 Express，但也提供了與其他各種庫的兼容，例如 Fastify，可以方便地使用各種可用的第三方插件。

近幾年，由于 Node.js，JavaScript 已經(jīng)成為 Web 前端和后端應(yīng)用程序的「通用語言」，從而產(chǎn)生了像 Angular、React、Vue 等令人耳目一新的項(xiàng)目，這些項(xiàng)目提高了開發(fā)人員的生產(chǎn)力，使得可以快速構(gòu)建可測(cè)試的且可擴(kuò)展的前端應(yīng)用程序。然而，在服務(wù)器端，雖然有很多優(yōu)秀的庫、helper 和 Node 工具，但是它們都沒有有效地解決主要問題 —— 架構(gòu)。

Nest 旨在提供一個(gè)開箱即用的應(yīng)用程序體系結(jié)構(gòu)，允許輕松創(chuàng)建高度可測(cè)試，可擴(kuò)展，松散耦合且易于維護(hù)的應(yīng)用程序。

看完以上分享的這 10 個(gè)項(xiàng)目，小伙伴有沒有對(duì)其中的某些項(xiàng)目感興趣呢？如果有感興趣的話，趕緊把 TypeScript 學(xué)起來喲。另外，歡迎小伙伴們，給我留言推薦其他好玩、有趣的 TypeScript 項(xiàng)目。

?
了解更多 TypeScript 資源(1.5K)：

https://github.com/semlinker/awesome-typescript
?

   
    
     
      
       Node 社群
       

      
     
    
    
     
      
       
        

       
       
        

       
      
     
    
    

    我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
    

    
    

    如果你覺得這篇內(nèi)容對(duì)你有幫助，我想請(qǐng)你幫我2個(gè)小忙：

    
     1. 點(diǎn)個(gè)「在看」，讓更多人也能看到這篇文章
    
    
     2. 訂閱官方博客 www.inode.club 讓我們一起成長
    
    
     

    
   
點(diǎn)贊和在看就是最大的支持??

讓人眼前一亮的 10 大 TS 項(xiàng)目，學(xué)起來！