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

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

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

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

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

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

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

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

โค้ชเอก

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

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

สำหรับคนที่เขียน 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

ไม่กี่วันก่อนทีม 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

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

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

.
โค้ชเอก

มีอะไรใหม่ใน Angular เวอร์ชัน 9

ถือเป็นการอัปเดตใหญ่ของ framework ตัวนี้เลยครับ โดยเฉพาะเรื่องของประสิทธิภาพ และเครื่องมือต่างๆ มาดูกันว่ามีอะไรใหม่บ้าง

.
1. มาพร้อมกับ Ivy compiler และ Ivy runtime ตัวใหม่และกำหนดเป็น default มาให้เลย แน่นอนทำให้ app ของเรา build ได้เร็วขึ้น มีขนาดเล็กลง และรันได้เร็วขึ้นกว่าเดิม

(สำหรับ app เล็กๆ ขนาดลดลงราว 30% ส่วน app ขนาดใหญ่ ขนาดลดลงราว 25-40% เลยทีเดียว)

.
2. สำหรับคนที่เขียน unit tests ด้วย TestBed ในเวอร์ชันนี้ปรับปรุงการเขียน test ให้เร็วขึ้นกว่าเดิมราว 40% โดยที่ TestBed จะไม่ recomplie components ใหม่ทั้งหมดเหมือนเวอร์ชันเดิมครับ

.
3. ต้องใช้ TypeScript เวอร์ชัน 3.6 ขึ้นไป (ถ้าอัปเดตจะได้ 3.7 มาอยู่แล้วครับ)

.
4. เอาคลาส Renderer ออกแล้วให้ใช้ Renderer2 แทน
คลาส RenderComponentType แก้เป็น RendererType2
ส่วน RootRenderer แก้เป็น RendererFactory2

.
5. เอาคำสั่ง <ngForm></ngForm> ออกแล้วนะครับ ให้ใช้ <ng-form></ng-form> แทนได้เลย

.
6. การอัปเดต แนะนำให้อัปเดตเป็นเวอร์ชัน 8 ก่อนนะครับ ค่อยมาเป็นเวอร์ชัน 9 ดูการอัปเดตได้ที่นี่ => https://update.angular.io/

.
ส่วนใหญ่ในเวอร์ชันนี้จะเน้นปรับปรุงที่ตัว compiler และ runtime ครับ แต่ก็มีอีกหลายอย่าง ตามไปอ่านได้ที่ blog ของ Angular ได้ที่นี่ครับ => http://bit.ly/372zyw3

.
โค้ชเอก

สรุปพื้นฐานภาษา Dart ก่อนเขียน Flutter

สำหรับคนที่อยากพัฒนา Mobile App หรือ Web App ด้วย Flutter สิ่งแรกที่ต้องทำคือ การศึกษาภาษา Dart ครับ

.
ภาษา Dart เป็นภาษาแบบ Object-Oriented รองรับทั้ง JIT (Just In Time) และ AOT (Ahead of Time) สำหรับคนที่เคยเขียนภาษาที่เป็น OOP มาก่อน จะทำให้การศึกษาภาษา Dart รวดเร็วยิ่งขึ้นครับ เช่น เคยเขียนภาษา JAVA หรือ C# เป็นต้น และแน่นอนภาษา Dart เป็นภาษาแบบ strongly typed (ต้องระบุชนิดข้อมูล แต่ก็รองรับ dynamic types ด้วยนะครับ ถ้าเราจะเลือกใช้)

สำหรับคนที่เคยเขียนภาษาที่เป็น dynamic types มาก่อน เช่น Ruby, Python หรือ JavaScript อาจจะต้องปรับตัวกันนิดนึงครับ 

.
วันนี้ผมจะลองสรุปพื้นฐานภาษา Dart แบบสั้นๆ ให้อ่านกันนะครับ เผื่อใครสนใจเขียน Flutter ทั้งแบบ Mobile และ Web App มาเริ่มกันเลย!

.
1. ตัวอย่างการประกาศตัวแปรรูปแบบต่างๆ

String name; // หากไม่กำหนดค่าเริ่มต้นให้กับตัวแปร จะมีค่า default เป็น null ครับ (null ใน dart จะเป็น objects)

int age;

double num2 = 10.50;

List<String> names; // List คือ arrays ในภาษาอื่นๆ

Map<String, int> products;

int three = null;

const String fullname= 'Akenarin';

var message = 'Hello'; // ประกาศตัวแปรโดยไม่ต้องระบุ type

dynamic myVar = "Hello"; // ตัวแปร myVar เป็นแบบ
dynamic types สามารถกำหนดค่าได้ทุกชนิดข้อมูล

final name = 'Bob';

.
2. ตัวอย่างการเขียนฟังก์ชัน การเขียนฟังก์ชันในภาษา Dart ต้องใส่ return type ด้วยนะครับ (รวมถึง argument) เช่น

int addNums(int x, int y) {
return x + y;
}

หรือ
String makeGreeting(String name) {
return 'Hello, $name';
}

.
3. การ comments โค้ด รองรับ 3 แบบ ดังนี้

// In-line comments

/*
Blocks of comments.
*/

/// Documentation
///
/// สำหรับเขียนเอกสารคู่มือ

.
4. การใช้งาน Operators คล้ายกันกับภาษาอื่นๆ เช่น การบวก ลบ คูณ หาร ( + , – , * , /) จะมีแตกต่างบ้าง เช่น

เครื่องหมาย ~/ คือ เมื่อหารกันแล้วจะปัดเศษผลลัพธ์เป็นจำนวนเต็มที่ใกล้เคียงที่สุด เช่น 5 ~/ 2 จะเท่ากับ 2

as เอาไว้สำหรับทำ typecasts

is และ is! สำหรับตรวจสอบว่า 2 objects มี type เดียวกันหรือไม่ (จะใช้ == หรือ != ก็ได้)

.
5. คำสั่งต่างๆ เกี่ยวกับการจัดการค่า null จะทำให้เราเขียนโค้ดสั้นลง คือไม่ต้องเขียนแบบนี้แล้ว
if (user != null) {
this.userAge = user.age;
}

.
5.1 เครื่องหมาย ?? สำหรับตรวจสอบว่าเป็นค่า null หรือไม่ ถ้าเป็น null ให้ใช้ค่า default แทน (คือ ตัวเลข 20)

this.userAge = user.age ?? 20;

.
5.2 เครื่องหมาย ?. สำหรับตรวจสอบว่าเป็นค่า null หรือไม่ ถ้ามีข้อมูลให้แสดงค่าของฟิลด์นั้นออกมา (ฟิลด์ age) แต่ถ้าเป็น null ก็จะไม่มี error อะไร

this.userAge = user?.age;

.
5.3 เครื่องหมาย ??= สำหรับตรวจสอบว่าเป็น null หรือไม่ ถ้าเป็น null ให้กำหนดค่าเป็นเลข 3 แทน ถ้าไม่เป็น null ก็ทำงานตามปกติ เช่น

int x;
x ??= 3;
print(x); //ผลลัพธ์ คือ 3 เพราะ x เป็น null

.
6. การเขียน if และ else เขียนแบบปกติได้เลยครับ เช่น

if (inBangkok && isSummer) {
print('The weather is amazing! 55');
} else if(inBangkok && isAnyOtherSeason) {
print('Torrential downpour.');
} else {
print ('Check the weather!');
}

.
7. การเขียน if แบบย่อ (ternary operator) ก็มีนะครับ คล้ายกันกับภาษาอื่นๆ

String loginStatus = user.isLogin == true ? 'success' : 'error';

.
8. การเขียน Loops ก็จะคล้ายกับภาษาอื่นๆ เช่นมี for, while, do while เป็นต้น ขอยกตัวอย่าง for-in ดังนี้

// for-in
var pets = ['OO', 'Duck', 'Yelly'];
for (var pet in pets) {
print(pet);
}

.
9. การนำ strings มาต่อหรือเชื่อมกัน (concatenate strings) ทำได้ดังนี้

String a = 'Bob';
String b = 'b';

var c1 = a + b; // ใช้เครื่อง +

var c2 = 'Hello $a and $b'; // ใช้ string interpolation (เครื่องหมาย $)

var c3 = 'a' 'b' 'c'; // ใช้การเว้นวรรคระหว่าง strings จะทำการต่อหรือเชื่อมอัตโนมัติ

var c4 = '${user.name}'; // ถ้าเป็น instance ให้ใส่ {} ครอบด้วย

.
10. การสร้าง string แบบหลายบรรทัด ให้ใช้ triple quote (พิมพ์ quote 3 ตัวติดกัน) หรือ double quotation marks (ฟันหนู 3 ตัวติดกัน) มาครอบ string ไว้ เช่น

var s1 = '''
บรรทัดที่ 1
บรรทัดที่ 2
บรรทัดที่ 3
''';

.
สำหรับคนที่อยากเขียน Flutter ก็ลองศึกษาภาษา Dart เพิ่มเติมได้นะครับ ที่เว็บ => https://dart.dev/

.
หรือถ้าใครอยากทดลองเขียนโดยไม่ต้องติดตั้ง ก็ไปที่เว็บ => https://dartpad.dev/

.
ลองศึกษาดูนะครับ
โค้ชเอก

มีอะไรใหม่ใน Flutter 1.9.1

1. มาพร้อมกับ Dart เวอร์ชัน 2.5 ล่าสุด ซึ่งมี features ใหม่ๆ เช่น การใช้ machine learning สำหรับ code completions และ มี Foreign Function Interface (FFI) ทำให้เราสามารถเรียกใช้งานภาษา C โดยตรงจาก Dart ได้เลย

.
2. รองรับ macOS Catalina, Xcode 11 และ iOS 13 ที่กำลังจะออกตัวจริงเร็วๆนี้

.
3. Flutter สำหรับเว็บถูกรวมและเป็นส่วนหนึ่งของ repo หลักแล้ว ทำให้เราสามารถเขียน flutter ได้ทั้ง mobile, desktop และ web โดยใช้โค้ดเพียงชุดเดียว

.
4. มี Material widgets ตัวใหม่ ได้แก่ ToggleButtons และ ColorFiltered

.
5. รองรับภาษาใหม่เพิ่มเข้ามาอีก 24 ภาษา

.
6. ในเวอร์ชันนี้เวลาสร้างโปรเจคใหม่ default สำหรับ iOS จะใช้ Swift แทน Objective-C และใช้ Kotlin แทน Java สำหรับโปรเจค Android เรียบร้อยแล้ว (แต่ยังสามารถสลับกลับมาเป็นแบบเดิมได้อยู่)

.
7. ปรับปรุง error messages ให้อ่าน และเข้าใจง่ายขึ้น

.
ใครที่ใช้อยู่ก็สามารถดูฟีเจอร์ใหม่ๆ ทั้งหมดได้ที่ => http://bit.ly/2mjAIll

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

.
ลองดูนะครับ
โค้ชเอก

มีอะไรใหม่ใน Laravel เวอร์ชัน 6.0

1. ต้องใช้ PHP เวอร์ชัน 7.2.0 ขึ้นไป

.
2. มีการแยกงาน frontend scaffolding ออกจาก framework หลักแล้วนะครับ ถ้าใครต้องการ ui สำเร็จรูป และระบบล็อกอินสำเร็จรูปต้องติดตั้ง package ชื่อว่า laravel/ui แทน

ด้วยคำสั่ง composer require laravel/ui

ยกตัวอย่างเช่น ถ้าผมต้องการใช้ vue.js และระบบล็อกอินสำเร็จรูป (เป็น Bootstrap 4)

ก็ใช้คำสั่ง php artisan ui vue –auth เป็นต้น

ณ ตอนนี้ หากเราติดตั้ง Laravel 6 ใหม่จะไม่มีส่วนนี้ติดมาให้แล้วนะครับ

.
3. ปรับปรุง Eloquent Subquery ให้เขียนง่ายขึ้นภายในคำสั่งเดียว

.
4. ปรับปรุง Authorization Responses เพื่อให้สามารถแจ้งข้อความแก่ผู้ใช้ได้ง่ายขึ้น (ใช้เมธอด Gate::inspect)

.
5. เพิ่มคลาส LazyCollection สำหรับทำงานกับ datasets ที่มีขนาดใหญ่ ทำให้ใช้ memory น้อยลง (โหลดทีละ query ด้วย method ที่ชื่อว่า cursor())

.
6. มีการนำเอา String และ Array Helpers ออกจาก framework หลักแล้วนะครับ ใครที่ใช้ helpers สองตัวนี้อยู่ก็ให้ลงเพิ่ม ด้วยคำสั่ง composer require laravel/helpers

.
7. นำเอาคำสั่ง Input::get ออกแล้ว ก็ให้ใช้ Request::input แทน

.
8. รองรับ Laravel Vapor ซึ่งเป็น serverless deployment platform ใหม่ที่ผู้สร้าง Laravel ทำขึ้นมา สะดวกมากหากใครไม่อยากทำ Server เอง

.
9. เวอร์ชันนี้จะเป็นเวอร์ชัน LTS ครับ support ยาวจนถึงปี 2022

.
10. มาพร้อมกับโลโก้ และเว็บไซต์ ใหม่ 🙂

.
ขอสรุปสั้นๆ แค่นี้ก่อนแล้วกันนะครับ ใครสนใจก็ไปอ่านเพิ่มเติมได้ที่ => http://bit.ly/2KUmVeG

.
ลองดูครับ 🙂
โค้ชเอก