淘系前端架构 - 周刊 - 211213 期

1,655 阅读3分钟

昭昭前事,惕惕后人。

🗞 News

ahooks 3.0 发布

ahooks 作为 React 社区中优质可靠的 Hooks 库,经过近两年多的迭代,在国内外社区都获得了很多同学的认可,时至今日 ahooks 发布 3.0 版本,为我们带来了以下新特性:

  • 全面支持 SSR
  • 全新的 useRequest
  • 所有的输出函数引用是固定的,避免闭包问题
  • DOM 类 Hooks 支持 target 动态变化
  • 更合理的 API 设计
  • 解决了在严格模式(Strict Mode)下的问题
  • 解决了在 react-refresh(HMR)模式下的问题
  • 新增了更多 Hooks
  • &etc.

Release Blog:ahooks 3.0 来了!高质量可靠的 React Hooks 库 - 知乎 (zhihu.com)

Home Page:ahooks - React Hooks Library - ahooks 3.0

GitHub Repo:GitHub - alibaba/hooks: A high-quality & reliable React Hooks library.

Tailwind CSS v3.0

此次更新,为我们带来了以下新特性:

  • 运行时引擎(师承 WindiCSS)
  • 开箱即用的颜色系统
  • 可定制颜色的 box-shadow
  • Scroll snap API
  • 多列布局
  • LTR & RTL 修饰符
  • &etc.

Release Blog:Tailwind CSS v3.0 – Tailwind CSS

GitHub Repo:tailwindlabs/tailwindcss: A utility-first CSS framework for rapid UI development. (github.com)

📦 Open Source

fiber

一个受 Express 启发的 Web 应用框架,使用 Go 开发,语法与 Express 相近,同时性能也非常强劲。\

基础路由:

func main() {
    app := fiber.New()

    // GET /api/register
    app.Get("/api/*", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("✋ %s", c.Params("*"))
        return c.SendString(msg) // => ✋ register
    })

    // GET /flights/LAX-SFO
    app.Get("/flights/:from-:to", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("💸 From: %s, To: %s", c.Params("from"), c.Params("to"))
        return c.SendString(msg) // => 💸 From: LAX, To: SFO
    })

    // GET /dictionary.txt
    app.Get("/:file.:ext", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("📃 %s.%s", c.Params("file"), c.Params("ext"))
        return c.SendString(msg) // => 📃 dictionary.txt
    })

    // GET /john/75
    app.Get("/:name/:age/:gender?", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("👴 %s is %s years old", c.Params("name"), c.Params("age"))
        return c.SendString(msg) // => 👴 john is 75 years old
    })

    // GET /john
    app.Get("/:name", func(c *fiber.Ctx) error {
        msg := fmt.Sprintf("Hello, %s 👋!", c.Params("name"))
        return c.SendString(msg) // => Hello john 👋!
    })

    log.Fatal(app.Listen(":3000"))
}

静态资源服务:

func main() {
    app := fiber.New()

    app.Static("/", "./public")
    // => http://localhost:3000/js/script.js
    // => http://localhost:3000/css/style.css

    app.Static("/prefix", "./public")
    // => http://localhost:3000/prefix/js/script.js
    // => http://localhost:3000/prefix/css/style.css

    app.Static("*", "./public/index.html")
    // => http://localhost:3000/any/path/shows/index/html

    log.Fatal(app.Listen(":3000"))
}

中间件:

func main() {
    app := fiber.New()

    // Match any route
    app.Use(func(c *fiber.Ctx) error {
        fmt.Println("🥇 First handler")
        return c.Next()
    })

    // Match all routes starting with /api
    app.Use("/api", func(c *fiber.Ctx) error {
        fmt.Println("🥈 Second handler")
        return c.Next()
    })

    // GET /api/list
    app.Get("/api/list", func(c *fiber.Ctx) error {
        fmt.Println("🥉 Last handler")
        return c.SendString("Hello, World 👋!")
    })

    log.Fatal(app.Listen(":3000"))
}

相信熟悉 Express 的同学对它应该不会太陌生。

性能也非常强劲:

Home Page:Fiber (gofiber.io)

GitHub Repo:gofiber/fiber: ⚡️ Express inspired web framework written in Go (github.com)

Happy DOM

一个 jsdom 的替代品,用于支持 Web Components 的 SSR,旨在支持浏览器更多浏览器常用的功能。

Benchmark:

OperationJSDOMHappy DOM
Import / Require333 ms45 ms
Parse HTML256 ms26 ms
Serialize HTML65 ms8 ms
Render custom element214 ms19 ms
querySelectorAll('tagname')4.9 ms0.7 ms
querySelectorAll('.class')6.4 ms3.7 ms
querySelectorAll('[attribute]')4.0 ms1.7 ms
querySelectorAll('[class~="name"]')5.5 ms2.9 ms
querySelectorAll(':nth-child(2n+1)')10.4 ms3.8 ms

GitHub Repo:capricorn86/happy-dom: A jsdom alternative with support for server side rendering of web components. (github.com)

amis

amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。

Home Page:介绍 (gitee.io)

GitHub Repo:baidu/amis: 前端低代码框架,通过 JSON 配置就能生成各种页面。 (github.com)

Mitosis

一款类 React 框架,口号是编写一次组件,在任何框架中使用,采用编译的方式将其编译为 Vue/React/SolidJS/Angular/Svelte 等组件。

GitHub Repo:BuilderIO/mitosis: Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more. (github.com)

📑 Article

TypeScript 类型中的逆变协变

原文链接:TypeScript类型中的逆变协变 (qq.com)