adaydesign
จากบล็อกที่แล้ว ได้แนะนำเกี่ยวกับ SolidJS ซึ่งเป็นไลบรารี่ที่ได้แรงบันดาลใจจาก React แต่ประสิทธิภาพเกินตัว ไปแล้ว มาบล็อกนี้ก็ยังมีไลบรารี่มาแนะนำอีกเช่นเคย แต่คราวนี้พิเศษขึ้นอีกหน่อยเพราะว่าไลบรารี่ที่นำมาแนะนำนี้เป็นถึงเฟรมเวิร์คที่จะช่วยให้เราพัฒนาเว็บแอพด้วย React ได้โดยไม่ต้องง้อ Back-End เลย เรียกอีกอย่างก็คือ เราสามารถเขียนโปรแกรมของฝั่ง Back-End และ Front-End ไว้ในโปรเจคเดียวกันได้ (หลายคนอาจจะนึกถึง Next.js กันแล้วใช่มั้ยหละ+++)
เฟรมเวิร์คตัวนี้ชื่อว่า Blitz เป็นเฟรมเวิร์คที่ให้คำนิยามตัวเองว่า Full Stack React Framework ซึ่งได้พัฒนาต่อยอดมาจาก Next.js อีกที โดยใช้ประโยชน์ข้อดีของ Next.js ทั้งเรื่อง Routing, Styled-JSX, server-rendering (SSR), static generation (SSG), Fast Reload (dev mode) และการตั้งค่าของโปรเจค มาทั้งหมด เสริมเพิ่มเข้าไปด้วยการติดตั้งไลบรารี่ที่จำเป็นต้องใช้งาน ได้แก่
- คำสั่งและขั้นตอนที่ช่วยติดตั้งโปรเจคทำออกมาเข้าใจง่าย
- รองรับทั้งภาษา JavaScript และ TypeScript
- รองรับการติดตั้งพร้อมกับ component library เช่น tailwind, chakra-ui และ material-ui (ในบล็อกนี้จะแนะนำการติดตั้งพร้อมกับ Chakra-UI)
- เพิ่มการติดต่อฐานข้อมูลด้วยไลบรารี่ Prisma ที่เป็น ORM สำหรับ nodeJS สามารถติดต่อกับฐานข้อมูลได้หลายยี่ห้อ เช่น MySQL, SQLite, PostgreSQL, MongoDB และ MS SQL Server เป็นต้น
- ในส่วนของ Data Layer นั้น Blitz ได้เตรียมไลบรารี่สำหรับเชื่อมต่อกับ API ไว้ทั้งแบบ Rest และ GraphQL
- หมดปัญหาเรื่องการเขียนโค้ดเอง เพราะ Blitz มีคำสั่งสร้างโค้ดโปรแกรมมาให้เลย (การเขียนโปรแกรม CRUD ไม่ใช่เรื่องยากอีกต่อไป)
- รวบรวมการตั้งค่าไลบรารี่ที่เกี่ยวข้องเอาไว้ให้หมดแล้ว เช่น eslint, prettier, husky git hook เป็นต้น ทำให้เราไม่ต้องเสียเวลาไปตั้งค่าเอง
- ไม่จำกัดการรันหน้า Page ในไว้แค่ในโฟลเดอร์ /pages เหมือนกับของ Next.js ในโปรเจคของ Blitz เราจะวางโฟลเดอร์ pages ไว้หลายๆ ที่ก็ได้
- Blitz ได้เตรียมไลบรารี่ Routing ที่มีการ Route ไปยังหน้าต่างๆ สามารถใช้งานผ่าน ชื่อ Page ได้เลย หมดปัญหาการเขียนชื่อ url ใน href ไปเลย เช่น Component ที่เราต้องการจะกดลิ้งไปชื่อว่า ProductsPage ก็สามารถเขียนโค้ดเปิดลิ้งได้ตามนี้เลย
<Link href={Routes.ProductsPage({ productId: 123 })} />พูดถึงแต่ข้อดีไปเยอะแล้ว มาดูข้อไม่ดีกันบ้าง
- โปรเจคที่สร้างด้วย Blitz ใช้พื้นที่มากกว่า 600 MB
- ต้องศึกษารูปแบบการเขียนโปรแกรมของโค้ดอัตโนมัติที่เฟรมเวิร์คได้สร้างขึ้นมา เพื่อที่จะได้ทำการแก้ไขได้ตามที่ต้องการ
- เฟรมเวิร์คตัวนี้ได้ทำการพัฒนามาแล้ว 1 ปีกว่าๆ ตอนนี้อยู่ที่เวอร์ชัน v0.43.0 ยังอีกเกินครึ่งทางกว่าจะเป็นเวอร์ชันที่ stable
โดยรวมเฟรมเวิร์คนี้เป็นเฟรมเวิร์คที่น่าศึกษามากๆ เมื่อเฟรมเวิร์คนี้พัฒนาถึงเวอร์ชันที่เป็นทางการ ถึงตอนนั้นก็สามารถใช้งานได้คล่องพอดี 🙂
มาเข้าเนื้อหาสำหรับบล็อกนี้กันดีกว่า เราจะมาลองสร้างโปรเจคด้วย Blitz และ Chakra-ui กัน
1.การติดตั้ง Blitz
ติดตั้ง Blitz ที่เครื่องคอมพิวเตอร์ให้เป็นแบบ global เสียก่อน สามารถเลือกใช้ได้ทั้ง yarn และ npm (แนะนำให้ติดตั้งด้วย yarn)
yarn global add blitznpm install -g blitz --legacy-peer-deps2.การสร้างโปรเจคใหม่
สร้างโปรเจคใหม่ด้วยคำสั่ง
blitz new blitz-chakra-appหมายเหตุ blitz-chakra-app เป็นชื่อโปรเจค เราสามารถตั้งชื่ออื่นแทนได้
จากนั้นให้เลือกตัวเลือกตามที่โปรแกรมติดตั้งได้ขึ้นแนะนำ หรือตามที่เราต้องการ และรอจนติดตั้งโปรแกรมเสร็จ
จากนั้นพิมพ์คำสั่ง cd ตามด้วยชื่อโปรเจคที่พึ่งสร้างไป ตัวอย่างนี้จะใช้คำสั่ง
cd blitz-chakra-appเมื่อเข้าไปที่โฟลเดอร์ของโปรเจคแล้ว ในทำการติดตั้ง Chakra-UI ด้วยคำสั่ง (ต้องติดตั้งในโฟลเดอร์ของโปรเจค Blitz เท่านั้น หากไม่ใช้โปรเจค Blitz จะติดตั้งไม่สำเร็จ)
blitz install chakra-uiเมื่อกดคำสั่งติดตั้ง chakra-ui ไปแล้วโปรแกรมจะทำการตรวจสอบสักครู่และจะบอกให้เรากดปุ่ม Enter เพื่อดำเนินการติดตั้งและตั้งค่าโปรเจคต่อไป
เมื่อโปรแกรมทำการติดตั้ง dependency และแก้ไขโค้ดโปรแกรมเสร็จแล้ว โปรแกรมจะแสดงผลการติดตั้งและโค้ดที่แก้ไขให้เราเห็น และเราก็กดดำเนินการต่อทีละหน้า
โปรแกรมได้ทำการ import chakra-ui เข้ามาใช้งานและ เพิ่ม ChakraProvider ครอบเป็น Root ของ App อีกทึ
การกำหนด style ของ component หากใช้ chakra-ui แล้ว ก็ไม่จำเป็นจะต้องใช้ css หรือ styled-jsx อีกต่อไป จะเห็นได้ว่า โค้ดจะลดลงมาเยอะทีเดียว
เมื่อโปรแกรมติดตั้ง dependency ทั้งหมด และแก้ไขโปรแกรมเสร็จแล้ว จะมีข้อความแจ้งให้เราทราบ
3.ทดสอบโปรแกรม
เมื่อติดตั้งเครื่องมือเสร็จทั้งหมดแล้ว ต่อมาจะทดสอบโปรแกรมกัน ด้วยทำสั่ง
blitz devโดยปกติแล้ว หากรันคำสั่งเสร็จแล้วโปรแกรมจะถูกรันไว้ที่ url http://localhost:3000 จะได้โปรแกรมหน้าตาแบบนี้มา
ในโปรแกรมตัวอย่างนี้ เราสามารถทำการ สมัครสมาชิก และ ทำการ ล็อกอิน เข้าระบบได้
โดยเมื่อลองทดสอบ สมัครและล็อกอิน แล้ว ให้เราทดสอบทำการเพิ่ม model ข้อมูลใหม่ คือ project ตามคำสั่ง ที่หน้าโปรแกรมแนะนำให้ลองทำ (ต้องปิดโปรแกรมก่อน)
blitz generate all project name:stringจากคำสั่งข้างบนจะเป็นคำสั่งสร้างโค้ดโปรแกรมทั้งหมดที่เกี่ยวข้องกับการสร้าง ตาราง project ซึ่งจะมีฟิวด์ 1 ฟิวด์ คือ name เป็นชนิด string
หากเราต้องกำหนดค่าหลายๆ ฟิวด์ เราก็สามารถกำหนดได้ต่อจาก ฟิวด์ name ได้เลย หรือจะทำการแก้ไขโค้ดทีหลังและทำการ migrate ฐานข้อมูลก็ทำได้ อ่านต่อที่นี่
ในระหว่างการสร้างตารางใหม่ โปรแกรมจะถามว่าจะรันคำสั่ง prisma migrate dev หรือไม่ ให้ตอบว่า Y หรือ Enter และ ต่อจากนั้นโปรแกรมจะให้เราใส่ชื่อของไฟล์ migration โดยเราสามารถตั้งตามชื่อตารางและการกระทำที่เพิ่มเข้ามาใหม่ได้ เช่น add project
เมื่อโปรแกรมทำการสร้างตารางและโค้ดโปรแกรมเสร็จเรียบร้อยแล้ว
จากนั้นให้ restart server แล้วทำการรันโปรแกรมใหม่
ล็อกอินเข้าใช้งาน (หากยังไม่มีบัญชีก็สามารถทำการสมัครใหม่ได้ หรืออาจจะลองใช้ฟังก์ชันการรีเซ็ต หรือการลืมรหัสผ่านก็ได้) แล้วเข้าไปที่ลิ้ง /projects ตามที่หน้าโปรแกรมให้ทดลองทำตาม
ในหน้า /projects จะมีปุ่ม Create Project ให้เราไปทำการสร้าง project ก่อน แล้วกดกลับมาหน้ารายการโปรเจคอีกครั้ง และเพิ่มไปหลายๆ โปรเจค ก็จะได้ รายการโปรเจคตามภาพ
โค้ดโปรแกรมที่ Blitz สร้างให้ จะเห็นว่ามีครบทั้ง Create Read Update Delete จนเราไม่ต้องไปเขียนโค้ดเองเลย ที่เหลือก็แค่ปรับแต่รูปแบบการแสดงผลให้สวยงามแค่นั้น
สรุป
จากการได้ทดลองติดตั้งโปรเจค Blitz และติดตั้ง Chakra-UI แล้วจะพบว่าวิธีการติดตั้งนั้นง่ายมาก มีตัวเลือกของแต่ละขั้นตอนแสดงไว้ในโปรแกรมอย่างชัดเจน เราสามารถเลือกได้ตามถนัด และเรายังสามารถสร้างโค้ดและตารางใหม่ในฐานข้อมูล ด้วยคำสั่ง generate ได้อีกด้วย ที่เหลือก็จะเป็นเรื่องการเข้าใจในโครงสร้างของเฟรมเวิร์ค Blitz และการปรับแต่งความสวยงามของโปรแกรมเท่านั้น
การอธิบายโครงสร้างโปรเจคและการจัดวางไฟล์ในโปรเจคของ Blitz จะขอยกไปอธิบายต่อในบล็อกหน้านะครับ
เฟรมเวิร์คที่เป็น Full Stack React Framework ไม่ได้มีแค่ Blitz เพียงตัวเดียวเท่านั้น แต่ยังมี Next.js (ต้องลงไลบรารี่เพิ่มเติมและตั้งค่าเยอะหน่อย) และ RedwoodJS ก็สามารถไปลองศึกษาเพิ่มเติมกันได้
