แชร์เรื่องนี้
สรุปเนื้อหางาน BKK.JS ว่าด้วยเฟรมเวิร์ก JavaScript
โดย Seven Peaks เมื่อ 25 ก.พ. 2021, 11:35:00
รวมถึง Open ID, OAuth, และอื่นๆ อีกมากมาย
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
นอกจากนี้ คอนเซปต์และซอร์สโค้ดของมันสามารถทำงานร่วมกันได้เป็นอย่างดีด้วย React Native ซึ่งได้รับการนำไปใช้ในการพัฒนาเว็บแอปพลิเคชัน บนระบบปฏิบัติการอย่าง iOS และ Android ไลบรารีและ style guide ของ JavaScript เหล่านี้คือสิ่งสำคัญที่ front-end developer ทุกคนควรรู้เพราะมันเป็นหนึ่งในเครื่องมือที่นิยมใช้กันมากที่สุด
ดูตัวอย่างโค้ด JavaScript และเฟรมเวิร์ก JavaScript ของเราได้ในวิดีโอแบบเต็มๆ บน YouTube
เกี่ยวกับวิทยากร
ก้องเกียรติ คุณพาณิชย์โชตินักศึกษาสถาบันเทคโนโลยีพระจอมเกล้าเจ้าคุณทหารลาดกระบัง และ Software Engineer ที่ BRIKL
หัวข้อการบรรยายของคุณก้องเกียรติมาจากประสบการณ์การลดขนาดของเว็บแอปฯ ที่เขาสร้างขึ้นจาก 2 เมกะไบต์ เหลือเพียง 14 กิโลไบต์ ด้วยการเปลี่ยนมุมมอง |
Giorgio DesideriTech Lead - Cloud Solutions ที่ Seven Peaks Software
คุณ Giorgio ได้แสดงเทคนิคในการทำงานให้น้อยลงแต่สร้างผลงานให้เยอะขึ้น และวิธีพัฒนาซอฟต์แวร์ด้วยการใช้งานคลาวด์ (Azure หรือ AWS Serverless) เพื่อให้ได้ผลิตผลมากขึ้นกว่าเดิม |
คุณเวิลด์Developer ที่ ODDS
“รู้จัก JavaScript แต่ยังไม่ใช้ React เหรอ?” นี่คือคำถามสำคัญที่คุณเวิลด์ถามผู้ชมในระหว่างการบรรยาย เขาเล่าให้ developer รู้ว่าเรื่องราวการเปลี่ยนจาก Vue.js มาใช้ React.js ของเขาเป็นอย่างไร พร้อมบอกเทคนิคที่ใช้ |
คุณหนุ่มDeveloper ที่ Eventpop
คุณหนุ่มเข้าร่วม #100DaysOfCode challenge และได้ฝึกฝนทักษะ frontend ของเขาด้วยการสร้างกว่า 10 โปรเจกต์ frontend ในเวลา 100 วัน เขาได้แบ่งปันความรู้ว่าการพัฒนาด้วย jQuery-era ทุกวันให้ตามทันโลกของ frontend + JS/TS นั้นทำอย่างไร |
แชร์เรื่องนี้
- FinTech (11)
- การพัฒนาซอฟต์แวร์ (10)
- Expert Spotlight (8)
- อาชีพการงาน (8)
- Cloud (5)
- InsurTech (5)
- Mixpanel (5)
- Agile (4)
- Digital Transformation (4)
- JavaScript (4)
- QA (4)
- Trend (4)
- การพัฒนาแอปพลิเคชัน iOS (4)
- Android Developer (3)
- Azure (3)
- Banking (3)
- CSR (3)
- Hybrid App (3)
- IoT (3)
- Product-Centric Mindset (3)
- Seven Peaks Insights (3)
- Thought Leadership (3)
- การพัฒนาแอปฯ Android (3)
- การออกแบบ UX (3)
- บริษัท (3)
- เทคโนโลยีการเงินและการธนาคาร (3)
- .NET (2)
- AI (2)
- Cross-Platform Application (2)
- Data (2)
- Kotlin (2)
- Native App (2)
- ReactJS (2)
- digital marketing (2)
- การพัฒนาแอปฯ (2)
- งาน Product Owner (2)
- 5g (1)
- Android (1)
- AndroidX Biometric (1)
- Azure OpenAI Service (1)
- Biometrics (1)
- CI/CD (1)
- Customer Data Platform (1)
- Data and Analytics (1)
- Design Thinking (1)
- DevOps (1)
- Digital Healthcare (1)
- Digital ID (1)
- Digital Landscape (1)
- Digital Product (1)
- Digital Product Development (1)
- E-payment (1)
- E-wallet (1)
- Financial Inclusion (1)
- GraphQL (1)
- IT Outsourcing (1)
- MVP (1)
- MVVM (1)
- Metaverse (1)
- Morphosis (1)
- Node.js (1)
- Partner (1)
- Platform Engineering (1)
- Recruitment (1)
- SCB (1)
- SEO (1)
- Scrum Master (1)
- Software Engineer (1)
- Software Tester (1)
- Stripe (1)
- Swift (1)
- SwiftUI (1)
- Tech Meetup (1)
- Turnkey (1)
- UI (1)
- UX (1)
- UX Design (1)
- UX writing (1)
- Web-Debugging Tool (1)
- customer centric (1)
- iOS17 (1)
- waterfall (1)
- การจ้างงาน (1)
- การพัฒนาด้วย RabbitMQ (1)
- การพัฒนาระบบคลาวด์ (1)
- การออกแบบ Decorator Pattern (1)
- การใช้งาน C# (1)
- งาน Product Manager (1)
- งาน platform enginerring (1)
- ทำ Context API (1)
- ฟินเทค (1)
- ระบบการชำระเงิน (1)
- สร้าง brand loyalty (1)
- อีคอมเมิร์ซ (1)
- เขียนโค้ด React (1)
- เทคโนโลยี React (1)
- เพิ่ม conversion (1)
- เฟรมเวิร์ก (1)
- แดชบอร์ด (1)
- สิงหาคม 2024 (1)
- กรกฎาคม 2024 (2)
- มีนาคม 2024 (5)
- กุมภาพันธ์ 2024 (5)
- มกราคม 2024 (14)
- ธันวาคม 2023 (4)
- พฤศจิกายน 2023 (9)
- ตุลาคม 2023 (12)
- กันยายน 2023 (7)
- กรกฎาคม 2023 (4)
- มิถุนายน 2023 (3)
- พฤษภาคม 2023 (3)
- เมษายน 2023 (1)
- มีนาคม 2023 (1)
- พฤศจิกายน 2022 (1)
- สิงหาคม 2022 (4)
- กรกฎาคม 2022 (1)
- มิถุนายน 2022 (4)
- เมษายน 2022 (6)
- มีนาคม 2022 (3)
- กุมภาพันธ์ 2022 (6)
- มกราคม 2022 (3)
- ธันวาคม 2021 (2)
- ตุลาคม 2021 (1)
- กันยายน 2021 (1)
- สิงหาคม 2021 (3)
- กรกฎาคม 2021 (1)
- มิถุนายน 2021 (2)
- พฤษภาคม 2021 (1)
- มีนาคม 2021 (4)
- กุมภาพันธ์ 2021 (4)
- ธันวาคม 2020 (4)
- พฤศจิกายน 2020 (1)
- มิถุนายน 2020 (1)
- เมษายน 2020 (1)