學習筆記-UI Framework/Library 大觀園

vincentxu
Mar 26, 2023

--

一開始接觸UI 框架(Framework/Library)是因為參與的專案用的是MUI,後來才發現也蠻多人用Ant Design,近期才發現好像還有不少UI框架我不認識,決定來整理認識一下。

首先,先來看看使用UI Framework/Library的反面文章

You Don’t Need A UI Framework

長話短說,就是一開始使用起來可能很快,但有時候會因為一些元件沒這麼好用,反而花更多時間為了將元件調整成需要的樣式,結果自己手寫反而不需要花這麼多時間。

結論:不一定要從頭手寫一個元件,也不代表使用UI Framework/Library的時候,就要使用包含很多樣式的元件,有些UI Framework/Library可以在樣式上保有彈性,會是你更好的選擇。

作者推薦他常用的UI Framework/Library,在樣式上沒有變化,讓你保有彈性使用。

常見的UI Framework/Library

(排序按照英文排列,粗體為github上星星數最多的前三)

Ant Design

Blueprint UI

Chakra UI

Layui

Material UI

React Bootstrap

Semantic UI React

Storybook

Swagger

Tabler

Tailwind CSS

什麼是React UI 框架?

React UI 框架是一個工具庫,裡面有各式各樣的元件,方便你在React專案上使用。

使用UI框架的好處

  • 快速
    站在巨人的肩膀上可以看更遠,不用手寫所有元件。
  • 漂亮的UI(使用者介面)
    站在巨人的肩膀上可以看更遠,可以讓元件具備一定的美感。
  • 支援與可訪問性
    站在巨人的肩膀上可以看更遠,可以讓元件更符合多的使用者以及不同的裝置。
  • 跨瀏覽器相容性
    站在巨人的肩膀上可以看更遠,可以確保元件在不同瀏覽器操作順暢。

--

--

vincentxu

熱愛學習、戶外運動,關心教育,曾任公部門主計,教育工作者/軟體工程師_嘗試將科技與使用者經驗設計導入教育_共同創辦一個線上教育平台,推廣自主學習與民主教育https://www.daoedu.tw/