ผมมีโอกาสได้ไปเป็น Speaker ในงาน Thai Adobe User Group ครั้งล่าสุด โดยไปพูดในหัวข้อของ Adobe Edge Preview 4 เลยอยากเอามาเล่าถึงสิ่งที่พูดไปในงานนี้อีกครั้งกันครับ

Slide ของผมจากงานนี้ Download ได้ที่ http://cl.ly/DjQK

Adobe Edge คืออะไร?

มันคือ Adobe Flash ที่ Export งานออกมาเป็น HTML5+Javascript (ภายในมี jQuery เป็น Core หลัก)

ย้อนอดีตกันซะหน่อยว่าทำไมถึง Adobe ถึงต้องทำ Edge ขึ้นมา

  • ตลอด 10 ปีที่ผ่านมาโลกของ Website Interactive ถูกยึดครองด้วยเทคโนโลยีที่เรียกว่า Flash
  • ก่อนหน้าจะมี Flash Interactive บน Website โลกของ Website เริ่มจาก… GIF Animation ลองนึกถึงตัวการ์ตูนดุ๊กดิ๊กๆ บนหน้าเว็บไซต์มากมาย
  • ถัดมา Javscript ถ้านึกไม่ออกลองนึกถึง ฉากหิมะตก ดอกไม้โรยเต็มเว็บไซต์ ที่พอเราเปิดหน้าเว็บทีไร เครื่องคอมพ์เราจะอืดขึ้นทุกทีๆ
  • จากนั้นก็ถึงยุคของ Flash Interactive สมัยนั้นยังอยู่ในชื่อ Macromedia Flash
  • นอกเรื่องอีกนิดขณะนั้น Macromedia Director อีกตัวที่ทำตลาด Interactive อยู่ตอนนั้นมีลักษณะคล้ายๆ กันคือต้อง run ผ่าน Player plug-in บน Web Browser แต่เจ๋งกว่าตรงที่ Director มีภาษา Progamming เฉพาะเพิ่มเติมด้วยชื่อ Lingo
  • Macromedia Director หานักพัฒนายากและทำงานได้ช้าบน Web Browser เนื่องจาก file ที่ Export ออกมามีขนาดใหญ่ จึงนิยมนำไปใช้ในสื่อพวก CD/DVD มากกว่าสมัยนั้น Menu Interactive ใน DVD ส่วนใหญ่ก็ทำจาก Director

Flash ครองโลก Interactive บน Website ด้วยความสามารถของการทำงานแบบ Vector และ Bitmap ทำให้การทำงานบน Website ในช่วงเวลานั้นที่เน้นเรื่องขนาดไฟล์เป็นสำคัญ ทำงานได้ราบรื่นและโดดเด่นกว่าเทคโนโลยีใดในช่วงเวลานั้น

  • Flash มีเครื่องมือที่ใช้งานง่ายในการจัด layout ของ object ชิ้นต่างๆ ซึ่งง่ายกว่าการทำเว็บในสมัยนั้น (จนถึงปัจจุบัน) และเพิ่มความสามารถให้สูงขึ้นอีกใน Flash 5 ด้วยภาษาโปรแกรมิ่งที่ชื่อว่า Action Script
  • Action Script เป็นตัวช่วยให้ดึง Programmer มาร่วมด้วยมากขึ้นเพราะสามารถ control การทำงานของ Object ต่างๆ ได้ด้วยภาษา Programming ทั้งหมด
  • เมื่อโลก Internet ขยายตัวกว้างขึ้นตามจำนวนผู้ใช้ที่เพิ่มสูงขึ้นเรื่อยๆ ทุกปี Adobe ก็เข้าซื้อกิจการของ Macromedia ในปี 2005 สมัยนั้น Adobe มีเงินเหลือเฟือเนื่องจากครองตลาด Software สิ่งพิมพ์อยู่
  • Adobe รู้ตัวดีว่าสื่อ Online และกระแสธุรกิจ dot com คืออนาคตที่ไม่สามารถหลบเลี่ยงได้ ตัดสินใจซื้อบริษัทที่กำลังเป็น 1 ใน Software สำหรับพัฒนาสื่อ Online คงดีกว่าปล่อยให้เป็นคู่แข่งและต้องทำ Software มาแข่ง
  • Adobe เมื่อได้ Macromedia มาก็ตัด Software ที่ซ้อนทับกันออก ส่วน Software สำหรับสร้างสื่อ Online ก็คงนำมาชูเป็นจุดขาย และนำมาขายเป็น Set สำหรับนักพัฒนาเพื่อให้รู้สึกว่า Software ของตนนั่นถูกลงโดยออกมาในชื่อ Creative Suit
  • Adobe Flash ถูกพัฒนาให้สามารถเชื่อมต่อกับ Hardware ได้เช่นเชื่อมต่อ Webcam หรือผลักการประมวลผลเฉพาะทางอย่าง pyshic engine ไปใช้ GPU แทน CPU เพื่อให้ทำงานได้เร็วขึ้นและ CPU มีเวลาว่างเหลือไปทำการคำนวณอย่างอื่น
  • จาก Interactive บน Website ทั่วไปที่ตอบสนองต่อ action ของผู้ใช้งาน และ animation ที่น่าตื่นเต้น ก็เริ่มเข้าสู่โลกของ Game Interactive บน Website

Adobe Flash ค่อยๆ ขยับไปสู่โลก 3D เพื่อเพิ่มความสมจริงใน Flash Game ให้สมจริงและสนุกมากขึ้นเรื่อยๆ

  • เมื่อโลกของเกมส์เข้าสู่ยุคสมัยของ Game Online และ Social Network เจ้าแห่ง Social Network อย่าง Facebook ก็มีเกมส์ยอดนิยมที่สร้างด้วย Flash ให้เล่นอย่างติดงอมแงม อย่าง Farmville
  • อะไรๆ ก็ดูจะสวยงามไปหมดสำหรับโลกของ Flash ทุกหนทางของ Application มุ่งสู่โลกของ Web Application ยิ่งส่งผลให้เทคโนโลยีที่สามารถเชื่อมต่อกับ Hardware ได้อย่าง Flash ยิ่งหรูหราขึ้นไปอีก
  • แต่แล้วก็ถึงจุดเปลี่ยนของโลกอีกครั้งเมื่อ Smart Mobile จาก Apple ที่ชื่อว่า iPhone โผล่มาเปลี่ยนวิถีชีวิตของผู้ใช้อินเทอร์เน็ต ด้วยยอดขายถล่มทะลาย และ App(lication) ที่สวยงาม รวมถึงเกมส์ที่สนุกสนานบนจอ Multitouch ที่ PC ยังทำไม่ได้

Steve Jobs ประกาศกร้าว iOS ไม่รองรับ Flash ด้วยเหตุผล บลาๆ แต่หลายนักวิจารณ์บอกว่าเป็นหมัดสวนคืนหลังจากที่ Jobs เคยโดน Adobe ปฏิเสธเรื่อง Software ตัดต่อ VDO บน Mac OSX เมื่อช่วงก่อนเปิดตัว Mac OSX

  • นั่นเลยทำให้ Jobs ทำ Final Cut Studio ขึ้นมาแข่งและความสัมพันธ์ระหว่าง Apple กับ Adobe ก็แย่ลง โดยหัวหอกที่มารับผิดชอบ Project Final Cut ก็คือนักพัฒนาจาก Macromedia ที่เคยเอา Project Software VDO Editing ไปเสนอ Adobe แต่โดนปฏิเสธเพราะมี Premiere อยู่แล้ว
  • Adobe พยายามหาช่องทางให้ Flash ลงไปเล่นในตลาดของ iPhone ถึงขนาด Update ให้ Flash CS5.5 สามารถ complie เป็น Native app บน iOS ได้ แต่ Apple ก็ออกมายืนยันว่าจะให้ไม่ให้ App เหล่านี้ผ่านขึ้น App Store
  • เมื่อ iPad เปิดตัว Adobe จึงใช้ความเป็นเจ้าตลาด Publishing สร้างเส้นทางรุกใหม่นั่นคือ Digital Magazine App แรกที่ฮือฮามากคือ Wired Magazine ส่วนของไทยคือ Mars Magazine เข้าใจตรงกันก่อนว่าไม่ใช่แค่เอา PDF มาบีบขนาดไฟล์แล้วเอามาขายนะ แบบนั้นเป็นแค่ E-Magzine
  • เมื่อ Apple ครองตลาด Mobile Device (Mobile&Tablet) ไว้แบบนี้แถมประกาศว่าตนจะเดินตามมาตราฐาน HTML5 ดังนั้น Developer ทั้งหลายก็เริ่มหันเข้าสู่เส้นทางนี้มากขึ้นเรื่อยๆ

App กลายเป็นเครื่องมือของบริษัทที่สื่อถือว่ามีวิสัยทัศน์และเป็นผู้นำ และ Google เจ้าพ่อแห่งวงการ Search Engine ก็ต้องรีบกระโดดลงมาแย่งชิ้นเค้กนี้ด้วยการใช้แนวคิดเหมือน Microsoft ยุคก่อตั้งคือ ขายแต่ OS License ที่มีชื่อว่า Andriod

  • Andriod มีผู้ออกมาสนับสนุนมากมายโดยเฉพาะผู้ผลิตมือถือที่เสียส่วนแบ่งการตลาดไปเรื่อยๆ อย่าง HTC และ Samsung กลายเป็นว่า Smart Phone เกือบทุกยี่ห้อต้องเป็น Andriod แม้จะมีการพัฒนา OS ของตนเองออกมาแทรกด้วยบ้างก็ตาม
  • สุดท้ายส่วนแบ่งการตลาดของ Android และ iOS ก็ขับเคี่ยวกันอย่างเมามันส์ กลายเป็นมาตราฐานว่า Agency ถ้าจะขายงานด้วยการทำ App ต้องทำทั้ง Andriod และ iOS ถึงจะเจ๋งจริง
  • การพัฒนา App บน iOS ต้องเขียนด้วยภาษาที่ชื่อ Objective C ส่วน Android ก็อ้างอิงจาภาษา Java เป็นแนวทาง ซึ่งนักพัฒนาส่วนใหญ่เขียนเป็นแค่อย่างใดอย่างหนึ่งก็น้ำตาเล็ดแล้ว
  • นักพัฒนาสาย Progammer สามารถปรับตัวและเรียนรู้ที่จะทำ App ได้ไม่ยากนัก แล้ว Designer หละจะทำอย่างไร?
  • Designer ณ เวลานั้นจะแบ่งเป็น 2 กลุ่มใหญ่คือ Web Designer และ Graphic Designer กลุ่มแรกดูจะโยกย้ายมาออกแบบงานบน Mobile Device ได้มากกว่า

Web Designer จะชินกับระบบการออกแบบ Website มาก่อนจึงรู้สึกปรับตัวแค่ในเรื่องขนาดของอุปกรณ์แสดงผลและ User Experience จากการ Click มาเป็น Swipe & (Multi)Touch

  • รวมถึง Web Designer ส่วนใหญ่จะมีความสามารถในการเขียนเว็บขั้นพื้นฐานติดตัวมาอยู่แล้วด้วย (จำเป็นต้องทำได้เพื่อให้อยู่รอดในค่าจ้างที่ถูกตัดราคาลงทุกวัน)
  • ทั้งหมดนี้จึงเป็นที่มาของ Mobile Framework ที่สามารถนำ HTML CSS Javascript มาประกอบเป็นไส้ในแล้ว complie ออกมาเป็น App ได้ทั้งบน Android และ iOS ด้วยการเขียนเพียงครั้งเดียว
  • ตัวแรกที่ได้รับความนิยมอย่างสูงคือ Sencha ที่รวมเอา ExtJS มาไว้ในตัวและตามมาด้วย PhoneGap และ Titanium
  • ส่วน Xcode เครื่องมือของ Apple ก็สามารถยัดไส้ในเป็น HTML ได้เช่นกันเราเรียกกันว่า WebView
  • PhoneGap ได้รับความนิยมสูงเพราะเป็น Opensource ส่วน Titanium เริ่มต้นฟรี แต่อยากลงลึกต้องเสียตังค์มี business model ออกมาเก็บตังค์ได้มากมายจริงๆ
  • แต่การทำงานของ App ที่เขียนโดยใช้เทคนิค WebView มันไม่เร็วเท่าเขียนแบบ native จริงๆ ได้อยู่ดี ยกตัวอย่างเช่น Facebook App บน iOS
  • ทำไมเขียนด้วย WebView แล้วมันถึงทำงานไม่ smooth? เพราะว่าการทำงานส่วนใหญ่โดยเฉพาะ Animation ยังต้องพึ่งพิง Javascript เป็นหลัก ซึ่งแค่การ Render ภาพก็ทำให้ CPU ทำงานอย่างหนักและกิน Memory ไปเกือบหมดแล้ว
  • ทางออกที่ช่วยได้ดีที่สุดคือผลักหน้าที่การทำ Animation ไปไว้ให้กับส่วนอื่นนั่นก็คือ CSS ซึ่งใน Version 3 มีการทำ Animation ได้ด้วย
  • เมื่อ CSS3 เป็นเทคโนโลยีมาตราฐานแน่นอนแล้วผู้ผลิต chip ประมวลผลเลยใส่ความสามารถในการคำนวณของ CSS3 ลงไปใน GPU ด้วย ซึ่งผลที่ได้คือการลดการทำงาน CPU ลง และ GPU ช่วยให้ประมวลผลเฉพาะด้านได้เร็วขึ้น

สรุปได้ว่า HTML และ Javascript ยกหน้าที่ให้ CPU ประมวลผลยิ่งหลาย Core ก็ยิ่งเร็ว ส่วนบางคำสั่งใน CSS ที่ต้องประมวลผลอย่างหนักเช่น Animation, Transition, Transition3d, Rotate ก็ผลักไปให้ GPU รับผิดชอบแทน

  • Sencha ออกตัว App บน Desktop เพิ่มมาเพื่อช่วยให้ Designer ทำงานได้ง่ายขึ้นชื่อว่า Sencha Animator โดยจะมีลักษณะเหมือน Flash แต่จะ export ชิ้นงานออกมาเป็น HTML+CSS+Javascript โดยมี ExtJS เป็น Javascript Framework หลัก
  • หลังจาก Sencha Animator ออก Version 2 ออกมาพร้อมกับค่า license ที่แพงมหาโหด $199 ซึ่งแสดงให้เห็นว่า Sencha Animator สามารถขายได้ มีนักพัฒนาสนใจนำไปใช้จริง ไม่นาน… Adobe ก็ปล่อย Edge Preview 1 ออกมา
  • โดยส่วนตัวผมมองว่า Edge Preview 1 ยอมรับว่ายังขาดอะไรหลายๆ อย่างที่ Sencha Animator ทำได้ ทั้งๆ ที่ออกมาทีหลัง
  • แต่ข้อดีคือ User Interface ที่ใช้งานง่าย โทนสีเป็นสีเข้มเหมือน Software Video Editing ในค่าย Adobe คือเทาดำ และที่สำคัญ Export ออกมาได้ HTML5 และ Javascript ที่มี jQuery เป็น framework หลัก
  • จะไม่มี CSS file แยกออกมาแต่จะใช้การ Javascript Render Object ต่างๆ ออกมาเป็น HTML5 และ CSS3 รวมไปถึง Animation ต่างๆ ในรูปแบบ CSS3 ที่ cross browser อีกด้วย (มีการใส่ prefix ที่แตกต่างกันไปในแต่ละ Browser)

ติดตามต่อใน Episode 2 เร็วๆ นี้…

No related posts.