React and React Native
React เฟรมเวิร์ตพัฒนาเว็บ front-end ออกเวอร์ชั่น 19 โดยเพิ่มฟีเจอร์ใหม่ๆ ด้านการจัดการฟอร์มหลายตัว ทำให้โค้ดจัดการเมื่อผู้ใช้ submit ข้อมูลทำได้ง่ายขึ้น
การจัดการฟอร์มนั้นเพิ่ม hook ใหม่ คือ useActionState
คืนค่าทั้งผลสุดท้ายของการประมวลผลฟอร์ม และหากกำลังประมวลผลก็จะมีค่า pending
ให้ ใน react-dom
เพิ่ม prop action
และ formAction
ใน <form>
, <input>
, และ <button>
hook useFormStatus
สำหรับดูสถานะของการ submit ว่าเรียบร้อยหรือไม่ ขณะที่ useOptimistic
ใช้สำหรับแสดงค่าในกรณีที่ฟอร์มกำลังอยู่ระหว่างการอัพเดตข้อมูล
Meta เปิดตัว React Compiler โครงการทดลองของ React ที่ช่วยปรับแต่งประสิทธิภาพของแอพให้ดีขึ้น ลดจำนวนคอมโพเนนต์จะถูกเรนเดอร์ใหม่ให้เหลือน้อยที่สุด เมื่อเกิดการเปลี่ยนสถานะขึ้นมา
ชื่อของ React Compiler อาจชวนงงๆ อยู่บ้าง เพราะ React เขียนด้วย JavaScript ที่เป็นภาษาแบบ interpreter แต่จริงๆ แล้ว React Compiler ทำหน้าที่เข้ามาอ่านโค้ดของเราเพื่อช่วยปรับแต่งประสิทธิภาพของโค้ดให้อัตโนมัติ ช่วยทำงานด้านแคช (memoization) ที่ก่อนหน้านี้โปรแกรมเมอร์ต้องทำเอง เช่น useMemo, useCallback, React.memo
จากที่มีข่าวว่า Amazon กำลังทำระบบปฏิบัติการตัวใหม่โค้ดเนม Vega มาใช้แทน Fire OS และ เริ่มใช้กับหน้าจออัจฉริยะ Echo Show 5 แล้ว
ฝั่งของ Amazon ไม่เคยแถลงใดๆ ในเรื่องนี้ แต่ล่าสุดมีข้อมูลอย่างเป็นทางการชิ้นแรกบนเว็บไซต์ Amazon (แม้ไม่ตั้งใจ) นั่นคือประกาศรับสมัครงานตำแหน่ง Software Development Engineer, Fire TV Experience ประจำที่สาขาเบอร์ลิน
ข้อมูลสำคัญคือบอกเนื้อหางานนี้ว่าต้องพัฒนาโค้ดฝั่งไคลเอนต์ของ Fire TV ที่กำลังเปลี่ยนผ่านจาก FOS/Android (FOS หมายถึง Fire OS) มาสู่ native/Ruse และ React Native
ไมโครซอฟท์เขียนบล็อกอธิบายเบื้องหลังการแก้ปัญหาระดับโลก (ระดับผู้ใช้ 250 ล้านคนต่อเดือน) เปลี่ยนสถาปัตยกรรมเบื้องหลัง Microsoft Teams บนวินโดวส์เป็นตัวใหม่ ที่ดีขึ้น เร็วขึ้น กินแรมน้อยลง
ไมโครซอฟท์เล่าว่าไคลเอนต์ตัวเดิมของ Teams เริ่มเขียนในปี 2015 ( Teams เปิดตัวครั้งแรกปลายปี 2016 ) ตั้งเป้าหมายเรื่องการทำงานข้ามแพลตฟอร์มระหว่างเว็บ-เดสก์ท็อปเป็นสำคัญ จึงเลือกใช้เทคโนโลยีที่มีในตอนนั้นคือ Electron เป็นโฮสต์, AngularJS เป็นเฟรมเวิร์คเว็บ และสร้าง custom controls ของตัวเองขึ้นมาด้วย HTML/CSS
Pynecone เป็นสตาร์ตอัพในเครือ YCombinator เปิดโครงการโอเพนซอร์สชื่อเดียวกับชื่อบริษัท โดยชูจุดขายว่านักพัฒนาสามารถเขียนเว็บแบบ ReactJS โดยใช้ภาษาไพธอนเท่านั้น ไม่ต้องเรียนรู้จาวาสคริปต์อีกต่อไป
โค้ดที่เขียนด้วย Python จะถูกคอมไพล์กลายเป็น React/NextJS อีกทีหนึ่ง โดยตัว Pynecone นั้นมาพร้อมกับไลบรารี component ในตัว เช่น UI ปุ่มรูปแบบต่างๆ หรือการแสดงข้อมูลกราฟ ส่วนฐานข้อมูลนั้นไลบรารีใส่ SQLAlchemy มาในตัว
Netlify ผู้ให้บริการคลาวด์สำหรับพัฒนาเว็บเป็นหลักประกาศเข้าซื้อบริษัท Gatsby ผู้พัฒนาเฟรมเวิร์คโอเพนซอร์สชื่อดังมักใช้พัฒนาเว็บแบบ static หรือใช้เชื่อมโหลดข้อมูลจาก CMS ตัวอื่นๆ อีกที
ตัว Gatsby นั้นแม้จะใช้รันที่ไหนก็ได้แต่ก็มีบริการคลาวด์ของตัวเองอยู่ก่อนแล้ว ทำให้ทับซ้อนกันบ้าง ส่วนตัว Netify นั้นให้ บริการคลาวด์ที่ทำงานร่วมกับเฟรมเวิร์คยอดนิยมต่างๆ ได้
ทาง Gatsby ยืนยันว่าทีมงานจะยังพัฒนา Gatsby เป็นโอเพนซอร์สต่อไป ส่วนบริการคลาวด์ต่างๆ จะกลายเป็นส่วนหนึ่งของบริการคลาวด์ของ Netlify
ที่มา - Gatsby
AWS เพิ่มฟีเจอร์ให้ Amplify Studio ตัวพัฒนาแอปพลิเคชั่นบน AWS ให้สามารถสร้าง React component จากไฟล์ JSON ออกมาเป็นฟอร์มไปใช้งานได้ทันที
ก่อนหน้านี้ Amplify Studio รองรับการแปลงดีไซน์จาก Figma มาเป็นโค้ด React อยู่แล้ว แต่ในรอบนี้ผู้ใช้สามารถกำหนดข้อมูลที่อยากได้เป็น JSON แล้วให้ Amplify สร้างฟอร์มได้เลย ทำให้สามารถใช้รับข้อมูลในแอปได้ง่ายขึ้น
Widget ที่ให้มามีหลากหลายรูแแบบ เช่น วันที่, เวลา, ข้อความ, รหัสผ่าน, URL และยังสามารถสร้างกฎการตรวจสอบข้อมูลได้จากใน Amplify Studio โดยตรง เมื่อออกแบบฟอร์มเสร็จแล้วสามารถดาวน์โหลด component ออกมาเป็น zip โดยไม่ต้องใช้บัญชี AWS เลยก็ได้ หรืออาจจะเชื่อมกับโปรเจคใน Amplify แล้วดาวน์โหลดด้วยคำสั่ง amplify
Vercel ผู้สร้าง Next.js เปิดตัวโครงการ Turbopack ระบบรวมทรัพยากรที่เกี่ยวข้อง (bundler) ทำให้การใช้งานบน front end เพื่อทดแทนโครงการ Webpack ที่ได้รับความนิยมอย่างสูงในตอนนี้
Turbopack เขียนด้วย Rust และทำงานที่ประสิทธิภาพระดับเนทีฟ โดยโครงการแสดงประสิทธิภาพการรันจากเริ่มต้น (cold start) ใน Next.js 13 ที่ใช้ Turbopack สามารถรันได้ภายในเวลาต่ำกว่า 1 วินาที ขณะที่ Next.js 12 ต้องใช้เวลาถึง 3.4 วินาทีเมื่อมี React Component ประมาณ 1,000 รายการ
การทำงานของ Turbopack ทำงานแบบ incremental ทำให้ไม่ต้องรันงานทั้งหมดซ้ำทุกครั้ง รองรับการโหลดโมดูลใหม่ขณะรัน และยังรองรับการ build สำหรับใช้งานได้หลายแห่ง เช่น เบราว์เซอร์, เซิร์ฟเวอร์ ได้พร้อมกัน
Discord ประกาศปรับปรุงแอปเวอร์ชันบน Android ครั้งใหญ่ โดยเปลี่ยนมาพัฒนาบน React Native ทำให้การปล่อยฟีเจอร์ใหม่ต่าง ๆ ผู้ใช้บน Android จะได้รับอัพเดตไปพร้อมกับเดสก์ทอปและ iOS จากก่อนหน้านี้ Discord ใช้คำว่า Android จะได้อัพเดตไม่กี่สัปดาห์หลังจากนั้น มาตลอด
นอกจากนี้ Discord ยังบอกว่าในแง่ดีไซน์จะไม่เปลี่ยนไปมากสำหรับ Android แต่องค์ประกอบหลักในแอป จะเหมือนกันมากขึ้นระหว่าง เดสก์ทอป, iOS และ Android ซึ่งผู้ใช้งานสามารถเลือกกำหนดได้ในการตั้งค่า
การเปลี่ยนแปลงของ Discord บน Android จะมีผลกับผู้ใช้งานในไม่กี่สัปดาห์ข้างหน้า
ที่มา: Discord
AWS เปิดบริการ Amplify Studio ที่เปิดตัวในงาน Re:Invent เมื่อปีที่แล้ว ต่อสาธารณะอย่างเป็นทางการ บริการนี้คือซอฟต์แวร์ออกแบบหน้าจอแอปและเว็บที่มีฟีเจอร์สำคัญคือการเชื่อมต่อกับ Figma
ในเวอร์ชั่น GA นี้ทาง AWS ปรับปรุงกระบวนการซิงก์การออกแบบจาก Figma เข้ามายัง Amplify Studio และปรับแต่งค่าต่างๆ ไปแล้วให้ทำงานได้ง่ายขึ้น โดยนักพัฒนาสามารถเข้าแก้ไข property ต่างๆ ตาม Amplify UI Library, แต่ละ component จะมี property ชื่อว่า overrides
เพื่อให้นักพัฒนาเข้าไปแก้ไขค่าภายใน, ค่า property ชื่อว่า overrideItems
เปิดให้แก้ไขข้อมูลใน component, และสามารถตั้ง event listener แยกออกมาได้
React ออกเวอร์ชัน 18.0 ถือเป็นการออกเวอร์ชันใหญ่ครั้งแรกนับจาก React 17.0 ในปี 2020 ที่ไร้ฟีเจอร์ใหม่ รอบนี้จึงมีฟีเจอร์ใหญ่สะสมมาออกทีเดียวหลายอย่าง
ฟีเจอร์สำคัญที่สุดคือ Concurrent React เป็นการเปิดให้มี UI หลายเวอร์ชันในเวลาเดียวกัน (concurrency) โดย Concurrent React เป็นการปรับกลไกภายในของ React เองให้รองรับฟีเจอร์ใหม่สาย concurrency ต่างๆ ซึ่งนักพัฒนาสามารถเลือกใช้ได้แบบ opt-in
ทีมพัฒนา React บอกว่าในระยะใกล้ นักพัฒนาแอพจะเลือกใช้ Concurrent หรือไม่ก็ได้ แต่ในระยะยาวแล้ว หลายส่วนใน React จะมุ่งไปทาง Concurrent มากขึ้น
ของใหม่อย่างอื่นใน React 18 ได้แก่
- Read more about React 18 ออกแล้ว เพิ่มฟีเจอร์ใหญ่คือ Concurrent React
- Log in or register to post comments
AWS Amplify เป็นบริการ backend สำหรับเว็บแอพและแอพมือถือ (ลักษณะเดียวกับ Firebase) ที่ช่วยจัดการระบบล็อกอิน, การเก็บข้อมูลแอพ (DataStore/Storage), การแจ้งเตือน-ส่งข้อความ (push notification/PubSub)
ในงาน AWS re:Invent 2021 รอบล่าสุด Amazon เปิดตัว AWS Amplify Studio ซึ่งเป็นอินเทอร์เฟซแบบวิชวลสำหรับจัดการ UI แบบลากแล้ววาง ไม่ต้องเขียนโค้ด เท่านั้นยังไม่พอ Amplify Studio ยังรองรับการแปลงดีไซน์จากโปรแกรมออกแบบยอดนิยม Figma มาเป็นโค้ด React UI เพื่อนำไปใช้ต่อบนเว็บ-แอพให้อัตโนมัติด้วย
โครงการ Next.js เฟรมเวิร์คสำหรับการพัฒนาเว็บ ReactJS แบบ sever-side rendering (SSR) โดยมีฟีเจอร์สำคัญ ได้แก่
AWS ปล่อยไลบรารี AWS UI ที่เป็นชุด React component สำหรับการพัฒนาเว็บแอปพลิเคชั่น เพื่อมาทำอินเทอร์เฟซกับโครงการ Porting Assistant for .NET ที่ AWS โอเพนซอร์สออกมาตั้งแต่เดือนตุลาคมปีที่แล้ว แม้ตัวโครงการจะเขียนด้วย C# แต่ทาง AWS ก็สร้างอินเทอร์เฟซด้วย Electron ร่วมกับ React
- Read more about AWS เปิดตัวไลบรารี AWS UI เฟรมเวิร์คหน้าจอสำหรับ React
- Log in or register to post comments
Next.js เฟรมเวิร์คเว็บ React แบบ server side render (SSR) ออกเวอร์ชั่น 10.0 โดยมีฟีเจอร์ใหม่เพิ่มขึ้นหลายอย่าง เช่น
โครงการ ReactJS ประกาศออกเวอร์ชั่น 17 ที่ระบุชัดว่าไม่มีฟีเจอร์ใหม่ แต่เป็นการปรับโครงสร้างเพื่อรองรับการอัพเกรดทีละส่วน และฟีเจอร์ใหม่ทั้งหมดถูกดันออกไปใน ReactJS 18
เดิมแอปที่พัฒนาด้วย ReactJS จะต้องอัพเกรดตัวเฟรมเวิร์คพร้อมกันทั้งแอป แต่หลายครั้งโค้ดบางส่วนไม่ได้พัฒนามานานทำให้ไม่สามารถอัพเกรดได้ ใน ReactJS 17 จะเปิดทางให้แอปสามารถดาวน์โหลด React เวอร์ชั่นเก่าขึ้นมาใช้งานบางส่วนได้ ทาง React เตรียมแอปสาธิตเอาไว้ โดยสามารถรัน React JS 17.0 ในแอปหลัก และรัน ReactJS 16.8 หรือเก่ากว่านั้นในบาง component ได้
เก็บตกข่าวความเคลื่อนไหวฝั่ง React Native นะครับ ตัวโครงการ React Native ที่พัฒนาโดย Facebook รองรับเพียงแค่ 2 แพลตฟอร์มมือถือคือ Android และ iOS
แต่เมื่อปีที่แล้ว ไมโครซอฟท์อาสาเข้ามาทำ React Native for Windows โดยรองรับทั้งการสร้างแอพแบบ WPF และ UWP
Josh Larson วิศวกร Vox Media สร้างเฟรมเวิร์ค Flareact เป็นเฟรมเวิร์คทดลองที่ได้รับแรงบันดาลใจมาจาก Next.js เพื่อให้แอปพลิเคชั่นแบบ React สามารถเรนเดอร์ด้วย Cloudflare Workers ได้
ปกติแล้ว React ออกแบบสำหรับสร้างแอปพลิเคชั่นที่เรนเดอร์ฝั่งเบราว์เซอร์ทั้งหมด หลายครั้งประสิทธิภาพบนเบราว์เซอร์ไม่ดีนัก และบริการหลายตัวที่ต้องการอ่าน HTML โดยไม่สามารถเรนเดอร์ React ได้ก็จะได้ข้อมูลไม่ครบ การทำ server side rendering (SSR) จึงเป็นฟีเจอร์สำคัญที่หลายเว็บใช้งานกัน เช่น Next.js ที่ได้รับความนิยมสูง
ไมโครซอฟท์เปิดตัว Fluent Design ตั้งแต่ปี 2017 และเริ่มนำมาใช้งานในแอพของตัวเองมากขึ้นเรื่อยๆ โดยเฉพาะในรอบปีที่ผ่านมา
Facebook เปิดตัวหน้าเว็บ facebook.com โฉมใหม่ในงาน F8 2019 เมื่อ 1 ปีที่แล้วพอดี หลังจากทดสอบมายาวนานครบปี บริษัทก็ประกาศเริ่มปล่อยหน้าเว็บโฉมใหม่ให้ผู้ใช้ทั่วโลกแล้ว และจะเปิดใช้งานครบทุกคนในอีกไม่กี่สัปดาห์ข้างหน้า
การเปลี่ยนแปลงสำคัญของหน้าเว็บ facebook.com โฉมใหม่คือ
- ทำงานเร็วขึ้น ตอบสนองเร็วขึ้น เพราะเป็นการยกเครื่องครั้งใหญ่นับจาก facebook.com เวอร์ชันต้นฉบับในปี 2004
- ปรับการวางตำแหน่งปุ่มต่างๆ ให้ค้นหาข้อมูลง่ายขึ้น
- จัดการ Pages, Groups, Events ง่ายขึ้น
- รองรับ Dark Mode
Wikipedia ถือกำเนิดมาตั้งแต่ปี 2001 โดยใช้ซอฟต์แวร์ MediaWiki ที่เขียนขึ้นในยุคนั้น ซึ่งปัจจุบันก็มีหลายส่วนที่เริ่มล้าสมัยแล้ว
มูลนิธิ Wikimedia Foundation ในฐานะผู้ดูแลโครงการ Wikipedia จึงพยายาม "ยกเครื่อง" ซอฟต์แวร์ MediaWiki ให้ทันสมัยขึ้น หนึ่งในแผนการคือเปลี่ยนมาใช้เฟรมเวิร์คจาวาสคริปต์ตัวใหม่ๆ แทน jQuery ที่ใช้มานาน และ เฟรมเวิร์คของตัวเองที่ชื่อ OOUI
คณะทำงานมีเกณฑ์การคัดเลือกเฟรมเวิร์คหลายข้อ เช่น ต้องนิยาม UI แบบ declarative, ตัว UI ต้องอัพเดตแบบ reactive (ตามการป้อนข้อมูลของผู้ใช้), เป็นโครงการโอเพนซอร์สที่มีชุมชนเหนียวแน่น, ประสิทธิภาพสูง, ยืดหยุ่นต่อการใช้งานหลายสถานการณ์
เฟซบุ๊กประกาศเปิดซอร์สโครงการ Hermes JS Engine เอนจินจาวาสคริปต์สำหรับรันโค้ดบนโทรศัพท์มือถือ โดยเฉพาะแอนดรอยด์และเฟรมเวิร์ค React Native
จุดสำคัญของ Hermes คือมันไม่ได้โหลดโค้ดจาวาสคริปต์มาคอมไพล์ขณะที่รันครั้งแรกเหมือนเอนจินอื่นๆ แต่อาศัยการคอมไพล์ไว้ล่วงหน้าเป็นไบต์โค้ด เมื่อติดตั้งแอปแล้วตัวเอนจินจึงโหลดไบต์โค้ดมารัน ทำให้กระบวนการเปิดแอปเร็วขึ้น นอกจากความเร็วในการรันครั้งแรก Hermes ยังปรับการใช้หน่วยความจำให้ประหยัดหน่วยความจำขึ้น ลดเวลาการรัน garbage collection (GC) เพื่อให้แอปตอบสนองเร็ว
เป้าหมายของ Hermes คือรองรับ ECMAScript 6 แต่ตอนนี้ยังมีบางฟีเจอร์ที่ React Native ไม่ได้ใช้จึงเลือกที่จะไม่อิมพลีเมนต์ โดยเฉพาะฟังก์ชั่น eval ที่ถูกตัดออกไป
React Native เป็นเฟรมเวิร์คที่พัฒนาโดย Facebook ตั้งแต่ปี 2015 เพื่อใช้ภาษา JavaScript สร้างแอพมือถือบน iOS/Android แบบเนทีฟ และได้รับความนิยมอย่างสูงจนถึงปัจจุบัน
ในปี 2016 React Native รองรับแพลตฟอร์ม UWP ของไมโครซอฟท์ ที่เป็น C# แต่ก็ไม่ได้รับความนิยมมากนักเพราะ UWP รันได้เฉพาะบน Windows 10 แต่ล่าสุดปี 2019 ไมโครซอฟท์เปิดตัว React Native for Windowsเต็มรูปแบบ ที่สามารถสร้างแอพแบบ WPF แท้ๆ และรันบน Windows 7-10 ได้ด้วย (ตราบเท่าที่เครื่องนั้นมี .NET Framework 4.6 ติดตั้งไว้)
หลังจากมีข้อถกเถียงถึงสัญญาอนุญาตการใช้งานของ React ซึ่งเป็นจาวาสคริปต์เฟรมเวิร์คที่ได้รับความนิยมในอันดับต้นๆสำหรับพัฒนาส่วนต่อประสานกับผู้ใช้หรือ User Interface ที่พัฒนาโดยบริษัท Facebook
โดยปัจจุบัน React ได้ใช้สัญญาอนุญาตการใช้งานแบบ BSD + Patents license ด้วยสัญญาอนุญาตการใช้งานที่พ่วงมากับ BSD นั้น มีใจความเกี่ยวกับการอนุญาตและการเพิกถอนสิทธิ์การใช้งาน ด้วยเหตุนี้ React จึงไม่ใช่โอเพนซอร์สโดยสมบูรณ์ จึงทำให้นักพัฒนาเกิดความลังเลและความไม่แน่นอนที่จะใช้งาน
เฟสบุ๊คได้ออกมาประกาศว่า ในสัปดาห์หน้าจะทำการเปลี่ยนสัญญาอนุญาตของไลบรารี่ชื่อดัง React, Jest, Flow และ Immutable.js ไปเป็นแบบ MIT
ปัจจุบันไลบรารีดังกล่าวใช้สัญญาอนุญาต BSD + เงื่อนไขสิทธิบัตร ส่งผลให้นักพัฒนาหลายกลุ่มตัดสินใจไม่ใช้ไลบรารีเหล่านี้ เช่น โครงการ Gutenberg ของ Wordpress การเปลี่ยนแปลงครั้งนี้อาจทำให้นักพัฒนาหันมาสนใจมากขึ้น
อย่างไรก็ตามไลบรารีอื่นๆ ของเฟสบุ๊กนอกเหนือจากที่กล่าวมา จะยังคงใช้สัญญาอนุญาต BSD อยู่ครับ
ที่มา - Facebook Code