React and React Native

Tags:
Node Thumbnail

จากที่มีข่าวว่า 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

Tags:
Node Thumbnail

ไมโครซอฟท์เขียนบล็อกอธิบายเบื้องหลังการแก้ปัญหาระดับโลก (ระดับผู้ใช้ 250 ล้านคนต่อเดือน) เปลี่ยนสถาปัตยกรรมเบื้องหลัง Microsoft Teams บนวินโดวส์เป็นตัวใหม่ที่ดีขึ้น เร็วขึ้น กินแรมน้อยลง

ไมโครซอฟท์เล่าว่าไคลเอนต์ตัวเดิมของ Teams เริ่มเขียนในปี 2015 (Teams เปิดตัวครั้งแรกปลายปี 2016) ตั้งเป้าหมายเรื่องการทำงานข้ามแพลตฟอร์มระหว่างเว็บ-เดสก์ท็อปเป็นสำคัญ จึงเลือกใช้เทคโนโลยีที่มีในตอนนั้นคือ Electron เป็นโฮสต์, AngularJS เป็นเฟรมเวิร์คเว็บ และสร้าง custom controls ของตัวเองขึ้นมาด้วย HTML/CSS

Tags:
Topics: 
Node Thumbnail

Pynecone เป็นสตาร์ตอัพในเครือ YCombinator เปิดโครงการโอเพนซอร์สชื่อเดียวกับชื่อบริษัท โดยชูจุดขายว่านักพัฒนาสามารถเขียนเว็บแบบ ReactJS โดยใช้ภาษาไพธอนเท่านั้น ไม่ต้องเรียนรู้จาวาสคริปต์อีกต่อไป

โค้ดที่เขียนด้วย Python จะถูกคอมไพล์กลายเป็น React/NextJS อีกทีหนึ่ง โดยตัว Pynecone นั้นมาพร้อมกับไลบรารี component ในตัว เช่น UI ปุ่มรูปแบบต่างๆ หรือการแสดงข้อมูลกราฟ ส่วนฐานข้อมูลนั้นไลบรารีใส่ SQLAlchemy มาในตัว

Tags:
Node Thumbnail

Netlify ผู้ให้บริการคลาวด์สำหรับพัฒนาเว็บเป็นหลักประกาศเข้าซื้อบริษัท Gatsby ผู้พัฒนาเฟรมเวิร์คโอเพนซอร์สชื่อดังมักใช้พัฒนาเว็บแบบ static หรือใช้เชื่อมโหลดข้อมูลจาก CMS ตัวอื่นๆ อีกที

ตัว Gatsby นั้นแม้จะใช้รันที่ไหนก็ได้แต่ก็มีบริการคลาวด์ของตัวเองอยู่ก่อนแล้ว ทำให้ทับซ้อนกันบ้าง ส่วนตัว Netify นั้นให้บริการคลาวด์ที่ทำงานร่วมกับเฟรมเวิร์คยอดนิยมต่างๆ ได้

ทาง Gatsby ยืนยันว่าทีมงานจะยังพัฒนา Gatsby เป็นโอเพนซอร์สต่อไป ส่วนบริการคลาวด์ต่างๆ จะกลายเป็นส่วนหนึ่งของบริการคลาวด์ของ Netlify

ที่มา - Gatsby

Tags:
Node Thumbnail

AWS เพิ่มฟีเจอร์ให้ Amplify Studio ตัวพัฒนาแอปพลิเคชั่นบน AWS ให้สามารถสร้าง React component จากไฟล์ JSON ออกมาเป็นฟอร์มไปใช้งานได้ทันที

ก่อนหน้านี้ Amplify Studio รองรับการแปลงดีไซน์จาก Figma มาเป็นโค้ด React อยู่แล้ว แต่ในรอบนี้ผู้ใช้สามารถกำหนดข้อมูลที่อยากได้เป็น JSON แล้วให้ Amplify สร้างฟอร์มได้เลย ทำให้สามารถใช้รับข้อมูลในแอปได้ง่ายขึ้น

Widget ที่ให้มามีหลากหลายรูแแบบ เช่น วันที่, เวลา, ข้อความ, รหัสผ่าน, URL และยังสามารถสร้างกฎการตรวจสอบข้อมูลได้จากใน Amplify Studio โดยตรง เมื่อออกแบบฟอร์มเสร็จแล้วสามารถดาวน์โหลด component ออกมาเป็น zip โดยไม่ต้องใช้บัญชี AWS เลยก็ได้ หรืออาจจะเชื่อมกับโปรเจคใน Amplify แล้วดาวน์โหลดด้วยคำสั่ง amplify

Tags:
Node Thumbnail

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 สำหรับใช้งานได้หลายแห่ง เช่น เบราว์เซอร์, เซิร์ฟเวอร์ ได้พร้อมกัน

Tags:
Node Thumbnail

Discord ประกาศปรับปรุงแอปเวอร์ชันบน Android ครั้งใหญ่ โดยเปลี่ยนมาพัฒนาบน React Native ทำให้การปล่อยฟีเจอร์ใหม่ต่าง ๆ ผู้ใช้บน Android จะได้รับอัพเดตไปพร้อมกับเดสก์ทอปและ iOS จากก่อนหน้านี้ Discord ใช้คำว่า Android จะได้อัพเดตไม่กี่สัปดาห์หลังจากนั้น มาตลอด

นอกจากนี้ Discord ยังบอกว่าในแง่ดีไซน์จะไม่เปลี่ยนไปมากสำหรับ Android แต่องค์ประกอบหลักในแอป จะเหมือนกันมากขึ้นระหว่าง เดสก์ทอป, iOS และ Android ซึ่งผู้ใช้งานสามารถเลือกกำหนดได้ในการตั้งค่า

การเปลี่ยนแปลงของ Discord บน Android จะมีผลกับผู้ใช้งานในไม่กี่สัปดาห์ข้างหน้า

ที่มา: Discord

Tags:
Topics: 
Node Thumbnail

AWS เปิดบริการ Amplify Studio ที่เปิดตัวในงาน Re:Invent เมื่อปีที่แล้วต่อสาธารณะอย่างเป็นทางการ บริการนี้คือซอฟต์แวร์ออกแบบหน้าจอแอปและเว็บที่มีฟีเจอร์สำคัญคือการเชื่อมต่อกับ Figma

ในเวอร์ชั่น GA นี้ทาง AWS ปรับปรุงกระบวนการซิงก์การออกแบบจาก Figma เข้ามายัง Amplify Studio และปรับแต่งค่าต่างๆ ไปแล้วให้ทำงานได้ง่ายขึ้น โดยนักพัฒนาสามารถเข้าแก้ไข property ต่างๆ ตาม Amplify UI Library, แต่ละ component จะมี property ชื่อว่า overrides เพื่อให้นักพัฒนาเข้าไปแก้ไขค่าภายใน, ค่า property ชื่อว่า overrideItems เปิดให้แก้ไขข้อมูลใน component, และสามารถตั้ง event listener แยกออกมาได้

Tags:
Node Thumbnail

React ออกเวอร์ชัน 18.0 ถือเป็นการออกเวอร์ชันใหญ่ครั้งแรกนับจาก React 17.0 ในปี 2020 ที่ไร้ฟีเจอร์ใหม่ รอบนี้จึงมีฟีเจอร์ใหญ่สะสมมาออกทีเดียวหลายอย่าง

ฟีเจอร์สำคัญที่สุดคือ Concurrent React เป็นการเปิดให้มี UI หลายเวอร์ชันในเวลาเดียวกัน (concurrency) โดย Concurrent React เป็นการปรับกลไกภายในของ React เองให้รองรับฟีเจอร์ใหม่สาย concurrency ต่างๆ ซึ่งนักพัฒนาสามารถเลือกใช้ได้แบบ opt-in

ทีมพัฒนา React บอกว่าในระยะใกล้ นักพัฒนาแอพจะเลือกใช้ Concurrent หรือไม่ก็ได้ แต่ในระยะยาวแล้ว หลายส่วนใน React จะมุ่งไปทาง Concurrent มากขึ้น

ของใหม่อย่างอื่นใน React 18 ได้แก่

Tags:
Node Thumbnail

AWS Amplify เป็นบริการ backend สำหรับเว็บแอพและแอพมือถือ (ลักษณะเดียวกับ Firebase) ที่ช่วยจัดการระบบล็อกอิน, การเก็บข้อมูลแอพ (DataStore/Storage), การแจ้งเตือน-ส่งข้อความ (push notification/PubSub)

ในงาน AWS re:Invent 2021 รอบล่าสุด Amazon เปิดตัว AWS Amplify Studio ซึ่งเป็นอินเทอร์เฟซแบบวิชวลสำหรับจัดการ UI แบบลากแล้ววาง ไม่ต้องเขียนโค้ด เท่านั้นยังไม่พอ Amplify Studio ยังรองรับการแปลงดีไซน์จากโปรแกรมออกแบบยอดนิยม Figma มาเป็นโค้ด React UI เพื่อนำไปใช้ต่อบนเว็บ-แอพให้อัตโนมัติด้วย

Tags:
Topics: 
Node Thumbnail

AWS ปล่อยไลบรารี AWS UI ที่เป็นชุด React component สำหรับการพัฒนาเว็บแอปพลิเคชั่น เพื่อมาทำอินเทอร์เฟซกับโครงการ Porting Assistant for .NET ที่ AWS โอเพนซอร์สออกมาตั้งแต่เดือนตุลาคมปีที่แล้ว แม้ตัวโครงการจะเขียนด้วย C# แต่ทาง AWS ก็สร้างอินเทอร์เฟซด้วย Electron ร่วมกับ React

Tags:
Node Thumbnail

Next.js เฟรมเวิร์คเว็บ React แบบ server side render (SSR) ออกเวอร์ชั่น 10.0 โดยมีฟีเจอร์ใหม่เพิ่มขึ้นหลายอย่าง เช่น

Tags:
Node Thumbnail

โครงการ ReactJS ประกาศออกเวอร์ชั่น 17 ที่ระบุชัดว่าไม่มีฟีเจอร์ใหม่ แต่เป็นการปรับโครงสร้างเพื่อรองรับการอัพเกรดทีละส่วน และฟีเจอร์ใหม่ทั้งหมดถูกดันออกไปใน ReactJS 18

เดิมแอปที่พัฒนาด้วย ReactJS จะต้องอัพเกรดตัวเฟรมเวิร์คพร้อมกันทั้งแอป แต่หลายครั้งโค้ดบางส่วนไม่ได้พัฒนามานานทำให้ไม่สามารถอัพเกรดได้ ใน ReactJS 17 จะเปิดทางให้แอปสามารถดาวน์โหลด React เวอร์ชั่นเก่าขึ้นมาใช้งานบางส่วนได้ ทาง React เตรียมแอปสาธิตเอาไว้ โดยสามารถรัน React JS 17.0 ในแอปหลัก และรัน ReactJS 16.8 หรือเก่ากว่านั้นในบาง component ได้

Tags:
Node Thumbnail

เก็บตกข่าวความเคลื่อนไหวฝั่ง React Native นะครับ ตัวโครงการ React Native ที่พัฒนาโดย Facebook รองรับเพียงแค่ 2 แพลตฟอร์มมือถือคือ Android และ iOS

แต่เมื่อปีที่แล้ว ไมโครซอฟท์อาสาเข้ามาทำ React Native for Windows โดยรองรับทั้งการสร้างแอพแบบ WPF และ UWP

Tags:
Node Thumbnail

Josh Larson วิศวกร Vox Media สร้างเฟรมเวิร์ค Flareact เป็นเฟรมเวิร์คทดลองที่ได้รับแรงบันดาลใจมาจาก Next.js เพื่อให้แอปพลิเคชั่นแบบ React สามารถเรนเดอร์ด้วย Cloudflare Workers ได้

ปกติแล้ว React ออกแบบสำหรับสร้างแอปพลิเคชั่นที่เรนเดอร์ฝั่งเบราว์เซอร์ทั้งหมด หลายครั้งประสิทธิภาพบนเบราว์เซอร์ไม่ดีนัก และบริการหลายตัวที่ต้องการอ่าน HTML โดยไม่สามารถเรนเดอร์ React ได้ก็จะได้ข้อมูลไม่ครบ การทำ server side rendering (SSR) จึงเป็นฟีเจอร์สำคัญที่หลายเว็บใช้งานกัน เช่น Next.js ที่ได้รับความนิยมสูง

Tags:
Node Thumbnail

Facebook เปิดตัวหน้าเว็บ facebook.com โฉมใหม่ในงาน F8 2019 เมื่อ 1 ปีที่แล้วพอดี หลังจากทดสอบมายาวนานครบปี บริษัทก็ประกาศเริ่มปล่อยหน้าเว็บโฉมใหม่ให้ผู้ใช้ทั่วโลกแล้ว และจะเปิดใช้งานครบทุกคนในอีกไม่กี่สัปดาห์ข้างหน้า

การเปลี่ยนแปลงสำคัญของหน้าเว็บ facebook.com โฉมใหม่คือ

  • ทำงานเร็วขึ้น ตอบสนองเร็วขึ้น เพราะเป็นการยกเครื่องครั้งใหญ่นับจาก facebook.com เวอร์ชันต้นฉบับในปี 2004
  • ปรับการวางตำแหน่งปุ่มต่างๆ ให้ค้นหาข้อมูลง่ายขึ้น
  • จัดการ Pages, Groups, Events ง่ายขึ้น
  • รองรับ Dark Mode
Tags:
Node Thumbnail

Wikipedia ถือกำเนิดมาตั้งแต่ปี 2001 โดยใช้ซอฟต์แวร์ MediaWiki ที่เขียนขึ้นในยุคนั้น ซึ่งปัจจุบันก็มีหลายส่วนที่เริ่มล้าสมัยแล้ว

มูลนิธิ Wikimedia Foundation ในฐานะผู้ดูแลโครงการ Wikipedia จึงพยายาม "ยกเครื่อง" ซอฟต์แวร์ MediaWiki ให้ทันสมัยขึ้น หนึ่งในแผนการคือเปลี่ยนมาใช้เฟรมเวิร์คจาวาสคริปต์ตัวใหม่ๆ แทน jQuery ที่ใช้มานาน และเฟรมเวิร์คของตัวเองที่ชื่อ OOUI

คณะทำงานมีเกณฑ์การคัดเลือกเฟรมเวิร์คหลายข้อ เช่น ต้องนิยาม UI แบบ declarative, ตัว UI ต้องอัพเดตแบบ reactive (ตามการป้อนข้อมูลของผู้ใช้), เป็นโครงการโอเพนซอร์สที่มีชุมชนเหนียวแน่น, ประสิทธิภาพสูง, ยืดหยุ่นต่อการใช้งานหลายสถานการณ์

Tags:
Node Thumbnail

เฟซบุ๊กประกาศเปิดซอร์สโครงการ Hermes JS Engine เอนจินจาวาสคริปต์สำหรับรันโค้ดบนโทรศัพท์มือถือ โดยเฉพาะแอนดรอยด์และเฟรมเวิร์ค React Native

จุดสำคัญของ Hermes คือมันไม่ได้โหลดโค้ดจาวาสคริปต์มาคอมไพล์ขณะที่รันครั้งแรกเหมือนเอนจินอื่นๆ แต่อาศัยการคอมไพล์ไว้ล่วงหน้าเป็นไบต์โค้ด เมื่อติดตั้งแอปแล้วตัวเอนจินจึงโหลดไบต์โค้ดมารัน ทำให้กระบวนการเปิดแอปเร็วขึ้น นอกจากความเร็วในการรันครั้งแรก Hermes ยังปรับการใช้หน่วยความจำให้ประหยัดหน่วยความจำขึ้น ลดเวลาการรัน garbage collection (GC) เพื่อให้แอปตอบสนองเร็ว

เป้าหมายของ Hermes คือรองรับ ECMAScript 6 แต่ตอนนี้ยังมีบางฟีเจอร์ที่ React Native ไม่ได้ใช้จึงเลือกที่จะไม่อิมพลีเมนต์ โดยเฉพาะฟังก์ชั่น eval ที่ถูกตัดออกไป

Tags:
Node Thumbnail

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 ติดตั้งไว้)

Tags:
Topics: 
Node Thumbnail

หลังจากมีข้อถกเถียงถึงสัญญาอนุญาตการใช้งานของ React ซึ่งเป็นจาวาสคริปต์เฟรมเวิร์คที่ได้รับความนิยมในอันดับต้นๆสำหรับพัฒนาส่วนต่อประสานกับผู้ใช้หรือ User Interface ที่พัฒนาโดยบริษัท Facebook

โดยปัจจุบัน React ได้ใช้สัญญาอนุญาตการใช้งานแบบ BSD + Patents license ด้วยสัญญาอนุญาตการใช้งานที่พ่วงมากับ BSD นั้น มีใจความเกี่ยวกับการอนุญาตและการเพิกถอนสิทธิ์การใช้งาน ด้วยเหตุนี้ React จึงไม่ใช่โอเพนซอร์สโดยสมบูรณ์ จึงทำให้นักพัฒนาเกิดความลังเลและความไม่แน่นอนที่จะใช้งาน

Tags:
Node Thumbnail

เฟสบุ๊คได้ออกมาประกาศว่า ในสัปดาห์หน้าจะทำการเปลี่ยนสัญญาอนุญาตของไลบรารี่ชื่อดัง React, Jest, Flow และ Immutable.js ไปเป็นแบบ MIT

ปัจจุบันไลบรารีดังกล่าวใช้สัญญาอนุญาต BSD + เงื่อนไขสิทธิบัตร ส่งผลให้นักพัฒนาหลายกลุ่มตัดสินใจไม่ใช้ไลบรารีเหล่านี้ เช่น โครงการ Gutenberg ของ Wordpress การเปลี่ยนแปลงครั้งนี้อาจทำให้นักพัฒนาหันมาสนใจมากขึ้น

อย่างไรก็ตามไลบรารีอื่นๆ ของเฟสบุ๊กนอกเหนือจากที่กล่าวมา จะยังคงใช้สัญญาอนุญาต BSD อยู่ครับ

ที่มา - Facebook Code

Tags:
Node Thumbnail

Matt Mullenweg ประกาศในบล็อกของเขาว่า Automattic ตัดสินใจที่จะเขียน editor สำหรับ Wordpress รุ่นต่อไปที่ใช้ชื่อโครงการว่า Gutenberg เสียใหม่ โดยจะตัด React ออกจากโครงการและเปลี่ยนไปใช้ไลบรารีตัวอื่น ทำให้โครงการ Gutenberg อาจจะออกไม่ทันปีนี้ และโครงการ Wordpress.com รุ่นต่อไป (Calyso) ก็จะเขียนใหม่โดยใช้ไลบรารีเดียวกับ Gutenberg

Tags:
Node Thumbnail

ทีมพัฒนา Skype จากไมโครซอฟท์ประกาศโอเพนซอร์ส ReactXP ไลบรารีสำหรับสร้างแอพข้ามแพลตฟอร์ม (cross-platform) ที่ถูกสร้างขึ้นโดยใช้ React JS และ React Native ของ Facebook เป็นฐาน โดยมีจุดเด่นที่ต่างไปจากโครงการ React ต้นน้ำคือ ตัวไลบรารี ReactXP จะช่วยให้นักพัฒนาสามารถแชร์โค้ด UI ของเว็บแอพและแอพแบบ native ได้ทั้งส่วนที่เป็นลอจิกและรวมถึงส่วนที่เป็นการแสดงผลด้วย

โครงการ ReactXP มีที่มาจากการที่ Skype มีแอพอยู่บนหลากหลายแพลตฟอร์ม ซึ่งการพัฒนาหน้า UI แต่ละไคลเอนต์เดิมทีต้องเขียนโค้ดด้วยภาษา native เฉพาะของแต่ละแพลตฟอร์มแยกกัน ดังนั้นเพื่อให้การพัฒนาเป็นไปอย่างรวดเร็วและมีประสิทธิภาพมากขึ้น ทีม Skype จึงได้สำรวจแนวทางการพัฒนาใหม่ๆ โดยมีจุดมุ่งหมายเพื่อลดการเขียนโค้ดฟีเจอร์เดียวกันซ้ำๆ บนแต่ละแพลตฟอร์มให้ได้มากที่สุด

Pages