คิดจะทำ UI คิดถึง Storybook

ในการทำโค้ดทางฝั่ง Front-end สมัยนี้ด้วย framework ต่างๆ นั้นนอกเหนือจากจะมีความซับซ้อนมากขึ้นแล้ว แต่ก็ยังมีหนึ่งสิ่งที่ไม่ว่า Front-end สมัยไหนก็มีเหมือนๆ กัน คือการทำหน้าตา UI ตกแต่ง styling ให้สวยจน user อยากใช้ (หรืออย่างน้อยคือให้ตรงกับ designer)

วันนี้จะมาแนะนำ tool ตัวนึงที่จะช่วยให้ทุกๆ คนเขียน UI ขึ้นมาเพื่อเทสได้ง่ายขึ้น และมี collection เก็บรวมไว้ให้หาใช้ง่ายๆ ขึ้น tool ตัวนั้นชื่อว่า Storybook นั่นเอง

Storybook คือหยัง?

Storybook เป็น tool ตัวนึงที่ช่วยให้เรา dev หรือ test UI component ที่เขียนด้วย framework สมัยใหม่ เช่น React, Vue, Angular ได้ง่ายขึ้นครับ

เพราะว่าเนื่องจากคอนเซปของ 3 framework นี้ base on ความเป็น component อยู่แล้ว คนทำ storybook จึงเล็งเห็นว่า เออ น่าจะทำ tool สักตัวให้เขาได้ลองเขียน UI ได้ง่าย เร็ว และเทสง่ายขึ้น แทนที่แบบเดิมอาจจะไปนั่งเขียนโค้ดในโปรเจค ซึ่ง codebase ก็มหาศาล build ก็ช้า

Demo storybook จาก https://github.com/storybooks/storybook

ให้นึกภาพว่า storybook เหมือน “สมุดภาพ” ตามชื่อก็ได้ ที่เราจะเขียนๆ เล่นๆ อะไรในสมุดภาพก็ได้ แล้วพอเรา dev component ในสมุดภาพเสร็จแล้ว ก็ค่อยนำ component นี้ไปใช้ใน project อื่นๆ ได้อีกด้วย

ใยต้องใช้ Storybook?

ก่อนผมจะพาไปดูวิธีการใช้ storybook ขอมา convince ทุกคนกันก่อนว่าทำไมถึงต้องใช้ storybook กัน

หากอยากทำ UI Library / Design System จงใช้ซะ

แน่นอนว่าหากเราอยากริเริ่มทำ UI Library เพื่อให้คนอื่นใช้ หรือจะใช้เองก็ตาม หรืออยากจะทำ Design System ก็ตาม การใช้ storybook ถือเป็นประโยชน์มาก เพราะมันเทสง่าย รวมถึง develop ง่ายสุดๆ และท้ายสุดก็จะเห็นภาพด้วยว่าเรามี set of component อะไรให้หยิบจับได้บ้าง แถมสิ่งนี้สามารถเป็น documentation ชั้นยอดให้ด้วย เพราะ storybook สามารถเขียน documentation ในตัวได้ด้วย

และมันยังไม่ได้มีประโยชน์แค่ในมุมของ developer กันเองเท่านั้น designer ก็จะเห็นภาพด้วยว่าพอมันขึ้นไปอยู่ในเว็บจริงๆ จะมีหน้าตาเป็นแบบไหน

และรวมถึงตอนแก้ด้วย การแก้ก็จะแก้ได้ง่ายขึ้นมากด้วย

Sync งานระหว่าง Dev กับ Designer ได้ง่ายขึ้นมาก

พอเรามี storybook แล้วสิ่งที่เกิดขึ้นคือตัวหน้าตา UI จะออกมาให้เห็นภาพเลยทันที ทำให้ Designer ก็สามารถมาเช็คงานได้ว่ามีอะไรต้องปรับแก้ไหม หรือ dev ทำตรงสเปคหรือป่าว

คนใช้เยอะ

มีคนใช้ storybook เยอะมากครับ เช่น Atlassian (เจ้าของ Trello), Airbnb, Coursera ถ้ากลัวว่ามันจะไม่ดีก็ลองดูโปรเจคของพวกเขาดูกันครับ ว่าเขาเอา storybook มาใช้ประโยชน์อย่างไร (ดูได้ที่ https://storybook.js.org/examples/)

เอาไปโชว์คนอื่นได้

เช่น Lonely Planet เพราะท้ายสุด storybook ก็สามารถถูก build ออกมาเป็นเว็บแอพตัวนึงได้เลย

Storybook

How to use Storybook

ผมบอกเลยว่าใช้ Storybook นี่ง่ายกว่าตอนเริ่มหัดเขียน React หรือหัด framework ตัวอื่นเยอะครับ โดยเริ่มง่ายๆ ที่การติดตั้ง storybook-cli ครับ

npm i -g @storybook/cli

หลังจากนั้นสร้างโฟลเดอร์เปล่าๆ มา ตั้งชื่ออะไรก็ได้ (เช่น ชื่อโปรเจคที่เราจะทำ) หลังจากนั้นให้เพิ่ม React เป็น dependenciesโดยใช้ npm

npm install --save react react-dom

เสร็จแล้วสั่งสร้าง storybook project โดยใช้คำสั่ง

getstorybook

เมื่อเสร็จแล้ว สามารถสั่ง run storybook ขึ้นมาได้เลย

npm run storybook

หลังจากนั้นลองเปิด localhost:6006 ดูครับ

ซึ่งตัว storybook ก็จะมีคำแนะนำ รวมถึง story ตัวอย่างให้ดูด้วย

โครงสร้างของ storybook

โครงสร้างของ storybook นั้นหลักๆ คือเราจะเขียนสิ่งที่เรียกว่า story ออกมาครับ ซึ่ง story อันนึงให้นึกภาพว่ามันคือหน้ากระดาษ 1 แผ่นที่เราจะขีดเขียนอะไรก็ได้ เรียกว่า story ครับ สิ่งที่ตัวโปรเจคเริ่มต้นให้มาคือ stories (หลายๆ story)

ซึ่งถ้าเรามาดูโค้ดตัวอย่างกัน

ฟังก์ชัน storiesOf เป็นฟังก์ชันที่จะให้นิยามว่า จะบอกว่ากำลังจะเขียน story ของอะไร เช่น story ของปุ่ม Button

หลังจากนั้นก็จะใช้ฟังก์ชัน .add() ในการเพิ่ม story ทีละอัน

อย่างในโค้ดตัวอย่างก็จะเพิ่ม story with text คือปุ่มที่มี text ธรรมดา กับ with some emoji คือมี emoji เพิ่มมา

ผลที่ได้จาก storybook ก็จะมีหน้าตาแบบนี้

ตัว storybook เองก็มี utility ที่เรียกว่า addons ช่วยมากมายเช่น action logger ไว้ log การคลิกแล้วจะไปขึ้นที่แถบด้านล่าง

และก็มี 3rd party addons เยอะมากให้ใช้ครับ เช่นถ้าอยาก develop UI ที่ต้องรองรับ responsive หลากหลายขนาดก็มี addons ตัวนึงชื่อ addon-viewport ที่ช่วยในเรื่องนี้ได้

Storybook ใช้กับ framework อื่นได้นะ

เช่น vue กับ Angular ก็​ support นาจา ไม่จำเป็นต้อง React เท่านั้น

ใครที่กำลังจะทำ UI Kit แนะนำจริงๆ

อย่างตอนนี้ TakeMeTour เองก็กำลังทำอยู่เหมือนกัน เป็น internal tools พอได้ใช้ storybook แล้วรู้สึกเลยว่าชีวิตดีขึ้นและง่ายขึ้นจริงๆ ด้วยเหตุผลที่ควรใช้ดังที่ได้บอกไปแล้ว

ช่วงโฆษณา

TakeMeTour สตาร์ทอัพการท่องเที่ยวสัญชาติไทยแท้ๆ กำลังเปิดรับสมัคร Developer เพิ่มเติมอยู่ ในตำแหน่งต่อไปนี้

• Senior JavaScript Engineer (Front-end/Back-end/Full-stack)
• Senior/Junior Data/ML Engineer

Stack ที่เราใช้คร่าวๆ เป็นดังนี้

• Front-End: React/Redux/Next.js/Expo
• Back-End: Node.js/Express (with micro-service architecture)/Mongoose/Elastic Search/Redis

สำหรับการทำงานและสวัสดิการของเรานั้นประกอบด้วย

• เวลาเข้าออก Flexible เข้าออกกี่โมงก็ได้ เราเน้นที่ผลงาน ไม่เน้นที่เวลาในการทำงาน
• การแต่งตัวสบายๆ ใส่ชุดอะไรมาทำงานก็ได้ ขอแค่ให้เหมาะสม
• ออฟฟิศเดินทางสะดวก ติด BTS และ Airport Rail Link สถานีพญาไท
• วันหยุด 30 วันต่อปี
• มี Google Home Mini เหงาหงอยรอคนมาคุยด้วย (ได้เหรอ)
• รวมถึงยังมีบอร์ดเกมฝุ่นเกาะรอคนมาเล่นด้วยอยู่

สำหรับผู้ที่สนใจ สามารถส่งอีเมล์แนบ Resume, Github เข้ามาได้ที่ WantToWork@takemetour.com ได้เลยครับ