เมื่อเดือนสิงหาคมของปีที่ผ่านมา เว็บไซต์ Sanook.com ได้มีการปรับเปลี่ยน Technology Stack ครั้งใหญ่ ซึ่งทีมงานของเราต่างก็รู้สึกว่าได้เรียนรู้อะไรเยอะมากๆ ซึ่งหลายๆ อย่างนั้น คงจะหาไม่ได้จากการทำโปรเจกต์เล็กๆ

เมื่อ “เว็บๆ นึง” ไม่เท่ากับ “หนึ่งเว็บ”

เนื่องจากทีมงานของเราเป็นทีมที่ดูแลตัวเว็บไซต์ Sanook.com มาตลอดในช่วง 5 ปี ที่ผ่านมา เราเลยรู้ดีว่าปัญหาในแง่ของ Development และ Maintenance ของเว็บไซต์นี้คืออะไร…

จำนวนเว็บไซต์ย่อยๆ ที่ต้องดูแลนั้น มีเยอะมากๆ

เนื่องจาก Sanook.com …


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

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

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


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

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

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

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

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


webpack

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

Webpack คืออะไร ?

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


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

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

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


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

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

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

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

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

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

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


socket.io

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

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

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


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

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

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


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

ใช้ Animation ช่วยในเรื่อง Usability

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

  • แสดงถึงที่มา (ของการเปลี่ยนแปลง) ตัวอย่างที่เห็นได้ชัดๆ เลยก็คือปุ่ม Back to top ครับ การค่อยๆ เลื่อนหน้าจอจากด้านล่างกลับขึ้นสู่ด้านบนนั้นดูดีกว่าการเลื่อนกลับในทันทีตรงที่ผู้ใช้เค้าจะรู้ว่ากำลังเกิดอะไรขึ้นอยู่ครับ หรือพวกไอคอนปุ่ม +(add) ที่พอกดแล้วจะค่อยๆ หมุนแล้วกลายเป็นปุ่ม x(close) ก็เช่นเดียวกันครับ หากมันไม่หมุน เราอาจจะไม่ทันสังเกตเลยก็ได้ว่าปุ่มมันได้เปลี่ยนหน้าที่ไปแล้ว…

Suranart Niamcome

Lead Engineer @Tencent (Thailand)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store