Kandungan
- 01. Sudut
- 02. Reaksi
- 03. Vue
- Bagaimana perbandingan sintaks kerangka kerja?
- Populariti dan pasaran
- Pembangunan aplikasi mudah alih
- Kerangka lain yang perlu diperhatikan pada tahun 2020
- Kesimpulannya
Pada tahun 2020, kami dikurniakan sejumlah kerangka kerja dan perpustakaan untuk membantu kami dalam pembangunan web. Tetapi tidak selalu terdapat banyak ragam. Kembali pada tahun 2005, bahasa skrip baru bernama Mocha diciptakan oleh seorang lelaki bernama Brendan Eich. Sebulan setelah diganti namanya menjadi LiveScript, namanya ditukar lagi menjadi JavaScript. Sejak itu, JavaScript telah berjalan jauh.
Pada tahun 2010, kami melihat pengenalan Backbone dan Angular sebagai kerangka kerja JavaScript pertama dan, pada tahun 2016, 92 peratus dari semua laman web menggunakan JavaScript. Dalam artikel ini, kita akan melihat tiga kerangka kerja JavaScript utama (Angular, React dan Vue) dan statusnya menuju dekad berikutnya. Ingin membuat laman web anda sendiri? Cuba senarai pembangun laman web ini.
Untuk beberapa sumber yang hebat, lihat senarai alat reka bentuk web teratas kami, rangkaian perkhidmatan hosting web kami, dan senarai perisian ujian pengguna yang sangat baik ini juga.
01. Sudut
AngularJS dilancarkan pada tahun 2010 tetapi pada tahun 2016 ia ditulis sepenuhnya dan dilancarkan sebagai Angular 2. Angular adalah kerangka web lengkap yang dikembangkan oleh Google, yang digunakan oleh Wix, Upwork, The Guardian, HBO dan banyak lagi.
Kelebihan:
- Sokongan luar biasa untuk TypeScript
- MVVM membolehkan pembangun memisahkan kerja pada bahagian aplikasi yang sama dengan menggunakan set data yang sama
- Dokumentasi yang sangat baik
Keburukan:
- Mempunyai sedikit keluk pembelajaran
- Berhijrah dari versi lama mungkin sukar.
- Kemas kini diperkenalkan secara berkala yang bermaksud pembangun perlu menyesuaikan diri dengannya
Apa yang akan datang?
Di Angular 9, Ivy adalah penyusun lalai. Ini disiapkan untuk menyelesaikan banyak masalah mengenai prestasi dan ukuran fail. Ia semestinya menjadikan aplikasi lebih kecil, lebih cepat dan lebih mudah.
Apabila anda membandingkan versi Angular to React dan Vue sebelumnya, the
saiz bundle akhir jauh lebih besar ketika menggunakan Angular. Ivy juga menjadikan Progressive Hydration menjadi mungkin, yang merupakan sesuatu yang ditunjukkan oleh pasukan Angular pada I / O 2019. Progressive Hydration menggunakan Ivy untuk memuat secara progresif pada pelayan dan pelanggan. Contohnya, apabila pengguna mula berinteraksi dengan halaman, kod komponen bersamaan dengan apa sahaja masa berjalan diambil satu demi satu.
Ivy nampaknya menjadi tumpuan utama untuk Angular dan harapannya adalah untuk membuatnya tersedia untuk semua aplikasi. Akan ada pilihan keluar dalam versi 9, hingga ke Angular 10.
02. Reaksi
React pada mulanya dikeluarkan pada tahun 2013 oleh Facebook dan digunakan untuk membina antara muka web interaktif. Ia digunakan oleh Netflix, Dropbox, PayPal dan Uber untuk menamakan beberapa.
Kelebihan:
- React menggunakan DOM maya, yang memberi kesan positif terhadap prestasi
- JSX senang ditulis
- Kemas kini tidak menjejaskan kestabilan
Keburukan:
- Salah satu kemunduran utama adalah memerlukan perpustakaan pihak ketiga untuk membuat aplikasi yang lebih kompleks
- Pembangun dibiarkan dalam kegelapan dengan cara terbaik untuk membangun
Apa yang akan datang?
Pada React Conf 2019, pasukan React menyentuh beberapa perkara yang telah mereka kerjakan. Yang pertama adalah Selective Hydration, di mana React akan menghentikan apa sahaja yang sedang dikerjakannya untuk memprioritaskan komponen yang berinteraksi dengan pengguna. Semasa pengguna berinteraksi dengan bahagian tertentu, kawasan tersebut akan terhidrat. Pasukan ini juga telah mengusahakan Suspense, yang merupakan sistem React untuk mengatur pemuatan kod, data dan gambar. Ini membolehkan komponen menunggu sesuatu sebelum dihasilkan.
Kedua-dua Hydration Selective dan Suspense dimungkinkan oleh Concurrent Mode, yang membolehkan aplikasi lebih responsif dengan memberikan kemampuan React untuk memasuki blok besar dengan kerja prioriti yang lebih rendah untuk memberi tumpuan kepada sesuatu yang mempunyai keutamaan yang lebih tinggi, seperti menanggapi input pengguna. Pasukan ini juga menyebutkan kebolehcapaian sebagai bidang lain yang telah mereka kaji, dengan memfokuskan pada dua topik tertentu - menguruskan fokus dan antara muka input.
03. Vue
Vue dikembangkan pada tahun 2014 oleh Evan You, bekas pekerja Google. Ia digunakan oleh Xiaomi, Alibaba dan GitLab. Vue berjaya mendapat populariti dan sokongan daripada pemaju dalam jangka masa yang singkat dan tanpa sokongan jenama utama.
Kelebihan:
- Saiznya sangat ringan
- Mesra pemula - senang dipelajari
- Komuniti yang hebat
Keburukan:
- Tidak disokong oleh syarikat besar, seperti React with Facebook dan Angular with Google
- Tiada struktur sebenar
Apa yang akan datang?
Vue telah menetapkan sasaran untuk menjadi lebih cepat, lebih kecil, lebih terawat dan memudahkan pengembang untuk menargetkan bahasa asli (jika anda menghadapi masalah untuk mempertahankannya, pertimbangkan layanan hosting web). Rilis seterusnya (3.0) dijadualkan pada Q1 2020, yang merangkumi penulisan semula DOM maya untuk prestasi yang lebih baik bersama dengan Sokongan TypeScript yang lebih baik. Terdapat juga penambahan API Komposisi, yang menyediakan cara baru kepada pembangun untuk membuat komponen dan menyusunnya berdasarkan ciri dan bukannya operasi.
Mereka yang mengembangkan Vue juga sibuk mengerjakan Suspense, yang menangguhkan rendering komponen anda dan membuat komponen fallback sehingga syarat terpenuhi.
Salah satu perkara hebat dengan kemas kini Vue ialah mereka mengekalkan keserasian ke belakang. Mereka tidak mahu anda merosakkan projek Vue lama anda. Kami melihat ini dalam migrasi dari 1.0 ke 2.0 di mana 90 peratus API adalah sama.
Bagaimana perbandingan sintaks kerangka kerja?
Ketiga-tiga kerangka kerja telah mengalami perubahan sejak dilancarkan tetapi satu perkara yang penting untuk difahami adalah sintaks dan bagaimana ia berbeza. Mari kita lihat bagaimana sintaks dibandingkan dengan peristiwa sederhana yang mengikat:
Vue: The v-on arahan digunakan untuk melampirkan pendengar acara yang menggunakan kaedah pada contoh Vue. Arahan diawali dengan v- untuk menunjukkan bahawa mereka adalah atribut khas yang disediakan oleh Vue dan menerapkan tingkah laku reaktif khas pada DOM yang diberikan. Pengendali acara boleh diberikan sama ada sebaris atau sebagai nama kaedah.
templat> butang v-on: klik = "clickHandler"> Klik saya / butang> / templat> skrip> eksport lalai {name: "HelloWorld", kaedah: {clickHandler: function () {console.log ("Saya diklik! ”); }}}; / skrip>
Bertindak: React meletakkan tanda dan logik dalam JS dan JSX, lanjutan sintaks untuk JavaScript. Dengan JSX, fungsi diteruskan sebagai pengendali acara. Mengendalikan acara dengan elemen React sangat serupa dengan menangani peristiwa pada elemen DOM. Tetapi terdapat beberapa perbezaan sintaksis; sebagai contoh, peristiwa React dinamakan menggunakan camelCase dan bukannya huruf kecil.
fungsi Butang () {function clickHandler (e) {console.log ("Saya diklik"); } butang kembali onClick = {clickHandler}> Klik saya! / butang>; }
Sudut: Sintaks pengikatan peristiwa terdiri daripada nama peristiwa sasaran dalam kurungan di sebelah kiri tanda sama dan pernyataan templat yang dipetik di sebelah kanan. Sebagai alternatif, anda boleh menggunakan pada- awalan, dikenali sebagai bentuk kanonik.
@Component ({selector: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>“}) kelas eksport ClickMeComponent {onClickMe () {console.log (“ Anda mengklik saya! ”); }}
Populariti dan pasaran
Mari kita mulakan dengan melihat gambaran keseluruhan ketiga kerangka berkenaan dengan seluruh web dengan memeriksa statistik dari W3Techs. Angular saat ini digunakan oleh 0,4 persen dari semua laman web, dengan pangsa pasar perpustakaan JavaScript 0,5 persen. React digunakan oleh 0,3 persen dari semua laman web dan 0,4 persen pangsa pasar perpustakaan JavaScript dan Vue memiliki 0,3 persen untuk keduanya. Ini nampaknya agak merata dan anda pasti akan melihat jumlahnya meningkat.
Trend Google: Sejak 12 bulan yang lalu, React adalah yang paling popular dalam istilah carian, diikuti oleh Angular. Vue.js agak ketinggalan; namun, satu perkara yang perlu diingat ialah Vue masih muda berbanding dengan dua yang lain.
Pencarian pekerjaan: Pada masa penulisan, React dan Angular sangat sepadan dari segi senarai pekerjaan mengenai Memang dengan Vue jauh di belakang. Namun, di LinkedIn, nampaknya terdapat lebih banyak permintaan untuk pembangun Vue.
Limpahan Stack: Sekiranya anda melihat hasil Tinjauan Pembangun Stack Overflow untuk tahun 2019, React dan Vue.js adalah kerangka web yang paling disukai dan dikehendaki. Angular duduk di kedudukan kesembilan untuk yang paling disayangi tetapi yang ketiga paling dikehendaki.
GitHub: Vue mempunyai bilangan bintang terbanyak dengan 153k tetapi ia mempunyai bilangan penyumbang paling sedikit (283). React sebaliknya mempunyai 140k bintang dan 1,341 penyumbang. Angular hanya mempunyai 59.6k bintang tetapi mempunyai jumlah penyumbang tertinggi dari ketiga dengan 1,579.
Trend NPM: Gambar di atas menunjukkan statistik selama 12 bulan terakhir, di mana anda dapat melihat React mempunyai jumlah muat turun yang lebih tinggi setiap bulan berbanding Angular dan Vue.
Pembangunan aplikasi mudah alih
Salah satu fokus utama untuk tiga besar adalah penggunaan mudah alih. React mempunyai React Native, yang telah menjadi pilihan popular untuk membina aplikasi iOS dan Android bukan hanya untuk pengguna React tetapi juga untuk komuniti pengembangan aplikasi yang lebih luas. Pembangun sudut boleh menggunakan NativeScript untuk aplikasi asli atau Ionic untuk aplikasi mudah alih hibrid, sedangkan pembangun Vue mempunyai pilihan NativeScript atau Vue Native. Kerana populariti aplikasi mudah alih, ini tetap menjadi bidang pelaburan utama.
Kerangka lain yang perlu diperhatikan pada tahun 2020
Sekiranya anda ingin mencuba sesuatu yang baru pada tahun 2020, lihat kerangka kerja JavaScript ini.
Ember: Kerangka sumber terbuka untuk membina aplikasi web yang berfungsi berdasarkan corak MVVM. Ia digunakan oleh beberapa syarikat besar seperti Microsoft, Netflix dan LinkedIn.
Meteor: Platform JavaScript bertumpuk penuh untuk mengembangkan aplikasi web dan mudah alih moden. Mudah dipelajari dan mempunyai komuniti yang sangat menyokong.
Kesimpulannya
Ketiga-tiga kerangka kerja terus meningkat, yang merupakan tanda yang menggembirakan. Setiap orang mempunyai perspektif dan penyelesaian pilihan mereka sendiri tentang kaedah mana yang harus mereka gunakan tetapi ia benar-benar sesuai dengan ukuran projek dan yang membuat anda merasa lebih selesa.
Aspek yang paling penting adalah sokongan berterusan dari komuniti mereka, jadi jika anda merancang untuk memulakan projek baru dan tidak pernah menggunakan salah satu dari tiga perkara sebelumnya, maka saya percaya anda berada di tangan yang selamat dengan semua itu. Sekiranya anda belum berpeluang mempelajari salah satu daripada tiga kerangka tersebut, maka saya cadangkan menjadikannya sebagai resolusi Tahun Baru anda untuk mula belajar. Masa depan akan berkisar pada ketiga-tiganya.
Kandungan ini pada mulanya muncul di majalah net.
