bkk.js#15

3 เรื่องคุณต้องรู้ ! จากงาน BKK.JS Back in Business

พูดถึง js ( javascript ) แล้วในประเทศไทยนั้นก็มี event ที่เกี่ยวข้องกับภาษานี้ค่อนข้างเยอะเลยทีเดียว เป็นภาษาที่ง่ายต่อการเรียนรู้และเป็นกระแสในปัจจุบัน โดยบทความนี้จะสรุปงานในแบบที่ผมจดบันทึกนะครับ งาน BKK.JS นั้นจัดมาเป็นครั้งที่ 15 แล้ว จะเป็นอย่างไรไปอ่านกันเลย

งาน BKK.JS เกี่ยวกับอะไร ?

bkk.js#15

เป็นเหมือนงาน event tech ครับโดยตัวงานจะเกี่ยวข้องกับพวก javascript นั่นแหละ แล้วก็พวก technology web ใหม่ๆมาแบ่งปันแชร์กันใครแบบศึกษาอะไรมาก็มาแบ่งปันครับ ใครยังไม่เคยไปก็อยากให้ลองไปดูครับ ทั้งบรรยากาศและ connection ค่อนข้างเยอะเลยทีเดียว

มีอะไรบ้างกับงาน bkk.js#15

หลักๆมี 3 เรื่องของงานนี้ คือ

  • Thailand Web Develper Survey 2021 by Boonjira Angsumalee
  • Web3 in Action by Panjamapong Sermsawatsri
  • How WASM changed Web Developement by Warat Wongmaneekit

Thailand Web Develper Survey 2021 by Boonjira Angsumalee

session แรกคือเป็นเรื่องข้อมูลที่ทำการ survey มาจาก dev 408 คนโดยมีไฟล์ให้ download คุณสามารถ download มาดูได้เลยผมอาจจะเอามาไม่หมดเอาแค่สิ่งที่น่าสนใจหลักๆมาเล่าสู่กันฟังพอนะครับ

สรุปข้อมูล Career & Suggestion งาน BKK.JS

• ผลสํารวจชุดนี้ มี Developer ในประเทศไทยทําแบบสํารวจทั้งสิ้น 408 คน พบว่าโดยส่วนใหญ่แล้ว Developer ที่ทำแบบสํารวจจํานวนมากเป็นเพศชายคิดเป็นสัดส่วนถึง 86.70% ซึ่ง Developer ที่ทำแบบสํารวจส่วน ใหญนั้น จะมีอายุประมาณ 25 ปี และจะมีประสบการณ์การทํางานอยู่ที่ประมาณ 1-2 ปี (อายุเฉลี่ยของคนไทยที่จบการศึกษาปริญญาตรีอยู่ที่ประมาณ 23 ปี) โดยที่ Developer ที่ทำแบบสํารวจส่วนใหญ่มีรายได้อยู่ที่ประมาณ 30,000 – 49,999 บาทต่อเดือน

• Developer ที่ทำแบบสํารวจส่วนใหญ่นั้น อาศัยอยู่ที่กรุงเทพมหานคร และในปัจจุบัน ตําแหน่งที่ Developer ที่ทำแบบ สํารวจมากที่สุดคือ Software Engineer โดยส่วนใหญ่ที่มี Developer ที่ทำแบบสํารวจ ต้องทํางานด้วยจะมีจำนวนคนในทีม ประมาณ 6-20 คน รองลงมาคือทีมขนาด 3-5 คน โดยที่ 28% ของ Developer ที่ทำแบบสํารวจ มีโอกาสได้ทำงานกับคนต่างชาติ

• ในส่วนของปัจจัยที่มีผลต่อรายได้ของ Developer ที่ทำแบบสํารวจหลักๆเลยคือ อายุงาน ยิ่งอายุงานมากขึ้น พบว่ารายได้ก็จะยิ่งสูงขึ้นตาม

เกือบ 50% มีประสบการณ์น้อยกว่า 5 ปี สังเกตุว่าคนใหม่ๆในระบบก็กำลังเพิ่มขึ้นและคนที่ทำมานานก็ยังทำอยู่ในระบบเช่นกัน แปลว่าความมั่นใจในสายงานนี้ก็ค่อนข้างไกลนะผมว่า ทุกวันนี้ผมก็ยังเขียนโปรแกรมอยู่ทำมาเป็น 10 ปีแล้วเทคโนโลยีเปลี่ยนแปลงตลอด แต่ถ้าเรามีพื้นฐานที่เข้าใจมันแล้วก็อยู่ได้ยาวๆ

เกือบ 30% รายได้อยู่ประมาณ 30k – 50k เดี๋ยวเราไปดูพวกเกี่ยวกับ tool ต่างๆที่เราใช้งานกันดีกว่าครับ ว่าแต่ละเครื่องมือใครใช้ภาษาอะไรเครื่องมือไหนฮิตบ้างไปดูกันครับ

ภาพรวมของการใช้ Frontend Framework ในประเทศไทยงาน BKK.JS

จากกราจะเห็นได้ว่า 5 อันดับแรกของ Frontend Framework ที่ Developer นำมาใช้งานกันนั้นต่างเป็น Library ของภาษา Javascript โดยมีมากกว่า 50% ของคนที่ได้ลองใช้งาน React.js นั้นยังคงใช้งาน React.js ต่อไปในปัจจุบันทำให้ Developer ส่วนใหญ่จึงคุ้นเคยและนำ React.js ไปใช้งานจริงมากที่สุด รองลงมาจะเป็น Vue.js และ Next.js ตามลำดับ

หากเจาะลึกลงไปในพฤติกรรมของผู้ใช้งาน Frontend Framework ต่างๆก็จะพบว่า Developer ที่ใช้ React.js ก็ยังคงใช้งานมาเป็นประจำต่างจาก Vue.js ที่แม้การใช้งานปัจจุบันสูงเกือบ 50% แต่กลับถูกนำมาใช้งานจริงเพียงบางครั้งเท่านั้นในทางกลับกัน Flutter ถือเป็นหนึ่ง Frontend Framework ที่ Developer คุ้นเคยและมีการทดลองเล่นมากที่สุดแต่กลับมีเพียงแค่ 16% เท่านั้นที่เลือกมาใช้งานจริง

ในส่วน Frontend Framework ที่ถูกเลิกใช้งานมากที่สุดคือ Angular.js ที่เคยได้รับความนิยมเป็นอย่างมากในปี 2016 นอกจากนั้นแล้ว Vue.js ที่มีจำนวนผู้ใช้งานมากเป็นอันดับ 2 กลับมีแนวโน้มในการเลิกใช้งานมากเช่นกันแสดงให้เห็นถึงความผันผวนของผู้ใช้ Frontend Framework ได้เป็นอย่างดี

ส่วนของ Frontend Framework ที่ยังไม่ได้รับความนิยมมากสำหรับ Developer ในไทยได้แก่ Solid, Preact และ Lonic ตามลำดับ

ภาพรวมของ UI Framework

ต่อด้วยเรื่อง User Interface ( UI ) อันนี้ผมอาจจะไม่ได้เอารูปมานะครับเพราะว่ารายละเอียดไม่ได้เยอะเท่าไรเอาเป็นว่าเล่าให้ฟังดีกว่าครับเรื่อง UI Framework ก็จะเป็น material ui กับ ant design สองตัวนี้ถูกใช้งานเยอะเพราะเหตุผลว่า React.js ถูกใช้งานเยอะที่สุดรองมาก็จะเป็นตัว vuetify และ element ui ซึ่งก็เป็น UI Framework ของ Vue.js ครับ

แต่ด้วย trend กำลังจะเปลี่ยนผ่าน ทำให้ตัว ant design, vuetify, material ui กำลังจะถูกเลิกใช้ไปในที่สุด

ภาพรวมของ CSS Framework

Bootstrap ยังคงมาเป็นอันดับ 1 มีการใช้งานถึง 73% เลยทีเดียวและยังคงใช้งานเรื่อยมาถึงปัจจุบัน แต่ถึงขนาดนั้นเองคนก็กำลังจะเลิกใช้งานมันเช่นเดียวกันครับ โดยตัว tailwind กำลังมาแรงเหตุผลเพราะว่าเบาง่าย ไม่ต้องมาตั้งชื่อ class ให้วุ่นวาย ภาพรวมคือ ถึงแม้ Bootstrap จะฮิตแต่ก็กำลังเลิกใช้

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

ภาพรวมของ Backend

Node.js และ PHP ยังคงเป็นอะไรที่ฮิตตลอดกาลเหตุผลเพราะว่าตัว node.js เองก็ฮิตในปัจจุบันและการใช้งานพวก framework อย่าง express ที่เรียนรู้ง่ายและเข้าใจค่อนข้างง่ายเลยทีเดียว เช่นเดียวกับ PHP ที่ยังคงฮิตเหตุผลเพราะว่า WordPress เองยังคงใช้งานอยู่ในปัจจุบันและไม่มีท่าทีจะหายไปด้วยครับ

กว่า 62.37% ของ Developer ที่ได้ลองใช้ Express นั้นต่างตัดสินใจใช้งานต่อไปเรื่อยๆทำให้มันฮิตมากกว่าตัวอื่นถึง 2 เท่าเลยทีเดียว

อีกภาษาหนึ่งที่ได้รับความนิยมคือ .NET โดยตัว Framework คือ .NET CORE และ ASP.NET ซึ่งเป็นเครื่องมือและภาษาที่ฮิตมาตั้งแต่ปี 2006

Ruby on Rail เหลือเพียง 24.29% จากผู้ใช้งานทั้งหมด 366 คน ใครใช้ภาษานี้อยู่อาจจะต้องหันไปลองศึกษา Node.js ดูครับ

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

ภาพรวมของ Build tool

Webpack มาเป็นอันดับ 1 เลยมีคน 69.95% ที่จะใช้งานต่อหลังจากได้ทดลองใช้แล้ว ส่วนตัวคิดว่า vite ก็กำลังมาเหมือนกันเร็วมากๆ และอยากให้ไปลองเล่นดูครับ เร็วจัด

ภาพรวมของ Testing Tool

คนส่วนใหญ่เลือกใช้ Jest เป็นหลักครับอันรองลงมาคือ Cypress อันนี้ผมเคยใช้นิดหน่อยถือว่าเป็นตัว testing ที่ค่อนข้างดีนะคือมีแบบ UI ด้วยโดยคนใช้อาจจะไม่จำเป็นต้องเป็น Developer ก็ได้ สามารถทำซ้ำแบบให้กดคลิกๆ ตรงไหนอย่างไร ได้หมดและสามารถจำการทดสอบได้หมดเหมือนอัดเป็น vdo ครับลองไปเล่นดูได้

ภาพรวมของ Cloud Service

AWS ยังคงเป็นอะไรที่ฮิตที่สุดถึง 55.18% รองลงมาคือ Google Cloud คนส่วนใหญ่จะเลือกใช้ AWS ก่อนสำหรับงานจริง

ภาพรวมของ Database

ไม่มีอะไรมากให้ภาพมันเล่าเรื่องแทนแล้วกัน คนส่วนใหญ่ยังคงอยู่กับ MySQL ครับเหตุผลคิดว่าน่าจะเป็นเพราะมันยังคงถูกใช้เป็นพื้นฐานในการฝึกหัดเขียนโปรแกรมและหนังสือสอนเกือบทุกเล่มจะสอนให้เชื่อมต่อกับ MySQL ก่อนเป็นอันดับแรกๆนะอันนี้เป็นความคิดเห็นส่วนตัวนะครับ

ภาพรวมเรื่องอื่นๆ

เป็นที่น่าสนใจมากๆคือ Developer จะเลือกทำงานกับองค์กรนั้นๆ คือเรื่อง สุขภาพจิต ถึง 77.72% อีกเรื่องหนึ่งที่สำคัญไม่แพ้กันเลยคือ เงินเดือนและสวัสดิการ ตามมาด้วย เพื่อนร่วมงาน และ วัฒนธรรมองค์กร ตามลำดับ เพราะฉะนั้นหากเป็นองค์กรมาอ่านก็สามารถปรับตามที่เห็นสมควรได้ครับ

Web3 in Action by Panjamapong Sermsawatsri

Web3 ประกอบด้วย Descentralized, Permissionless และ Trustless ถ้าแปลเอาง่ายคือ ไม่มีตัวกลาง ไม่มีลำดับชั้นของการเข้าถึงข้อมูลทุกคนสิทธิ์เท่ากันหมดและไม่เชื่อใครทั้งนั้น เรามาปูพื้นฐานจากบทความนี้กันก่อนได้ครับ

เช็คความพร้อมแพ็คความรู้เตรียมเข้าสู่โลกแห่ง Web 3.0 กัน

สมัยก่อน Web2 มันคือการที่มีการ Read & Write Data ไปที่ Web server แต่ใน Web3 นั้นตรง Web Server จะประกอบด้วย Blockchain, Smart Contact แต่เราจะติดต่อกับตรงนั้นอย่างไร ? เพราะเราไม่ได้ติดต่อกับ server หรือ computer เครื่องเดียวเหมือนกับ Web2 เพราะถ้าเป็น Web2 มันคือการ Request ไปตรงๆถูกต้องไหมครับ ซึ่งใน session นี้จะพูดถึงการติดต่อนั่นเองครับ

web2

Blockchain Node Anatomy

  • API Endpoint – ใครๆก็สามารถขอเรียกดูได้
  • Consensus Mechanism – ใครจะเป็นคนถือความจริง เพราะว่า computer ทุกเครื่องใน network จะพยายามคำนวนแล้วบอกว่า เชื่อฉันสิฉันคำนวนมาแล้ว
  • Mempool – transection รอการประมวลผล
  • Database – ที่เก็บข้อมูล

Reading data in Web3

การเรียก อ่านข้อมูลตัวอย่างก็จะง่ายๆ เหมือนเราทำใน web2 คือมี api endpoint แล้วเราก็ยิงขอข้อมูลมาดู

Writing Data in Web3

writing data in web3

การเขียนของ Web3 เราที่เป็น User ต้องทำการเอา digital signature ทำการเข้ารหัสการกระทำนั้น ( action ) แล้วส่งเข้า api endpoint แล้วตัว blockchain ก็ทำการเอา action นั้นเข้า mempool เพื่อรอให้คนมาหยิบเอา transection นั้นไปประมวลเพื่อต่อกับ block ตัวก่อนหน้า

ใน Transection ที่เกิดขึ้นหน้าตาจะเป็นแบบนี้ครับก็คือในตัวอย่างคือ Alice จะโอน token ไปหา pop 10 tokens เจ้า function ตัวนี้ก็คือ Smart contact ครับที่เราจะกำหนดให้ทำอะไรต่างๆใน Blockchain ครับ

Data in Blockchain

มารู้จักกับ on-chain และ off-chain เอาง่ายๆคือ อย่างที่เราเรียนรู้กันไปว่าตัว Blockchain คือการเก็บรูปแบบ block ที่เชื่อมต่อกันเหมือนโซ่ถูกต้องไหมครับ สมมติว่าคุณต้องการเรียกดูข้อมูลย้อนหลัง 30 วันแบบนี้จะเกิดอะไรขึ้นถ้าเราเรียกผ่าน blockchain api endpoint ? เราก็จะไปไล่เรียกดูทีละ Block ไปเรื่อยๆย้อนไป 30 วันคุณพอจะรู้ภาพออกใช่ไหม เช่นถ้าสมมติมี transection เกิดขึ้นซัก 10000 transectinos ก็คือการเรียก 10000 ครั้ง นอกจากมันช้ามาก มันไม่ make sense ที่จะทำแบบนี้เลย

เพราะฉะนั้นเลยต้องมี off-chain คือสิ่งที่เราเก็บข้อมูลเองแยกจากใน chain หลัก เช่นข้อมูลที่เกิดขึ้นต่างๆ เพื่อให้เราสามารถเรียกเอาข้อมูลรูปแบบต่างๆได้ง่าย เช่น สมมติตัวอย่างเดิมเราอาจจะเก็บเข้า MySQL แล้วเราดึง data มาดูได้เหมือน query ปกติทำนองนั้น

Designing Web3 App

หลายๆคนฟังแล้วอาจจะคิดว่าเมื่อเราที่เราควรจะใช้เจ้า Web3 เรามาดูปัจจัยคราวๆที่จะช่วยว่าเราควรจะใช้มันเมื่อไหร่อย่างไร

  • เราต้องใช้ Web3 จริงๆใช่ไหม ? หมายถึงมันไม่ใช่กระสุนเงินที่จะมาแก้ทุกปัญหาในปัจจุบันครับ มีความช้า แต่เชื่อถือได้ ต้องคิดดีๆว่าเราจะใช้มันเพื่ออะไร
  • ออกแบบว่า Data อะไรที่จะเก็บเข้า On หรือ Off chain เพราะมันมีค่าใช้จ่ายที่แตกต่างกัน
  • เลือก network
    • ethereum, BSC
    • WASM
    • Private network
  • Design Smart Contact Interface และ API

How WASM changed Web Developement by Warat Wongmaneekit

อย่างแรกต้องมารู้จักก่อนว่า WASM คืออะไร ? มันคือ Web Assembly การเอาภาษา low level ที่ทำงานเร็วมารันผ่าน Browser และทำอะไรได้หลาย ตอนนี้ส่วนใหญ่จะเขียนด้วย C++ , Rust โดยตอนนี้ WASM support all browser

ตอนนี้มี AsemmblyScript มันคือ Asemmbly-typescript

แล้วตัว WASM มันถูกใช้ในหลายๆงานแล้วที่หลายคนอาจจะยังไม่รู้ว่ามีอะไรบ้าง

  • Figma อันนี้คิดว่าทุกคนน่าจะเคยใช้อยู่แล้วถูกเขียนด้วย Rust
  • Google earth , Google map อันนี้เขาเป็นตัวพ่อเลยนะเรื่อง WASM
  • Photoshop ก็ใช้โดยตัว UI ใช้ React แล้วโยนค่าในการ calculation ส่งให้ WA คำนวนแล้วส่งค่ากลับ
  • Stackblitz เว็บสำหรับเขียน program online แบบ realtime
  • Sketekup ก็เช่นเดียวกัน
  • Squoosh เว็บลดขนาดภาพลดได้เยอะมากๆและคุณภาพไม่เสีย ผมใช้งานมันบ่อยมาก ลดก่อนจะเอาภาพมา upload ในเว็บนี้ครับ

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

How you can use WASM in your product ?

แล้วมันเจ๋งขนาดนี้เราจะใช้มันกับงานของเราอย่างไร ? ใช้เครื่องมือ emscripten คือตัวเปลี่ยนจาก C -> WA อ่ะ หลายคนไม่ได้เขียน C อยากมีภาษาอื่น มี Pyodide คือสามารถเอา python ไปรันในหน้าเว็บได้เลย อาจจะมีคนถามว่าทำไมว่ะ ? คือบางครั้งคุณเว็บ logic ที่มันทำเรื่องอะไร ยากๆจะทำเป็น online ก็ต้องมานั่งทำ api หรือเปล่า แต่วิธีนี้ก็จะช่วยคุณได้ครับ ที่สำคัญคือมันเร็วมากๆ

อย่างในตัวอย่างที่เขายกตัวอย่างมาเช่นการตัดคำเนี้ยก็ทำได้เร็วมากๆ ไม่เกิน 3 วินาทีสำหรับข้อมูลไม่มาก แต่ก็ยังดีกว่าส่งค่าไปมาระหว่าง server

มีอีกตัว PyO3 มันคือ RustPython

Concept ทั้งหมดที่เล่ามามันคือการตัด API ออกจาก Frontend เพื่อให้ยิงอันที่สำคัญจริงๆ

TensorFlow.JS มันคือ library สำหรับทำพวก machine learning ใน javascript ครับแล้วมันเร็วเวอร์มากๆตอนที่ใช้ WASM มาช่วย มี use case แปลกๆจาก google คือ Emoji scavenger hunt คือเว็บที่มันจะแสดง emoji แล้วให้เราหาสิ่งของให้ตรงกับ emoji นั้นๆโดยใช้ tensorflow ช่วยครับ

ใครอยากรู้ว่ามีอะไรให้เล่นอีกสามารถไปดูเว็บ make web assembly เขารวบรวมทุก project ที่เกิดขึ้นด้วย WASM ไว้ให้เราสามารถเข้าไปศึกษาได้ครับยังไม่พอ เจ้าตัว WASM มันสามารถรันในฝั่ง Backend ได้อีกด้วยครับ โดยใช้เครื่องมือที่เรียกว่า wasmer โดยมันจะทำการ complie เป็น binary แล้วทำงานได้เลยโดยตัว wasmer มันจะทำหน้าที่คลุม แล้ว export function นั้นๆออกมาให้เรียกใช้ได้เหมือนเรา import library ใช้งานทำนองนั้นเลย

แม้กระทั่ง Cloudflare เองก็มีตัว Worker ที่เป็น WASM แล้วเช่นเดียวกัน ต่อไปมันจะเป็นยุคที่เหนือว่า Frontend แล้วเพราะว่ามันคือ

Build ones, deploy everywhere

เพราะต่อมันเขียนภาษาไหนมาให้ผ่านตัว WASM เป็น assembly แล้วทำงานอะไรเสร็จโยนค่าออกมาให้ภาษานั้นๆ ทำงานต่อได้เลย ไม่ต้องห่วงเลยว่าแม้กระทั่ง Smart Contact เองก็ใช้ได้ด้วยเช่นกันครับ

Live ในงาน BKK.JS ทั้งหมด

Live BKK.JS #14 ( จริงๆ 15 นะ )

ส่งท้ายงาน BKK.JS

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

หากชอบแนวนี้ลองอ่านงาน

https://oxygenyoyo.com/event/wordpress-meet-up-bangkok-seo-for-2021/

Loading

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th