Ionic 2 Beta 8 มาแล้ว: UI ใหม่ๆ และการเปลี่ยน Code ที่น่ากลัว!

Ionic และ Angular ทยอยอัพเดตเวอร์ชั่นเบต้ากันอย่างต่อเนื่อง นี่ถ้าเปิดรับแทงว่าเวอร์ชั่นเบต้าจะสิ้นสุดที่เวอร์ชั่นอะไร คงเฮฮากันน่าดู

เอ้า เข้าเรื่อง Ionic 2 Beta 8 กันดีกว่า มีเรื่องใหญ่ก็คือมีการเปลี่ยนโครงสร้าง และโค้ดในระดับของ API จำนวนไม่น้อย พร้อมๆ กับเพิ่ม UI Component มาใหม่ 2 อัน

เดี๋ยวนะ ตะกี้โค้ชพลบอกว่า “เปลี่ยนโครงสร้าง”

เปลี่ยนโครงสร้างงงง

เปลี่ยนโครงสร้าง

…

ใจร้าย…

ใช่แล้วครับ มีการเปลี่ยนแปลงการใช้งาน และโค้ดในหลายจุดพอสมควร มากพอที่อาจจะทำให้โค้ดเดิมที่คุณใช้ในเวอร์ชั่นเบต้าก่อนๆ พังพินาศได้

และอย่างที่โค้ชพลจะขอย้ำอีกทีนะครับ ว่าถ้ามันยัง Beta อย่าเพิ่งรีบใช้ ไม่งั้นอาจจะเหนื่อยต้องมารื้อ ทำความเข้าใจใหม่

เวลาสอนหรืออบรม โค้ชพลก็ต้องแน่ใจก่อนว่ามันปลอดภัย และเอาไปใช้ได้แล้วจริงๆ อย่างคอร์สออนไลน์ Ionic นี้จะอัพเดตเนื้อหาเป็น Ionic 2 เมื่อชัวร์แล้วเท่านั้น (จริงๆ กำลังทำเตรียมไว้แล้ว ต้องมาปรับใหม่ตาม Beta เนี้ยแหละ ร้องไห้แป๊ป)

งั้นเอาเรื่องเปลี่ยนโครงสร้างก่อนแล้วกันเนอะ

การเปลี่ยนแปลงโครงสร้างของ API ใน Ionic 2

ระดับโครงสร้าง

• ยกเลิก custom decorators ใน Ionic 2
• @App และ @Page จะถูกแทนที่ด้วย  @Component
• IonicApp เปลี่ยนชื่อเป็น App
• ionicBootstrap เป็นตัวสำคัญที่ต้อง boot ขึ้นมาพร้อมๆ กับตัวแอพ
• Config ถูกกำหนดเป็นพารามีเตอร์ตัวที่ 3 ในคำสั่ง ionicBootstrap(rootComponent, providers, config)
• ค่า prodMode เพิ่มเข้ามาใน config , เพื่อเปิด และปิดโหมดสำหรับ Production

ระดับ Event ของ Component

อันนี้ใหญ่พอสมควร โดยชื่อ Event ของ Component ใน Ionic 2 ทั้งหมดจะเพิ่มด้านหน้าด้วย  ion

ระดับ Event ใน Lifecycle

ชื่อ Event ทั้งหมดใน Life cycle ของ Ionic 2 ทั้งหมดจะมีการแก้ไขชื่อนำหน้า จาก onPage เป็นionView เช่น

• onPageLoaded เปลี่ยนชื่อเป็น ionViewLoaded
• onPageWillEnter เปลี่ยนชื่อเป็น  ionViewWillEnter
• onPageDidEnter เปลี่ยนชื่อเป็น  ionViewDidEnter

UI Component: PopOver และ Range Slider

จบจากเรื่องน่าตกใจ มาเรื่องดีๆ กันบ้าง ใน Ionic 2 Beta 8 ก็ได้เพิ่ม UI Component สวยๆ มา 2 ตัว ซึ่งโค้ชพลพูดถึงในอัพเดตที่แล้ว นั่นก็คือ PopOver กับ Range Slider ครับ

หน้าตาของ PopOver

หน้าตาของ Range Slider

ตัวนี้คิดถึงมาก เพราะตั้งแต่ใช้ Range Slider ของ JQuery Mobile ก็หาสวยๆ ไม่ค่อยเจอเลย มาใน Ionic 2 ดันปรับแต่งสีสันได้อีกต่างหาก ชอบครับ

สนใจเรียนสร้าง Cross Platform App ด้วย Ionic 2

1. สามารถจัดอบรมแบบพิเศษให้ทีมของคุณได้ โดยเนือหาจะมีการปรับเปลี่ยนให้เหมาะสมกับระบบที่ต้องการพัฒนา เช่นอยากต่อกับ WSDL แทน PHP Web Service เป็นต้น แถมมีสอนเรื่อง UX for Developer ด้วย โทรติดต่อ 083-071-3373
2. เรียนออนไลน์ เนื้อหาตอนนี้เป็น Ionic 1 แต่จะอัพเดตเป็น Ionic 2 ให้เมื่อโค้ชมั่นใจว่ามันพร้อมสำหรับให้พวกเราใช้งานจริงๆ ครับ คลิกลงเรียนแบบลดราคาได้ที่นี่

อ้างอิง – Ionic Blog