Posting Jumat ini didedikasikan untuk menerjemahkan artikel menarik yang dirilis kemarin di
Medium . Saya memutuskan untuk mempelajari genre terjemahan baru untuk diri saya sendiri, jadi tolong jangan terlalu banyak menendang jika ada yang salah di suatu tempat. Dan jika mungkin, bahkan beri tahu tentang kesalahan dan kesalahan ketik pada PM.
Terima kasih dan bacaannya bagus!
Sebuah kisah tentang bagaimana fitur-fitur baru platform web dan kerangka kerja yang dikompilasi menentukan era pengembangan web selanjutnya.
Foto:
Stefan BucherSaat ini, kerangka kerja seperti
Angular ,
React, dan
Ember adalah kunci untuk mengembangkan aplikasi web yang kompleks. Selama dekade terakhir (
Angular dirilis pada 2010), penggunaan kerangka kerja ini telah menjadi standar de facto bagi banyak dari kita. Mereka membantu kami menyusun kode, mengelola keadaan aplikasi dan membangun antarmuka yang kompleks berdasarkan komponen yang dapat digunakan kembali.
Namun, seperti yang Anda ketahui, JavaScript adalah sumber daya web paling mahal yang secara langsung memengaruhi interaktivitas halaman kami. Dan ukuran kode JavaScript aplikasi web kita lebih besar dari sebelumnya. Halaman web rata-rata lebih besar dari 3MB, yang lebih besar dari ukuran game Doom asli. Kami, sebagai pengembang, dapat memiliki Internet yang cepat dan paket tarif yang terjangkau, tetapi pengguna kami mungkin tidak memiliki semua ini.
Menurut
Alex Russell , melebihi ukuran hanya 130KB untuk semua sumber daya kami dapat berarti bahwa tidak mungkin untuk memenuhi interval unduhan 5 detik pada telepon standar dan jaringan seluler. Namun, beberapa kerangka kerja favorit kami dapat mengambil lebih banyak sendiri.
Bisakah kita menggunakan kelebihan yang diberikan kerangka kerja, tetapi pada saat yang sama menghindari kembung kode? Memiliki kenyamanan untuk pengembang dan pada saat yang sama, pengalaman pengguna yang sangat baik? Saya percaya itu. Dan saya percaya bahwa kita memasuki era baru pengembangan web, yang akan ditentukan oleh ini ... Era di mana kerangka kerja kita akan mulai menghilang.
Langsing
Contoh dari tren ini adalah
Svelte , "kerangka UI yang secara ajaib menghilang" (Artikel "Kerangka UI yang menghilang secara ajaib"
di Habré - kira-kira).
Svelte adalah kerangka kerja "waktu kompilasi" yang tidak memiliki runtime spesifik pada klien. Kami terbiasa mengirim paket JavaScript besar ke pengguna kami dan berharap browser mereka mem-parsing dan mengeksekusi skrip. Tapi
Svelte tidak berfungsi seperti itu. Alih-alih, ia mengkompilasi aplikasi Anda menjadi modul JavaScript vanilla yang kecil, berdiri sendiri. Dengan kata lain, pada saat aplikasi dikirimkan ke pengguna Anda,
Svelte akan menghilang!
Contoh aplikasi yang dikembangkan menggunakan
Svelte adalah
Pinafore , klien PWA
Mastodon untuk jaringan sosial terdesentralisasi yang dibuat oleh Microsoft
Nolan Lawson . Pinafore menunjukkan
hasil yang sangat cepat dalam Uji Halaman Web dan skor 98 poin di
Lighthouse .
Svelte , dalam dirinya sendiri, sangat minimalis, tetapi ada juga
Sapper (
S velte
App Mak
er - kira-kira) - kerangka kerja fitur lengkap berdasarkan itu. Terinspirasi oleh Next.js,
Sapper termasuk rendering sisi server, pemisahan kode, gaya cakupan, perutean deklaratif, dan hot-reload. Selain itu,
tempper starter
Sapper memberikan PWA secara default, manifes aplikasi web dan pekerja layanan dengan caching sumber daya otomatis.
Saya bertanya pada Nolan bagaimana perasaannya menggunakan
Svelte dan
Sapper . Dia mengatakan kepada saya bahwa itu adalah "mimpi untuk bekerja dengan"
Svelte .
Sapper "sedikit kurang dewasa" dan memiliki beberapa masalah dengannya, tetapi ia juga senang. Saya juga mulai menggunakan dua kerangka kerja ini untuk proyek baru, dan sejauh ini kombinasi fungsi dan kecepatan tinggi operasi benar-benar terasa sempurna.
Stensil
Svelte menginspirasi proyek alternatif dari Ionic:
Stencil .
Sekali lagi, tujuannya adalah untuk mengadopsi "konsep terbaik dari kerangka kerja paling populer", tetapi pada saat yang sama mencapai kinerja yang lebih baik:
"Dengan ... kerangka kerja tradisional dan teknik bundling, tim ini berjuang untuk memenuhi permintaan latensi dan ukuran kode untuk Aplikasi Web Progresif yang berjalan sama baiknya di jaringan cepat dan lambat, melintasi beragam platform dan perangkat." - stenciljs.com
Untuk memahami apa itu
Stencil , saya menemukan
pengantar yang berguna
dari Rob Bearman . Ada juga
video dari
Maximilian . Hasil
Stensil adalah Komponen Web standar (lebih lanjut tentang Komponen Web di bawah), tidak khusus untuk
Stensil . Ini berarti bahwa Anda dapat menggunakannya dalam kombinasi dengan kerangka kerja lain jika Anda mau (tetapi artikel ini adalah tentang bagaimana kerangka kerja menghilang, bukan berlipat ganda!).
Secara terpisah, saya ingin mencatat bahwa meskipun fakta bahwa dokumentasi
Svelte tidak terlalu memperhatikan hal ini, tetapi komponen
Svelte juga dapat dikompilasi langsung ke Komponen Web (di
sini adalah contoh - jika Anda mengatur
customElement di sini -
kami mendapatkan hasilnya ). Namun,
Rich Harris , pencipta
Svelte (dan
Rollup dan banyak hal menakjubkan lainnya!) Memberitahu saya bahwa dia tidak berpikir ada manfaat khusus untuk menggunakan fitur ini saat ini.
Stensil juga terlihat seperti
Polimer Google yang lebih terkenal, tetapi menghilang sepenuhnya saat keluar. Namun, saya tidak menggunakan Polymer terlalu banyak untuk berkomentar lebih detail. Mungkin dia juga patut mendapat perhatian lebih dekat. Versi terbaru,
3 mulai menggunakan
Modul ES (lebih lanjut tentang ini di bawah), bukan
Impor HTML , dan
npm bukannya
Bower . Ada juga
PWA Starter Kit yang merekomendasikan
Alex Russell sebagai alat terbaik untuk membangun aplikasi web yang produktif. Ini memberi Anda pola
PRPL (Push, Render, Pre-cache, Lazy-load) langsung dari kotak.
Sudut generasi selanjutnya
Terima kasih kepada Rich Harris karena memberi tahu saya bahwa Angular juga mengikuti tren ini!
Angular Elements - sebuah inovasi dalam
Angular 6 - memungkinkan Anda untuk mengekspor komponen Angular sebagai Komponen Web yang dapat disetel sendiri. Saat ini, masih memerlukan "versi minimum, mandiri Angular", tetapi mereka "bekerja pada elemen kustom yang dapat digunakan dalam aplikasi web yang dibangun berdasarkan kerangka kerja lain."
Selain itu,
Ivy adalah renderer generasi baru di Angular, yang dirancang untuk secara drastis mengurangi ukuran kode yang dihasilkan. (Meskipun masih layak untuk dilihat: dalam semangat kompetisi persahabatan, Rich membuat
perbandingan hasil kompilasi komponen web dari Svelte dan Ivy!).
Sangat keren bahwa kerangka kerja populer mengambil pendekatan ini, membuat kode akhir mereka juga lebih kompak. Kami berharap bahwa semakin banyak aplikasi web beralih ke pendekatan baru, ini akan berdampak besar pada kinerja Internet secara keseluruhan.
Selain itu, ada lebih banyak prasyarat untuk kenyataan bahwa segera kita tidak akan membutuhkan kerangka kerja sama sekali. Kerangka kerja dapat, tentu saja, menyederhanakan pengembangan dan terus memberikan add-on yang bermanfaat, tetapi platform web itu sendiri menyediakan lebih banyak fungsi daripada sebelumnya ...
Platform web sebagai kerangka kerja
Dalam artikel saya
"A Rube Goldberg Machine" dan
percakapan berikutnya, rekan saya
Ada Rose Cannon menggambarkan bagaimana fungsi CSS dan JavaScript baru dapat "dianggap sebagai kerangka kerja yang tertanam dalam platform web".
Misalnya, Properti Kustom CSS (lebih dikenal sebagai Variabel CSS) dapat berarti bahwa Anda tidak lagi membutuhkan precompiler CSS seperti
Sass . Dan CSS Grid sekarang dapat menyelamatkan Anda dari memuat Bootstrap.
“Anda tidak perlu kerangka kerja untuk menggunakan CSS Grid. CSS Grid adalah sebuah kerangka kerja. "
- Rachel Andrew
Komponen web
Komponen Web sangat kuat dan merupakan kunci dari banyak tren ini. Mereka termasuk fitur-fitur berikut - Elemen Kustom, DOM Shadow dan templat HTML -
belum tersedia di mana-mana , tetapi, seperti
kata Ada , mereka memiliki dukungan yang cukup bagus, dan
ada polyfile yang memberikan mereka dukungan yang lebih baik lagi, sehingga Anda dapat menggunakannya hari ini!
Ada dan
Ruth John baru-baru ini mengembangkan aplikasi web untuk memvisualisasikan musik menggunakan komponen web dan
membagikan pelajaran mereka .
Selain itu, Anda dapat merasa lebih aman dengan fitur-fitur baru seperti Komponen Web jika Anda menggunakan rendering sisi-server (SSR) dan mengimplementasikan sisi klien Anda dengan
Peningkatan Progresif .
Preferensi pribadi saya adalah untuk membangun pengalaman SSR yang hebat dan kemudian meningkatkannya ke Aplikasi Halaman Tunggal.
- Ada Rose Cannon
Modul ES Isomorfik
Anda juga dapat menggunakan
modul ES sekarang! Sekali lagi, dukungan browser cukup bagus, dan Anda dapat mendukung browser lama menggunakan
fallback "nomodule" .
Faktanya, jika Anda setuju dengan pendekatan SSR + Progressive Enhancement, Anda bahkan dapat menggunakan modul ES tanpa harus menggunakan alat bangun untuk
memindahkannya ke browser lain, karena browser lama masih dapat bekerja tanpa JavaScript. Dan menggunakan pemuat modul
ESM , kita juga bisa
menggunakan modul ES langsung di NodeJS .
Ini bagus karena kita dapat menggunakan kembali naskah kita di frontend dan backend (yaitu, "rendering isomorfik"), tanpa menari dengan rebana. Kami dapat menyusun kode frontend kami tanpa harus menyatukan skrip kami, meletakkan banyak tag skrip pada halaman, atau menggunakan pemuat sisi klien.
Inilah yang ditunjukkan oleh Ada dalam
pembicaraan Twitch pertamanya bulan ini. Ada juga
entri blog dengan penjelasan.
Saya harap saya bisa membagikan pemikiran saya ketika kita mulai memasuki era baru pengembangan web. Era yang kurang bergantung pada kerangka UI tradisional, pustaka CSS, dan bundler. Era di mana kami mengirim byte lebih sedikit dan memuat aplikasi web kami lebih cepat. Era kerangka kerja yang terancam punah.
Terima kasih kepada Nolan Lawson, Rich Harris dan Ada Rose Cannon untuk bantuan dan inspirasi mereka untuk artikel ini. Artikel ini juga diposting di sini di blog pribadi saya.***
Dari diriku sendiri aku ingin mencatat bahwa, sayangnya, saat ini hanya aku di Habré yang menulis tentang
Svelte . Oleh karena itu, dalam bahasa Rusia ada sedikit informasi tentang kerangka yang luar biasa ini.
Jika Anda bertemu dengannya untuk pertama kalinya, Anda mungkin tertarik untuk membaca artikel lain tentang topik ini:
Siapa yang ingin memantau perkembangannya secara aktif - selamat datang di saluran telegram berbahasa Rusia
SvelteJS . Kami akan senang melihat Anda!
Selamat untuk semuanya di musim panas dan kemenangan tim kami! Semoga akhir pekanmu menyenangkan! Hore!