Ionic Framework 4 beta ออกมาให้ลองใช้กันแล้วนะครับ

ตอนนี้ 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/

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.