Bạn đã thử "thiết kế kiến" chưa ? ANT Design có thật sự tuyệt vời ? [ Review Ant Design]

-

Kết quả hình ảnh cho ant"

 Hello anh em lại là culi đây, trong thời gian qua khá bận rộn nên chả rãnh viết blog chia sẻ cùng anh em, nay mới tậu được một con domain ưng ý sẵn chém một bài . 
Như các bác đã biết giới Front-end trong 2019 vừa qua là một năm khá sôi động với các sự kiện nổi trội :
  • Angular ra bản mới
  • React ngày càng ổn định 
  • Vue nghe đồn được (Preview 3) sẽ được sử dụng với Typescript
  • Vue tăng nhanh về thị phần 
  • ...
Kết quả hình ảnh cho front end 2019"

Lang mang vl vô chủ đề chính nào , thời gian qua mình dùng React khá nhiều và đa số các project không có thiết kế đặc biệt mình đều dùng ANT Design và trong phần còn lại của bài viết mình xin gọi tắt là ANT . 

ANT Design là gì ?
Kết quả hình ảnh cho ant design"

Ant là tập hợp các components của React được xây dựng theo chuẩn thiết kế của Ant UED Team. Tương tự như chuẩn Material Design, Ant cung cấp hầu hết các component thông dụng trong ứng dụng web hiện đại, như Layout, Button, Icon, DatePicket, v.v…Bên cạnh đó Ant cũng có những component riêng thú vị, như LocaleProvider cho phép bạn thay đổi ngôn ngữ trên toàn ứng dụng.
Vậy tại sao là ANT ? Đơn giản tại vì :
  • Nhanh
  • Gọn
  • Lẹ
  • Đẹp
  • Dễ customize 
  • Hỗ trợ Grid/Flex layout 
  • Hỗ trợ Typesript 
  • Có GuideLine rõ ràng 
  • Hỗ trợ đa số các trình duyệt
  • Hỗ trợ server-side rendering 
  • Hỗ trợ luôn người anh em ElectronJS
  • Build in react, react-router,...
  • Tính ổn định và cập nhật nhiều.
  • Complete plugin system
  • Fast dev startup
  • Hệ sinh thái đang ngày càng rộng lớn : lấn sang qua cả Vue, Angular,.. 
  • UI/UX chuẩn bài tuy nhiên tuỳ theo Guideline của công ty hay project mà bạn có thể tuỳ biến theo ý muốn, nếu "gút" bạn có thể tạo ra 1 framework mới "base on" Ant Design :D 
  • Đặc biệt mình rất thích là bộ component tích hợp trênc các tool design phổ biến như : Figma,.. (bằng chứng đây : https://blog.prototypr.io/introduction-to-ant-design-system-for-figma-7d894f9c0534) 

Kết quả hình ảnh cho dislike"

Chà, nói đi cũng phải nói lại, nảy giờ khen rồi, giờ chê thôi  . Ông ANT này thiết kế quá "chu đáo" về mặt UI/UX khiến cho mình cũng cảm thấy mọi thứ hơi rườm rà khó chịu, có những lúc làm 1 project nhỏ nhỏ và muốn "simple life" thì cũng phải ngồi customize lại từng cái nút thì thật là mệt quá đê .

Kết quả hình ảnh cho atomic css"


Bên cạnh đó khi mình muốn sử dụng các class như ông anh họ Bootstrap thì ANT lại quá rườm rà có khi lại thiếu hụt cho nên nếu bữa nào lười thì "ìm bọt" bootstrap cmn luôn hay đẹp tánh hơn xíu thì sử dụng Tailwind CSS (https://tailwindcss.com/) khá bảnh . À mà nói luôn cho anh em nào chưa biết thì Tailwind CSS là Tailwind is a utility-first CSS framework for rapidly building custom user interfaces. (hông dám dịch sợ dịch sai)  . Đại khái là theo cách bình dân mà nói thì đó là một CSS Framework cho phép chúng ta viết "style" theo kiểu "Atomic CSS" thì đây là một methodologies về CSS mà anh em nên biết, cụ thể nên xem bài viết của anh huytd (https://thefullsnack.com/posts/a-taste-of-atomic-css.html).

Cũng chính vì đặc thù là một framework hoàn hảo và khi muốn custome cách phổ biến mà anh em hay làm và tôi cũng thế :

.class-cua-ant-design{
thuoc-tinh: gia-tri !important
}

             Kết quả hình ảnh cho important css"

Một sự khủng khiếp khi chọn sai framework UI đó là một file CSS toàn phải override hay important vô tội vạ . Và anh em nào có cách cứu vãng hay hơn khi đã lỡ "sa lầy" như case trên thì mời comment chia sẻ với mọi người nhé .

Cuối cùng là cho những anh em chưa biết về ANT :
...
...
... chần chừ gì nữa vào ngay trang chủ để biết và đọc docs để test nào :  https://ant.design/

Bên cạnh đó cũng có một số "người anh em" hỗ trợ dân Front-end khá ngon nè :


Thế nên để start một project việc chọn Framework là một trong những yếu tố quyết định thời gian và thành công của chính project đó . Trong bài viết này mình chỉ giới thiệu sơ lược về ANT một xíu có thể trong bài viết sau mình sẽ chia sẻ sâu hơn về phần core của ANT .  Lỡ có gì sai xót anh em đừng chê cười hãy góp ý cho em nhé. Giờ thì đi ăn cơm thôi !!  Rất mong nhận được sự đóng góp nhiệt tình của anh em để mình cải thiện hơn về kỹ năng viết  : D

 À 5s quảng cáo : Blog mình sẽ chia sẻ kiến thức về Front-end, Back-end và kiến thức liên quan với Fullstack nha anh em , mình lên bài 1 tuần 1 bài : D Anh em nhớ nhấn đăng ký hoặc follow fanpage tại đây nhé  https://www.facebook.com/culicoder/

Happy coding !! 





Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Typescript hay "React" mới là một ngôn ngữ lập trình thật sự ? Ai đúng ai sai ?

-
Hình ảnh
Lâu lắm rồi mới có thời gian tâm sự anh em vài dòng, blog CSS lỗi tí anh em    đừng có "dận" nha :D À với bài viết có thể khiến anh em kích động với một số anh em nên mình warning trước , nếu anh em không thích có thể nhấn back nhé, cảm ơn  vì đã ghé blog mình :D Đầu tiên của đầu tiên, mình là fan ruột của Javascript !! Lúc trước gian hồ gặp cứ chê bai nào là JS performance không cao, viết OOP khó thấy mịa, ngôn ngữ script là làm ăn được gì ,.. Tự ti 5s . Tới hồi Typescript ra đời thì mình nghe thiên hạ khen chê đủ điều nhưng đa phần là khen, lúc đó fan Javascript như mình cũng được tiếng thơm lây từ Typescript . Mình tạm gọi tắt Typescript (TS) và Javascript (JS) từ đây nhé, gõ nhiều cũng mệt bộ =)). Chắc rằng, không riêng gì mình mà những anh em lần đầu tiếp xúc với TS cũng khá bỡ ngỡ và thốt lên "What the hell ? TS là cái quái gì , cớ sao JS lại sinh ra TS . Sinh ra làm gì mà dùng y chang JS có thêm cái gì lạ lạ mà giang hồ gọi là Type ". Hmm, sau một...
Đọc thêm

Những CSS Selectors hay ho có thể anh em chưa hề biết ?

-
Hình ảnh
Hello các bác , lại là culi đây !! Thông thường khi các bác giải quuyết các vấn đề liên quan tới "styling" thì mình khuyên các bạn nên sử dụng CSS thay vì Javascript . Trong hầu hết các trường hợp thì mình thấy  CSS selectors đều giải quyết được hầu hết các vấn đề liên quan tới styling, và đó cũng chính là nội dung của bài blog hôm nay . Mình xin giới thiệu đến các bạn một vài  CSS selectors hữu ích hy vọng sẽ giúp ích được anh em trong dịp đầu năm mới ! Selectors là cái gì ? Nghe tên đã hiểu, rõ ràng selectors sẽ giúp chúng ta chọn (tìm) ra một element từ đoạn code dài dòng của chúng ta .  Bạn hãy đọc dùm mình đoạn code bên dưới 10s rồi tính tiếp ^^  HTML : < ul class="list"> < li class="list-item">List item 1</ li > < li class="list-item">List item 2</ li > < li class="list-item">List item 3</ li > < li class="list-item">List item 4</ li > ...
Đọc thêm