บทนำ - ทำความรู้จัก ECMAScript 2015 หรือ ES6

ความเป็นมา

ทุกวันนี้ สำหรับ Programmer หัดใหม่ หรือนักเรียน นักศึกษา ที่กำลังหัดเขียน Web Application ก็มักจะได้เคยเห็นหรือเคยเขียน เรียนรู้ การพัฒนาเว็บในลักษณะซึ่งผมขออธิบายแบบง่ายๆ ดังรูปข้างล่างนี้ ซึ่งก็สอดคล้องกับ Hosting ที่ให้บริการในบ้านเราส่วนใหญ่ก็รองรับประมาณนี้ครับ

 

จากรูป จะพบว่า การพัฒนา Web Application จะแยกเป็น 2 ส่วนหลักๆ คือ โดย ฝั่ง Back-end หรือ Server จะทำหน้าที่รับคำสั่งร้องขอจากผู้ใช้ (Request) ประมวลผล ติดต่อฐานข้อมูลและส่งผลลัพธ์ (Response) กลับไปหาผู้ใช้ หรือ ฝั่ง Front-end หรือ Client ซึ่งทำหน้าที่หลักในการแสดงผล

ฝั่ง Back-end หรือ Server จะประกอบด้วย Web Server และระบบจัดการฐานข้อมูล ซึ่งมักจะเป็น MySQL (ก็เพราะมันฟรีนั่นแหละครับ) หรือฐานข้อมูลอื่นๆ เช่น SQL Server ส่วนภาษาที่เขียนเพื่อทำงานกับฐานข้อมูล หรือประมวลผลต่างๆ ซึ่งภาษาที่เป็นที่นิยมสุด ก็มักจะเป็น PHP รองลงมาก็คงจะเป็น ASP หรือ ASP.NET ส่วน JSP บ้านเรา ผมว่าก็มีส่วนน้อยมากๆ

ฝั่ง Front-end หรือ Client หรือโปรแกรมที่ทำงานบน Web Browser ก็แน่นอน ต้องมี HTML เป็นตัวหลักในการสร้างเอกสาร html ที่เปิดได้บนเว็บ (ปัจจุบันเป็น HTML5) โดยใช้ CSS (Cascading Style Sheet) ในการจัดการการแสดงผลที่ยืดหยุ่น (ปัจจุบันเป็น CSS3) ส่วนในกรณีที่ต้องการ Effect เข่น Animation ต่างๆ หรือการใช้ Ajax (Asynchronous JavaScript and XML) ก็จำเป็นจะต้องใช้ Javascript เข้ามาช่วย โดยที่ Javascript ก็มีผู้พัฒนา Framework หรือ Library ต่างๆ มากมาย ออกมาช่วยให้ทำงานได้ง่ายขึ้น ตัวอย่างที่แทบทุกคนรู้จักแน่ๆ ก็คงจะเป็น jQuery

อ่านมาถึงตรงนี้ ถ้าใครพบคำศัพท์มากมายที่ไม่รู้จัก ก็คงจะต้องไปหาความรู้พื้นฐานเพิ่มเติมสักหน่อยนะครับ เพราะไม่อย่างนั้น คงจะไปต่อในขั้นต่อๆไปได้ยากเหมือนกัน

เอาล่ะครับ มาว่ากันต่อดีกว่า ก็ถ้า HTML ยังมีพัฒนาจนเป็น Version 5 และ CSS ก็ยังมีพัฒนาจนเป็น Version 3 แล้ว Javascript ล่ะ แน่นอนว่าก็ต้องไม่หยุดนิ่งเช่นกัน และเนื่องจากเกิดแนวความคิดในเรื่องที่ว่า ใครจะเขียนเว็บก็ต้องรู้จักภาษา Javascript อยู่แล้ว แล้วทำไมไม่เอาภาษา Javascript มาทำงานให้ได้ทุกๆ ส่วนทั้ง ฝั่ง Back-end และฝั่ง Front-end โดยไม่ต้องไปใช้ภาษาอื่นๆ มาประกอบในการทำงานล่ะ ซึ่งน่าจะทำให้ชีวิตนักพัฒนาง่ายขึ้นเพราะเรียนรู้ภาษาเดียวก็จบงานได้ ภาษา Javascript จึงมีการพัฒนาเพิ่มเติมอย่างมากมาย โดยมี Framework และ Library ต่างๆ ผุดขึ้นมามากมาย เช่น Node.js, React.js, Express.js เป็นต้น ซึ่งถ้ามีโอกาสผมก็จะเขียนถึงเป็นเรื่องๆ ต่อไป แต่จากการเปลี่ยนแปลงดังกล่าว รูปแบบการพัฒนาเว็บในปัจจุบัน จึงอาจจะเขียนอย่างคร่าวๆ ได้ดังในรูปข้างล่างนี้

จากรูป ของเดิมๆ ก็ยังมีใช้กันอยู่ แต่จะมีภาษาและเทคโนโลยีใหม่ๆ เช่น ถ้าใครจะพัฒนา HTML กับ CSS ก็คงต้องบอกว่า มันเป็นไฟต์บังคับแล้วที่จะต้องใช้ HTML5 กับ CSS3 และเริ่มมีการใช้ฐานข้อมูลที่เป็นชนิด NoSQL หรือฐานข้อมูลที่ไม่ใช้ SQL ซึ่งที่จริงก็มีมากมายหลายประเภท ซึ่งต้องว่ากันโดยบทความเฉพาะเรื่องเลยครับ เช่น MongoDB, Neo4j, Cassandra, Redis ในขณะที่ Javascript หรือ ES5 / ES6 (มันคืออะไร เดี๋ยวว่ากันครับ) ก็ถูกนำไปใช้พัฒนาโปรแกรมได้ทั้งฝั่ง Back-end และ Front-end โดยผ่าน Node.js เป็นต้น และทำให้การประมวลผลและการแสดงผลสามารถเกิดขึ้นได้ทั้งสองฝั่ง เกิดแนวคิดการออกแบบ (Design Pattern) สมัยใหม่ เช่น (MVC) Model-View-Controller,(MVP) Model-View-Presenter และนำไปใช้ในการสร้าง Web API (Web Application Programming Interface) ซึ่งถูกนำไปใช้สำหรับการพัฒนา Mobile Application ด้วย (ยิ่งเขียนไป ดูเหมือนจะมีแต่เรื่องต้องเขียนอธิบายเพิ่มทั้งนั้นเลยนะครับ)

ECMAScript 2015 หรือ ES6 คืออะไร?

พูดง่ายๆ ECMAScript ก็คือชื่อจริงของ Javascript นั่นเอง นึกง่ายๆ เหมือนตัวยาที่มีชื่อจริงหรือชื่อสามัญ คือ พาราเซตามอล แต่มีชื่อเล่นหรือชื่อทางการค้าแตกต่างกันไปตามผู้ผลิตผู้จำหน่าย เช่น ซาร่า ดีคอลเจน ไทลินอล นั่นเอง โดย ECMAScript มีที่มายาวนานมากก่อนจะมาเป็น ECMAScript ทุกวันนี้ นับแต่บริษัท Netscape สร้างโปรแกรม Internet Browser ที่ชื่อ Netscape Navigator และภาษา Script ที่ทำงานกับเว็บขึ้นมา

ECMAScript มีชื่อตามองค์กรที่กำหนดมาตรฐานคือ Ecma International โดยมีข้อกำหนดทางเทคนิคคือ ECMA-262 ภาษา ECMAScript เป็นที่นิยมใช้อย่างแพร่หลายในการทำเว็บ ทั้งนี้ภาษา JavaScript หรือ JScript นั้นก็เป็นส่วนหนึ่งของมาตรฐาน ECMAScript นี้

ECMAScript 2015 เป็นมาตรฐาน ECMAScript ที่เป็นที่ประกาศใช้ในเดือนมิถุนายน 2015  โดยเรียกย่อๆ ได้ว่า ES2015 หรือ ES6 (ECMAScript Version 6) ซึ่งมีการปรับปรุงที่สำคัญจำนวนมากเป็นครั้งแรกนับแต่ ES5 ถูกประกาศเป็นมาตรฐานในปี 2009 อย่างไรก็ตาม ปัจจุบันก็มีการพัฒนาอย่างต่อเนื่อง และจะมี ES7, ES8 ทยอยตามออกมาเรื่อยๆ ครับ แต่ถ้าจะนับการเปลี่ยนแปลงครั้งใหญ่ก็คงจะต้องว่ากันที่ ES6 ที่เราจะศึกษาด้วยกันนี่แหละครับ

ไม่อยากจะเขียนยาวครับ ปูพื้นกันแค่นี้ก่อนดีกว่า เดี๋ยวจะกลายเป็นบทความสำหรับนักพัฒนาระดับสูงไป ผิดไปจากความตั้งใจตอนแรก โดยที่บทความต่อๆ ไป ผมจะขอเรียก ECMAScript 2015 หรือ Javascript แบบสั้นๆ ว่า ES6 นะครับ โดยต่อไปก็คงจะต้องว่ากันในเรื่องเราจะใช้เครื่องมืออะไรกันบ้าง อย่างไรดี

แหล่งศึกษาข้อมูลเพิ่มเติม

เริ่มเรียนพื้นฐาน HTML

http://www.w3schools.com/html/

เริ่มเรียนพื้นฐาน CSS

http://www.w3schools.com/css/

เริ่มเรียนพื้นฐาน Javascript
http://www.w3schools.com/js/

ข้อมูลประวัติความเป็นมาเกี่ยวกับมาตรฐาน ECMAScript ต่างๆ จนถึงปัจจุบัน
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources

What are MVP and MVC and what is the difference?

http://stackoverflow.com/questions/2056/what-are-mvp-and-mvc-and-what-is-the-difference

Web service หรือ Web API สำคัญกับการพัฒนา Web application และ Mobile application ยังไง?
https://khasathan.in.th/archives/792