เมื่อไม่กี่วันที่ผ่านมานี้ แอดได้รู้จักกับบริการแนวใหม่ที่เค้าเรียกว่า Front-end as a Service ครับ เป็นการนำ HTML/CSS ที่เขียนย๊ากยาก (หรือเปล่า) มาทำให้กลายเป็นเครื่องมือ Drag and drop แบบง่าย ๆ ไม่ต้องรู้โค้ดก็ใช้ได้ครับ
ตอนแรกที่เจอก็รู้สึกว่าเป็นแนวคิดที่แปลก ๆ และฟังดูไม่ Make Sense เท่าไหร่ครับ แต่พอศึกษาไปเยอะ ๆ เข้าก็เห็นว่ามันก็มีข้อดีที่น่าสนใจอยู่เหมือนกัน เลยขอหยิบมาเล่าให้ฟังกันครับว่ามันทำงานยังไง
______ as a Service คืออะไร?
พื้นฐานของ FeaaS (Front-end as a Service) ก็จะเหมือนกับบริการประเภท ____ as a Service ทั้งหลาย (เช่น Platform as a Service ที่เดี๋ยวจะอธิบายข้างล่าง) คือ เราเป็นผู้ใช้บริการที่มีหน้าที่ใช้อย่างเดียว ไม่ต้องสนใจเรื่องของการดูแลใด ๆ ทั้งสิ้น
เพื่อให้เห็นภาพมากขึ้น ขอยกตัวอย่างบริการประเภท Platform as a Service เช่น Heroku ที่คนทำเว็บเราใช้กันบ่อยมาก ๆ ครับ
ใน Heroku เราไม่ต้องสนใจเรื่องการเซ็ตอัพ Web Hosting ไม่ว่าจะเป็นเรื่องสเปค Virtual Machine หรือ Environment ใด ๆ เลย เรามีหน้าที่แค่อัพโหลดโค้ดเว็บของเราเข้าไป เสร็จแล้ว Heroku ก็จะให้ URL เว็บเรากลับมา เอาไปใช้ได้ทันที
Heroku รองรับหลากหลายภาษา เช่น PHP, Ruby, NodeJS, Python ฯลฯ แต่ผู้ใช้ Heroku ไม่จำเป็นต้องสนใจเลยว่า Server ใช้ Ubuntu เวอร์ชั่นอะไร และต้องลงอะไรบ้างเพื่อที่จะให้รองรับโค้ดเว็บของเค้าได้ แบบนี้คือบริการประเภท _______ as a Service นั่นเองครับ
Front-end as a Service ล่ะ คืออะไร?
Front-end หมายถึงส่วนของเว็บไซต์ที่ผู้ใช้เห็น หรือถ้าในทางเทคนิค หมายถึงภาษา HTML / CSS / JavaScript บนเว็บไซต์นั่นเองครับ ซึ่งส่วนนี้ผมคิดว่าเป็นส่วนที่เราสามารถเรียนรู้เองได้ และมีประโยชน์มาก ๆ ในหน้าที่การงาน เพราะไม่ว่าผ่านไปกี่ปี เว็บก็ยังต้องใช้ HTML/CSS ครับ
สำหรับคนที่สนใจอยากหัดเรียน HTML / CSS แอดมี ส่วนลด 10% สำหรับคอร์สออนไลน์ HTML5 & CSS3 ซึ่งเป็นเวอร์ชั่นล่าสุด มาให้ครับ
Frontend as a Service ก็เป็นการรวบรวมเอาส่วนต่าง ๆ บนเว็บไซต์ เช่น กล่องล็อกอิน, กล่อง Call to Action, สไลเดอร์ ฯลฯ มาทำเป็นบริการให้เราเอาไป Embed ใส่เว็บเราเองได้ นึกภาพเหมือนเราทำเว็บที่มี iframe ทั้งเว็บเลยครับ
มันฟังดูเป็นไอเดียที่ค่อนข้างแปลกใช่มั้ยครับ? เพราะปกติเวลาเราทำ Front-end บนเว็บไซต์ ยิ่งถ้าเป็นโปรเจคระยะยาว การเขียนโค้ดเองก็จะทำให้เราควบคุมส่วนต่าง ๆ บนเว็บได้ง่ายกว่า และด้วยเหตุผลนี้ พวกเครื่องมือทำเว็บไซต์ที่ลากวางได้ แบบ Dreamweaver ก็เลยไม่ค่อยเป็นที่นิยมสำหรับ Web Developer ด้วยครับ
เดี๋ยวลองมาดูกันว่า FeaaS เค้าชูจุดขายยังไงบ้าง ทำไมพอแอดอ่านไปอ่านมาแล้วถึงรู้สึกว่ามันน่าสนใจ
Front-end as a Service น่าสนใจยังไง
กลุ่มคนที่จะได้ประโยชน์จาก FeaaS มากที่สุดกลุ่มนึงเลยก็คือ “Designer” นั่นเองครับ
แทนที่ทีม เว็บดีไซเนอร์ จะต้องมาเรียนรู้วิธีเขียนโค้ด เค้าอยากได้อะไรก็มาลากวางในเครื่องมือ FeaaS ได้เลย โปรแกรมเมอร์มีหน้าที่แค่ต้องเอาโค้ด Embed ไปแปะให้ตอนแรกแค่นั้นเอง
จากเดิมที่ทีมดีไซเนอร์ต้องออกแบบใน Photoshop หรือ Sketch หลังจากนั้นก็เอาไฟล์ดีไซน์ให้คนทำ Front-end ไปจัดการต่อ พอมี FeaaS ทีมดีไซเนอร์ก็มาออกแบบในนี้ได้เลย ลดการเสียเวลาทำงานสองขั้นตอน
นอกจากนั้น การทำงานกับลูกค้าก็ง่ายขึ้นเยอะ FeaaS บางตัวมีระบบให้ลูกค้าหรือคนในทีมมาคอมเม้นท์บน Front-end ที่เราสร้างขึ้นได้เลย ซึ่งจากประสบการณ์ที่ทีม Designil ของเราส่ง Mockup ไปให้ลูกค้าคอมเม้นท์บนบราวเซอร์ (เราใช้ Invision นะครับ ซึ่งแชร์ดีไซน์เป็นไฟล์รูปเฉย ๆ) พบว่าระบบคอมเม้นท์แบบนี้เวิร์คมาก ง่ายกับลูกค้าและง่ายกับเราด้วย
ลองคิดดูว่าพอเป็นคอมเม้นท์บน Front-end แล้ว ดีไซเนอร์สามารถปรับแก้แล้วส่งขึ้นเว็บจริงได้เลย ไม่ต้องรอแก้ดีไซน์เสร็จแล้วส่งให้โปรแกรมเมอร์ไปแก้ต่ออีกทอดครับ
ยิ่งในโปรเจคที่ลูกค้ามีการแก้ไขเยอะ ๆ การใช้ FeaaS ประหยัดเวลาการทำงานของเราไปได้มหาศาลเลย
และสำหรับคนที่ใช้ Frontend Library ใหม่ ๆ เช่น React ก็ไม่ต้องกลัวว่าจะใช้ FeaaS ไม่ได้ครับ เพราะบริการ FeaaS ที่ชื่อ Mason เค้าออก Library มาเป็นพิเศษสำหรับเว็บไซต์ React แล้ว เราสามารถส่งข้อมูลเข้าไปเป็น JSON เสร็จแล้วเอามาเรนเดอร์บน React App ของเราได้เลย
ถ้าใครใช้ AngularJS หรือ VueJS ก็รอดูกันต่อไปนะครับ แอดว่ามาแน่นอน
ตอนนี้มีที่ไหนให้บริการ Front-end as a Service บ้าง
ตอนนี้แอดเจอบริการด้านนี้อยู่ทั้งหมด 3 แห่งด้วยกันครับ
ตัวแรก ที่เป็นตัวเปิดประสบการณ์ FeaaS ของแอดเลย มีชื่อว่า Mason ครับ ตัวนี้ UI สวย ใช้งานง่าย รองรับทั้งเว็บ HTML ธรรมดาและ React และยังเป็น FeaaS ที่เราสามารถสมัครสมาชิกเข้าไปลองใช้งานได้ทันที
Mason สามารถใช้งานได้ฟรีถึง 100,000 API Call ต่อเดือน (คิดว่า 1 API Call = 1 Component) ซึ่งถ้าเว็บคนเข้าเยอะ ๆ แอดว่ายังไงก็ไม่พอครับ แต่ถ้าใช้แบบแข่ง Hackathon สั้น ๆ ผมว่าโอเคเลย
ตัวที่สอง Frontastic ยังอยู่ในช่วง Developer Preview ก็เลยจะยังเข้าไปใช้ไม่ได้ แต่คอนเซปต์เค้าน่าสนใจจนต้องยกมาพูดถึง คือ เค้าไม่ได้เน้นที่เว็บไซต์ทั่วไป แต่เน้นผูกกับบริการ BaaS (Backend as a Service) และ E-commerce ต่าง ๆ เช่น CommerceTools, Contentful, Shopify ฯลฯ
ซึ่งพอมาทำแบบนี้ผมคิดว่าเป็นแนวทางที่น่าสนใจมาก ๆ เลย เพราะสามารถตีตลาดคนที่อยากมีเว็บไซต์ขายของ แต่ไม่อยากได้เว็บสำเร็จรูปเพราะอาจจะเจอคู่แข่งซื้อธีมเดียวกันมาใข้ตาม แล้วก็ไม่อยากเสียเวลามาเขียนโค้ดเองด้วย
ตัวสุดท้าย Mobify เป็น Front-end as a Service อีกตัวที่น่าสนใจตรงที่จุดขายเค้า คือ เน้นทำ Progressive Web Apps (PWA) ซึ่งเป็นเทรนด์ที่ค่อนข้างใหม่ ซึ่งเน้นเกี่ยวกับการทำให้เว็บไซต์สามารถเข้าถึงความสามารถของ App มือถือได้นั่นเองครับ
สำหรับใครอยากเรียนรู้เพิ่มเติมเกี่ยวกับ PWA สามารถติดตามจาก บทความอธิบาย PWA ของคุณตั้ง Google Developer Expert ในประเทศไทยได้เลย
ผลกระทบของ Front-end as a Service กับคนทำ Front-end
แน่นอนว่าการที่มี Front-end as a Service เข้ามา ก็จะตัดความจำเป็นในการใช้คนมาแปลงดีไซน์ให้กลายเป็นโค้ดครับ อย่างไรก็ตาม เครื่องมือ FeaaS ในปัจจุบันยังไม่ได้เก่งขนาดทำดีไซน์แบบไหนออกมาก็ได้ครับ (หรือทำได้ แต่ใช้เวลาเยอะ)
นอกจากนั้น ดีไซเนอร์ที่จะใช้เครื่องมือ FeaaS จะต้องเรียนรู้การใช้เครื่องมือก่อน และบางเครื่องมือ เช่น ของ Mason ก็เป็นเครื่องมือที่อิงคอนเซปต์จากโค้ด HTML/CSS อาทิ Margin / Padding ทำให้คนใช้ก็ควรจะเข้าใจโค้ดในระดับนึงด้วยครับ
ก่อนหน้านี้ แอดเคยเจอเครื่องมือที่คล้าย ๆ กันชื่อ Webflow เลยลองให้ดีไซเนอร์ที่บริษัทลองใช้ดู ปรากฏว่าเค้าก็เจอปัญหาว่าใช้ไม่เป็นครับ เพราะเค้าถนัดโปรแกรม Adobe Illustrator ที่ใช้บ่อย ๆ มากกว่า ซึ่งอันนี้ก็เป็นปัญหาที่อาจจะเจอถ้าเอา FeaaS ไปใช้งาน
สรุปเรื่อง Front-end as a Service
สรุป คือ แอดมองว่า FeaaS เป็นคอนเซปต์ที่น่าสนใจครับ แต่คิดว่าตอนนี้ยังต้องรอให้เครื่องมือ FeaaS เติบโตก่อน ก็อาจจะได้เห็น Use Case ที่เหมาะสมมากขึ้นในอนาคตครับ
แล้วคุณล่ะ คิดยังไง? อยากฟังความคิดเห็นของทุกท่านที่ทำงานในสายเว็บเหมือนกันครับ มาคุยกันใต้โพสนี้ได้เลย
ถ้าใครสนใจเรื่องเกี่ยวกับ UI/UX และ Front-end Web Development ติดตามเรื่องราวใหม่ ๆ ได้ทางเพจ Designil ของเราเช่นเดิมนะครับผม หรือถ้ามีหัวข้อไหนที่อยากให้พูดถึงก็ Inbox มาคุยกันได้ครับ
บทความที่เกี่ยวข้อง
