Tren Terbaru dalam Pengembangan Aplikasi Web untuk Tahun 2021: Apa yang Diharapkan dari Industri

Tahun akan segera berakhir, dan meskipun masih terlalu dini untuk menghitung hasil tahun 2019, sudah pasti saatnya untuk melihat ke depan dan mempertimbangkan tren masa depan dalam pengembangan web . Sebagai perusahaan pengembangan web, kami berkepentingan untuk terus mengikuti hal-hal ini. Dalam artikel ini, kami mencantumkan teknologi dan pendekatan yang sedang tren — baru dan lama — kami yakin akan memiliki daya tarik yang signifikan tahun depan. Baca terus untuk mengetahui apa itu.

Untuk kejelasan dan kenyamanan, artikel dibagi menjadi beberapa bagian: backend, frontend, desain web, dan lain-lain .

Tren backend

HTTP/3

HTTP/3 adalah versi terbaru dari protokol HTTP yang kita semua kenal. Ini adalah lompatan yang signifikan dari HTTP/2, terutama karena HTTP/3 dibangun di atas protokol QUIC berbasis UDP (diucapkan "cepat" dan singkatan dari Quick UDP Internet Connections), sedangkan HTTP/2 didasarkan pada TCP (Transmission Control Protocol) . HTTP/2 menggunakan satu koneksi, yang umumnya tidak menjadi masalah kecuali kita berbicara tentang jaringan berkualitas rendah. Dalam jaringan berkualitas rendah, HTTP/2 bisa sangat lambat, karena memerlukan waktu ekstra untuk memproses ulang paket yang hilang.

Sambungan UDP tradisional memiliki masalah dengan keandalan transfer data karena kurangnya mekanisme pemeriksaan kesalahan ekstra . Ketika sebuah paket dijatuhkan, sistem tidak mentransmisikannya kembali, karena tidak memiliki overhead untuk membuka/mempertahankan/menutup koneksi. QUIC memecahkan masalah ini dengan multiplexing atau transmisi simultan dari beberapa sinyal melalui satu saluran. Ini menggabungkan keandalan TCP dengan kecepatan UDP.

QUIC pada dasarnya sesuai dengan namanya — protokol yang lebih cepat . Ini lebih sederhana, lebih ringan, dan lebih efisien, semuanya dengan tetap menjaga keandalan. Tidak heran ini adalah salah satu tren masa depan dalam pengembangan web.

GrafikQL

GraphQL adalah bahasa kueri API dan standar untuk mengembangkan API. Ini adalah anak dari Facebook, dan bahkan tidak terlalu muda — dikembangkan pada tahun 2012 dan dibuat open-source pada tahun 2015. Namun GraphQL diadopsi oleh semakin banyak perusahaan akhir-akhir ini, yang memaksa kami untuk menambahkannya ke daftar kami tren pengembangan web untuk tahun 2021.

Sebelum GraphQL, kami memiliki REST, yang masalah utamanya adalah membutuhkan banyak titik akhir dan menarik terlalu banyak data darinya, tidak semuanya diperlukan untuk tugas yang ada. GraphQL berbeda. Dengan GraphQL, Anda hanya mendapatkan data yang Anda minta secara khusus melalui satu titik akhir. Hal ini membuat GraphQL lebih cepat dan lebih efisien . Selain itu, kode API jauh lebih pendek, karena Anda tidak perlu menulis titik akhir terpisah untuk setiap permintaan.

Terakhir, perlu diingat bahwa GraphQL adalah bahasa sumber terbuka, artinya dapat ditingkatkan oleh hampir semua orang. Open-source membuat evolusi konstan. Kita akan melihat tren baru apa yang dibawa GraphQL di masa depan.

Bot dan AI

Chatbots ada di mana-mana akhir-akhir ini, bukan? Mereka sedang tren di web dan juga di seluler. Dan sepertinya mereka tidak akan berhenti dalam waktu dekat. Selain itu, dengan bantuan sistem pemrosesan bahasa alami (NLP) bertenaga AI , mereka menjadi lebih pintar dan lebih efisien.

Sementara beberapa tahun yang lalu chatbots hanya menawarkan percakapan yang diprogram secara ketat yang memecahkan berbagai masalah terbatas, hari ini, mengobrol dengan bot hampir terasa tidak dapat dibedakan dari mengobrol dengan spesialis dukungan manusia.

AI kini telah merayap bahkan ke dalam desain web. Alat seperti Sketch2Code dapat secara otomatis mengubah sketsa situs web menjadi prototipe HTML. AI meningkatkan pengalaman pengguna, membuat pencarian dan rekomendasi lebih tepat, dan menawarkan pengoptimalan pencarian suara.

Nest.js

Nest.js adalah kerangka kerja Node.js yang memungkinkan pengembang web membangun aplikasi sisi server yang skalabel. Nest.js telah mendapatkan tempat di antara tren pengembangan web yang perlu diingat oleh setiap CTO untuk tahun depan (dan mungkin lebih lama) berkat kombinasi fleksibilitas dan keamanannya.

Dibangun menggunakan TypeScript, superset JavaScript, dan sangat terinspirasi oleh Angular, Nest.js lebih sederhana, lebih fleksibel, dan memungkinkan waktu henti yang lebih sedikit daripada kebanyakan opsi lainnya. Ini sepenuhnya kompatibel dengan server Node.js Express dan dengan sebagian besar pustaka JavaScript yang ada. Ada juga solusi arsitektur out-of-the-box yang tersedia untuk Nest.js, dan aplikasinya dapat ditulis tidak hanya dengan TypeScript tetapi juga dengan JavaScript jika pengembang lebih suka.

Tren tampilan depan

Perakitan Web (WASM)

JavaScript memang bagus, tapi bukan tanpa kesalahan. Satu masalah khusus yang dimiliki JavaScript adalah kinerja. Ini adalah masalah yang sama untuk semua bahasa pemrograman yang ditafsirkan, dan WebAssembly adalah cara terbaru untuk melawannya.

Hal terbaik tentang WebAssembly adalah bahwa ini bukan bahasa yang sama sekali baru. Anda dapat menulis dalam bahasa yang Anda inginkan dan kemudian mengompilasinya ke file WASM untuk dijalankan di browser. Bahasa yang saat ini didukung oleh WebAssembly adalah C/C++, Elixir, Rust, Python, Go, C#/.Net, dan Java.

WebAssembly tidak ditemukan pada tahun 2019; sudah ada di pasaran selama beberapa tahun. Tapi itu berkembang cepat dan menawarkan lebih banyak pilihan. Ini juga sekarang didukung oleh semua browser utama secara default, yang menjadikannya di bawah ikat pinggang programmer Anda menjadi hal yang hebat.

Aplikasi Web Progresif (PWA)

Aplikasi web progresif pada dasarnya adalah halaman web dengan fungsionalitas yang mirip dengan aplikasi seluler asli:

• Itu dapat "dipasang" di perangkat hanya dalam sekejap — pengguna cukup menyematkan halaman ke layar beranda ponsel cerdas mereka untuk mengaksesnya kapan saja, bahkan saat offline.
• Ini responsif — menyesuaikan dengan ukuran dan mode layar perangkat secara otomatis.
• Aman — PWA harus dilayani melalui HTTPS.
• Ini terlihat dan beroperasi seperti aplikasi asli tetapi membutuhkan lebih sedikit ruang.

Masih ada batasan untuk PWA, tentu saja, dan mereka tidak dapat menghapus aplikasi asli sepenuhnya. (Apakah mereka perlu melakukannya?) Secara khusus, karena pada dasarnya halaman web, PWA tidak dapat menggunakan sebagian besar fitur perangkat keras seperti NFC dan Bluetooth. Namun, tidak semua aplikasi memerlukan fungsi ini.

PWA lebih cepat, lebih mudah, dan lebih murah untuk dikembangkan, itulah sebabnya mereka menjadi tren dalam pengembangan web tahun ini dan pasti akan terus menjadi tren di tahun 2021.

Aksesibilitas (a11th)

Ini adalah salah satu tren terpenting dalam pengembangan aplikasi web. Kami percaya aksesibilitas harus berada di bagian atas daftar setiap pengembang situs web tidak hanya untuk situs baru tetapi juga untuk pembaruan situs lama.

Aksesibilitas, atau a11y, adalah prinsip yang mengatakan bahwa sistem komputer harus nyaman untuk semua jenis pengguna. Situs web harus berfungsi dengan baik di semua jenis perangkat, ya. Tetapi mereka juga harus bekerja dengan baik untuk pengguna dengan semua jenis gangguan dan kecacatan . A11y umumnya mengacu pada aksesibilitas perangkat lunak dan perangkat keras.

Dalam hal pengembangan web, aksesibilitas dapat dicapai melalui:

• ukuran font yang lebih besar atau dapat disesuaikan
• halaman kontras tinggi opsional
• dukungan untuk sintesis ucapan/text-to-speech
• subtitle dalam video
• transkrip untuk semua file audio
• pengenalan suara untuk navigasi
• teks bahasa sederhana
• menyoroti bagian-bagian penting
• navigasi yang konsisten dengan langkah sesedikit mungkin
• otorisasi yang disederhanakan (tetapi tanpa mengorbankan keamanan data)
• navigasi dengan keyboard alih-alih mouse/touchpad
• HTML semantik

Nama a11y berasal dari fakta bahwa ada 13 huruf dalam "aksesibilitas", jadi ada 11 antara "a" dan "y." Tetapi jika Anda perhatikan lebih dekat, a11y terlihat seperti kata “sekutu” — teman, asisten, pasangan.

Tren JavaScript

Ada sedikit hal baru dalam JavaScript secara keseluruhan, tentu saja, tetapi ada beberapa kerangka kerja frontend baru yang bermaksud untuk menggemparkan dunia. Mari kita bicara tentang mereka sedikit.

Gatsby.js

Gatsby adalah SSG, atau generator situs statis . Dan jika Anda berpikir bahwa situs statis adalah sesuatu dari masa lalu, kami punya berita untuk Anda: mereka adalah salah satu tren teknologi terbaru.

Salah satu kelebihan terbesar Gatsby.js adalah tidak memerlukan server tradisional; ia bekerja dengan BYOC (Bawa Konten Anda Sendiri) dan dapat membangun situs web berdasarkan data dari file CMS, CSV, API, dan penurunan harga. Gatsby juga menggunakan GraphQL, bahasa kueri API kelas atas yang telah kami sebutkan sebelumnya, untuk membangun lapisan data.

Menguasai Gatsby.js memang membutuhkan pengembang untuk mengetahui React Native dan/atau GraphQL, tetapi Anda tidak memerlukan pengetahuan mendalam langsung — Anda dapat mulai mempelajari ketiganya secara bersamaan.

Gatsby.js adalah SSG yang sempurna untuk mengembangkan situs web e-niaga . Generator berbasis React ini membantu Anda membuat situs yang dimuat dalam sekejap mata, secara harfiah — kami tidak berbicara detik di sini, kami berbicara milidetik. Setiap pemilik bisnis e-niaga tahu bahwa terkadang penundaan sepersekian detik dalam pemuatan halaman dapat membuat semua perbedaan dalam hal apakah pelanggan melakukan pembelian. Ini berlaku untuk jenis situs lain, meskipun mungkin pada tingkat yang lebih rendah.

Kerangka kerja SPA

Anda mungkin telah memperhatikan bagaimana dengan sebagian besar situs web, ada antarmuka dasar yang sama untuk semua, atau sebagian besar, halaman. Namun, ketika Anda membuka halaman lain di dalam situs web, seluruh halaman dimuat ulang, termasuk elemen-elemen yang sama. Itulah yang terjadi dengan aplikasi web multi-halaman.

SPA, atau aplikasi satu halaman, adalah aplikasi web yang halamannya tidak dimuat ulang sepenuhnya saat pengguna mengklik di antara bagian; itu hanya menarik data yang diperlukan alih-alih meminta pembaruan lengkap dari HTML. Ini mempersingkat waktu pemuatan. Ini juga membutuhkan bandwidth yang jauh lebih sedikit.

Saat ini, SPA dapat diimplementasikan dengan tiga kerangka kerja utama: React, Vue, dan Angular. React memiliki pangsa pasar terbesar, sementara Vue, sebagai anak baru di blok tersebut, memiliki yang terkecil. Namun, Vue.js mungkin yang terbaik yang dirancang untuk bekerja secara khusus dengan SPA — sangat kecil namun dapat diskalakan, fleksibel, dan menawarkan opsi integrasi rak teratas. Kami memperkirakan itu menjadi pemain berpengaruh tahun depan.

Vue 3

Pada akhir Juni 2019 , Evan You dan tim di belakang Vue.js memposting RFC (permintaan komentar) mengenai iterasi baru dari kerangka kerja, Vue 3, yang disambut dengan sedikit negatif di dalam komunitas. Tapi ternyata, negativitas ini keras tapi tidak terlalu besar. Juga, seperti yang sering terjadi, itu lahir dari sejumlah kesalahpahaman.

Alasan beberapa pengembang web memiliki celana dalam mereka adalah karena Vue.js tiba-tiba mendapatkan API komponen berbasis fungsi untuk menggantikan yang berbasis objek yang sudah dikenal . Namun, itu tidak sepenuhnya benar. API komponen berbasis fungsi yang baru adalah semacam tambahan dan dapat digunakan bersama dengan API berbasis objek tradisional jika Anda mau.

Sintaks baru di Vue 3 Composition API memiliki logika yang lebih baik dan membuat struktur kode menjadi lebih baik . Beberapa pengembang bahkan mengatakan itu sedikit mempersingkat kode. Pada saat penulisan, kerangka kerja Vue 3 tersedia sebagai plugin untuk Vue 2 menggunakan Pustaka Komposisi Vue.

langsing.js

Diperkenalkan oleh Rich Harris di JSConf EU 2019, Svelte pada saat yang sama mirip dan berbeda dari Vue. Ini serupa karena itu juga merupakan kerangka kerja komponen. Namun, tidak seperti Vue, Svelte adalah kompiler komponen yang berjalan selama waktu pembuatan . Ini memungkinkan untuk memuat hanya komponen yang diperlukan untuk menampilkan aplikasi Anda. Anda tidak menggunakan DOM virtual saat bekerja dengan Svelte.

Svelte memiliki sintaks sederhana yang memungkinkan pengembang mengakses variabel dari markup alih-alih menggunakan pembungkus status yang berbeda untuk kerangka kerja yang berbeda. Ini membuat Svelte menjadi kerangka kerja yang hampir sempurna bagi mereka yang baru mengenal pengembangan web. Untuk pengembang yang lebih berpengalaman, Svelte berarti kemungkinan untuk menulis kode lebih cepat dan sebagai hasilnya mendapatkan situs web berkinerja lebih tinggi.

Pada tahun sejak presentasinya, Svelte telah melalui peningkatan dan pembaruan besar , menghasilkan apa yang oleh banyak pengembang saat ini disebut sebagai salah satu kerangka kerja paling sederhana dan paling indah yang pernah ada.

TypeScript

TypeScript adalah superset dari JavaScript, dan itu mendapatkan popularitas meskipun (atau mungkin berkat) fakta bahwa itu tidak sepenuhnya baru. Sudah menjadi salah satu tren pemrograman web selama beberapa tahun sekarang, dan menjadi open-source, terus dikembangkan dan ditingkatkan.

Keuntungan dari TypeScript termasuk pengetikan statis opsional. Itu juga membuat fitur baru JavaScript kompatibel — ES6 dan ES7 dapat dikonversi ke ES5 dan lebih rendah menggunakan kompiler. Ini berarti bahwa kode yang ditulis untuk browser terbaru akan tetap berfungsi dengan yang lama.

TypeScript lebih mudah dibaca, lebih fleksibel dalam hal refactoring, lebih mudah untuk diuji, dan memiliki banyak dokumentasi terbaik untuk pengembang. Ini diyakini oleh banyak orang sebagai masa depan JavaScript .

kerangka kerja CSS

Kerangka membuat segalanya lebih sederhana, dan itu termasuk CSS yang banyak difitnah. Mari kita lihat apa yang sedang tren di CSS tahun ini.

CSS Houdini

Houdini (seperti dalam Harry Houdini, ilusionis terkenal) adalah kerangka kerja yang sangat unik di antara tren pengembangan web terbaru. Pada dasarnya, Houdini adalah kumpulan API yang menyediakan akses pengembang ke Model Objek CSS . Artinya, jika Anda memerlukan gaya yang belum tersedia di CSS, tidak perlu menimpa CSS dengan JavaScript. Dengan kerangka CSS Houdini, Anda dapat menulis kode yang akan dilihat oleh browser sebagai CSS dan diuraikan seperti itu.

Hasilnya adalah penguraian membutuhkan waktu yang jauh lebih sedikit, pengembang tidak perlu menunggu penyedia browser untuk memperluas CSS, dan desain dapat menjadi lebih terkustomisasi dan unik.

Namun, masih ada satu masalah: Houdini belum didukung oleh semua browser utama. Tetapi prosesnya telah diluncurkan dan kami menunggu cara kami menggunakan CSS untuk berubah sepenuhnya.

Bulma

Bulma adalah salah satu tren industri paling modern. Itu dibangun dengan ekstensi Sass (Sintactically Awesome Style Sheets) dan berdasarkan Modul Tata Letak Kotak Fleksibel CSS, atau singkatnya Flexbox. Flexbox adalah modul yang sering digunakan untuk membangun situs web responsif.

Bulma adalah kerangka kerja CSS open-source gratis yang menawarkan berbagai tema yang dibuat komunitas dengan gaya sesedikit mungkin . Ini mudah diterapkan dan dapat dikustomisasi berkat build Sass. Karena kesederhanaan kode CSS Bulma, situs web yang dibuat dengannya biasanya kompatibel dengan semua browser dan tidak menimbulkan masalah. Saat ini, ini adalah salah satu kerangka kerja CSS paling populer di kalangan pengembang, dan sepertinya akan memegang posisi itu tahun depan juga.

Angin belakang

Kerangka kerja Tailwind CSS telah ada selama beberapa waktu tetapi popularitasnya telah meningkat sedikit dalam beberapa bulan terakhir.

Hal yang aneh tentang Tailwind adalah bahwa itu bukan Kit UI, yang membedakannya dari kerangka kerja CSS lainnya. Ini tidak memiliki komponen UI bawaan . Sebagai gantinya, Tailwind menawarkan serangkaian widget untuk pengembangan UI cepat dengan kelas utilitas Atomic CSS . Ini berarti Anda akan dapat membangun dari awal dan persis seperti yang Anda butuhkan, tidak dibatasi oleh tema dan gaya yang ditawarkan kerangka kerja CSS lainnya.

Anda harus terbiasa dengan Atomic CSS, yang membuat Tailwind sedikit menantang dibandingkan dengan para pesaingnya. Sisi baiknya, ini akan memberi Anda tampilan dan nuansa paling kustom.

Desain UI gerak

Motion UI adalah tren baru terbesar dalam desain dan pengembangan web. Singkatnya, Motion UI berarti persis seperti namanya — menambahkan tindakan ke halaman situs web Anda. Dan itu tidak hanya mencakup visual. Interaksi mikro merupakan bagian dari Motion UI seperti halnya animasi. Gerakan responsif dapat membantu pengunjung Anda memahami makna di balik suatu elemen — misalnya, hanya dengan meluncurkan penjelasan saat kursor melayang di atasnya.

Menambahkan gerakan ke antarmuka situs web Anda dapat mencapai sejumlah tujuan:

• Bantu pengguna menavigasi situs dengan mudah
• Menarik perhatian ke bagian penting dari situs web Anda
• Hibur dan alihkan perhatian pengguna saat mereka menunggu transisi dari satu layar ke layar lainnya
• Tingkatkan identitas merek Anda

Motion membantu pemilik situs web menceritakan sebuah kisah dengan sangat sedikit kata. Atau tanpa kata sama sekali. Kuncinya adalah melakukannya dengan benar — tidak terlalu banyak dan tidak terlalu sedikit.

Tren teknologi aplikasi web lainnya

Kami ingin menunjukkan beberapa tren yang tidak sepenuhnya terkait dengan frontend, backend, atau desain. Ini adalah hal-hal sederhana yang semakin penting setiap tahun dan seiring berkembangnya teknologi.

Keamanan dan privasi data

Hari ini, kami memiliki jeda yang lebih pendek dan lebih pendek antara skandal kebocoran data baru. Tetapi masih membutuhkan kebocoran bagi seseorang untuk mencoba dan menambal lubang. Itu sama di dunia fisik dan online. Untuk alasan ini, protokol keamanan kelas atas yang baru dikembangkan terus-menerus: sertifikat SSL , pemeriksaan keamanan , perlindungan serangan DDoS , dan seterusnya dan seterusnya.

Pada Mei 2018, Uni Eropa mengeluarkan Peraturan Perlindungan Data Umum , atau GDPR. Menurut GDPR, situs web harus memberi tahu pengunjung tentang informasi apa yang akan dikumpulkan tentang mereka (baik melalui cookie atau dengan memberikan alamat email dan mengisi profil) dan bagaimana informasi itu akan digunakan. Hasilnya, kami melihat peningkatan besar dalam investasi keamanan siber. Orang-orang menuntut keamanan online sekarang karena kami mengelola identitas dan keuangan kami di internet.

Keamanan data bukan tren masa depan lagi. Ini tren hari ini, dan itu hanya akan menjadi lebih besar seiring waktu. Jadi, jika Anda adalah pemilik situs web, Anda harus tetap membuka mata.

Kecepatan muat

Jika Anda telah membaca artikel ini secara keseluruhan, Anda mungkin telah memperhatikan sejumlah teknologi, baik backend maupun frontend, yang berfokus pada pemuatan halaman yang lebih cepat , penyelesaian tugas yang lebih cepat , semuanya lebih cepat . Kami selalu terburu-buru, dan ketika halaman dimuat terlalu lambat, kami meninggalkannya dan mencari alternatif. Lagi pula, ada banyak. Kecepatan memuat adalah, sedang, dan akan menjadi tren dalam pengembangan web dalam beberapa tahun ke depan, dan pengembang web perlu memperhatikan semua teknologi baru yang ditujukan untuk mempercepat situs web.

Ini adalah pandangan kami tentang teknologi web yang kami harapkan akan berkembang di tahun depan.

Ditulis oleh Svitlana Varaksina dan Artem Chervichnik