Author: โค้ชเอก

Coding Mentor

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

โค้ชเอก Leave a comment

  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

โค้ชเอก Leave a comment
  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

โค้ชเอก Leave a comment

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 และต้องการทำงานเป็นทีม แนะนำให้ศึกษาเลยครับ

มีอะไรใหม่ใน Express.js v5.0

โค้ชเอก Leave a comment

10 ปีที่รอคอย! Express.js V5.0 มาแล้ว!  เมื่อวันที่ 15 ตุลาคม 2024 ที่ผ่านมา Express.js ได้ทำการออกเวอร์ชัน 5.0 อย่างเป็นทางการ มาพร้อมกับการอัปเดต และการเพิ่มประสิทธิภาพต่างๆ ที่ดีขึ้น แม้ว่าตัว API จะไม่ได้แตกต่างจาก V4 มากนัก แต่ก็มีหลายอย่างที่เปลี่ยนอยู่เหมือนกัน ถ้าใครอยากใช้หรือ upgrade เรามาดูกันว่ามีอะไรน่าสนใจบ้างครับ

  1. ต้องใช้ Node.js เวอร์ชัน 18 ขึ้นไป
  2. ไม่รองรับคำสั่ง app.del() แล้ว ให้ใช้ app.delete() แทน
  3. คำสั่ง res.json(obj, status) ก็เช่นเดียวกัน เลิกใช้แล้ว ให้ทุกคนเขียนแบบ chain แทน เช่น res.status(200).json({hello: ‘express’}) (บางคนเขียนอยู่แล้วใน V4 สบายไป)
  4. ใน V5 ถ้าเราใช้ Promise ที่ route และ middleware ไม่ต้องต้องใส่ try catch เพื่อ next(err) แล้วก็ได้ เพราะจะทำอัตโนมัติให้ ดูตัวอย่างโค้ด

    เก่า V4 เขียนแบบนี้
    app.get(‘/route’, async (req, res, next) => {
    try {
    const user = await getUserById(req.params.id)
    res.send(user);
    } catch (err) {
    next(err); // ต้องเขียนบรรทัดนี้
    }
    });

    ใหม่ V5 เขียนแค่นี้พอ
    app.get(‘/user/:id’, async (req, res, next) => {
    const user = await getUserById(req.params.id) // ระบบจะตรวจจับข้อผิดพลาดให้เราอัตโนมัติ
    res.send(user)
    })
  5. คำสั่ง res.status(code) จะใส่ตัวเลขได้ตั้งแต่ 100 ถึง 999 ตาม Node.js API จริงๆ แล้ว คือจะแจ้ง error ถ้า status code ไม่ใช่ตัวเลข เมื่อก่อนตัว V4 อยากใส่อะไรก็ได้ไม่แจ้ง error ใดๆ ฮ่าๆ
  6. คำสั่ง req.body return เป็น undefined แล้ว เมื่อก่อนใน V4 จะ return {} (object เปล่า) เป็นค่า default ครับ
  7. ลบคำสั่ง bodyParser() ออกจาก V5 แล้ว (จริงๆ deprecated  ตั้งแต่ V4)
  8. หลายคำสั่งจะเปลี่ยนเป็น พหูพจน์ (plural) แล้ว เช่น
    • req.acceptsCharset เปลี่ยนเป็น req.acceptsCharsets
    • req.acceptsEncoding เปลี่ยนเป็น req.acceptsEncodings
    • req.acceptsLanguage เปลี่ยนเป็น req.acceptsLanguages
  9. และบางคำสั่งก็เปลี่ยนเป็นตัวพิมพ์ใหญ่ด้วย เช่น res.sendfile แก้เป็น res.sendFile เป็นต้น
  10. แน่นอนถ้าใครอยากคิดอัปเกรดเป็น V5 นอกจากการเปลี่ยนแปลงต่างๆ แล้ว ยังต้องดูไลบรารีที่เราใช้ในโปรเจคด้วยว่ารองรับ V5 หรือยัง แต่ถ้าใครอยากลองเล่น หรืออัปเกรดเลยก็ลองใช้คำสั่ง

    npm install "express@>=5.0.1" --save

จริงๆ ยังมีอีกเยอะถ้าใครสนใจอ่านต่อดูได้ที่นี่นะครับ https://expressjs.com/2024/10/15/v5-release.html


โค้ชเอก

-ไม่อนุญาตให้คัดลอกเนื้อหาไปลงยัง Platform อื่นๆ โดยไม่ได้รับอนุญาต

มีอะไรใหม่ใน Vue.js 3

โค้ชเอก Leave a comment

1. แม้ features จะเพิ่มขึ้น แต่ประสิทธิภาพดีกว่า เวอร์ชัน 2 และมีขนาดเล็กลง

.
2. Codebase เขียนด้วย TypeScript ทำให้รองรับ TypeScript ได้ดีขึ้น

.
3. เปลี่ยนวิธีการเขียนมาเป็นรูปแบบที่เรียกว่า Composition API แทน Options API แบบเดิม คือ ถ้าเป็นเวอร์ชันปัจจุบันเราจะเขียนโค้ดเข้าไปที่ option properties ต่างๆ เช่น data, methods, computed เป็นต้น แน่นอนปัญหาคือ เราจะต้องเรียนรู้ว่าตัวไหนใช้ทำอะไร (ไม่ใช่โค้ด js เพียวๆ ที่สามารถใช้งานได้เลย) และตัว compiler เองก็ต้องมีการ transform properties ต่างๆเหล่านี้ให้สามารถทำงานได้อีกทีหนึ่ง

ในเวอร์ชัน 3 จะเปลี่ยน properties ต่างๆ เหล่านี้ให้เขียนเป็นฟังก์ชัน JavaScript เลย หรือเรียกว่า Composition API (function-based APIs) ข้อดีคือ ทำให้เราสามารถอ่าน และเรียนรู้โค้ดได้ง่ายขึ้น ตรงไปตรงมา เพราะเป็นฟังก์ชัน JavaScript ปกติที่เขียนกันทุกวันนั่นเอง (ตามรูป)

ใครที่อยากศึกษา API นี้ ตามไปดูได้ที่ => https://bit.ly/3exgU4A

.
4. เพิ่ม Fragment เข้ามาเลย (ไม่ต้องลง library เพิ่มแล้ว) ใครเคยเขียน React น่าจะคุ้นๆ นะครับ ต่อไปเราไม่จำเป็นต้องเขียน root node มาครอบที่ template แล้วครับ
ใน Vue 3 จะมีการแทรก virtual element (Fragment) มาให้เลย

ต่อไปก็เขียนแบบนี้ได้เลย (ไม่ต้องครอบ root node ให้กับ h1 และ p แล้ว)

<template>
<h1>Hello</h1>
<p>CodingThailand.com</p>
</template>

ไม่ต้องเขียนแบบนี้ หรือลง library เพิ่ม
<template>
<div>
<h1>Hello</h1>
<p>CodingThailand.com</p>
</div>
</template>


5. Suspense (ไอเดียมาจาก React) ใน Vue 3 จะเพิ่ม Suspense component เข้ามาทำให้เราสามารถแสดง content (ชั่วคราวตามเงื่อนไข) บางอย่างก่อนที่จะแสดง content จริงๆ ใครนึกไม่ออก ง่ายๆ ก็คือ การทำ Loading นั่นเองครับ เช่น ถ้าเราดึงข้อมูล User จาก Backend ถ้าดึงข้อมูลยังไม่เสร็จให้แสดง Loading… ก่อน ถ้าเสร็จแล้วค่อยแสดง UserProfile ครับ

<Suspense>
<template #default>
<UserProfile />
</template>
<template #fallback>
<div>Loading…</div>
</template>
</Suspense>

.
6. Teleport (เมื่อก่อนเรียกว่า Portal) ไว้สำหรับ render DOM นอก component หรือที่ใดๆ ก็ได้ใน document ครับ เช่น เอาไว้ทำพวก modals หรือ popups ตอนเวอร์ชัน 2 ต้องใช้ไลบรารีชื่อว่า portal-vue ครับ แต่เวอร์ชัน 3 จะเอาเข้ามาเลย

.
7. เปลี่ยน lifecycle ของ custom directives API ใหม่ให้เข้าใจง่ายขึ้น ตามนี้

const MyDirective = {
beforeMount(el, binding, vnode, prevVnode) {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeUnmount() {}, // เพิ่มมาใหม่ ตัวอื่น เทียบกับเวอร์ชัน 2 ได้เลย
unmounted() {}
}

.
8. ในเวอร์ชัน 3 จะเอาการเขียน Filters แบบเดิมออกไปครับ เปลี่ยนมาเขียนแบบฟังก์ชันหรือ method แทน ดังนี้

เดิม

{{ price | thaibaht }}

ใหม่

{{ thaibaht(price) }}

.
9. สำหรับเวอร์ชัน 2.x จะออกเวอร์ชันสุดท้ายเป็น 2.7 (จะมีการ support ไปอีก 18 เดือน) และจะมีการแจ้งเตือน features ที่จะเอาออกในเวอร์ชัน 3 ด้วย

.
สุดท้าย คาดว่า Vue.js 3 ตัวจริง น่าจะมาราวๆไตรมาสที่ 2 ของปีนี้ครับ ใครอยากศึกษาก็อย่าลืมตามข่าวกันด้วยนะ

โค้ชเอก

ไลบรารีเกี่ยวกับการจัดการวันที่ของ JavaScript

โค้ชเอก Leave a comment

มาดูตารางเปรียบเทียบไลบรารีเกี่ยวกับการจัดการวันที่ของ JavaScript กันครับ…

.
ทุกวันนี้ Web App ที่เราสร้างต้องคำนึงถึงความเร็วกันอยู่แล้วครับ การเลือกใช้งานไลบรารีจึงเป็นสิ่งสำคัญมาก เพราะมีผลโดยตรงกับประสิทธิภาพโดยรวมของเว็บเรา

.
ปกติเวลาที่ผมแนะนำก็จะแนะนำเป็น date-fns ครับ และให้เลิกใช้ Moment.js เพราะมีขนาดใหญ่ และไม่มี tree-shaking ด้วย

.
วันนี้มาแนะนำอีกหนึ่งตัว คือ dayjs ครับ ตัวนี้มีขนาดเล็กมากๆ แค่ 2k เอง ถึงแม้ไม่มี tree-shaking ก็ถือว่าเล็กมากแล้วครับ กับการใช้งานทั่วไป

.
มีใครใช้ตัวไหนอยู่บ้างครับ ฝากแนะนำเพื่อนๆ หน่อยนะครับ

.
ไปดูการเปรียบเทียบเองได้ที่นี่นะครับ => http://bit.ly/2w8Xn8F

โค้ชเอก

แนะนำ 15 ไลบรารี ของ React ที่น่าใช้ในปี 2020

โค้ชเอก Leave a comment

1. สร้าง QRCode แบบง่าย ๆ ลองตัวนี้
▸ https://github.com/zpao/qrcode.react

.
2. สร้าง rich text editor ง่าย ๆ ด้วย React Quill
▸ https://zenoamaro.github.io/react-quill

.
3. ครอบตัดรูปภาพด้วย React Image Crop
▸ https://github.com/DominicTobias/react-image-crop

.
4. drag and drop รูปภาพ เพื่อเตรียมอัปโหลดด้วย react-dropzone
▸ https://react-dropzone.js.org/

.
5. สร้างปฏิทินกิจกรรม หรือ events calendar ด้วย react-big-calendar
▸ https://github.com/jquense/react-big-calendar

.
6. จัดการข้อมูลรูปแบบตารางสวยๆ ด้วย react-bootstrap-table2 (สำหรับคนใช้ Bootstrap)
▸ https://react-bootstrap-table.github.io/react-bootstrap-tab…

.
7. Datepicker ไว้สำหรับ input ข้อมูลแบบปฏิทิน
▸ https://github.com/Hacker0x01/react-datepicker

.
8. ทำ notification สวยๆ ปรับได้หลายแบบ ด้วย React-Toastify
▸ https://github.com/fkhadra/react-toastify

.
9. สร้าง Chart สวยๆ ด้วย Recharts
▸ https://github.com/recharts/recharts

.
10. พรีวิว pdf ด้วย React PDF viewer
▸ https://github.com/phuoc-ng/react-pdf-viewer

.
11. custom ส่วน head ของ html ง่ายๆ ด้วย React Helmet
▸ https://github.com/nfl/react-helmet

.
12. ตัวนี้สำหรับทำ drag and drop รายการต่างๆ
▸ https://github.com/atlassian/react-beautiful-dnd

.
13. ทำ input mask ด้วย React IMask Plugin
▸ https://github.com/…/imask…/tree/master/packages/react-imask

.
14. สำหรับคนที่ใช้ Redux สามารถจัดเก็บข้อมูลแบบ persist ได้ง่ายๆ เช่น localStorage เป็นต้น ด้วย Redux Persist (ไม่ต้องเขียน set, get เอง)
▸ https://github.com/rt2zz/redux-persist

.
15. สร้างตัวอย่างรอโหลดสวยๆ ด้วย react-loading-skeleton
▸ https://github.com/dvtng/react-loading-skeleton

.
ใครใช้ตัวไหนอยู่บ้าง แนะนำเพื่อนๆ ได้นะครับ

โค้ชเอก

แนะนำ React Hook Form

โค้ชเอก Leave a comment

สำหรับคนที่เขียน React หรือ React Native อยู่ ลองใช้ไลบรารีฟอร์มตัวนี้ได้ครับ “React Hook Form”

.
ปกติคนที่เขียน React หรือ React Native น่าจะเคยใช้ Formik และ Redux Form กันมาบ้าง

วันนี้มาแนะนำอีก 1 ทางเลือกครับ และน่าจะเป็นทางเลือกใหม่ที่ดีด้วย มาดูกันว่า react-hook-form มีข้อดีอะไรบ้าง

.
1. re-render ที่่น้อยลง (ทำให้ประสิทธิภาพดีขึ้น) กว่า Formik และ Redux Form

.
2. ใช้เวลาเรียนรู้ไม่มาก เขียนโค้ดสั้นลงกว่า Formik และ Redux Form

.
3. ใช้ React Hooks

.
4. ขนาดเล็กมากแค่ 6.2KB

.
5. การทำ Validation มีทั้งแบบ built-in และหรือจะใช้ Yup ก็ได้

.
6. มีตัว Form Builder คลิกสร้างโค้ดอัตโนมัติให้เลย

.
มีใครใช้อยู่บ้างมั้ย ใครยังไม่ได้ใช้ก็ลองดูได้นะ

.
รายละเอียด => https://react-hook-form.com/

.
โค้ชเอก

มีอะไรใหม่ใน Ionic Framework เวอร์ชัน 5

โค้ชเอก Leave a comment

ไม่กี่วันก่อนทีม Ionic ได้ออกเวอร์ชัน 5 เป็นที่เรียบร้อยแล้วครับ มาดูกันว่ามีอะไรใหม่บ้าง

.
1. มาพร้อมกับ Angular 9 (Ivy)!

.
2. แนะนำให้อัปเดตเป็นเวอร์ชัน 4.11.10 ก่อนอัปเดตเป็นเวอร์ชัน 5 ครับ จะได้ดูคำเตือนต่างๆ ว่ามีอะไรจะเลิกใช้แล้วบ้าง

.
3. สำหรับคนที่เขียน Angular ใช้คำสั่ง npm install @ionic/angular@latest เพื่ออัปเดตได้เลย

4. มาพร้อมกับไอคอนใหม่กว่า 1,200 ไอคอน!! (Ionicons 5) มีให้เลือกทั้งแบบ outline, fill และ sharp

.
5. อัปเดต UI components ต่างๆ ให้รองรับ iOS 13 เช่น Segment, Header, Large Title, Refresher เป็นต้น

.
6. เพิ่ม Ionic Animations เข้ามาใหม่ ทำให้การทำ Animation มีประสิทธิภาพดียิ่งขึ้น

.
7. มาพร้อมกับค่าเริ่มต้นสีใหม่สวยงาม แต่ถ้าอยากแก้ก็ได้เหมือนเดิมที่ไฟล์ theme/variables.scss

.
8. ออกแบบ Starter Templates ใหม่ทั้งหมด ไม่ว่าจะเป็น blank, menu, tabs, list ใครอยากเห็นลองสร้างโปรเจคใหม่ดูนะ

.
9. รองรับ React แบบ stable แล้ว แต่ Vue ยังเป็น beta อยู่

.
10. แน่นอนการอัปเดตมาเวอร์ชันนี้อาจมีการเปลี่ยนแปลงบ้าง ครับ ยกตัวอย่างเช่น

– เปลี่ยน CSS Utilities ทั้งหมดมาใช้ class แทน ยกตัวอย่างเช่น <ion-header text-center></ion-header>
แก้เป็น <ion-header class=”ion-text-center”></ion-header>

– เอา Events ออกจาก @ionic/angular แล้ว ให้ใช้ Observables หรือ Redux แทน

.
ไปดูการเปลี่ยนแปลงเต็มๆ ได้ที่นี่นะครับ => http://bit.ly/2P3A8nr

.
สรุปใครที่ใช้เวอร์ชัน 4 อยู่ก็แนะนำให้อัปเดตเป็นเวอร์ชัน 5 ได้เลยนะครับ 🙂

โค้ชเอก

4 ข้อควรรู้เกี่ยวกับ React Hooks

โค้ชเอก Leave a comment

Hooks เป็นฟีเจอร์ใหม่ที่มาพร้อมกับ React เวอร์ชัน 16.8 เพื่อให้เราสามารถใช้งาน state และเรียกใช้ features ต่างๆ ของ React ได้ โดยที่ไม่ต้องเขียนแบบ class component ยกตัวอย่าง เช่น เราสามารถใช้ useEffect แทน componentDidMount ได้ เป็นต้น

.
ส่วนคนที่เขียน React Native ก็เขียนได้เลยนะ แต่ต้องเป็นเวอร์ชัน 0.59 ขึ้นไปครับ

.
1. แนะนำให้เขียน React Hooks สำหรับโปรเจคใหม่เลย (ในหลักสูตรใหม่ที่ผมจะเปิดสอนจะพาเขียน Hooks เป็นหลักทั้งหมดครับ แต่จะพูดถึง class component ด้วยเช่นกัน) ถ้าโปรเจคเดิมใช้แบบ class component อยู่ก็ไม่ต้องตามแก้เป็น Hooks นะครับ ใช้ของเดิมได้เลย เพราะไม่มีแผนที่จะเอา class component ออกจาก React อยู่แล้ว

.
2. ทำไมเราต้องเปลี่ยนมาเขียน Hooks ด้วย เพราะช่วยป้องกันและแก้ไขปัญหาต่างๆ เช่น

– ถ้า component เรามีขนาดใหญ่ จะทำให้การ refactor และ test โค้ดต่างๆเป็นไปได้ยาก

– แก้ปัญหาเรื่อง Logic หรือ Lifecycle ซ้ำๆ กันระหว่างแต่ละ Component

– และหากเราใช้ Pattern เช่นพวก HOC หรือ render props ที่มีความซับซ้อน จะยากมากๆ ต่อการ debug ครับ และที่สำคัญอีกอย่างคือ การเขียน Hooks ทำให้ขนาดไฟล์เราเล็กลงด้วยนะ

.
3. กฏของการเขียน Hooks มี 2 ข้อ ได้แก่ ให้เขียนและใช้ Hooks ที่ top level เท่านั้น อย่าเขียนใน loops, conditions หรือ nested functions และ ต้องเขียนเป็น function component ของ React เท่านั้นนะ ห้ามเขียนในฟังก์ชันของ javascript ปกติ ยกเว้นจะเขียน custom Hooks ครับ

.
4. สำหรับคนที่ใช้ React Router และ React Redux อยู่ ตอนนี้ก็รองรับ Hooks แล้วนะครับ และคนที่ใช้ GraphQL และ Apollo ก็เขียนได้แล้ว ลองเปลี่ยนมาเขียนได้เลยนะ

.
ใครสนใจศึกษา React Hooks ก็ตามไปดูได้นะ => https://reactjs.org/docs/hooks-intro.html

ไว้มีโอกาสจะมาเขียนให้อ่านกันอีกครับ

.
โค้ชเอก