ช่วงนี้ไปไหนมาไหนก็มีแต่คนพูดถึง Big Data จนหลายๆ คนก็คงจะพอรู้กันแล้วว่ามันก็คือการนำข้อมูลปริมาณมหาศาลมาใช้ให้เกิดประโยชน์นั่นเองฮะ ส่วนจะใช้ tool ตัวไหน มีวิธีการทำอย่างไรนั้น ผมจะขอใช้บทความนี้เล่าให้เพื่อนๆ ฟังคร่าวๆ แล้วกันนะครับ

โลกทุกวันนี้ ไม่แน่จริง อยู่ไม่ได้ !

อย่างที่เรารู้กันดีนะครับว่า ธุรกิจสมัยนี้มีการแข่งขันกันสูงเอามากๆ เลย ถ้าเราหยุดอยู่กับที่ คนอื่นๆ ก็พร้อมที่จะแซงเราได้ตลอดเวลาฮะ ดังนั้นธุรกิจต่างๆ จึงต้องคอยพัฒนาสินค้าและบริการของตนเองอยู่อย่างต่อเนื่อง แล้วไอ้การพัฒนาที่ว่านี้มันจะง่ายขึ้นเยอะเลยล่ะครับ ถ้าเราสามารถ “รู้อนาคต” ได้ก่อนคนอื่น

รู้ก่อน มีชัยไปกว่าครึ่ง

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

เราอยู่ในยุคที่เต็มไปด้วยข้อมูล

แต่ในปัจจุบัน เราไม่ต้องกังวลเรื่องปริมาณของข้อมูลเท่าไรแล้วนะครับ เพราะจากการสำรวจล่าสุดพบว่าในแต่ละวัน ผู้บริโภคนั้นผลิตข้อมูลออกมามากขึ้นเรื่อยๆ ไม่ว่าจะเป็นการเข้าเว็บเพื่ออ่านข่าว การค้นหาข้อมูล การซื้อขายของออนไลน์ การเล่น Social Network พฤติกรรมเหล่านี้ล้วนก่อให้เกิดข้อมูลใหม่ๆ ที่สามารถนำมาวิเคราะห์ได้ฮะ อยู่ที่เจ้าของธุรกิจแล้วล่ะครับว่า จะสามารถนำข้อมูลปริมาณมหาศาลหรือที่นิยมเรียกกันว่า “Big Data” เหล่านี้ มาใช้ให้เกิดประโยชน์อะไรได้บ้าง …

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

ปัญหาที่เราเจอกันบ่อยๆ

1. เสียเวลาติดตั้ง Application

ปัญหายอดฮิตของ web developer ทุกคนเลยก็คือ การเสียเวลาไปกับการติดตั้งพวก application ต่างๆ ที่โปรเจคนั้นๆ จำเป็นต้องใช้ ลองคิดกันเล่นๆ ว่าถ้าเราจะทำเว็บด้วย Wordpress เราจะต้องลงอะไรบ้าง ?

ที่ต้องลงแน่ๆ เลยก็จะเป็น web server อย่าง Apache หรือ nginx ถูกมั้ยครับ จากนั้นเราก็จะต้องลง PHP แล้วก็ database อย่าง MySQL รวมไปถึง tool อย่าง phpMyAdmin ด้วย และที่ขาดไม่ได้เลยก็คือตัว Wordpress เองครับ ส่วนใครอยากจะให้เว็บโหลดเร็วๆ หน่อย ก็อาจจะต้องลง Memcached เพิ่มเข้าไปอีก

จะเห็นว่าขั้นตอนพวกนี้มันกินเวลาไปไม่น้อยเลยล่ะครับ แล้วถ้าโปรเจคนั้นต้องการใช้ application อะไรที่การติดตั้งมันมีความซับซ้อนมากขึ้นกว่านี้ หรือเป็น application ที่เราไม่เคยติดตั้งมาก่อน อย่าง Jenkins, Elasticsearch หรือ Cassandra…

บทความนี้ผมจะพาเพื่อนๆ ไปทำความรู้จักกับ Webpack ซึ่งเป็น tool ที่กำลังได้รับความนิยมมากอีกตัวหนึ่งในการทำเว็บสมัยนี้ครับ ถึงแม้ว่าหน้าที่หลักๆ ของ Webpack จะเป็นการรวมโมดูลของ JavaScript ต่างๆ ให้อยู่ในรูปที่สามารถใช้กับ web browser ได้ ซึ่งจะคล้ายๆ กับการใช้ Grunt หรือ Gulp ร่วมกับ Browserify แต่รับรองว่าฟีเจอร์ที่ Webpack ให้มานั้นน่าสนใจสุดๆ จนหลายคนถึงกับเปลี่ยนมาใช้เจ้านี่แทนเลยล่ะครับ เรามาดูกันซิว่า Webpack นี่มันมีดีอะไร ?

Webpack คืออะไร ?

อย่างที่ผมได้เกริ่นไปก่อนหน้านี้แล้วนะครับว่า Webpack นั้นเป็น tool ที่เอาไว้แปลงโมดูลของ JavaScript ให้อยู่ในรูปที่เว็บสามารถนำไปใช้ได้ หรือพูดง่ายๆ ก็คือ มันเอาไว้แปลง JavaScript Module แบบต่างๆ ไม่ว่าจะเป็น CommonJS, AMD หรือแม้แต่ ES6 Module ให้กลายเป็นโค้ด JavaScript ธรรมดาๆ ที่สามารถรันบน web browser ทั่วไปได้นั่นเอง คุ้นๆ มั้ยครับ ? นี่มันฟีเจอร์ของ Browserify ชัดๆ

จุดเด่นของ Webpack

ในเมื่อสิ่งที่ Webpack ทำนั้น Browserify ก็ทำได้ แล้วเราจะเปลี่ยนมาใช้ Webpack ทำไม ? เหตุผลง่ายๆ คืออย่างนี้ครับ

• เร็ว Webpack อ้างว่าเค้าใช้ async I/O บวกกับการทำ cache หลายชั้น ทำให้ขั้นตอนในการ compile นั้นเร็วสุดๆ ครับ ซึ่งหลังจากที่ผมได้ลองใช้ดูแล้ว ก็ต้องยอมรับว่ามันเร็วจริงๆ…

วันนี้ SiamHTML จะขอพูดถึงแนวทางการเขียน JavaScript แบบใหม่ที่มีชื่อเรียกว่า Flux ครับ แต่อย่าเพิ่งตกใจนะครับว่า Flux นั้นเป็น JavaScript framework ตัวใหม่ที่เราจะต้องมาเรียนรู้กันอีก เพราะจริงๆ แล้วมันก็เป็นแค่ “pattern” หรือ “architecture” ของการเขียนโค้ดเท่านั้นเอง เรียกว่าคล้ายๆ กับการที่เราเขียนโค้ดโดยยึดหลัก MVC นั่นแหละครับ เรามาดูกันว่า Flux นั้นจะช่วยให้การเขียนโค้ดของเราดีขึ้นได้มากแค่ไหน ?

ปกติเราเขียน React กันอย่างไร ?

จากบทความก่อนหน้านี้ ที่ SiamHTML ได้เล่าถึงการทำเว็บแบบ Isomorphic ด้วย React นั้น หากสังเกตดีๆ จะเห็นว่ามันเป็นแค่แอปแบบง่ายๆ เท่านั้นเอง ถูกมั้ยครับ ? เรียกว่าแทบจะไม่มี logic อะไรเลย ทีนี้ถ้าเราจะทำแอปกันจริงๆ มี logic ซับซ้อนยิ่งขึ้น มีการดึงข้อมูลมาจากฐานข้อมูล ถามว่าโค้ด logic พวกนี้ เราควรจะเขียนไว้ที่ไหน ? ภายใน component งั้นหรอ ? ไม่ดีแน่ๆ ครับ

รู้จักกับ Flux

ลองนึกเล่นๆ นะครับว่า ถ้าเราเอา application logic ไปกองไว้ตาม component ต่างๆ เราจะลำบากแค่ไหน debug ก็ยาก เขียน test ก็ยาก แถมยัง reuse ไม่ได้อีก เพื่อเป็นการแก้ปัญหาเหล่านี้ วิศวกรของ facebook เค้าจึงคิดค้น Flux ขึ้นมาครับ

อย่างที่บอกนะครับว่า Flux นั้นเป็นแค่ pattern ของการเขียนโค้ดเท่านั้นเอง ซึ่งหมายความว่าตัวมันเองไม่ได้มีไฟล์อะไรเลย มันเป็นแค่ “แนวคิด” ที่ทีม facebook เค้าใช้ในการเขียน React เพื่อช่วยให้การทำงานเป็นไปอย่างราบรื่นเท่านั้นเอง…

หากใครตามข่าวในวงการเว็บหน่อยก็คงจะเคยได้ยินคำว่า Isomorphic JavaScript หรือที่สมัยนี้เปลี่ยนมาเรียกว่า Universal JavaScript กันมาบ้างใช่มั้ยล่ะครับ หรือถ้าเพิ่งเคยได้ยิน ก็ขอบอกเลยว่ามันกำลังมาแรงมากๆ ในตอนนี้ฮะ วันนี้ SiamHTML เลยจะมาเล่าสู่กันฟังซะหน่อยว่าเจ้า Isomorphic นี้มันคืออะไร รับรองเลยว่ามันเจ๋งสุดๆ ครับ

ทุกวันนี้เราทำเว็บกันอย่างไร ?

ก่อนอื่นเรามาดูกันว่าตั้งแต่อดีตจนถึงปัจจุบัน เราทำเว็บกันอย่างไร ?

• Server เป็นคน Render ในยุคแรกๆ เราจะเอา business logic, route และ template ของหน้าต่างๆ ฝากไว้ที่ฝั่ง server ทั้งหมดครับ คือ server จะทำหน้าที่ render หน้าเว็บทั้งหน้าขึ้นมา แล้วถึงจะส่งหน้าเว็บที่สมบูรณ์แล้ว กลับไปยัง client ทั้งนี้ก็เพราะว่าเครื่อง client สมัยก่อนยังไม่ค่อยแรงเท่าไร ภาระส่วนใหญ่จึงตกอยู่ที่เครื่อง server ครับ
• Client เป็นคน Render ในปัจจุบัน เครื่อง client เร็วขึ้นมากครับ เลยเกิดเทคนิคการทำเว็บรูปแบบใหม่ที่เรียกว่า Single-page application หรือ SPA ขึ้นมา โดยการทำเว็บแบบ SPA นี้ business logic, route และ template ของหน้าต่างๆ จะย้ายมาอยู่ฝั่ง client แทนครับ การ render หน้าเว็บก็จะทำที่ฝั่ง client เลย ไม่ต้องเสียเวลามาโหลดหน้าเว็บใหม่ทั้งหน้าเหมือนแต่ก่อน ส่วน server ก็จะเหลือหน้าที่เพียงอย่างเดียวนั่นก็คือการดึงข้อมูลจาก database มาให้ หรือพูดง่ายๆ ก็คือเอา server มาทำ API นั่นเองครับ…

ทุกวันนี้ หากใครลองเข้าไปดูโค้ด JavaScript ของ project ใหม่ๆ บางตัวบน GitHub แล้วก็อาจจะต้องแปลกใจ เพราะ syntax ของมันนั้นไม่เหมือนกับโค้ด JavaScript ทั่วๆ ไปที่เราเขียนเลย วันนี้เราจะมาหาคำตอบกันครับว่าเจ้าโค้ด JavaScript แบบที่ว่านี้มันคืออะไร ?

ความเป็นมาของ JavaScript

หากเพื่อนๆ เพิ่งเริ่มเขียนเว็บก็อาจจะไม่รู้ว่าจริงๆ แล้ว ประวัติของ JavaScript มันยาวมากกก… ดังนั้น ผมจะขอเล่าคร่าวๆ ละกันว่ามันเกิดมาเพื่อเป็นภาษา script ฝั่ง client ของ Netscape ซึ่งเป็น web browser ชื่อดังในสมัยนั้นครับ แล้วหลังจากนั้นไม่นาน Netscape ก็ได้นำเจ้า JavaScript นี้ไปฝากไว้กับ Ecma International ซึ่งเป็นองค์กรที่ก่อตั้งขึ้นเพื่อทำหน้าที่กำหนด standard ให้กับสิ่งต่างๆ โดยเฉพาะ เพื่อจะให้เข้ามาช่วยกำหนด standard ให้กับ JavaScript ครับ

รู้จักกับ ECMAScript

เนื่องจาก Ecma International รับหน้าที่กำหนด standard ให้กับสิ่งต่างๆ ในวงการไอทีหลายอย่าง เค้าจึงต้องมีการตั้งชื่อเฉพาะให้กับ standard ของภาษา script ฝั่ง client ที่ว่านี้ครับ ซึ่งชื่อนั้นก็คือ ECMA-262 และจะเรียกภาษา script ที่สร้างมาตาม standard นี้ว่า ECMAScript

บางคนอาจจะสงสัยว่า แล้ว standard ที่กำหนดไว้ใน ECMA-262 มันมีหน้าตายังไง ขอตอบว่าในเวอร์ชั่นแรกๆ นั้นจะเป็นพวกการกำหนด syntax ครับ ส่วนในเวอร์ชั่นต่อๆ มาก็จะออกแนวเสริมความสามารถเข้าไปซะมากกว่า ซึ่ง standard ที่ว่านี้ก็ยังมีการพัฒนาอยู่เรื่อยๆ นะครับ อย่าง JavaScript ที่เราเขียนกันอยู่ทุกวันนี้ ก็ถือเป็นการ implement มาจาก ECMAScript ในเวอร์ชั่นที่ 5…

วันนี้เรามาลองทำแอพ chat แบบเรียลไทม์ด้วย Node.js กันครับ สมัยก่อนอาจจะดูยุ่งยาก แต่สมัยนี้เราสามารถทำแอพแนวนี้ได้ง่ายเอามากๆ เลย เพื่อไม่ให้เสียเวลา เรามาเริ่มกันเลยฮะ

แต่ก่อนเราทำอย่างไร ?

คาดว่าหลายๆ คน คงจะเคยทำเว็บที่มีการ refresh ข้อมูลอยู่เรื่อยๆ ใช่มั้ยครับ วิธีทำก็อาจจะใช้การตั้งเวลาดึงข้อมูลมาจาก server ทุกๆ กี่นาทีก็ว่าไป แต่ลองนึกดูครับว่าถ้าจะทำแอพ chat กันแบบเรียลไทม์ การส่ง request ไปหา server เพื่อจะถามว่ามีใครส่งข้อความอะไรมาให้เราแล้วหรือยังก็คงจะต้องถี่เอามากๆ เลย บางทีส่งไปแล้วปรากฏว่าไม่มีใครส่งอะไรมาหาเราเลยก็เท่ากับว่า request นั้นสูญเปล่าถูกมั้ยครับ แล้วที่สำคัญ ในแต่ละ request นั้น มันก็จะมี overhead ด้วย เผลอๆ overhead อาจมีขนาดใหญ่กว่าข้อความที่คุยกันด้วยซ้ำไป วิธีนี้จึงไม่น่าจะเวิร์คกับแอพของเราครับ

รู้จักกับ Web Socket

วิธีที่น่าสนใจกว่าก็คือการสื่อสารกันผ่านสิ่งที่เรียกว่า Web Socket ครับ เพื่อให้เห็นภาพชัดๆ ผมขอเปรียบเทียบว่ามันก็เหมือนกับการสร้าง “ท่อ” เชื่อมระหว่าง client กับ server เข้าด้วยกันครับ โดยจุดเด่นของ Web Socket ก็คือ มันจะเป็นการสื่อสารแบบ 2 ทางครับ คือใครจะส่งข้อมูลไปหาใครก็ได้ นั่นหมายความว่าเราจะไม่ต้องคอยถาม server แล้วว่ามีใครส่งอะไรมาให้เรามั้ย เพราะเราจะให้ server เป็นคนบอกเราเองครับ นอกจากนั้น เจ้าท่อที่ว่านี้มันจะต่อค้างเอาไว้ด้วยนะครับ คือไม่ได้หายไปเวลาส่งข้อมูลเสร็จ นั่นหมายความว่าการส่งแต่ละครั้งจะไม่มีปัญหาเรื่อง overhead แล้วล่ะครับ…

หลังจากที่ผมได้ลองศึกษาการเขียนแอพ Android ดูคร่าวๆ ก็พบว่ามีเนื้อหาหลายๆ ส่วนเลย ที่ front-end web developer อย่างเราๆ จะได้เปรียบในการทำความเข้าใจครับ เพราะหลักการโดยรวมๆ นั้นไม่ได้แตกต่างกันมาก เรียกได้ว่าหากใครเป็น front-end web developer อยู่แล้ว และสามารถเขียน Java ได้ด้วย การเขียนแอพ Android นี่ถือเป็นสกิลที่ห้ามพลาดเลยล่ะครับ

จะเขียนแอพ Android ไปทำไม ?

สาเหตุที่ผมเขียนบทความนี้ขึ้นมาก็เพราะเสียดายสกิลของเพื่อนๆ ครับ อย่างที่บอกไปแล้วว่า หากเราเขียน Java เป็นอยู่แล้ว การเขียนแอพ Android นั้น ถือเป็นการต่อยอดที่น่าลงทุนเอามากๆ ครับ บางคนอาจจะกลัวว่าเขียนเป็นแต่ html, css, js แบบนี้จะไปรอดมั้ย ? บอกเลยว่ารอดครับ เดี๋ยวผมจะพยายามโยงการเขียนแอพ Android เข้ากับโลกของ front-end web development ที่เราคุ้นเคย แล้วอะไรๆ ก็จะง่ายขึ้นเองครับ ส่วนภาษา Java นี่ หากใครยังไม่เคยเขียนมาก่อนก็ไม่ต้องกังวลไปครับ เพราะถือเป็นภาษาที่เรียนรู้ได้ไม่ยากเลย

ภาพรวมของการเขียนแอพ Android

การเขียนแอพ Android นั้น สิ่งที่เราต้องทำจะแบ่งออกเป็น 2 ส่วนหลักๆ เท่านั้นเองครับ

• UI Implementation ui ถือเป็นส่วนที่สำคัญเอามากๆ ของแอพเลย ความท้าทายของการทำ ui ใน Android นั้นอยู่ที่ความหลากหลายของ device ครับ บางคนทำแอพออกมาดูดีมากๆ ใน mobile แต่พอไปใช้กับ tablet แล้วคนละเรื่องเลย…