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

ตอนนี้ 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 ลองดูชีทสรุปเรียงตามนี้

สำหรับคนที่เพิ่งเริ่มต้นศึกษา 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

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

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

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

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

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

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

.
โค้ชเอก

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

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

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

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

ลองดูๆ 🙂

โค้ชเอก

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

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

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

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

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

.
ลองดูครับ

โค้ชเอก

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

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

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

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

.
โค้ชเอก

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

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 สมัยใหม่

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

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

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

แจกฟรี! E-Book “คู่มือติดตั้ง และใช้งาน React Native เบื้องต้น”

เนื้อหาในเล่มนี้จะเน้นการเตรียมเครื่องมือ และการติดตั้งโปรแกรมต่างๆ แบบ step by step จนสามารถเริ่มเขียน React Native ได้ จุดประสงค์หลักๆ เพื่อให้ทุกคนสามารถเริ่มและต่อยอดศึกษา React Native ได้อย่างรวดเร็ว และประหยัดเวลาครับ

จากที่ได้ยินหลายคนจะมีปัญหาในการติดตั้ง React Native มากเลย บางคนใช้เวลา setup หลายชั่วโมง หรือบางคนหลายวันเลย ก็หวังว่าหนังสือเล่มนี้จะช่วยประหยัดเวลาตรงนี้ได้นะครับ

(หนังสือเป็น PDF จำนวน 35 หน้า A5)
ดูเนื้อหา และดาวน์โหลดหนังสือ ที่นี่ => http://bit.ly/2De8Zbj

 

โค้ชเอก