ตอนนี้ Ionic Framework 4 beta ออกมาให้ลองใช้กันแล้วนะครับ
สิ่งใหม่ในเวอร์ชันนี้มีหลายอย่าง เช่น นอกจากเราจะเขียน Ionic ด้วย Angular ล่าสุดแล้ว ต่อไปเราสามารถเขียนด้วย Vue.js และ React ได้อีกด้วย!
.
Ionic Framework นั้นไม่ได้เป็น Framework ที่ทำได้แค่ Mobile App (iOS และ Android) เท่านั้นนะครับ แต่เรายังสามารถทำ desktop app และ Progressive Web App ได้แบบง่ายๆอีกด้วย และทั้งหมดที่ว่ามานี้คือสามารถเขียนได้ด้วยโค้ดชุดเดียวกัน (one code base Write once, run anywhere)
.
มาดูสรุปสิ่งสำคัญใน Ionic 4 กันครับ
.
1. สำหรับคนที่เขียน Ionic ด้วย Angular ต่อไปนี้เราสามารถใช้งาน Angular CLI และ Angular Router ได้เลยนะครับ Ionic 4 จะใช้ของ Angular เลย แน่นอนเราจะได้ใช้ Angular CLI และ Angular Router ใน Ionic ที่ใหม่และอัปเดตล่าสุดเสมอ
.
2. สำหรับคนที่่อยากลองใช้ Ionic 4 ก็ใช้คำสั่ง
npm install -g ionic
สำหรับติดตั้ง Ionic CLI ได้เลยครับ และสร้างโปรเจคใหม่ด้วยคำสั่ง (กรณีใช้ Angular) ดังนี้
ionic start myApp sidemenu –type=angular
.
3. แน่นอนว่าตอนนี้ Ionic 4 ยังเป็น beta อยู่ อาจยังไม่เหมาะสำหรับงาน production ในช่วงนี้ ก็แนะนำให้ใช้ Ionic 3 เหมือนเดิมก่อนได้ครับ แค่ติดตั้ง CLI ด้วยคำสั่ง
npm install -g ionic@3
.
4. Components หลายตัวเช่น Loading, Toast, หรือ Alert จะเปลี่ยนมาใช้ promise-based ครับ คือเราจะใช้ .then() หรือจะใช้ async/await ก็ได้เช่นเดียวกัน ยกตัวอย่างเช่น
async showAlert() {
const alert = await this.alertCtrl.create({
message: “CodingThailand”,
subHeader: “coding mentor”
});
await alert.present();
}
.
5. สำหรับเรื่อง Navigation ต่อไปตัว NavController ในอนาคตจะเลิกใช้แล้วครับ แนะนำให้ใช้ Angular Router แทนเพราะตัวสามารถทำ lazy loading ได้ง่ายเลย
อ้อ คำสั่ง router-outlet ของตัว Angular Router ใน Ionic 4 นั้นจะใช้ ion-router-outlet แทนนะครับ การใช้งานเหมือนกันเพียงแต่จะมีการเพิ่ม transitions เข้ามา
.
6. อย่างที่บอกไปว่าเรื่องของ Navigation จะใช้ Anagular Router หากต้องการทำ Lazy Loading เราก็มาใช้ loadChildren ของ Angular Router นั่นเอง
.
7. ส่วนเรื่องอื่น ก็เป็นเรื่องของ Markup ต่างๆครับที่เปลี่ยนแต่ก็ไม่ต้องจำครับ เพราะเราสามารถ copy โค้ดจากคู่มือเค้ามาวางได้เลย
.
8. เปลี่ยน Package Name จาก ionic-angular เป็น @ionic/angular
.
9.เปลี่ยน RxJS เวอร์ชัน 5 ไปเป็นเวอร์ชัน 6
.
10. Lifecycle Events บางส่วนจะเหมือนกันกับ Angular lifecycle hooks ครับ เช่น ionViewDidLoad() ก็จะเหมือนกับ ngOnInit() นั่นเอง
.
อ่านเพิ่มเติมทั้งหมดได้ที่: http://bit.ly/2OpTn8r
.
คู่มือ Ionic 4 beta มาแล้วนะครับ อ่านได้ที่ : https://beta.ionicframework.com/docs/
