Isi
- 01. Sudut
- 02. Bereaksi
- 03. Vue
- Bagaimana sintaks kerangka dibandingkan?
- Popularitas dan pasar
- Pengembangan aplikasi seluler
- Kerangka kerja lain yang harus diperhatikan pada tahun 2020
- Kesimpulan
Pada tahun 2020, kami diberkati dengan sejumlah kerangka kerja dan perpustakaan untuk membantu kami dalam pengembangan web. Tetapi tidak selalu ada begitu banyak variasi. Pada tahun 2005, bahasa skrip baru bernama Mocha dibuat oleh seorang pria bernama Brendan Eich. Beberapa bulan setelah diubah namanya menjadi LiveScript, namanya diubah lagi menjadi JavaScript. Sejak itu, JavaScript telah berkembang pesat.
Pada tahun 2010, kami melihat pengenalan Backbone dan Angular sebagai kerangka kerja JavaScript pertama dan, pada tahun 2016, 92 persen dari semua situs web menggunakan JavaScript. Pada artikel ini, kita akan melihat tiga kerangka kerja JavaScript utama (Angular, React dan Vue) dan statusnya menuju dekade berikutnya. Ingin membuat situs sendiri? Coba daftar pembuat situs web ini.
Untuk beberapa sumber daya brilian, lihat daftar alat desain web teratas kami, kumpulan layanan hosting web kami, dan daftar perangkat lunak pengujian pengguna yang sangat baik ini juga.
01. Sudut
AngularJS dirilis pada 2010, tetapi pada 2016 itu sepenuhnya ditulis ulang dan dirilis sebagai Angular 2. Angular adalah kerangka kerja web lengkap yang dikembangkan oleh Google, yang digunakan oleh Wix, Upwork, The Guardian, HBO, dan lainnya.
Kelebihan:
- Dukungan luar biasa untuk TypeScript
- MVVM memungkinkan pengembang untuk memisahkan pekerjaan di bagian aplikasi yang sama menggunakan kumpulan data yang sama
- Dokumentasi yang bagus
Kekurangan:
- Memiliki sedikit kurva belajar
- Bermigrasi dari versi lama bisa jadi sulit.
- Pembaruan diperkenalkan secara teratur yang berarti pengembang perlu beradaptasi dengannya
Apa berikutnya?
Di Angular 9, Ivy adalah kompiler default. Ini telah diterapkan untuk menyelesaikan banyak masalah seputar kinerja dan ukuran file. Ini harus membuat aplikasi lebih kecil, lebih cepat dan lebih sederhana.
Saat Anda membandingkan versi Angular to React dan Vue sebelumnya, file
ukuran bundel terakhir jauh lebih besar saat menggunakan Angular. Ivy juga memungkinkan Progressive Hydration, yang merupakan sesuatu yang ditunjukkan oleh tim Angular pada I / O 2019. Progressive Hydration menggunakan Ivy untuk memuat secara progresif di server dan klien. Misalnya, setelah pengguna mulai berinteraksi dengan halaman, kode komponen bersama dengan runtime apa pun diambil satu per satu.
Ivy sepertinya fokus besar ke depan untuk Angular dan harapannya adalah membuatnya tersedia untuk semua aplikasi. Akan ada opsi opt-out di versi 9, hingga Angular 10.
02. Bereaksi
React awalnya dirilis pada 2013 oleh Facebook dan digunakan untuk membangun antarmuka web interaktif. Ini digunakan oleh Netflix, Dropbox, PayPal dan Uber untuk beberapa nama.
Kelebihan:
- React menggunakan DOM virtual, yang berdampak positif pada kinerja
- JSX mudah untuk ditulis
- Pembaruan tidak mengganggu stabilitas
Kekurangan:
- Salah satu kemunduran utama adalah membutuhkan pustaka pihak ketiga untuk membuat aplikasi yang lebih kompleks
- Pengembang tidak mengetahui cara terbaik untuk berkembang
Apa berikutnya?
Di React Conf 2019, tim React menyinggung sejumlah hal yang telah mereka kerjakan. Yang pertama adalah Hidrasi Selektif, di mana React akan menjeda apa pun yang sedang dikerjakannya untuk memprioritaskan komponen yang berinteraksi dengan pengguna. Saat pengguna berinteraksi dengan bagian tertentu, area tersebut akan terhidrasi. Tim juga telah mengerjakan Suspense, yang merupakan sistem React untuk mengatur pemuatan kode, data, dan gambar. Ini memungkinkan komponen menunggu sesuatu sebelum dirender.
Hidrasi Selektif dan Penangguhan dimungkinkan oleh Mode Bersamaan, yang memungkinkan aplikasi menjadi lebih responsif dengan memberikan React kemampuan untuk memasukkan blok besar pekerjaan dengan prioritas lebih rendah untuk fokus pada sesuatu yang memiliki prioritas lebih tinggi, seperti menanggapi masukan pengguna. Tim juga menyebutkan aksesibilitas sebagai area lain yang mereka lihat, dengan berfokus pada dua topik tertentu - mengelola fokus dan antarmuka input.
03. Vue
Vue dikembangkan pada tahun 2014 oleh Evan You, seorang mantan karyawan Google. Ini digunakan oleh Xiaomi, Alibaba dan GitLab. Vue berhasil mendapatkan popularitas dan dukungan dari pengembang dalam waktu singkat dan tanpa dukungan merek besar.
Kelebihan:
- Ukurannya sangat ringan
- Ramah pemula - mudah dipelajari
- Komunitas yang hebat
Kekurangan:
- Tidak didukung oleh perusahaan besar, seperti Bereaksi dengan Facebook dan Angular dengan Google
- Tidak ada struktur nyata
Apa berikutnya?
Vue telah menetapkan sendiri target menjadi lebih cepat, lebih kecil, lebih mudah dipelihara, dan mempermudah pengembang untuk menargetkan native (jika Anda mengalami masalah dalam memelihara, pertimbangkan layanan hosting web). Rilis berikutnya (3.0) akan dirilis pada Q1 2020, yang mencakup penulisan ulang DOM virtual untuk kinerja yang lebih baik bersama dengan Dukungan TypeScript yang ditingkatkan. Ada juga tambahan API Komposisi, yang memberi pengembang cara baru untuk membuat komponen dan mengaturnya berdasarkan fitur, bukan operasi.
Mereka yang mengembangkan Vue juga sibuk mengerjakan Suspense, yang menangguhkan rendering komponen Anda dan merender komponen fallback hingga kondisi terpenuhi.
Salah satu hal hebat dengan pembaruan Vue adalah mereka mempertahankan kompatibilitas ke belakang. Mereka tidak ingin Anda merusak proyek Vue lama Anda. Kami melihat ini dalam migrasi dari 1.0 ke 2.0 di mana 90 persen API-nya sama.
Bagaimana sintaks kerangka dibandingkan?
Ketiga kerangka kerja telah mengalami perubahan sejak dirilis, tetapi satu hal yang penting untuk dipahami adalah sintaks dan perbedaannya. Mari kita lihat bagaimana perbandingan sintaksis dalam hal pengikatan peristiwa sederhana:
Vue: Itu v-on direktif digunakan untuk melampirkan event listener yang memanggil metode pada instance Vue. Perintah diawali dengan v- untuk menunjukkan bahwa mereka adalah atribut khusus yang disediakan oleh Vue dan menerapkan perilaku reaktif khusus ke DOM yang dirender. Penangan kejadian dapat disediakan baik sebaris atau sebagai nama metode.
template> button v-on: click = ”clickHandler”> Klik me / button> / template> script> export default {name: “HelloWorld”, metode: {clickHandler: function () {console.log (“Saya diklik! ”); }}}; / script>
Reaksi: React menempatkan mark up dan logika di JS dan JSX, ekstensi sintaks untuk JavaScript. Dengan JSX, fungsi dilewatkan sebagai pengendali kejadian. Menangani event dengan elemen React sangat mirip dengan penanganan event pada elemen DOM. Tetapi ada beberapa perbedaan sintaksis; misalnya, peristiwa React diberi nama menggunakan camelCase daripada huruf kecil.
Tombol fungsi () {function clickHandler (e) {console.log ("Saya diklik"); } tombol kembali onClick = {clickHandler}> Klik saya! / button>; }
Sudut: Sintaks pengikatan peristiwa terdiri dari nama peristiwa target dalam tanda kurung di sebelah kiri tanda sama dengan dan pernyataan template yang dikutip di sebelah kanan. Atau, Anda dapat menggunakan di- prefiks, yang dikenal sebagai bentuk kanonik.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`}) kelas ekspor ClickMeComponent {onClickMe () {console.log (“ Anda mengklik saya! ”); }}
Popularitas dan pasar
Mari kita mulai dengan melihat gambaran keseluruhan dari tiga kerangka kerja terkait dengan web lainnya dengan memeriksa statistik dari W3Techs. Angular saat ini digunakan oleh 0,4 persen dari semua situs web, dengan pangsa pasar perpustakaan JavaScript sebesar 0,5 persen. React digunakan oleh 0,3 persen dari semua situs web dan 0,4 persen pangsa pasar perpustakaan JavaScript dan Vue memiliki 0,3 persen untuk keduanya. Ini tampaknya cukup merata dan Anda akan berharap untuk melihat angkanya meningkat.
Tren Google: Selama 12 bulan terakhir, React adalah yang paling populer dalam istilah pencarian, diikuti oleh Angular. Vue.js cukup jauh di belakang; Namun, satu hal yang perlu diingat adalah Vue masih muda dibandingkan dua lainnya.
Pencarian pekerjaan: Pada saat penulisan, React dan Angular sangat cocok dalam hal daftar pekerjaan di Memang dengan Vue jauh di belakang. Di LinkedIn, bagaimanapun, tampaknya ada lebih banyak permintaan untuk pengembang Vue.
Stack Overflow: Jika Anda melihat hasil Survei Pengembang Stack Overflow untuk tahun 2019, React dan Vue.js adalah kerangka kerja web yang paling disukai dan diinginkan. Angular duduk di posisi kesembilan untuk yang paling dicintai tapi paling dicari ketiga.
GitHub: Vue memiliki jumlah bintang terbanyak dengan 153k tetapi memiliki jumlah kontributor paling sedikit (283). React di sisi lain memiliki 140k bintang dan 1.341 kontributor. Angular hanya memiliki 59.6k bintang tetapi memiliki jumlah kontributor tertinggi dari ketiganya dengan 1.579.
Tren NPM: Gambar di atas menunjukkan statistik selama 12 bulan terakhir, di mana Anda dapat melihat React memiliki jumlah unduhan yang lebih tinggi per bulan dibandingkan dengan Angular dan Vue.
Pengembangan aplikasi seluler
Satu fokus utama untuk tiga besar adalah penerapan seluler. React memiliki React Native, yang telah menjadi pilihan populer untuk membangun aplikasi iOS dan Android tidak hanya untuk pengguna React tetapi juga untuk komunitas pengembangan aplikasi yang lebih luas. Pengembang sudut dapat menggunakan NativeScript untuk aplikasi asli atau Ionic untuk aplikasi seluler hybrid, sedangkan pengembang Vue memiliki pilihan NativeScript atau Vue Native. Karena popularitas aplikasi seluler, ini tetap menjadi bidang investasi utama.
Kerangka kerja lain yang harus diperhatikan pada tahun 2020
Jika Anda ingin mencoba sesuatu yang baru di tahun 2020, lihat kerangka kerja JavaScript berikut.
Bara: Kerangka kerja sumber terbuka untuk membuat aplikasi web yang bekerja berdasarkan pola MVVM. Ini digunakan oleh beberapa perusahaan besar seperti Microsoft, Netflix dan LinkedIn.
Meteor: Platform JavaScript lengkap untuk mengembangkan aplikasi web dan seluler modern. Mudah dipelajari dan memiliki komunitas yang sangat mendukung.
Kesimpulan
Ketiga kerangka kerja tersebut terus meningkat, yang merupakan tanda yang menggembirakan. Setiap orang memiliki perspektif mereka sendiri dan solusi yang disukai tentang mana yang harus mereka gunakan tetapi itu benar-benar tergantung pada ukuran proyek dan mana yang membuat Anda merasa lebih nyaman.
Aspek yang paling penting adalah dukungan berkelanjutan dari komunitas mereka, jadi jika Anda berencana untuk memulai proyek baru dan belum pernah menggunakan salah satu dari ketiganya sebelumnya, saya yakin Anda aman dengan mereka semua. Jika Anda belum memiliki kesempatan untuk mempelajari salah satu dari tiga kerangka kerja, saya sarankan untuk menjadikannya sebagai resolusi Tahun Baru Anda untuk mulai belajar. Masa depan akan berputar di sekitar ketiganya.
Konten ini awalnya muncul di majalah net.
