Top 4 Alternative UI framework phổ biến nhất trong năm 2022

React. Vue. Svelte. Nếu bạn đang phát triển giao diện người dùng trên web vào năm 2022, rất có thể bạn đã sử dụng ít nhất một trong những thư viện này và nghe nói nhiều về hai thư viện kia. Tất cả chúng đều là giải pháp tuyệt vời cho cùng một vấn đề, với sự cân bằng hơi khác nhau.

Nhưng có những lựa chọn thay thế nào khác để xây dựng giao diện front end hiện đại? Trong bài viết này, chúng tôi sẽ xem xét một vài trong số những cái có triển vọng nhất. Đây sẽ không phải là một phần đi sâu vào từng cái, nhưng bạn sẽ thấy đủ để thúc đẩy bạn thử nghiệm một trong số chúng cho dự án phụ cuối tuần tiếp theo của bạn.

Solid.js

Solid đã xây dựng được rất nhiều sự hỗ trợ trong vài tháng qua và được ca ngợi là một sự thay thế tuyệt vời cho những người đã thành thạo React. Bởi vì - tốt - nó khá giống nhau!

Ít nhất chúng trông giống nhau trên bề mặt. Cả hai đều sử dụng JSX, dựa trên khái niệm về các thành phần và có luồng dữ liệu một chiều. Đây là một thành phần bộ đếm nhanh trong Solid, ví dụ:

1function Counter ( props ) {

2  const [ count , setCount ] = createSignal ( props . count ) ;

3  trở lại (

4    < button onClick = { ( ) => setCount ( count + 1 ) } >

5      Số lượng là { count ( ) }

6    < / nút >

7  ) ;

số 8}

Xem - không quá khác biệt! Tuy nhiên, những điểm tương đồng chỉ dừng lại ở bề mặt. Solid.js không có triển khai Virtual DOM, như React và sử dụng proxy thuộc tính để kích hoạt các thay đổi đối với DOM. Và điểm hấp dẫn nhất của họ - Quy tắc móc không áp dụng cho phiên bản của họ.

Một điều khiến tôi quan tâm khi lần đầu tiên thử nghiệm Solid out, đó là bạn không nên nghĩ các thành phần của mình là các hàm kết xuất (như trong React), mà là các hàm tạo giúp xây dựng biểu đồ của các thành phần và giá trị phản ứng, kích hoạt thay đổi bất cứ khi nào sự phụ thuộc của chúng thay đổi. Khá gọn gàng!

Như tôi đã đề cập trước đó, Solid có thể là một đứa trẻ mới trong khối, nhưng nó đã thu được lực kéo đáng kể gần đây. Chắc chắn đáng để kiểm tra!

Tôi đã bắt đầu lộ trình học tập của mình trên trang web của họ , và tôi khuyên bạn nên làm như vậy. Chúng được viết tốt và dễ dàng xem qua bất cứ khi nào bạn cần làm tài liệu tham khảo.

Lit

Lit không mới như Solid, nhưng đã nhận được các bản cập nhật ổn định và một bản cập nhật chính mới vào mùa thu năm ngoái. Nó dựa trên các Thành phần Web tiêu chuẩn của web và được Google vô địch một phần. Bây giờ, điều này sẽ tốt!

Lit có kích thước nhỏ (khoảng 5kb sau khi thu nhỏ và gzipping), và về cơ bản chỉ là một lớp nhỏ trên đầu thông số Thành phần Web. Nó hoạt động trên tất cả các trình duyệt hiện đại và hỗ trợ đầy đủ cho TypeScript.

Đây là một thành phần bộ đếm trong Lit:

1nhập { LitElement , html } từ "lit" ;

2nhập { customElement , property } từ "lit / decorators.js" ;

3

4@ customElement ( 'my-counter' )

5lớp MyCounter mở rộng LitElement {

6  @ property ( )

7  count : number = 0 ;

số 8

9  incrementCount ( ) {

10    cái này . count = cái này . đếm + 1 ;

11  }

12

13  kết xuất ( ) {

14    trả về html `

15      <button @ click = $ { cái này . incrementCount } > $ { cái này . count } </button>

16    ` ;

17  }

18}

Bây giờ, điều thú vị với Lit (và các thành phần web nói chung) là điều này tạo ra một phần tử HTML trong thế giới thực mà bạn có thể sử dụng trong một tệp HTML thông thường. Để hiển thị những gì chúng tôi vừa viết, bạn có thể thực hiện một số việc cơ bản như:

1< html >

2  < body >

3    < quầy của tôi />

4  </ body >

5</ html >

Đối với tôi, có một sự sang trọng nhất định đối với điều này! Nó rất gần với nền tảng, bạn không thực sự cần bất kỳ thứ gì khác ở trên cùng.

Điều đó đang được nói, có một chút cú pháp và API để tìm hiểu, và các thành phần web đã nhận được khá nhiều chỉ trích trong suốt nhiều năm, vì vậy hãy cân nhắc điều đó trước khi đi vào tất cả.

Elm

Elm là một ngôn ngữ chức năng biên dịch sang JavaScript. Nó cũng là một khung công tác giao diện người dùng hoàn chỉnh hoạt động theo cách tương tự như React và Redux. Trên thực tế, Redux đã lấy rất nhiều cảm hứng từ Elm!

Elm thường được quảng cáo là dễ học. Thực tế là, trong bộ phận tư vấn mà tôi làm việc, chúng tôi dạy rất nhiều nhà phát triển mới Elm hàng năm, và hầu hết họ đều bắt đầu học trong vài ngày.

Như tôi đã đề cập trong phần giới thiệu, Elm là một ngôn ngữ đầy đủ chức năng. Điều đó có nghĩa là, không có giá trị có thể thay đổi, rất nhiều đối số truyền đến các hàm thuần túy và một loại cú pháp khó hiểu (ít nhất là khi bạn không quen với nó). Đây là một ví dụ về bộ đếm trong Elm:

import Browser

2import Html exposing (Html, button, div, h1, p, text)

3import Html.Attributes exposing (..)

4import Html.Events exposing (onClick)

5

6type alias Model : Int

7

8init : Model

9init =

10    0

11

12type Message = Increment

13

14update : Message -> Model -> Model

15update msg model =

16    case msg of

17        Increment ->

18            model + 1

19

20view : Model -> (Html Msg)

21view model =

22    div []

23        \[ button [ onClick Increment \] [ text String.fromInt model ]

24        ]

Chắc chắn đó là rất nhiều mã cho một phần chức năng nhỏ, nhưng chắc chắn rất dễ làm theo. Bạn chỉ định mô hình của mình, đó là giá trị ban đầu, những hành động nào bạn có thể kích hoạt và phương thức đó sẽ thay đổi như thế nào dựa trên chúng và cuối cùng bạn chỉ định những gì bạn muốn hiển thị.

Elm có một trình biên dịch thực sự gọn gàng, cố gắng hết sức để giúp bạn tìm ra vị trí của bạn. Nhưng quan trọng hơn, Elm có một trong những cộng đồng rất đẹp xung quanh. Có một Slack nơi bạn nhận được trợ giúp bất cứ lúc nào và có rất nhiều tài nguyên tuyệt vời để tìm hiểu

Stencil

Stencil là một khung công tác dựa trên thành phần web khác, nhưng thực hiện một số điều hơi khác so với Lit. Nó dựa trên cú pháp JSX quen thuộc hơn và nó có API mượt mà hơn một chút.

Stencil đến từ Ionic, framework ứng dụng gốc đa nền tảng, nhưng đã được trích xuất vào thư viện riêng của nó sau một thời gian.

Mục đích chính của nó là tạo các thư viện thành phần có thể tái sử dụng hoạt động trong bất kỳ khung giao diện người dùng nào mà bạn có thể nghĩ đến, nhưng bạn cũng có thể xây dựng các ứng dụng hoàn chỉnh với nó. Stencil đi kèm với một công cụ CLI thực sự hữu ích giúp bạn thiết lập các dự án mới nhanh chóng.

Đây là ví dụ về bộ đếm tương tự như những ví dụ khác trong Stencil:

import { Component, State, Listen, h } from '@stencil/core';

2

3@Component({

4  tag: 'my-counter'

5})

6

7export class MyCounter {

8  @State() count: number;

9

10  @Listen('click', { capture: true })

11  handleClick() {

12    this.count = this.count + 1;

13  }

14

15  render() {

16    return (

17      <button>

18        {this.count}

19      </button>

20    );

21  }

22}

Open Source Session Replay

Gỡ lỗi một ứng dụng web trong quá trình sản xuất có thể khó khăn và tốn thời gian. OpenReplay là một mã nguồn mở thay thế cho FullStory, LogRocket và Hotjar. Nó cho phép bạn theo dõi và phát lại mọi thứ mà người dùng của bạn làm và cho biết ứng dụng của bạn hoạt động như thế nào đối với mọi vấn đề. Nó giống như việc mở trình kiểm tra của trình duyệt trong khi nhìn qua vai người dùng của bạn. OpenReplay là giải pháp thay thế mã nguồn mở duy nhất hiện có.