Cách xây dựng các thành phần JS với Storybook
Storybook là một công cụ open-souce để phát triển các thành phần UI (giao diện user ) một cách riêng biệt và nó tích hợp khá tốt với hầu hết các khuôn khổ giao diện user bao gồm React, Vue, Angular và các thành phần khác. Nó giúp xây dựng giao diện user có tổ chức và hiệu quả, nghĩa là các nhà phát triển không bị phân tâm với dữ liệu không ổn định, API chưa hoàn thành hoặc logic kinh doanh.
Storybook chạy bên ngoài ứng dụng chính để user có thể tạo các thành phần giao diện user trong một môi trường khác mà không cần lo lắng về các yêu cầu và phụ thuộc dành riêng cho ứng dụng và cho phép bạn theo dõi các trường hợp cạnh và kết quả là bạn tự tin vận chuyển các thành phần.
Các trường hợp sử dụng cho Storybook
Storybook là một thư viện thành phần giao diện user , cho phép bạn xây dựng các thành phần riêng biệt. Một số group dựa vào tập truyện để thực hiện công việc soạn thảo thư viện thành phần và cũng như một khối xây dựng cho hệ thống thiết kế của họ. Các công ty như Algolia , Salesforce , artsy , Gov.uk , và GitHub sử dụng Storybook để xây dựng và phân phối UI thành phần mà tác động hàng triệu người.
Đây là một số trường hợp sử dụng cho Storybook.
- Thư viện thành phần: Với cách hoạt động của Storybook, ta có thể duy trì một thư viện thành phần bằng cách sử dụng quy trình này để có tất cả các thành phần trong ứng dụng của ta ở một vị trí với khả năng kiểm tra từng trạng thái của thành phần.
Hệ thống thiết kế: Hệ thống thiết kế là một loạt các thành phần có thể được tái sử dụng theo nhiều cách kết hợp khác nhau. Hệ thống thiết kế cho phép bạn quản lý thiết kế trên quy mô lớn. Với truyện tranh, bạn sẽ có được một hệ thống thiết kế sẵn có.
Kiểm tra trực quan: Với các phần bổ trợ của Storybook, ta có thể tích hợp kiểm tra hồi quy trực quan để kiểm tra và giữ cho thư viện thành phần của bạn nhất quán cho dù nó lớn đến mức nào.
Chia sẻ giữa các group : Storybook có thể được chia sẻ giữa các group vì cách nó có thể được triển khai như một trang web tĩnh chỉ hoạt động theo cách riêng của nó. Nó có thể được chia sẻ giữa các nhà thiết kế, quản lý dự án trong group để đưa ra phản hồi hoặc comment về thiết kế hiện tại của các thành phần giúp cải thiện sự hợp tác trong group .
Viết truyện bằng Storybook
Ngay từ cái tên Storybook, điều bạn nghĩ đến khi nghe những câu chuyện là sự kết hợp của các câu chuyện tạo thành một Storybook phải không? Storybook là sự kết hợp của các câu chuyện khác nhau cho các thành phần khác nhau. Câu chuyện là các chức năng trả về một cái gì đó có thể được hiển thị trên màn hình. Một câu chuyện có thể chứa một trạng thái duy nhất của một thành phần hoặc có thể được xem như là hình ảnh đại diện cho một thành phần.
Xây dựng các thành phần giao diện user với Storybook nghĩa là bạn có tất cả các thành phần trong ứng dụng của bạn được tách biệt để chúng hoạt động dù kết nối giữa chúng và có thể được kiểm tra như các thành phần giao diện user riêng biệt.
Khi xây dựng với Storybook, có một số cách để cấu trúc và sắp xếp các câu chuyện trong ứng dụng của bạn.
- Câu chuyện bên trong một folder thành phần
. └── src/ └── components/ └── button └── button.js └── button.stories.js - Các câu chuyện bên ngoài folder src
. └── src └── components └── button.js └── stories └── button.stories.js - Thư mục con Câu chuyện trong một folder thành phần
. └── src/ └── components/ └── button └── button.js └── stories └── button.stories.js Làm theo bất kỳ phương pháp nào trong số này là một vấn đề của sự lựa chọn. Tùy bạn chọn những gì phù hợp nhất với bạn hoặc / và group của bạn.
Tích hợp Addons
Addon là các tính năng bổ sung có thể được thêm vào sách truyện để làm cho chúng tương tác và hữu ích hơn. Với các addon, ta có hai cách để triển khai chúng, Một cách là sử dụng Decorator và một cách khác là sử dụng Native Addons. Bạn có thể tìm thấy danh sách tất cả các phần bổ trợ do group Storybook tuyển chọn trên trang bổ trợ này .
Trình trang trí: Trình trang trí là các thành phần shell bọc gói một câu chuyện. Một ví dụ mà người trang trí có thể hữu ích là khi bạn cần căn giữa một câu chuyện trên màn hình hiển thị. Ta có thể tạo một thành phần shell bọc và sau đó sử dụng nó trong câu chuyện.
const styles = { textAlign: 'center', }; const Center = ({ children }) => <div style={styles}>{children}</div>; import { storiesOf } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import Center from './center'; import Button from './button'; storiesOf('Button', module).add('with text', () => ( <Center> <Button onClick={action('clicked')}>Hello Button</Button> </Center> )); Native Addons: Native Addons sử dụng Storybook làm nền tảng và tương tác với nó. Bổ trợ root có thể thêm các tính năng bổ sung ngoài những câu chuyện gói gọn. Một ví dụ là phần bổ storybook-action của storybook-action , điều này giúp ghi lại dữ liệu mà trình xử lý sự kiện nhận được trong Storybook.
Triển khai Storybook dưới dạng ứng dụng tĩnh
Storybook được dùng cùng với dự án mà ta đang phát triển vì nó mang lại trải nghiệm tuyệt vời cho nhà phát triển với các tính năng, như reload nóng qua Webpack HMR. Nhưng ta cũng có thể mở rộng điều này hơn nữa bằng cách triển khai Storybook dưới dạng một trang web tĩnh. Điều này sẽ cho phép ta giới thiệu các thành phần của bạn với mọi người và thậm chí có thể chuyển thành hướng dẫn kiểu cho ứng dụng của ta . Để làm điều này, tất cả những gì bạn cần làm là cấu hình sách truyện của bạn bằng cách sử dụng tập lệnh này.
{ "scripts": { "build-storybook": "build-storybook -c .storybook -o .out" } } Khi bạn chạy yarn build-storybook điều này sẽ xây dựng sách truyện được cấu hình trong folder Storybook thành một ứng dụng web tĩnh và đặt nó bên trong folder được gọi out và sau đó bạn có thể tiến hành triển khai folder đó bằng một trong các dịch vụ này GitHub Pages, Netlify hoặc Bây giờ, v.v.
Tích hợp với các khung công tác khác
Storybook hỗ trợ hầu hết tất cả các khung giao diện user có sẵn và để bạn tích hợp với một trong các khung này, group sách truyện đã viết một hướng dẫn mà bạn có thể làm theo để cài đặt storybook cho các khung riêng lẻ và chúng bao gồm:
Kết luận
Storybook hoạt động cho nhiều trường hợp sử dụng như ta đã thấy và việc tích hợp nó vào quy trình làm việc của ta sẽ cho phép ta xây dựng các thành phần giao diện user toàn diện cho các ứng dụng của bạn một cách riêng biệt. Trong bài viết này, tôi đã trình bày tất cả về Storybook là gì và khi nào nó hữu ích để tận dụng khi xây dựng các ứng dụng web. Phần tiếp theo của bài viết này sẽ trình bày ta có thể bắt đầu xây dựng các thành phần giao diện user tương tác bằng cách sử dụng React và Storybook.
Các tin liên quan
