值得了解的 11 個 2021 最受歡迎的 JS 工具

一些我認為太出名的工具就不會列在裡面,但有些很出名的工具我沒用過也會列上。

排行榜資訊來自:https://risingstars.js.org/2021/en#section-all

值得了解的工具們

  • Svelte

被選為 2021 最受歡迎的 Web 框架 。

是一種新的前端框架,優點是少寫Code(使用HTML, CSS, JS 構建無樣板的組件)、沒有虛擬DOM(將 code 編譯為微小的無框架的 vanilla JS)、真正的響應(自帶狀態管理庫)

傳統的前端框架(如 React, Vue)會在瀏覽器中完成大部分工作,而 Svelte 將這些工作轉移到構建應用程序時發生的編譯步驟。

沒有使用虛擬 DOM diffing 之類的技術,而是編寫了在應用程序狀態發生變化時以手術方式更新 DOM 的代碼。

https://svelte.dev/

Svelte 值得了解的 11 個 2021 最受歡迎的 JS 工具
  • Slidev

為開發者打造的PPT工具(用 markdown 即可做出一個像樣的演示文稿)

https://cn.sli.dev/

slidev 值得了解的 11 個 2021 最受歡迎的 JS 工具
  • NocoDB

Airtable 的開源替代品,能將 MySQL、PostgreSQL、SQL Server、SQLite 或 MariaDB 轉換為智能的電子表格

https://github.com/nocodb/nocodb

nocodb 值得了解的 11 個 2021 最受歡迎的 JS 工具
  • Prisma

Prisma Client 可用於任何Node.js 或 TypeScript 後端應用程序(包括無服務器應用程序和微服務)。這可以是一個REST API,一個GraphQL API一個GRPC API,或其他任何需要的數據庫。

https://github.com/prisma/prisma

prisma 值得了解的 11 個 2021 最受歡迎的 JS 工具
// Schema.prisma
datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}
generator client {
  provider = "prisma-client-js"
}
model Post {
  id        Int @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User? @relation(fields: [authorId], references: [id])
  authorId  Int?
}
  • Remix

Remix 是一個全棧 Web 框架,可讓您專注於用戶界面,並通過 Web 基礎知識來提供快速、流暢和彈性的用戶體驗。

https://remix.run/

remix 值得了解的 11 個 2021 最受歡迎的 JS 工具
export async function loader({ request }) {
  return getProjects();
}

export async function action({ request }) {
  const form = await request.formData();
  return createProject({ title: form.get("title") });
}

export default function Projects() {
  const projects = useLoaderData();
  const { state } = useTransition();
  const busy = state === "submitting";

  return (
    <div>
      {projects.map((project) => (
        <Link to={project.slug}>{project.title}</Link>
      ))}

      <Form method="post">
        <input name="title" />
        <button type="submit" disabled={busy}>
          {busy ? "Creating..." : "Create New Project"}
        </button>
      </Form>
    </div>
  );
}
  • cypress

對在瀏覽器中運行的任何東西進行快速、簡單和可靠的測試。

https://www.cypress.io/

cypress2 值得了解的 11 個 2021 最受歡迎的 JS 工具
  • react-use

字面上的意思,用於 React 的一些常用 Hooks

有興趣可以看一下包含哪些 Hooks:https://github.com/zenghongtu/react-use-chinese/blob/master/README.md

https://github.com/zenghongtu/react-use-chinese

  • Astro

Astro 是利用現代技術的靜態網站生成工具。

https://docs.astro.build/zh-tw/getting-started/

astro 值得了解的 11 個 2021 最受歡迎的 JS 工具
<!-- Example: MyComponent.astro -->
<div id="my-component">
  <header>
    <!-- children with the `slot="header"` attribute will go here -->
    <slot name="header" />
  </header>
  <main>
    <!-- children without a `slot` (or with the `slot="default"`) attribute will go here -->
    <slot />
  </main>
  <footer>
    <!-- children with the `slot="footer"` attribute will go here -->
    <slot name="footer" />
  </footer>
</div>

<!-- Usage -->
<MyComponent>
  <h1 slot="header">Hello world!</h1>
  <p>Lorem ipsum ...</p>
  <FooterComponent slot="footer" />
</MyComponent>
  • Zustand

簡單、無boilerplate、僅在更改時呈現組件、集中的 React 狀態管理工具

https://github.com/pmndrs/zustand

zustand 值得了解的 11 個 2021 最受歡迎的 JS 工具
import create from 'zustand'

const useStore = create(set => ({
  count: 1,
  inc: () => set(state => ({ count: state.count + 1 })),
}))

function Controls() {
  const inc = useStore(state => state.inc)
  return <button onClick={inc}>one up</button>
)

function Counter() {
  const count = useStore(state => state.count)
  return <h1>{count}</h1>  
}
  • Puppeteer

Puppeteer 是一個 Node 庫,它提供了一個高級 API 來通過DevTools 協議控制 Chrome 或 Chromium 。Puppeteer默認 Headless 運行,但可以配置為運行完整(non-headless)Chrome 或 Chromium。

大多數您可以在瀏覽器中手動執行的操作都可以使用 Puppeteer 來完成!以下是一些幫助您入門的示例:

  1. 生成頁面的屏幕截圖和 PDF。
  2. 抓取 SPA(單頁應用程序)並生成預渲染內容(即SSR(服務器端渲染))。
  3. 自動化表單提交、UI 測試、鍵盤輸入等。
  4. 創建最新的自動化測試環境。使用最新的 JavaScript 和瀏覽器功能,直接在最新版本的 5. 在Chrome 中運行您的測試。
  5. 捕獲站點的時間線跟踪以幫助診斷性能問題。
  6. 測試 Chrome 擴展。

https://github.com/puppeteer/puppeteer

puppeteer 值得了解的 11 個 2021 最受歡迎的 JS 工具
  • json-server

在不到 30 秒的時間內且無須寫 code 的情況下構建完整(假) REST API。為需要快速後端進行原型設計和模擬的前端開發人員創建。

https://github.com/typicode/json-server

jsonserver 值得了解的 11 個 2021 最受歡迎的 JS 工具

基本上你只需要寫 data 就可以了… json-server 能幫你做完所有事

// db.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

json-server 自帶的一些路由:

GET    /posts
GET    /posts/1
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode
GET /posts?_page=7
GET /posts?_page=7&_limit=20
GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc
GET /posts?_sort=user,views&_order=desc,asc
GET /posts?_start=20&_end=30
GET /posts/1/comments?_start=20&_end=30
GET /posts/1/comments?_start=20&_limit=10
// ...

之前我做的React項目實戰 – 全球新聞發布管理系統 後端也是使用 json-server。

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論