มีอะไรใหม่ใน React Native 0.76

  1. React Native 0.76 มาพร้อมกับ New Architecture ที่เขียนใหม่ทั้งหมด โดย default
    ซึ่งมาพร้อมกับฟีเจอร์ของ React แบบ full support (เมื่อก่อนไม่ครบ) ไม่ว่าจะเป็น Suspense, useLayoutEffect, Transitions เป็นต้น
  2. มาพร้อมกับ React Native DevTools ใหม่ ช่วยให้การ Debug App ของเราดีขึ้นมากๆ
  3. ปรับปรุง Metro (JavaScript bundler) ใหม่ช่วยให้ทำงานเร็วขึ้น 15 เท่า
  4. เพิ่ม style props ให้กับ boxShadow และ filter ที่ดีขึ้น ให้ทำงานเหมือนกับเขียน web แม้มีข้อจำกัดบ้าง แต่ถ้าใครเขียนเว็บอยู่แล้วใช้ได้อย่างสบาย
  5. ขนาดของ App ที่ build android ลดลงถึง 20% และเวลาเริ่มต้น App เฉลี่ยลดลงประมาณ 8% อีกด้วย
  6. ปรับขั้นต่ำ iOS เป็น 15.1 และ Android SDK เป็นเวอร์ชัน 24 (Android 7)
  7. มี Native Module และ Native Component แบบใหม่ ทุกคนสามารถเขียน Module หรือ Component ใช้เอง หรือใช้ไลบรารีภายนอกที่มีประสิทธิภาพมากขึ้น เราสามารถเขียนเรียก native interface (Synchronous access) โดยไม่ต้องมี bridge อีกต่อไป ตัวอย่างโค้ด

// Sync response from Native Module
const value = nativeModule.getValue();

// value can be a reference to a native object
nativeModule.doSomething(value);

  1. New Architecture ที่ถูกเขียนใหม่หมด แน่นอนการเอา bridge ออกไปจะทำให้แอปที่เขียนมี startup ที่เร็วขึ้น การสื่อสารระหว่าง JavaScript กับ native runtime ที่ดีขึ้น ส่งผลให้การรายงาน error ที่ชัดเจนขึ้น การ debug ก็ดีขึ้นด้วยครับ
  2. แน่นอน Meta ได้นำ New Architecture นี้ไปใช้งานจริงบน production ไม่ว่าจะเป็นแอป Facebook , Instagram และผลิตภัณฑ์อื่นๆ อีกด้วย
  3. ณ ตอนที่เขียนนี้มีไลบรารีเจ้าดังๆ รองรับ New Architecture แล้วกว่า 950 ไลบรารี ดูได้จากเว็บแหล่งรวมไลบรารีของ React Native ที่นี่ https://reactnative.directory/
  4. Expo SDK (framework) เวอร์ชัน 52 ล่าสุด รองรับ React Native เวอร์ชัน 0.76 และ New Architecture นี้เรียบร้อยแล้ว!

สุดท้าย ไม่เกี่ยวสักเท่าไหร่แต่มีข่าวว่าพนักงาน full-time ของ Flutter ถูกเลิกจ้าง แม้ Google จะยืนยันว่าไม่ทิ้ง Flutter แต่ก็มีนักพัฒนาแยกออกมาทำโครงการ Flock (fork of Flutter) มารวมตัวกันสร้างเป็น Flutter+ อนาคตของ Flutter จะเป็นอย่างไรก็ต้องรอดูกันต่อไปนะครับ

เรียน React Native กับโค้ชเอก ดูที่นี่ครับ https://codingthailand.com/react_native_2024_live/

โค้ชเอก

8 ข้อน่ารู้เกี่ยวกับ Drizzle ORM

  1. Drizzle ORM ถูกสร้างเมื่อ 3 ปีที่แล้ว แต่การเติบโตดีมากๆ ดูได้จากยอดดาวน์โหลดบน NPM 8IY[
    https://bestofjs.org/projects/drizzle-orm
  2. จากเว็บ stateofdb จากการสำรวจในปี 2023 พบว่า Drizzle ถูกยกเป็น tool (ORMs) เหนือ Prisma แล้ว (Drizzle อันดับ 2 และ Prisma อันดับ 3)
    https://stateofdb.com/tools/drizzle
  3. เป็น ORM เดียวที่มี query API ทั้งแบบ relational และ SQL-like (เขียนเหมือนภาษา SQL) ดูตัวอย่างโค้ดนี้

แบบ relational (Queries API)
const users = await db.query.users.findMany();

แบบ SQL-like
const result = await db.select().from(users);

  1. ถูกออกแบบมาให้มีขนาดเล็ก มี typesafe (TypeScript) และมีประสิทธิภาพสูง (0 dependencies!)
    ดูการเปรียบเทียบกับ Prisma ที่นี่ https://orm.drizzle.team/benchmarks
    บอกเลยว่าดูดีกว่า Prisma 🙂
  2. Drizzle มี concept ที่ว่า “ถ้าคุณรู้จัก SQL คุณก็จะรู้จัก Drizzle” อย่างที่บอกไปในข้อ 3 ว่าจุดเด่นอีกอย่างของ Drizzle คือมีคำสั่งที่คล้ายกับภาษา SQL ที่หลายคนคุ้นเคยเป็นอย่างมาก ทำให้ไม่ต้องเรียนรู้ใหม่มากนัก สามารถเขียนได้เลย
  3. Output ของ Queries API ของ Drizzle จะเป็น 1 SQL query เสมอ นั่นหมายความว่า เราสามารถใช้พวก serverless database ได้อย่างสบายใจ ไม่ต้องกังวลกับ performance หรือ ต้นทุนการ roundtrip แน่นอนไม่ต้องกังวลกับปัญหา n+1 อีกด้วย
  4. ณ ตอนที่เขียนนี้อาจจะรองรับ driver ของฐานข้อมูลเจ้าดังๆ ไม่มากนัก ตอนนี้มี Postgres, MySQL, SQLite, Supabase และอื่นๆ แต่ทีมก็กำลังจะเพิ่มเข้ามาในเร็วๆ นี้ และเห็นว่า v1 อาจจะมี MariaDB และ SQL Server ตามมา
  5. มี Drizzle Studio ช่วยให้เราสามารถจัดการฐานข้อมูลในโปรเจคได้อย่างสบาย ไม่ว่าจะดู เพิ่ม ลบ แก้ไขข้อมูลครับ

8 เหตุผล ทำไมควรเรียน NestJS

NestJS เป็นเฟรมเวิร์กสำหรับพัฒนา Web App ทางฝั่งเซิร์ฟเวอร์ (Node.js framework) นิยมพัฒนาเป็น RESTful API (Backend) และเขียนด้วย TypeScript ครับ

แล้วทำไมเราต้องเรียน NestJS ด้วย มีเหตุผลดังนี้ครับ

1. การออกแบบเชิงโมดูล (Modular Architecture)

NestJS ใช้การออกแบบเชิงโมดูล ทำให้โค้ดมีโครงสร้างที่ชัดเจน สามารถแบ่งเป็นโมดูลย่อย ๆ ง่ายต่อการพัฒนา แก้ไข หรือเพิ่มฟีเจอร์ใหม่ แน่นอนเหมาะมากสำหรับทำงานเป็นทีมครับ

2. รองรับ TypeScript เต็มรูปแบบ

NestJS นั้นเขียนด้วย TypeScript แน่นอนช่วยลดข้อผิดพลาดในการเขียนโค้ด และการตรวจจับข้อผิดพลาดต่างๆทำได้ง่ายขึ้น

3. เหมาะสำหรับการสร้าง Web App ขนาดใหญ่

NestJS ถูกออกแบบมาเพื่อรองรับ Web App ขนาดใหญ่ที่ต้องการโครงสร้างที่แข็งแกร่งและยืดหยุ่น จึงเหมาะสำหรับการพัฒนาแอปพลิเคชันสำหรับใช้ในองค์กร การทำ Microservices และอื่นๆ

4. สามารถทำงานร่วมกับ Express หรือ Fastify ก็ได้

NestJS ใช้ Express.js เป็นเอนจินในการทำงานฝั่งเซิร์ฟเวอร์โดย default แต่ก็สามารถเปลี่ยนไปใช้ Fastify ได้ หากต้องการประสิทธิภาพที่มากขึ้น

5. สนับสนุน Dependency Injection หรือ DI

การทำ Dependency Injection ทำให้การจัดการ dependency ต่างๆ ของคลาสในโปรเจ็กต์ทำได้ง่ายและมีความเป็นระเบียบมากขึ้น NestJS นั้นมี DI เป็นค่าเริ่มต้น ซึ่งช่วยให้เราเขียน test ได้ดีขึ้น และบำรุงรักษาโค้ดได้ง่ายขึ้น

6. เครื่องมือที่มาให้ค่อนข้างครบ

NestJS มี CLI ที่ช่วยสร้างโปรเจคใหม่ รันโปรเจค สร้าง Module, Controller และ Service ต่าง ๆ อัตโนมัติ ลดขั้นตอนการเขียนโค้ดด้วยตัวเอง นอกจากนี้ยังรองรับการสร้างเอกสาร API ด้วย Swagger ซึ่งได้ง่ายมากอีกด้วย

7. รองรับ Microservices และ GraphQL

NestJS ออกแบบมาให้รองรับ Microservices ได้ง่ายและมี built-in สำหรับการสร้างระบบที่ต้องการสเกลใหญ่ ๆ นอกจากนี้ยังสนับสนุน GraphQL ซึ่งช่วยให้การสร้าง API ที่ยืดหยุ่นและรวดเร็วมากขึ้น

8. ชุมชนและการสนับสนุนที่เพิ่มขึ้น

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

สรุป คือ NestJS เป็นเฟรมเวิร์กที่น่าเรียนรู้ หากเราต้องการพัฒนา Web App ที่มีโครงสร้างขนาดใหญ่ มีความซับซ้อน ต้องการใช้ TypeScript และต้องการทำงานเป็นทีม แนะนำให้ศึกษาเลยครับ