ถ้าอยากรู้ว่า Angular 8 มีอะไรใหม่ๆ บ้างก็อ่านได้ที่นี่ => http://bit.ly/2GBHquc
โค้ดที่เปลี่ยนหลักๆ จะเป็นในส่วนของ lazy-loading ครับ ใครอัปเกรดก็อย่าลืมแก้กันด้วยนะ
.
ใครที่ใช้ Ionic 4 + Angular 7 อยู่ ก็ตามไปดูการอัปเกรดเป็น Angular 8 กันได้ที่ => http://bit.ly/2KcG36g
.
สำหรับคนที่รอคอร์สออนไลน์อยู่ ตอนนี้กำลังจัดทำอยู่นะครับ (อัปเดต Ionic 4 + Angular 8) น่าจะออกมาให้เรียนกันอย่างช้าไม่เกินสัปดาห์หน้านี้
.
ลองดูครับ
โค้ชเอก
สำหรับคนที่เพิ่งเริ่มต้นศึกษา 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
.
โค้ชเอก
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 => http://bit.ly/2X9uxgA
สำหรับคนที่เพิ่งเริ่มศึกษา และใช้งาน NGINX ทำเป็น Web Server อยู่ อาจจะยังไม่คล่องในการ conifg ค่าต่างๆ มากนัก
.
แนะนำเว็บนี้เลยนะครับ จะช่วยให้เรา config NGINX ได้ง่ายมากๆ โดยที่เค้าจะสร้างไฟล์ config สำเร็จรูปให้เราเลย เพียงแค่เรา คลิกเลือก เท่านั้น (แต่ต้องเข้าใจด้วยนะ ฮ่าๆ)
ใครที่กำลังมองหา datetime picker ที่ยืดหยุ่น มีขนาดเล็ก และใช้ง่าย ลองใช้ flatpickr ดูครับ
.
จุดเด่นคือ มีความสวยงาม ไม่ต้องการ dependencies ใดๆ สามารถใช้งานได้ทันที นอกจากนี้ ยังมี themes ให้เลือกถึง 8 แบบ ด้วยกัน
แน่นอน เราสามารถนำไปใช้กับ Angular, Vue หรือ React ได้ด้วยครับ
.
รายละเอียด: https://github.com/flatpickr/flatpickr
.
ลองดูครับ
โค้ชเอก
สำหรับคนที่เขียน React Native อยากทำรายงานแบบ Charts แนะนำลองใช้ตัวนี้ได้นะครับ ค่อนข้างยืดหยุ่น และสามารถ custom สไตล์ต่างๆ ได้ดี
.
รายละเอียด: http://bit.ly/2IsBRQ5
.
จริงๆ ตัวนี้ก็มีเวอร์ชันสำหรับเว็บด้วยนะ สำหรับคนที่เขียน React ก็ลองดูได้เลยครับ
.
โค้ชเอก
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 สมัยใหม่ แนะนำให้ลองอ่าน และเขียนโค้ดจากเว็บนี้นะครับ ค่อนข้างครบ สรุปได้ดี และน่าจะประหยัดเวลาในการเรียนรู้เยอะทีเดียว 🙂
.
รายละเอียด: https://javascript.info/
.
ลองดูครับ
โค้ชเอก
เนื้อหาในเล่มนี้จะเน้นการเตรียมเครื่องมือ และการติดตั้งโปรแกรมต่างๆ แบบ step by step จนสามารถเริ่มเขียน React Native ได้ จุดประสงค์หลักๆ เพื่อให้ทุกคนสามารถเริ่มและต่อยอดศึกษา React Native ได้อย่างรวดเร็ว และประหยัดเวลาครับ
จากที่ได้ยินหลายคนจะมีปัญหาในการติดตั้ง React Native มากเลย บางคนใช้เวลา setup หลายชั่วโมง หรือบางคนหลายวันเลย ก็หวังว่าหนังสือเล่มนี้จะช่วยประหยัดเวลาตรงนี้ได้นะครับ
(หนังสือเป็น PDF จำนวน 35 หน้า A5)
ดูเนื้อหา และดาวน์โหลดหนังสือ ที่นี่ => http://bit.ly/2De8Zbj
โค้ชเอก