มาทำความรู้จัก ionic framework กัน



หากใครเคยเขียน App บน Android หรือ iOS มาแล้ว จะรู้ว่าการเขียนแอพให้ทำงานทั้งสอง Platform เป็นเรื่องน่าปวดหัวแค่ไหน ทั้งตัวภาษา ที่ Android ใช้ภาษา Java และ iOS ใช้ Objective-C หรือภาษา Swift ที่กำลังจะมาในอนาคตอันใกล้นี้ (ณ เวลาเขียนบทความ ยังไม่เสถียรนะครับ) นอกจากต้องเรียนภาษาในการเขียน App มากมายแล้ว ยังมีเรื่องเวลาที่เขียนที่แสนจะนานแสนนานอีก

Hybrid App

หลายคนอาจจะบอกว่า ก็ใช้ PhoneGap ซิ (ตัว Opensource ของ PhoneGap มีชื่อว่า Apache Cordova) แต่่ PhoneGap หรือ Cordova เจ้ากรรมดันดันมีแต่ API ติดต่อกับ Hardware ของมือถืออย่างเดียว แล้วจะเขียน App ให้หน้าตามันออกมาเป็น App แบบ native ได้อย่างไร

UI Framework

ผมเชื่อว่าหลายคนคงรู้จัก jQuery Mobile กันมาบ้าง หากไม่รู้จักผมจะอธิบายคร่าวๆ ว่า มันคือ Framework UI ที่เขียนขึ้นมาครอบ jQuery (JavaScript Framework) อีกที ซึ่งหน้าที่ของมันคือทำให้ HTML กับ JavaScript แสดงหน้าตาบนมือถือได้สวยงาม แต่ปัญหาคือ มันออกแบบมาสำหรับทำเว็บสำหรับหน้าจอมือถือมากกว่า ทำให้ความรู้สึกในการใช้งาน App นั้นไม่ค่อยจะราบลื่นเหมือน native app เท่าที่ควร

Ionic Framework ที่ผมจะกล่าวนี้ได้ออกแบบมาให้เราสามารถพัฒนา App มือถือ ให้มีหน้าตาใกล้เคียงกับ native app มากที่สุด มันสามารถ โดยเทคโนโลยีที่เราใช้ในการพัฒนา App คือ HTML5, CSS3, และ JavaScript พระเอกของเรานั่นเอง ทำไมผมให้ JavaScript เป็นพระเอกหรือครับ เพราะว่า Framework ตัวนี้ใช้ AngularJS เป็นฐานในการพัฒนานั่นเอง ทำให้เราสามารถเขียนแยกเป็น MVVM (Model-View-ViewModel)ได้นั่นเอง หรือหลายๆ ท่านจะมองเป็น MVC (Model View Controller) ก็ได้ครับ แต่ทาง AngularJS team เค้าบอกว่ามันไม่สำคัญจะเรียกอะไร เค้าขอเรียกว่า MVW (Model View Whatever)

การรวมร่างของ AngularJS กับ PhoneGap (Cordova)

เมื่อ PhoneGap หรือ Cordova ทำหน้าที่ติดต่อกับ Hardware ของโทรศัพท์มือถือแล้ว หน้าที่ในการจัดการ Logic และหน้าตาก็กลายเป็นหน้าที่ที่ AngularJS ต้องจัดการ แต่อย่ากระนั้นเลย เจ้า Ionic Framework ได้เตรียม directive พื้นฐานของ AngularJS ไว้ให้เราเรียกใช้งานอยู่แล้ว เพราะฉะนั้นเราไม่จำเป็นต้องเขียน Directive เอง เว้นเสียแต่ว่าอยากได้อะไรที่มันเทพหน่อย เราก็สามารถสร้าง Directive เองได้ (เรื่อง AngularJS ผมจะเขียนไว้แยกเป็นบทความต่างหากแล้วกันครับ ไม่งั้นบทความนี้ท่าจะยาว)

คู่มือของ Framework

ถือว่า Ionic ทำการบ้านมาดีมาก มีคู่มือที่แทบจะลากมาวางใน App เราได้เกือบทุกอย่าง ยกเว้นเราต้องเขียนตัว Logic เองว่าจะให้ปุ่มไหนทำหน้าที่อะไร แสดงข้อมูลอะไร ที่ไหน
ถ้าสนใจอยากดูคู่มือคร่าวๆ ตามลิงค์นี้ไปได้เลยครับ

ตัวอย่างของ App

Mallzee




ดู App ที่พัฒนาด้วย Ionic Framework เพิ่มเติมได้ ที่นี่

ข้อเสียของ Ionic

ไม่ว่าอะไรก็ต้องมีข้อด้อยด้วยกันทั้งนั้น เจ้า ionic framework ก็เช่นกัน ตัว ionic framework ขณะที่เขียนบทความนี้ ทางผู้พัฒนาบอกว่ามันรองรับ Android เวอร์ชัน 4.0 ขึ้นไปนะครับ แต่จากที่ผมลองทดสอบดู ปรากฏว่า ตัว 4.0 ทำงานได้ไม่ค่อยดีนักเนื่องจากตัว WebView ของ Android 4.0 มีความสามารถที่กำจัด ทำให้การเล่น Animation รวมถึงการรัน JavaScript ค่อนข้างช้า และตัว input ที่รองรับวันที่หรือเวลายังไม่มี หากต้องการให้แสดง input วันที่หรือเวลาเราต้องหา plugin ของ PhoneGap หรือ Cordova มาลงเอง ส่วน Android 4.4 นั้นลื่นไหล และเข้าใกล้ App แบบ native มาก เพราะตัว WebView ของ Android 4.4 นั้นเรียกใช้ Engine จาก Chrome for Android ครับ เลยทำให้การประมวลผมต่างๆ ทำได้ดีขึ้นมากกว่า Version ก่อนๆ ส่วนเวอร์ชันอื่นผมไม่ได้ทดสอบครับ
Seven Seconds Web Developer

Morbi aliquam fringilla nisl. Pellentesque eleifend condimentum tellus, vel vulputate tortor malesuada sit amet. Aliquam vel vestibulum metus. Aenean ut mi aucto.

3 comments:

  1. Android 4.0 มีความสามารถที่กำจัด **สินะค่ะ

    ReplyDelete
    Replies
    1. น่าจะเป็นเพราะตัว engine ของ android browser ยังไม่พร้อมมากกว่าครับ
      เพราะจาก 2.x เปลี่ยนมาเป็น 4.x นั้น OS เปลี่ยนไปเยอะเลยครับ แต่ตัว browser engine ยังใช้ตัวเก่าอยู่
      ทางแก้เราสามารถ bundle crosswalk (Engine ของ chrome) ไปกับ app ได้ครับ แต่ขนากแอพก็จะใหญ่ขึ้นไปอีก ionic framework เวอร์ชั่นหลังๆ นี่ support crosswalk ด้วยครับ

      Delete
    2. คุณปนัดดา เค้าน่าจะหมายถึงว่า เขียนผิดน่ะครับ ต้องเป็นคำว่า "จำกัด"

      Delete