ผู้เขียน: โค้ชเอก

Coding Mentor

มีอะไรใหม่ใน React 16.9.0

โค้ชเอก Leave a comment

มาดูกันว่า React เวอร์ชันนี้ มีอะไรน่าสนใจบ้าง 🙂

.
1. กำลังจะยกเลิกคำสั่ง javascript: ที่เราใส่ใน href ของ tag <a></a> ครับ เพราะอาจเสี่ยงต่อการถูกโจมตีและความปลอดภัย (cross-site scripting) หากใครอัปเดตเวอร์ชันนี้จะมี warning ออกมาครับ อนาคตจะเอาออกแล้ว แน่นอนจะมี error แสดงเลย หากใครต้องการใช้อยู่ก็แนะนำให้ใช้ dangerouslySetInnerHTML แทนนะ

ดูเพิ่มเติมได้ที่ => http://bit.ly/2N0pJsc

.
2. ในอนาคต (เวอร์ชัน 17) จะมีการนำ lifecycle methods ออกไปทั้งหมด 3 methods ได้แก่ componentWillMount, componentWillReceiveProps, componentWillUpdate แล้วนะครับ

ถ้าในเวอร์ชันนี้ (16.9.0) ก็ยังใช้ได้แต่จะมีการแจ้งเตือนออกมา (warning) เค้าแนะนำให้เราเติมคำว่า UNSAFE_ เข้าไปด้านหน้าชื่อ methods ครับหากใครยังใช้อยู่

แต่ถ้าโปรเจคใหญ่จะมานั่งแก้เองคงไม่ไหว ก็แนะนำให้ติดตั้ง “codemod” ได้เลยครับ ด้วยคำสั่ง

npx react-codemod rename-unsafe-lifecycles

เดี๋ยวมันจัดการ rename ให้เราเอง

.
3. สามารถใช้ Profiler API สำหรับวัดประสิทธิภาพของ Web App ด้วยการเขียนโค้ดได้แล้วนะครับ (ปกติจะใช้ React DevTools) โดยต้องระบุ id และเขียน callback ที่ onRender เพื่อรับข้อมูลด้านประสิทธิภาพต่างๆ ได้

ดูเพิ่มเติมได้ที่ => http://bit.ly/2H5hzuV

.
4. ทำให้ฟังก์ชัน ReactTestUtils.act() สามารถใช้งานแบบ Asynchronous ได้ สำหรับใครที่เขียน test อยู่ก็ลองดูได้ครับ

.
อื่นๆ ลองตามไปอ่านได้ที่ blog ได้เลย => http://bit.ly/31yHnHB

.
จริงๆ แล้วใน React เวอร์ชัน 16 นี้มี features เพิ่มเข้ามาหลายอย่างครับ ไม่ว่าจะเป็น Hooks, context API, การทำ lazy loading ด้วย Suspense เป็นต้น ใครยังไม่ได้ลอง แนะนำให้ลองเอามาใช้ดูครับ

.
สุดท้ายใครอยากอัปเดตก็ง่ายๆ ครับ ลุยได้เลย

npm install –save react@^16.9.0 react-dom@^16.9.0

หรือ

yarn add react@^16.9.0 react-dom@^16.9.0

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

Ionic Framework 4 รองรับ Angular 8 แล้ว

โค้ชเอก Leave a comment

ตอนนี้ Ionic Framework 4 รองรับ Angular 8 แล้วนะครับ!

ถ้าอยากรู้ว่า Angular 8 มีอะไรใหม่ๆ บ้างก็อ่านได้ที่นี่ => http://bit.ly/2GBHquc

โค้ดที่เปลี่ยนหลักๆ จะเป็นในส่วนของ lazy-loading ครับ ใครอัปเกรดก็อย่าลืมแก้กันด้วยนะ

.
ใครที่ใช้ Ionic 4 + Angular 7 อยู่ ก็ตามไปดูการอัปเกรดเป็น Angular 8 กันได้ที่ => http://bit.ly/2KcG36g

.
สำหรับคนที่รอคอร์สออนไลน์อยู่ ตอนนี้กำลังจัดทำอยู่นะครับ (อัปเดต Ionic 4 + Angular 8) น่าจะออกมาให้เรียนกันอย่างช้าไม่เกินสัปดาห์หน้านี้

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

ศึกษา React ลองดูชีทสรุปเรียงตามนี้

โค้ชเอก Leave a comment

สำหรับคนที่เพิ่งเริ่มต้นศึกษา React ลองดูชีทสรุปเรียงตามนี้นะครับ จะทำให้เห็นภาพรวมของ JavaScript ES6+, React และ Redux ได้เป็นอย่างดี จะได้ดูด้วยว่าเราศึกษามาถูกทางหรือเข้าใจอย่างดีแล้วหรือไม่ ลองดูครับ 

.
1. JavaScript ES6+ => https://devhints.io/es6

2. React => https://devhints.io/react

3. React และ React Redux => https://devhints.io/redux

.
อ้อ อีกอันนึงคือ patterns การเขียน React ครับ ลองเช็คดูซิว่าเราเคยเขียนหรือยังไม่เคย patterns ไหนบ้าง ดูได้ที่ => https://reactpatterns.com

.
โค้ชเอก

มีอะไรใหม่ใน React Native เวอร์ชัน 0.60

โค้ชเอก Leave a comment

1. รองรับ AndroidX ซึ่งถือเป็นการเปลี่ยนแปลงครั้งใหญ่ของ React Native เลยครับ จะทำให้ Library ภายนอกที่เราใช้อยู่และยังไม่ได้เขียนรองรับ AndroidX จะไม่สามารถงานได้ และทำให้เกิด error ตอน build เพราะฉะนั้นก่อนอัปเกรดควรเช็คก่อนว่า Library ภายนอกที่เราใช้อยู่ migrated และรองรับ AndroidX แล้วหรือยัง ถ้ายังก็คงต้องรอสักพักให้ Library ต่างๆ อัปเดตก่อน หรือใครอยากจะลองแก้เองก็ได้

.
2. ในเวอร์ชันนี้ ต่อไปทุกคนไม่ต้องสั่ง react native link แล้วนะครับ ตัว CLI จะทำการ auto link ให้เลย สำหรับคนที่จะอัปเกรดมาเวอร์ชันนี้ก็แนะนำให้ react native unlink ก่อน ค่อยอัปเกรด ไม่งั้นเดี๋ยวจะซ้ำ และเกิด error ได้

.
3. มีการนำเอา NetInfo, WebView และ Geolocation ออกจาก Core หลักแล้วนะครับ ใคร import แบบเดิมอยู่ ก็ให้เปลี่ยนไปติดตั้งแยก และใช้ Repo ของตัวนั้นได้เลย แล้วค่อย import เข้ามาใช้งานตามปกติ

.
4. เพิ่มตัวช่วยในการอัปเกรดเวอร์ชันของ React Native (Upgrade Helper) สะดวกมา ดูได้ที่นี่ครับ => http://bit.ly/2Ss6nx2

.
5. เปลี่ยนหน้า Intro screen (หน้าแรกตอนติดตั้งครั้งแรก) ใหม่ (ตามรูป)

.
6. ใช้ React เวอร์ชัน 16.8.6 ล่าสุด

.
7. ตั้งแต่เวอร์ชัน 0.60.2 ขึ้นไป จะรองรับ Hermes ซึ่งเป็น open-source JavaScript engine จะทำให้ การรัน React Native ตอนเริ่มต้นเร็วขึ้น (start-up time) ใช้หน่วยความจำได้ดีขึ้น และ App ของเรามีขนาดเล็กลง! ใครสนใจอยากลองเปิดใช้งานตัวนี้ ดูได้ที่นี่ครับ => http://bit.ly/2NX3N3k

.
*ข้อแนะนำ หากใครอยากลองอัปเกรดเวอร์ชันนี้ย้ำอีกรอบอย่าลืม backup โปรเจคเดิมก่อนนะครับ และตรวจสอบการรองรับ AndroidX ของ Library เดิมก่อน อีกข้อคืออย่าลืม unlink ด้วยนะ

.
อ่านเพิ่มเติมได้ที่ => http://bit.ly/2XKVMDf

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

เส้นทางการเรียนรู้ของ React, Vue.js และ Angular

โค้ชเอก Leave a comment

การมองเห็นภาพใหญ่ก่อนจะลงมือศึกษาเรื่องต่างๆ เป็นสิ่งสำคัญนะครับ วันนี้เลยเอาเส้นทางการเรียนรู้ของ React, Vue.js และ Angular มาฝาก จะได้รู้ว่าปัจจุบันนี้เค้าใช้เครื่องมือ หรือไลบรารีอะไรกันอยู่บ้าง

ให้สังเกตตัวที่เป็นสีเหลืองนะ ที่จะต้องรู้และทำให้ได้ ลองดูครับ

.
React => http://bit.ly/2X9uxgA

.
Vue.js => http://bit.ly/2XdKcQP

.
Angular => http://bit.ly/2Xh2OQ1

.
โค้ชเอก

config NGINX แบบสำเร็จรูป

โค้ชเอก Leave a comment

สำหรับคนที่เพิ่งเริ่มศึกษา และใช้งาน NGINX ทำเป็น Web Server อยู่ อาจจะยังไม่คล่องในการ conifg ค่าต่างๆ มากนัก

.
แนะนำเว็บนี้เลยนะครับ จะช่วยให้เรา config NGINX ได้ง่ายมากๆ โดยที่เค้าจะสร้างไฟล์ config สำเร็จรูปให้เราเลย เพียงแค่เรา คลิกเลือก เท่านั้น (แต่ต้องเข้าใจด้วยนะ ฮ่าๆ)

.
รายละเอียด: https://nginxconfig.io/

ลองดูๆ 🙂

โค้ชเอก

datetime picker ที่ยืดหยุ่น มีขนาดเล็ก และใช้ง่าย

โค้ชเอก Leave a comment

ใครที่กำลังมองหา datetime picker ที่ยืดหยุ่น มีขนาดเล็ก และใช้ง่าย ลองใช้ flatpickr ดูครับ

.
จุดเด่นคือ มีความสวยงาม ไม่ต้องการ dependencies ใดๆ สามารถใช้งานได้ทันที นอกจากนี้ ยังมี themes ให้เลือกถึง 8 แบบ ด้วยกัน

แน่นอน เราสามารถนำไปใช้กับ Angular, Vue หรือ React ได้ด้วยครับ

.
รายละเอียด: https://github.com/flatpickr/flatpickr

.
ลองดูครับ

โค้ชเอก

React Native อยากทำรายงานแบบ Charts

โค้ชเอก Leave a comment

สำหรับคนที่เขียน React Native อยากทำรายงานแบบ Charts แนะนำลองใช้ตัวนี้ได้นะครับ ค่อนข้างยืดหยุ่น และสามารถ custom สไตล์ต่างๆ ได้ดี

.
รายละเอียด: http://bit.ly/2IsBRQ5

.
จริงๆ ตัวนี้ก็มีเวอร์ชันสำหรับเว็บด้วยนะ สำหรับคนที่เขียน React ก็ลองดูได้เลยครับ

.
โค้ชเอก

มีอะไรใหม่ใน Angular 8

โค้ชเอก Leave a comment

1. ใช้ TypeScript เวอร์ชัน 3.4 ล่าสุด

.
2. เปลี่ยนวิธีเขียน lazy-loading แบบใหม่ (Routing) เพื่อรองรับการใช้งาน Ivy จะแก้โค้ดเองก็ได้ครับ แต่แนะนำให้ใช้คำสั่งอัปเดตจะดีกว่า (ดูข้อ 10) เพราะว่าตัว Angular CLI จะอัปเดตโค้ดส่วนนี้ให้อัตโนมัติเลย

เดิม

{ path: ‘admin’, loadChildren: ‘./admin/admin.module#AdminModule’ }

แบบใหม่ แก้เป็น

{ path, ‘admin , loadChildren: () => import(‘./admin/admin.module’).then(m => m.AdminModule) }

.
3. Angular CLI 8 เปลี่ยนมาใช้ dart-sass แทน node-sass ทำให้การ build ไฟล์ Sass เร็วขึ้นอีกมาก ๆ

.
4. Angular CLI 8 จะ default build target เป็น es2015 แทน es5 เดิมแล้วนะครับ (ดูได้ที่ไฟล์ tsconfig.json)
ทำให้ต่อไปเวลาสั่ง ng build จะมีไฟล์ build เพิ่มมาอีก 2 เวอร์ชัน ครับ คือ es2015 และ es5 ถ้าโปรเจคเราเปิดด้วย Browsers สมัยใหม่ ก็จะเรียกไฟล์ build ที่่เป็น es2015 ครับ (ตอน runtime) แต่ถ้าเปิดด้วย IE 9-11 ก็จะเปลี่ยนมาใช้ไฟล์ build ที่เป็น es5 แทน (แน่นอนไฟล์ที่ build ด้วย es5 จะมีขนาดใหญ่กว่า es2015 ครับผม)

อีกประเด็นที่สำคัญคือเรื่องของ CSS ถ้าหากใครที่ใช้ IE 9-11 อยู่ ก่อนที่จะ build โปรเจค อย่าลืมไปเปิดใช้งาน autoprefixer ด้วยโดยลบคำว่า not ออกจากบรรทัด not IE 9-11 ที่ไฟล์ browserslist ครับผม

.
5. ใน Angular 8 รองรับการใช้งาน compiler (และ runtime) ตัวใหม่ที่ชื่อว่า Ivy ทำให้ประสิทธิภาพของโปรเจค Angular เราดีขึ้นมาก แนะนำให้ใช้ได้เลยนะครับ
สามารถทำได้ตอนสร้างโปรเจคใหม่ ด้วยคำสั่ง ดังนี้

ng new project –enable-ivy

ถ้าใครอัปเกรดมาจากเวอร์ชันก่อนหน้า ก็ไปตั้งค่าที่ไฟล์ tsconfig.app.json ได้ครับ ในส่วนของ compilerOptions เพิ่มคำสั่งดังนี้

“angularCompilerOptions”: {
“enableIvy”: true
}

*อนาคตตัวนี้จะถูกเปิดโดย default ใน Angular เวอร์ชัน 9 เลย

.
6. เพิ่ม method ชื่อว่า clear() ให้กับ FormArray คือ ไม่ต้อง loop ลบ controls เองเหมือนแต่ก่อน ตัวอย่าง

const products = fb.array([product1, product22]);
products.clear();

.
7. รองรับการเขียน Web Worker ซึ่งเป็นอีกทางที่จะทำให้โปรเจคเราเร็วขึ้นได้ ดูเพิ่มเติมได้ที่ => https://angular.io/guide/web-worker

.
8. จะมีเลิกใช้ @angular/platform-webworker เร็วๆนี้ครับ และเอา package @angular/http ออกเป็นที่เรียบร้อยแล้ว (ใช้ @angular/common/http แทน)

ใครอยากดูว่า Angular จะเอาอะไรออกบ้างในอนาคต ดูได้ตามลิงก์นี้ได้ครับจะเตรียมตัวไว้ => https://angular.io/guide/deprecations

.
9. มี CLI Builders เพิ่มเข้ามาใหม่ เผื่อใครอยาก custom คำสั่ง command line ต่างๆ ดูเพิ่มเติมได้ที่ => https://angular.io/guide/cli-builder

.
10. สำหรับคนที่เรียนคอร์สเรียนออนไลน์ไปแล้ว (ถ้าใช้ Angular เวอร์ชัน 7) สามารถอัปเดตเป็น Angular 8 ได้เลยนะครับ (อย่าลืม backup โปรเจคเดิมด้วยนะ) ด้วยคำสั่ง

ng update @angular/cli @angular/core

รันเลย! ยินดีด้วยโปรเจคของเราอัปเกรดเป็น Angular 8 เรียบร้อย ฮ่าๆ ง่ายมาก

.
ขอบคุณที่ติดตามอ่านครับ
โค้ชเอก

แนะนำแหล่งศึกษา JavaScript สมัยใหม่

โค้ชเอก Leave a comment

สำหรับคนที่สนใจศึกษา JavaScript สมัยใหม่ แนะนำให้ลองอ่าน และเขียนโค้ดจากเว็บนี้นะครับ ค่อนข้างครบ สรุปได้ดี และน่าจะประหยัดเวลาในการเรียนรู้เยอะทีเดียว 🙂

.
รายละเอียด: https://javascript.info/

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