สรุปเนื้อหาจากงาน BKK.JS#14 ที่เต็มไปด้วยสาระน่ารู้ในโลกของ JavaScript

JavaScript คือภาษาสำหรับเขียนโปรแกรมที่ได้รับความนิยมสูงจากโปรแกรมเมอร์ทั่วโลก มันเป็นภาษาแบบ object-oriented scripting language ที่นำไปใช้พัฒนาหน้าเว็บควบคู่กับ markup language อย่าง HTML โดยมีเฟรมเวิร์กมากมายให้เลือกใช้ ซึ่งมีการนำ JavaScript ไปใช้งานในเว็บเบราว์เซอร์เป็นหลักเพื่อสร้างประสบการณ์ผู้ใช้แบบไดนามิกและ interactive ผ่านทาง JavaScript style guide ทำให้บรรดา frontend developer นำไปใช้อย่างแพร่หลายเพื่อทำให้หน้าเว็บมีความไดนามิกมากขึ้น

แรกเริ่มเดิมทีที่เปิดตัวโดย Netscape Communications Corporation มันมีชื่อว่า Live Script” หลังจากที่เปลี่ยนชื่อเป็น JavaScript ในปี 1999 มันก็กลายเป็นมาตรฐานที่มีคนนำไปใช้กันอย่างแพร่หลายจนถึงทุกวันนี้

คลาวด์คอมพิวติง (cloud computing) คือการมอบบริการด้านคอมพิวเตอร์ที่ใช้อินเทอร์เน็ตในการเก็บและบริหารจัดการข้อมูลบนเซิร์ฟเวอร์จากระยะไกล ซึ่ง JavaScript ก็เป็นหนึ่งในภาษาที่สำคัญในการใช้งานคลาวด์คอมพิวติง

โลกนี้มีเบราว์เซอร์มากมายอย่างเช่น Chrome, Firefox, Internet Explorer, Opera, Safari เป็นต้น ซึ่งแต่ละตัวก็อ่าน JavaScript ในรูปแบบที่แตกต่างกันไป ทั้งยังให้การรองรับฟีเจอร์ของภาษาที่ใช้เขียนโปรแกรมต่างๆ ได้ไม่เท่ากันอีกด้วย

OpenID

OpenID คือมาตรฐานเปิดที่ใช้สำหรับการยืนยันตัวตนผู้ใช้ผ่านทางผู้ให้บริการ OpenID เช่น Google, Facebook, Twitter ที่นำไปใช้ในการยืนยันตัวตนผู้ใช้บนแพลตฟอร์มต่างๆ

ยกตัวอย่างเช่น แอปพลิเคชัน A ส่งต่อผู้ใช้ไปยัง URL ของผู้ให้บริการ OpenID เพื่อล็อกอิน ถ้าหากล็อกอินได้สำเร็จ ผู้ให้บริการ OpenID ก็จะส่งผู้ใช้ไปยังหน้าของ แอปฯ A และแจ้งเตือนแอปพลิเคชันดังกล่าวว่าผู้ใช้นี้ได้รับการยืนยันแล้ว ในท้ายที่สุด แอปฯ A ก็จะทำการยืนยันตัวตนให้ผู้ใช้โดยไม่ต้องล็อกอินในแอปฯ อีก เนื่องจากแอปฯ A เชื่อถือผลลัพธ์ที่ได้จากผู้ให้บริการ OpenID นั่นเอง

OAuth

OAuth คือมาตรฐานเปิดในการให้อนุญาตแอปฯ (ลูกค้า) เพื่อเข้าถึงบริการจากแอปฯ อื่น (ผู้ให้บริการ) ยกตัวอย่างเช่น เมื่อคุณถูกถามจากแอปฯ A (หรือลูกค้า A) ให้บอกข้อมูล เช่น อีเมล, ชื่อและนามสกุล, สถานที่เกิด, และอาชีพ จากบัญชี Facebook (ผู้ให้บริการ) ที่คุณใช้อยู่ เป็นต้น

ทีนี้ หากคุณอนุญาตให้แอปฯ A ดึงข้อมูลดังกล่าวมา Facebook ในฐานะที่เป็นผู้ให้บริการก็จะอนุญาตให้แอปฯ A ดังข้อมูลเหล่านั้นที่เก็บอยู่ในเซิร์ฟเวอร์ของ Facebook ได้

#100DaysOfCode

#100DaysOfCode เป็น challenge ที่คิดขึ้นมาโดย software engineer ที่ชื่อว่าคุณ Alexander Kallaway เพื่อให้คนลองท้าทายตัวเองด้วยการทำสิ่งใหม่ๆ แล้วดูว่าสามารถทำได้แค่ไหนใน 100 วัน สิ่งที่ challenge นี้แนะนำให้ทำตามคือการเข้าไปที่ Freecodecamp ซึ่งเป็นชุมชนออนไลน์ที่จะให้โอกาสคุณในการเรียนรู้การเขียนโค้ดด้วยการมอบโปรเจกต์ที่ไม่แสวงหากำไรมาให้คุณได้ฝึกฝน

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

Alex Kallaway (ดู Github ได้ที่นี่ดู Github ได้ที่นี่)

หากทำตามกฎง่ายๆ เหล่านี้แล้ว เราเชื่อว่าสุดท้ายแล้วคุณจะต้องตกหลุมรัก JavaScript และกลายเป็น frontend developer ที่ยอดเยี่ยมได้ไม่ยาก

Vue.js

Vue.js คือหนึ่งในเว็บเฟรมเวิร์กที่ได้รับความนิยมสูงสุดที่ developer ยุคนี้นำไปใช้สำหรับการสร้าง user interface (UI) โดยข้อมูลในเว็บไซต์ทางการของ Vue.js พวกเขาบอกว่ามันคือ “เฟรมเวิร์ก JavaScript สายก้าวหน้า” ที่ช่วยให้ developer สามารถสร้าง user interface ที่ทันสมัยได้ มันทำให้คุณสามารถขยายความสามารถของ HTML ด้วย attribute ที่เรียกว่า directive ที่ทำให้แอปพลิเคชันที่เขียนด้วย HTML มีฟังก์ชันเพิ่มขึ้น

มันทำงานในฐานะของ View ใน Model View Controller (MVC) และสามารถสร้าง Single-Page Applications (SPA) อันล้ำเลิศได้ สิ่งที่ทำให้ Vue.js แตกต่างจาก เฟรมเวิร์ก JavaScript อื่นๆ คือ มันมีความ “decoupling สูง” จึงง่ายต่อการขยายฟังก์ชันการใช้งาน

React.js

React.js คือ JavaScript library ที่สร้างโดย Facebook ซึ่งใช้เพื่อสร้าง user interface แบบ interactive ช่วยให้คุณแยกโค้ด UI ที่ซับซ้อนออกจากกันเป็นส่วนเล็กๆ ที่ทำงานอย่างอิสระได้ การประกาศ view ทำให้สามารถคาดการณ์การทำงานของโค้ดล่วงหน้าได้และ debug ได้ง่ายขึ้น ระบบของมันมีความคล้ายคลึงกับ Angular และ Vue.js มาก แต่ทำงานได้เร็วกว่า

คอนเซปต์หลักที่คุณควรรู้ก่อนเริ่มเขียนโค้ดใน React

Component – แต่ละส่วนของเว็บไซต์จะถูกมองว่าเป็น component โดยมันจะรับข้อมูลจากภายนอกด้วย props ซึ่งสามารถสร้างและบริหารจัดการข้อมูลของตัวเองได้ด้วย state การเขียนโค้ดสำหรับ component ก็เหมือนกับการเขียนโค้ด HTML ซึ่ง React นั้นแสดงหน้าเว็บไซต์ด้วย JSX ที่ดูคล้ายกับ HTML มาก แต่เราจะเขียนโค้ดด้วย JavaScript แทนที่จะเป็น HTML

State – คือข้อมูลที่ถูกสร้างและบริหารจัดการโดย component ซึ่งในแต่ละ state นั้น ข้อมูลจะถูกสร้าง, บริหารจัดการ, และแก้ไขได้ แต่ไม่สามารถส่งต่อหรือโอนไปไหนได้

Props – props หรือ properties คือข้อมูลที่ถูกส่งต่อจาก parent component ไปยัง child component ซึ่งข้อมูลจาก props นั้นอ่านได้อย่างเดียว ไม่สามารถแก้ไขโดย component ได้ ซึ่งแตกต่างจาก state