Amoy front-end Architecture – Weekly – 211213

Enlighten the former, teach the later generations.

🗞 News

Ahooks 3.0 release

Ahooks is the react-enabled Hooks library. After nearly two years of iteration, it has gained recognition in the community and abroad. Today, Ahooks release 3.0 brings us the following new features:

• Full support for SSR
• New useRequest
• All output function references are fixed, avoiding closure problems
• DOM class Hooks support dynamic target change
• Better API design
• Fixed an issue in Strict Mode
• Fixed an issue in React-Refresh (HMR) mode
• More Hooks added
• &etc.

Release Blog: Ahooks 3.0 is coming! High quality and reliable React Hooks library – 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

This update brings us the following new features:

• Runtime engine (WindiCSS)
• Color system out of the box
• Box-shadow with customizable colors
• Scroll snap API
• Multi-column layouts
• LTR & RTL modifier
• &etc.

Release Blog: Tailwind CSS V3.0 — Tailwind CSS

Making Repo: tailwindlabs/tailwindcss: A utility – the first CSS framework for rapid UI development. (github.com)

📦 Open Source

fiber

Express-inspired Web application framework, developed using Go, has a similar syntax to Express, but also very strong performance. \

Basic routing:

func main(a) {
    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"))}Copy the code

Static resource services:

func main(a) {
    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"))}Copy the code

Middleware:

func main(a) {
    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"))}Copy the code

Those of you familiar with Express should be familiar with it.

Performance is also very strong:

Home Page: Fiber (gofiber.io)

GitHub Repo: GoFiber/Fiber: ⚡️ Express Inspired Web Framework Written in Go (github.com)

Happy DOM

An alternative to JsDOM, SSR for Web Components, designed to support more of the common features of browsers.

Benchmark:

Operation	JSDOM	Happy DOM
Import / Require	333 ms	45 ms
Parse HTML	256 ms	26 ms
Serialize HTML	65 ms	8 ms
Render custom element	214 ms	19 ms
querySelectorAll(‘tagname’)	4.9 ms	0.7 ms
querySelectorAll(‘.class’)	6.4 ms	3.7 ms
querySelectorAll(‘[attribute]’)	4.0 ms	1.7 ms
querySelectorAll(‘[class~=”name”]’)	5.5 ms	2.9 ms
querySelectorAll(‘:nth-child(2n+1)’)	10.4 ms	3.8 ms

Dom: making Repo: capricorn86 / happy – A jsdom alternative with support for server side rendering of web components. (github.com)

amis

Amis is a low-code front-end framework that uses JSON configuration to generate pages, reducing page development effort and increasing productivity.

Home Page: Introduction (Giee.io)

GitHub Repo: Baidu/Amis: front-end low code framework, through JSON configuration can generate various pages. (github.com)

Mitosis

A kind of framework, the React slogan is to write a component used in any framework, with the method of compiling the compilation of the Vue/React/SolidJS/presents/Svelte and other components.

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

📑 Article

Contravariant covariant in TypeScript types

Contravariant Covariant in TypeScript Types