Tren React pada 2024

xguru · 2024-02-23T10:03:02+09:00

Astro (bersama React) Tahun lalu, Astro muncul sebagai penerus Gatsby Astro terutama dikenal sebagai website statis, tetapi juga makin populer untuk aplikasi web dan endpoint API Website yang dibangun dengan Astro menangani rendering di server sehingga memiliki performa yang sangat baik secara bawaan Astro dapat digunakan tanpa React atau framework UI, dan memungkinkan pembuatan komponen UI melalui file .astro Saat digunakan bersama React, hanya HTML dan CSS yang dikirim ke browser, dan JavaScript hanya diberikan saat diperlukan "fast-by-default" Autentikasi (di React) Berkat berbagai startup dan proyek open source, autentikasi di React kembali menjadi topik yang menarik Selain Firebase Authentication, Auth0, Passport.js, dan NextAuth, kini juga muncul alternatif autentikasi baru Supabase menyediakan berbagai fitur sebagai alternatif open source untuk Firebase Clerk berfokus hanya pada autentikasi, sehingga pendaftaran pengguna dan login di React menjadi mudah Lucia mendapatkan popularitas bersama Astro, serta menawarkan open source dan lapisan abstraksi yang jelas dengan database Aplikasi React full-stack dengan tRPC tRPC telah menjadi favorit saya untuk aplikasi full-stack yang type-safe Prisma menghasilkan tipe dari model database di aplikasi backend, sedangkan tRPC menjaga type safety dari backend hingga lapisan API di frontend Melalui sifat dasar tRPC sebagai remote procedure call, aplikasi klien dapat memanggil API backend dengan memanggil fungsi biasa tRPC menggunakan spesifikasi JSON-RPC dan lapisan transport HTTP, serta mendukung caching yang efisien dan batching request bila digabungkan dengan react-query React Server Components dan Next.js React Server Components (RSC) diimplementasikan dan diadopsi oleh komunitas tahun lalu melalui Next 13.4 RSC sedang membawa perubahan paradigma besar dalam pengembangan web RSC bisa menjadi perubahan yang lebih besar daripada React Hook karena membuat kita memikirkan ulang cara menggunakan komponen React dalam aplikasi yang lebih besar Dengan RSC, pengambilan data dapat dilakukan pada level komponen di server sebelum komponen dikirim (atau di-streaming) ke browser, sehingga performa meningkat Saya penasaran peran apa yang akan dimainkan RSC saat tRPC dan react-query digunakan untuk komunikasi client-server, tetapi RSC mengambil data di server. Menarik untuk menantikan hasilnya tahun ini TanStack Router untuk SPA React Tanner Linsley berpendapat bahwa SPA (Single Page Applications) masih belum mati Ia, yang ikut membuat react-query dan react-table, baru saja merilis library baru bernama TanStack Router Banyak developer mengadopsi meta-framework seperti Next.js dan Remix (yang secara internal memakai router React paling populer dan juga berfokus pada implementasi RSC) dengan router bawaan, tetapi belum ada yang benar-benar membuat router type-safe untuk React dari nol TanStack Router mengisi celah penting dalam ekosistem React sebagai router baru dengan dukungan TypeScript Router ini memungkinkan developer membaca dan menulis state URL dengan cara yang type-safe Vercel mendorong React ke Edge Vercel adalah perusahaan yang mendorong Next.js, yang sangat terlibat dalam gerakan RSC Karena beberapa developer inti direkrut oleh Vercel, banyak developer menganggap Vercel sebagai penggerak utama React Vercel tidak hanya memperluas batas React dengan RSC, tetapi juga memperluas cara deploy dan distribusi aplikasi React secara efisien kepada pengguna melalui Next.js Saat menggunakan aplikasi Next di Vercel, komponen React dapat di-streaming melalui edge runtime Streaming komponen React di edge seperti ini berdampak besar pada performa Jika digabungkan dengan DB serverless seperti PlanetScale yang memiliki replika di seluruh dunia, ini bisa menjadi tren menarik untuk cara hosting aplikasi di masa depan (atau lokasi yang lebih optimal) Bundler untuk React: Turbopack vs Vite Turbopack adalah penerus Webpack. Meski belum siap dipakai di production, ini sudah bisa digunakan untuk pengembangan lokal pada aplikasi Next.js Di masa lalu, bundler sudah memikul banyak tanggung jawab, tetapi tren menggabungkan komponen client dan server di lingkungan pengembangan maupun production kini menuntut jenis bundler yang baru Secara pribadi, saya ingin melihat Vite dan fitur sisi servernya digunakan di Next.js, tetapi sementara Remix, meta-framework lain, dan berbagai SPA mengadopsi Vite, Vercel/Next justru memulai pengerjaan Turbopack React Compiler (dikenal sebagai React Forget) Developer React merasa tidak puas dengan penggunaan useCallback, useMemo, dan memo Tim React sedang mengembangkan compiler bernama React Compiler (dengan relatif diam-diam) untuk mengotomatiskan seluruh memoization dalam aplikasi React Diharapkan proses manual untuk melakukan memo pada fungsi (useCallback), nilai (useMemo), dan komponen (memo) akan hilang ke depannya React akan menangani semua memoization ini agar semuanya tidak perlu dihitung ulang pada render berikutnya React Compiler akan meningkatkan performa aplikasi React dengan mengotomatiskan memoization manual tersebut Kemungkinan akan diumumkan di React 19, React Conf 2024, dan sebagainya Biome Ada banyak keluhan tentang pengaturan dan interaksi antara ESLint dan Prettier, dan Biome (sebelumnya Rome) ingin menawarkan solusi toolchain yang cepat dan terintegrasi sebagai penggantinya Alternatif lainnya adalah oxc (JavaScript Oxidation Compiler), yang tampak sangat menjanjikan sebagai toolchain all-in-one Library UI headless untuk React Developer React cenderung mengganti library UI favorit mereka setiap tahun Beberapa tahun lalu menggunakan Material UI, lalu pindah ke Semantic UI/Ant Design, kemudian ke Chakra UI, lalu Mantine UI, dan tahun lalu menetap di shadcn/UI Semua pilihan sebelumnya terutama didorong oleh kebutuhan akan desain dan kemudahan penggunaan, tetapi di shadcn/UI ada beberapa hal yang berubah shadcn/UI adalah library UI populer pertama yang benar-benar mengadopsi Tailwind dan memungkinkan desain komponen secara kustom Library UI headless adalah tren yang menawarkan fungsionalitas dan aksesibilitas tanpa desain Solusi CSS-in-JS seperti Styled Components atau Emotion membebani client/browser, sehingga solusi CSS-in-JS baru seperti StyleX mencoba mengurangi masalah ini dengan mengompilasinya menjadi CSS utility-first

(robinwieruch.de)

30 poin oleh xguru 2024-02-23 | 4 komentar | Bagikan ke WhatsApp

Astro (bersama React)

Tahun lalu, Astro muncul sebagai penerus Gatsby
Astro terutama dikenal sebagai website statis, tetapi juga makin populer untuk aplikasi web dan endpoint API
Website yang dibangun dengan Astro menangani rendering di server sehingga memiliki performa yang sangat baik secara bawaan
Astro dapat digunakan tanpa React atau framework UI, dan memungkinkan pembuatan komponen UI melalui file .astro
Saat digunakan bersama React, hanya HTML dan CSS yang dikirim ke browser, dan JavaScript hanya diberikan saat diperlukan
- "fast-by-default"

Autentikasi (di React)

Berkat berbagai startup dan proyek open source, autentikasi di React kembali menjadi topik yang menarik
Selain Firebase Authentication, Auth0, Passport.js, dan NextAuth, kini juga muncul alternatif autentikasi baru
Supabase menyediakan berbagai fitur sebagai alternatif open source untuk Firebase
Clerk berfokus hanya pada autentikasi, sehingga pendaftaran pengguna dan login di React menjadi mudah
Lucia mendapatkan popularitas bersama Astro, serta menawarkan open source dan lapisan abstraksi yang jelas dengan database

Aplikasi React full-stack dengan tRPC

tRPC telah menjadi favorit saya untuk aplikasi full-stack yang type-safe
Prisma menghasilkan tipe dari model database di aplikasi backend, sedangkan tRPC menjaga type safety dari backend hingga lapisan API di frontend
Melalui sifat dasar tRPC sebagai remote procedure call, aplikasi klien dapat memanggil API backend dengan memanggil fungsi biasa
tRPC menggunakan spesifikasi JSON-RPC dan lapisan transport HTTP, serta mendukung caching yang efisien dan batching request bila digabungkan dengan react-query

React Server Components dan Next.js

React Server Components (RSC) diimplementasikan dan diadopsi oleh komunitas tahun lalu melalui Next 13.4
RSC sedang membawa perubahan paradigma besar dalam pengembangan web
RSC bisa menjadi perubahan yang lebih besar daripada React Hook karena membuat kita memikirkan ulang cara menggunakan komponen React dalam aplikasi yang lebih besar
Dengan RSC, pengambilan data dapat dilakukan pada level komponen di server sebelum komponen dikirim (atau di-streaming) ke browser, sehingga performa meningkat
Saya penasaran peran apa yang akan dimainkan RSC saat tRPC dan react-query digunakan untuk komunikasi client-server, tetapi RSC mengambil data di server. Menarik untuk menantikan hasilnya tahun ini

TanStack Router untuk SPA React

Tanner Linsley berpendapat bahwa SPA (Single Page Applications) masih belum mati
Ia, yang ikut membuat react-query dan react-table, baru saja merilis library baru bernama TanStack Router
Banyak developer mengadopsi meta-framework seperti Next.js dan Remix (yang secara internal memakai router React paling populer dan juga berfokus pada implementasi RSC) dengan router bawaan, tetapi belum ada yang benar-benar membuat router type-safe untuk React dari nol
TanStack Router mengisi celah penting dalam ekosistem React sebagai router baru dengan dukungan TypeScript
Router ini memungkinkan developer membaca dan menulis state URL dengan cara yang type-safe

Vercel mendorong React ke Edge

Vercel adalah perusahaan yang mendorong Next.js, yang sangat terlibat dalam gerakan RSC
Karena beberapa developer inti direkrut oleh Vercel, banyak developer menganggap Vercel sebagai penggerak utama React
Vercel tidak hanya memperluas batas React dengan RSC, tetapi juga memperluas cara deploy dan distribusi aplikasi React secara efisien kepada pengguna melalui Next.js
Saat menggunakan aplikasi Next di Vercel, komponen React dapat di-streaming melalui edge runtime
Streaming komponen React di edge seperti ini berdampak besar pada performa
Jika digabungkan dengan DB serverless seperti PlanetScale yang memiliki replika di seluruh dunia, ini bisa menjadi tren menarik untuk cara hosting aplikasi di masa depan (atau lokasi yang lebih optimal)

Bundler untuk React: Turbopack vs Vite

Turbopack adalah penerus Webpack. Meski belum siap dipakai di production, ini sudah bisa digunakan untuk pengembangan lokal pada aplikasi Next.js
Di masa lalu, bundler sudah memikul banyak tanggung jawab, tetapi tren menggabungkan komponen client dan server di lingkungan pengembangan maupun production kini menuntut jenis bundler yang baru
Secara pribadi, saya ingin melihat Vite dan fitur sisi servernya digunakan di Next.js, tetapi sementara Remix, meta-framework lain, dan berbagai SPA mengadopsi Vite, Vercel/Next justru memulai pengerjaan Turbopack

React Compiler (dikenal sebagai React Forget)

Developer React merasa tidak puas dengan penggunaan useCallback, useMemo, dan memo
Tim React sedang mengembangkan compiler bernama React Compiler (dengan relatif diam-diam) untuk mengotomatiskan seluruh memoization dalam aplikasi React
Diharapkan proses manual untuk melakukan memo pada fungsi (useCallback), nilai (useMemo), dan komponen (memo) akan hilang ke depannya
React akan menangani semua memoization ini agar semuanya tidak perlu dihitung ulang pada render berikutnya
React Compiler akan meningkatkan performa aplikasi React dengan mengotomatiskan memoization manual tersebut
Kemungkinan akan diumumkan di React 19, React Conf 2024, dan sebagainya

Biome

Ada banyak keluhan tentang pengaturan dan interaksi antara ESLint dan Prettier, dan Biome (sebelumnya Rome) ingin menawarkan solusi toolchain yang cepat dan terintegrasi sebagai penggantinya
Alternatif lainnya adalah oxc (JavaScript Oxidation Compiler), yang tampak sangat menjanjikan sebagai toolchain all-in-one

Library UI headless untuk React

Developer React cenderung mengganti library UI favorit mereka setiap tahun
Beberapa tahun lalu menggunakan Material UI, lalu pindah ke Semantic UI/Ant Design, kemudian ke Chakra UI, lalu Mantine UI, dan tahun lalu menetap di shadcn/UI
Semua pilihan sebelumnya terutama didorong oleh kebutuhan akan desain dan kemudahan penggunaan, tetapi di shadcn/UI ada beberapa hal yang berubah
shadcn/UI adalah library UI populer pertama yang benar-benar mengadopsi Tailwind dan memungkinkan desain komponen secara kustom
Library UI headless adalah tren yang menawarkan fungsionalitas dan aksesibilitas tanpa desain
Solusi CSS-in-JS seperti Styled Components atau Emotion membebani client/browser, sehingga solusi CSS-in-JS baru seperti StyleX mencoba mengurangi masalah ini dengan mengompilasinya menjadi CSS utility-first

4 komentar

firea32 2024-02-26

https://github.com/facebook/react-strict-dom
Saya juga menantikan react-strict-dom.
Kalau rilisnya matang, sepertinya ini bisa menggantikan react-native-web.

greenhead 2024-02-23

React Forget sangat dinanti.

2024-02-23

[Komentar ini disembunyikan.]