Jetpack Compose for Web เป็นเฟรมเวิร์ก UI ใหม่สำหรับการพัฒนาเว็บ

JetBrains กำลังนำ Jetpack Compose ซึ่งเป็นเฟรมเวิร์กการออกแบบที่ประกาศโดย Google สำหรับ Android มาสู่เว็บ เปิดให้ชมตัวอย่างแล้ววันนี้

ในช่วงไม่กี่ปีที่ผ่านมา มีแรงผลักดันอย่างมากสำหรับการพัฒนาโปรแกรมข้ามแพลตฟอร์ม เฟรมเวิร์ก เช่น React และ Flutter ถูกสร้างขึ้นเพื่อให้นักพัฒนาสามารถแชร์โค้ดเบสเดียวได้ทั้งบน Android, iOS, เดสก์ท็อป และแม้แต่เว็บ แม้แต่ JetBrains ซึ่งเป็นบริษัทที่อยู่เบื้องหลัง IDE ที่ได้รับความนิยมมากที่สุดและภาษาการเขียนโปรแกรม Kotlin ก็ยังทำงานเกี่ยวกับการพัฒนาข้ามแพลตฟอร์ม ครั้งแรกกับ Kotlin Multiplatform แต่ล่าสุดกับ Jetpack Compose

เมื่อไม่นานมานี้ JetBrains ได้ย้าย Jetpack Compose ซึ่งเป็นเฟรมเวิร์กการออกแบบที่ประกาศโดย Google สำหรับ Android ไปยังเดสก์ท็อป. สิ่งนี้อนุญาตให้มีการพัฒนาเดสก์ท็อปข้ามแพลตฟอร์มโดยใช้ JVM ของ Java เมื่อใช้ Jetpack Compose คุณสามารถสร้างแอปสำหรับ Android, macOS, Windows และแม้แต่ Linux ทั้งหมดนี้ได้จากโค้ดเบสเดียว แต่นอกเหนือจาก iOS แล้ว ยังมีแพลตฟอร์มขนาดใหญ่ที่ขาดหายไปจาก Compose นั่นก็คือ เว็บ

ที่กำลังจะเปลี่ยนแม้ว่า JetBrains มี ปล่อยแล้ว สิ่งที่พวกเขาเรียกว่าการแสดงตัวอย่างเทคโนโลยีของ Jetpack Compose สำหรับเว็บ

ตอนนี้ Technology Preview นั้นเป็นชื่อที่เก๋ไก๋สำหรับพรีอัลฟา Compose for Web ยังไม่พร้อมสำหรับการใช้งานจริงเลย ไม่มีบทช่วยสอน ไม่มีเอกสารประกอบน้อยมาก และ API ก็ยังไม่เสร็จสมบูรณ์เลย จากที่กล่าวไปแล้ว เรามาดูกันว่าตอนนี้ Compose for Web นำเสนออะไรบ้าง

ในเวอร์ชันปัจจุบัน มีสองวิธีที่คุณสามารถพัฒนาใน Compose สำหรับเว็บ: การใช้ DOM API หรือใช้วิดเจ็ต Compose ที่มีอยู่ เช่น คอลัมน์หรือข้อความ

หากคุณใช้ DOM API คุณจะมีชื่อ API ที่แสดงถึงองค์ประกอบ HTML ต่างๆ เช่น พี, และอื่นๆ ความแตกต่างที่สำคัญระหว่าง Compose และ Kotlin JS แบบคลาสสิกก็คือ คุณสามารถใช้การออกแบบการประกาศตามสถานะได้ ตัวเลือกนี้ดูเหมือนเป็นสะพานเชื่อมระหว่างการพัฒนาเว็บแบบคลาสสิกและการพัฒนา UI แบบเปิดเผยเต็มรูปแบบ นอกเหนือจากการสร้างเค้าโครงแล้ว Compose for Web ยังช่วยให้คุณสร้างสไตล์ชีทแบบไดนามิกตามสถานะได้อีกด้วย

ตัวเลือกที่สองคือสิ่งที่นักพัฒนา Android และ Compose จะดูคุ้นเคยมากขึ้น มีส่วนประกอบที่สร้างไว้ล่วงหน้า เช่น คอลัมน์ แถว และแถบเลื่อน ซึ่งคุณสามารถใช้เพื่อสร้าง UI ของเว็บได้ ขณะนี้สิ่งเหล่านี้ยังไม่สมบูรณ์มากนัก และรูปแบบและตัวเลือกต่างๆ ยังใช้งานไม่ครบถ้วน แต่อย่างน้อยก็ช่วยให้เราทราบว่า JetBrains มีอะไรบ้างสำหรับ Compose for Web

โดยรวมแล้ว ในขณะนี้ ยังไม่มีอะไรให้เขียนสำหรับเว็บมากนัก มันยังอยู่ในนั้น มาก วันแรก แต่อาจมีความหมายมากสำหรับอนาคต โดยส่วนตัวในฐานะนักพัฒนา Android ฉันประสบปัญหาในการเข้าสู่เฟรมเวิร์กเค้าโครงที่ใช้เบราว์เซอร์ HTML และ CSS พื้นฐานอาจดูเทอะทะได้ และไวยากรณ์ React และ Flutter ยังคงมีพื้นฐานมาจากการออกแบบ HTML

ภาษาการออกแบบข้ามแพลตฟอร์มที่มีคุณสมบัติครบถ้วนซึ่งไม่ได้ยึดตามหลักการออกแบบเว็บไซต์นั้นค่อนข้างน่าตื่นเต้น แม้ว่า Jetpack Compose ยังมีหนทางอีกยาวไกล แต่สิ่งที่ JetBrains วางแผนไว้อาจมีความหมายอย่างมากต่ออนาคตของการออกแบบ UI

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Compose สำหรับเว็บ ดูประกาศของ JetBrains. หากคุณสนใจที่จะลองใช้การใช้งานในปัจจุบัน ตรงไปที่ที่เก็บ GitHub.