Capacitor และ Stencil 2 เครื่องมือใหม่ ที่มาพร้อมกับการเปิดตัว Ionic 4

Ionic Framework น่าจะเป็นเครื่องมือที่พิสูจน์ตัวเองในด้านของการพัฒนาโมบายล์แอพพลิเคชั่น (Mobile Application) แบบเขียนครั้งเดียวก็เอาไปใช้งานข้ามระบบได้ ทั้ง iOS และ Android

แต่ในช่วงการเปิดตัวของ Ionic เวอร์ชั่นที่ 4 นี้ ทางทีมพัฒนาได้ปล่อยเครื่องมือใหม่ออกมาเพิ่มด้วยถึง 2 ตัว และ 2 ตัวที่ว่านี้ ก็ทำงานเป็นอิสระจาก Ionic Framework เสียด้วย

นั่นก็คือ

1. Capacitor
2. Stencil

ในที่นี้เราจะมาดูภาพรวมของ 2 ตัวนี้กัน จะได้พอเอาไปตัดสินใจในการใช้งาน

1. Capacitor: ถุงมือทานอสที่รวมระบบทั้ง 6 เข้าไว้ด้วยกัน

* ในที่นี้โค้ชพลจะเรียก Platform ว่า “ระบบ” นะ

เรามาดูความจริงที่เกิดขึ้นในยุคสมาร์ทโฟน และแท๊บเลตครองเมืองกันก่อน

ในช่วงที่พวกเราต่างพุ่งเป้าไปที่การทำแอพให้กับ 2 ระบบใหม่อย่าง iOS และ Android ทำให้บางครั้งพลก็มาฉุกคิดว่าจะไม่มีใครใช้โปรแกรมคอมพิวเตอร์ หรือเว็บแอพพลิเคชั่นแล้วอย่างนั้นหรือ?

หลังจากผ่านมาหลายปี ปรากฎว่าไม่ใช่อย่างนั้นเลย จริงๆ คอมพิวเตอร์ก็ไม่ได้หายไปไหน คนก็ยังเข้าเว็บอยู่ ระบบใหม่ 2 ตัวนี้ กลายเป็นสิ่งที่ว่า “ต้องมี” แต่ไม่ใช่ว่า “ต้องทิ้ง” ระบบเก่า

เมื่อ Mobile App ไม่ใช่คำตอบของทุกอย่าง

ระบบใหม่ 2 ตัวนี้ กลายเป็นสิ่งที่ว่า “ต้องมี” แต่ไม่ใช่ว่า “ต้องทิ้ง” ระบบเดิม

เพราะงานที่สามารถทำได้ดีบนอุปกรณ์พกพา (Mobile Device อย่างพวก Smart phone, Tablet) ก็มีเยอะ แต่งานที่ต้องอาศัยการใช้งานผ่านระบบเดิมๆ ก็มีอยู่

แถมหลายๆ อย่างบนระบบเดิมอย่าง Windows, MacOS, Linux เรียกรวมว่า Desktop กับระบบ Web ยังสามารถทำได้ดีกว่าด้วย

ยกตัวอย่างเช่น Facebook Ads Manager ที่ในเวอร์ชั่นของ Mobile App นั้นสามารถทำงานทั่วๆ ไปได้อย่างการสร้างโฆษณา และการวิเคราะห์ประสิทธิภาพของโฆษณา

แต่ถ้าต้องการจัดการไฟล์ หรือบัญชี รวมถึงโต้ตอบคอมเม้นต์ที่ค่อนข้างละเอียด ตัวเวอร์ชั่นเว็บนั้นก็ครอบคลุมการทำงานได้มากกว่า

โดยเฉพาะในด้านองค์กร

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

คือมีความต้องการที่จะเพิ่มส่วนการใช้งานระบบเดิมผ่าน ระบบ iOS และ Android

แต่ก็ต้องการยกเครื่องระบบเก่าให้สามารถใช้งานในรูปแบบใหม่ไปด้วยเลย นั่นก็คือ Desktop และ Web 

ทีนี้โจทย์มาอยู่ที่ฝ่ายพัฒนาแอพพลิเคชั่นให้ระบบ ว่าจะต้องดำเนินการยังไง

เพราะเดิมที บนระบบ Desktop และ Web ต่างก็มีภาษา และสภาพแวดล้อมที่ค่อนข้างเฉพาะตัวอยู่แล้ว เช่น

• สำหรับ Desktop:
  • Windows: เช่น VB.NET, C#.NET, Java
  • MacOS: เช่น Java, Objective-C
• สำหรับ Web: PHP, J2EE, ASP.NET, Python, Ruby, Node

เครื่องมือที่สามารถตอบโจทย์การสร้างแอพในทุกระบบ

เรื่องมันจึงเริ่มความต้องการเบื้องต้นที่ว่ามานี่แหละ ทีมงาน Ionic เลยคิดว่ามันต้องมีเครื่องมือสักตัวที่มาตอบโจทย์นี้ได้

เพราะในปัจจุบัน ถ้าว่ากันด้วยส่วนการพัฒนาตัวแอพพลิเคชั่น ในด้านของภาษาโปรแกรมฝั่ง Client ตัวเทคโนโลยี Web ก็กว้างขวางพอตัว

เห็นได้จาก

• Cordova (ชื่อเดิม PhoneGap) ตัวเทมเพลตของ Mobile Application บนระบบต่างๆ ที่สนับสนุนการนำโค้ดเว็บมาแสดงเป็นส่วนหน้าตาของแอพ (User Interface)
• Electron เครื่องมือที่ใช้แนวคิดคล้ายๆ Cordova เพียงแต่เป้าหมายคือสร้างโปรแกรมที่สามารถใช้งานได้บน Windows, MacOS, และ Linux (กลุ่ม Desktop)
• Progressive Web App (PWA) แนวคิดการสร้างเว็บล่าสุด ที่จะทำให้ศักยภาพของเว็บแอพพลิเคชั่น มาทำงานแบบ Native ได้

เพียงแต่ตอนนี้การจะทำโปรเจคแบบเขียนครั้งเดียว แล้วเอาไปใช้ในทั้ง 3 แนวทางนี้ ยังต้องทำมือ และมีการทำงานที่ค่อนข้างซับซ้อน

Capacitor จึงเกิดขึ้นมาเพื่อรวมการนำแอพพลิเคชั่นที่เราเขียน ไปใช้บนทุกระบบ (Cross Platform ที่แท้ทรู) ให้อยู่ในเครื่องมือเดียว

ในทางเทคนิคสำหรับนักพัฒนา พลได้เล่าไว้เข้าใจง่ายๆ แล้วที่นี่ครับ

Capacitor จึงเกิดขึ้นมาเพื่อรวมการนำแอพพลิเคชั่นที่เราเขียน ไปใช้บนทุกระบบ ให้อยู่ในเครื่องมือเดียว

2. Stencil: กล่องเครื่องมือ สำหรับการสร้าง HTML Element ใช้เอง

แนวคิดเรื่อง Web Component มีมาได้สักพักแล้ว

ประโยชน์หนึ่งของแนวคิดนี้ คือการเปิดให้นักพัฒนาสามารถสร้าง “ชิ้นส่วน” ของเว็บที่ต้องการใช้เอง แถมแจกจ่ายให้คนอื่นได้

“ชิ้นส่วน” ที่ว่านี้ ในทางเทคนิคแล้วก็คือ HTML Element นี่แหละ

ใช่แล้ว ด้วย Stencil มันจะทำให้ นักพัฒนาเว็บสามารถสร้าง HTML Element มาใช้งานเองได้

มันเกิดจากปัญหาเดิมๆ ในโลกของการทำเว็บ

โดยปกติเวลาเขียนหน้าเว็บ นักพัฒนาก็จะเขียนโค้ดเป็นภาษา HTML และภาษาอื่นๆ เพื่อทำให้มันดูดีตรงความต้องการ และใช้งานได้

เช่น หน้าตา Login ที่ดูดีแบบนี้

 

สร้างจากโค้ด HTML แบบนี้

<div id="container">       
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="lower">
<input type="checkbox"><label for="checkbox">Keep me logged in</label>
<input type="submit" value="Login">
</div><!--/ lower-->
</form>
</div>

แต่มันไม่ใช่แค่นี้นะ ยังมีโค้ดภาษา CSS อีก ไปดูทั้งหมดได้จากลิ้งค์ที่มา

ทีนี้ลองนึกดู…

จะเกิดอะไรขึ้น ถ้าเราต้องเอาโค้ดแบบเดียวกันนี้… ไปใส่ไว้ในโปรเจคอีกตัว

ต้องเลือกก้อปโค้ดใช่มั้ย? แล้วเวลาเขียนโค้ดจริง ในหน้าเว็บหนึ่งมันไม่ได้มีโค้ดแค่นี้หน่ะสิ ยังมีโค้ดที่แสดงเมนู,​​ โลโก้, เว็บเพื่อนบ้าน,​ ราคาทองคำ ฯลฯ

• ถ้าก๊อปพลาด นานแน่นอน
• ถ้าก๊อปไม่ครบ นานแน่นอน
• นี่เราคุยเรื่องโค้ดเดิมมีข้อผิดพลาด แล้วต้องไปตามแก้ใน 5 โปรเจคก่อนหน้าหรือยัง? 🙂

นี่เป็นหนึ่งในปัญหาของการดูแล และพัฒนาโค้ดในฝั่งของเว็บ ที่มีมานานแล้ว

Stencil เป็นเครื่องมือหนึ่งที่ทำให้การทำ Custom Web Component สะดวกขึ้น

การทำ Web Component เองนั้น จริงๆ ไม่มีรูปแบบตายตัว ง่ายๆ คือมันเป็นแนวคิดที่ตกลงกันไว้ว่า น่าจะดี

เหมือนเราตกลงกันว่า จะต่ออุปกรณ์เข้าด้วยกัน จะใช้พอร์ท USB แบบนี้นะ ส่วนที่เหลือคือจะสร้างอุปกรณ์อะไรขึ้นมา จะให้มันคุยกับตัวอื่นได้ ก็ทำให้เสียบด้วย USB ก็พอ

[ภาพ]

ทีนี้ถ้าลุยด้านเทคนิคมากเกินไป เดี๋ยวจะมึนกันซะก่อน เอาเป็นว่า จะเริ่มลุยสร้าง Web Component หรือจะใช้ ไปดูที่ WebComponent.org ข้อมูลจัดเต็ม

แต่ตอนแรกที่โค้ชพลเคยทำ WebComponent ตอนนั้นใช้ Polymer ของ Google เคยเล่าแนะนำไว้ที่นี่ด้วย

ส่วนทีมงาน Ionic คิดว่าการจะทำ Web Component นั้นต้องมีการรวมรวบข้อดีของเทคโนโลยีที่มีอยู่ในปัจจุบันเข้าด้วยกัน เลยสร้าง Stencil ขึ้นมา

เช่นมีทั้ง

• Virtual DOM
• Async rendering (อันนี้เหมือน React Fiber)
• Reactive data-binding
• TypeScript
• JSX

ซึ่งพอใช้งานจริง:

Stencil จะทำการ “Compile” โค้ดของเราออกมาเป็น Web Component ที่ไม่อิงกับ Framework ตัวใดเลย

ทำให้เราเอาไปใช้กับ Framework ตัวไหนก็ได้ ไม่ว่าจะเป็น React, Vue, Angular หรือจะเอาไปใช้กับ JQuery ที่คุ้นเคยก็ได้

แถมใน Ionic Framework 4 ตัว User Interface ทั้งหมดก็ได้แปลงเป็น Web Component ผ่าน Stencil แล้ว ดังนั้นถ้า Framework อื่นอยากได้ UI หน้าตาแบบ Mobile App ของ Ionic ไปใช้ก็สามารถทำได้สบาย

ความเห็นส่วนตัว: หวังลึกๆ ว่านี่จะเป็นจุดเริ่มต้น ของจุดจบสงคราม Framework จริงๆ ซะที 🙂

สรุปเกี่ยวกับ Capacitor และ Stencil

พลสังเกตว่าทีมงานผู้อยู่เบื้องหลัง Ionic Framework ที่ทำให้การทำ Mobile Application แบบ Cross Platform ด้วยภาษาเว็บนั้น สะดวกสบายมากขึ้น  ได้เริ่มมองไปในอนาคตข้างหน้ามากกว่าแค่การทำ Mobile Application แล้ว

เห็นได้จาก Capacitor ที่สร้างขึ้นใหม่ เพื่อรองรับการทำงานกับระบบได้มากกว่าแค่ iOS และ Android และ Stencil ที่กลายเป็นเครื่องมือที่สนับสนุนแนวคิด Web Component ที่โค้ชพลใช้แล้วพบว่ามันมีประสิทธิภาพสูงทีเดียว

รอแจ้งเตือนบนแฟนเพจ Nextflow กับวิธีใช้ Capacitor และ Stencil ที่จะอัพไว้ที่ Youtube Channel ของโค้ชพลนะครับ