Ionic Framework

Ionic พร้อมสำหรับ Angular 9.0 แล้ว มาดูว่าดีกว่าเดิมยังไงกัน

เรื่องที่เกี่ยวข้อง - ,

Ionic เป็น framework แบบ open-source ที่ข้อดีของมันคือการวิวัฒนาการตามแกนหลักที่เราเลือกใช้ ไม่ว่าจะเป็น Angular หรือ React ก็ตาม

โดยเฉพาะเมื่อต้นปีนี้ Angular Framework จะได้รับอัพเดตเป็น เวอร์ชั่น 9.0 ซึ่งมีศักยภาพที่เร็ว และแรงกว่าเดิม มาดูกับโค้ชพลกันครับว่า Ionic ที่ใช้ Angular เวอร์ชั่นล่าสุด จะดีกว่าเวอร์ชั่นล่าสุดยังไงบ้าง

เล็ก เร็ว แรง ด้วย Ivy

Ivy เป็นชื่อรหัสตัวเรนเดอร์ใหม่ของ Angular

ใครที่ไม่ได้ติดตามลำดับการอัพเดตสำคัญใน Angular 9 อาจจะไม่คุ้นชื่อ Ivy ซึ่งจริงๆ มีมาให้ใช้ได้สักระยะแล้ว แต่มันถูกปิดเอาไว้เป็นค่าเริ่มต้น

แต่ใน Angular 9 ตัวเรนเดอร์หน้าตาใหม่ตัวนี้ จะเปิดใช้งาน Ivy เป็นตัวหลักครับ

ใช้ Ivy กับโปรเจค Angular แล้วมีผลดียังไง?

ตัวแอพเราจะมีขนาดเล็กลง นั่นหมายความถึงความเร็วที่เพิ่มขึ้นจากปัจจุบันอีก โดยเฉพาะในไฟล์ main.js

โดยทีม Ionic เอาขนาดไฟล์ที่ build ขึ้น production แบบเปิด และไม่เปิด Ivy ใช้งานมาเทียบให้ดูครับ

# Ivy disabled
$ ng build --prod
...
chunk {10} main-es2015.d03d9cadf1579320f520.js (main) 537 kB [initial] [rendered]
chunk {10} main-es5.d03d9cadf1579320f520.js (main) 628 kB [initial] [rendered]
...


# Ivy enabled
$ ng build --prod
...
chunk {10} main-es2015.bfc9e260b847bc2b02fc.js (main) 465 kB [initial] [rendered]
chunk {10} main-es5.bfc9e260b847bc2b02fc.js (main) 551 kB [initial] [rendered]

จะเห็นว่าขนาดไฟล์ลดลงมาเกือบ 100kb ตามลำดับ เวลาเราจะ build แอพไปใช้ใน production นั่นเอง

ความ Compatible กับ Component 3rd Party

ในเมื่อเป็นของใหม่ และถูกใส่มาใน framework ตัวหลัก ทำให้พวกเราอาจจะต้องใส่ใจสักหน่อย โดยเฉพาะเราอาจจะมีการเอา Component ของคนอื่นมาใช้

ซึ่งถ้า Component ของเจ้านั้น ยังไม่อัพเดตให้รองรับ Angular 9 ก็มีโอกาสที่จะเจอปัญหาความไม่เข้ากันได้อยู่ ตามปกติของการอัพเดตการทำงานที่โครง Framework หลัก

แต่ก็ไม่ต้องห่วง ถ้าเรายังไม่ต้องการใช้งาน Ivy กับโปรเจคของเรา ก็สามารถเลือกปิดการทำงานของ Ivy ในโปรเจคของเราได้

ถ้ายังไม่ต้องการ build โปรเจคด้วย Ivy ใน Angular 9 ก็สามารถเลือกปิดได้ เพื่อหลีกเลี่ยงปัญหา Component บางตัวไม่รองรับ

ง่ายขึ้น เพราะยกเลิกการทำงานโดยตรงกับ entryComponents

สำหรับพวกเราที่สร้าง Component ไว้ใช้ซ้ำ ไว้ใช้เองในโปรเจคและองค์กร ขั้นตอนหนึ่งที่ค่อนข้างจุกจิก ก็คึอการโหลด Component ของเราใส่ entryComponents

โดยเฉพาะ Modals และ Popovers ที่ใครได้ดูในคอร์สเรียนออนไลน์ Ionic ปัจจุบันจะเห็นว่าขั้นตอนยุ่งยากมาก

แต่ในเวอร์ชั่นใหม่ที่ใช้งานระบบ Ivy ทำให้งานจุกจิกส่วนนี้ไม่จำเป็นอีกต่อไปแล้วครับ

ปรับปรุงการทำงานของ Angular CLI

AOT คือการทำงานที่ตัว Angular จะทำการอ่าน และแปลงโค้ดของเราให้อยู่ในรูปแบบ JavaScript ที่ทำงานได้บนทุกระบบ ลดปัญหาต่างๆ นาๆ

ในการทำงานแบบใหม่ ตัว CLI ของโปรเจคจะทำการ build แบบ AOT (Ahead-of-Time) ทำให้เราตรวจพบ Error ได้อย่างรวดเร็ว

เพราะเมื่อก่อนเวลาเรารันโปรเจคทดสอบจะไม่เห็น error บางกลุ่ม แต่จะไปโผล่ตอนเรา build Production แทน ตรงนี้ช่วยได้มากเลย

นอกจากนี้ การทำงานแบบใช้ AOT ยังทำเสร็จก่อน Web browser จะดึงเอาไปใช้งาน เพิ่มประสิทธิภาพเข้าไปอีก

นั่นแค่เบาะๆ นะ อย่าลืมกดติดตามล่ะ

สิ่งหนึ่งที่ Ionic ทำได้ดีมาตลอด คือการปรับเปลี่ยนเครื่องมือ ให้เหมาะกับความต้องการของพวกเราแต่ละคน โดยไม่จำกัดว่าเราต้องเขียน Angular แต่ปัจจุบันสามารถเขียนเป็น style React และในอนาคตคือ Vuejs

ถ้ามีอะไรคืบหน้า จะเอามาอัพเดตให้ทราบนะครับ กดติดตามได้ตามช่องทางต่อไปนี้เลย

ส่วนคนที่ลงเรียนคอร์สออนไลน์ Ionic แล้ว เตรียมรออัพเดตได้เลย

อ้างอิง – Ionic Blog

Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

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

Menu