VueJS - Ikhtisar

VueJSadalah kerangka kerja JavaScript progresif sumber terbuka yang digunakan untuk mengembangkan antarmuka web interaktif. Ini adalah salah satu kerangka kerja terkenal yang digunakan untuk menyederhanakan pengembangan web. VueJS berfokus pada lapisan tampilan. Ini dapat dengan mudah diintegrasikan ke dalam proyek-proyek besar untuk pengembangan front-end tanpa masalah apa pun.

Instalasi untuk VueJS sangat mudah untuk dimulai. Setiap pengembang dapat dengan mudah memahami dan membangun antarmuka web interaktif dalam hitungan waktu. VueJS dibuat oleh Evan You, mantan karyawan Google. Versi pertama VueJS dirilis pada Feb 2014. Baru-baru ini telah mencapai 64.828 bintang di GitHub, membuatnya sangat populer.

fitur

Berikut adalah fitur-fitur yang tersedia dengan VueJS.

DOM Virtual

VueJS menggunakan DOM virtual, yang juga digunakan oleh framework lain seperti React, Ember, dll. Perubahan tidak dilakukan pada DOM, melainkan replika DOM dibuat yang hadir dalam bentuk struktur data JavaScript . Setiap kali ada perubahan yang akan dilakukan, perubahan tersebut dilakukan pada struktur data JavaScript dan yang terakhir dibandingkan dengan struktur data asli. Perubahan terakhir kemudian diperbarui ke DOM asli, yang akan dilihat pengguna berubah. Ini bagus dalam hal pengoptimalan, lebih murah dan perubahan dapat dilakukan dengan kecepatan yang lebih cepat.

Pengikatan Data

Fitur data binding membantu memanipulasi atau menetapkan nilai ke atribut HTML, mengubah gaya, menetapkan kelas dengan bantuan direktif binding yang disebut v-bind tersedia dengan VueJS.

Komponen

Komponen adalah salah satu fitur penting VueJS yang membantu membuat elemen khusus, yang dapat digunakan kembali dalam HTML.

Penanganan Acara

v-on adalah atribut yang ditambahkan ke elemen DOM untuk mendengarkan kejadian di VueJS.

Animasi / Transisi

VueJS menyediakan berbagai cara untuk menerapkan transisi ke elemen HTML ketika ditambahkan / diperbarui atau dihapus dari DOM. VueJS memiliki komponen transisi bawaan yang perlu dililitkan di sekitar elemen untuk efek transisi. Kita dapat dengan mudah menambahkan pustaka animasi pihak ketiga dan juga menambahkan lebih banyak interaktivitas ke antarmuka.

Properti Terhitung

Ini adalah salah satu fitur penting VueJS. Ini membantu untuk mendengarkan perubahan yang dibuat pada elemen UI dan melakukan penghitungan yang diperlukan. Tidak perlu pengkodean tambahan untuk ini.

Template

VueJS menyediakan template berbasis HTML yang mengikat DOM dengan data instance Vue. Vue mengompilasi template ke dalam fungsi DOM Render virtual. Kita dapat menggunakan template dari fungsi render dan untuk melakukannya kita harus mengganti template dengan fungsi render.

Arahan

VueJS memiliki arahan bawaan seperti v-if, v-else, v-show, v-on, v-bind, dan v-model, yang digunakan untuk melakukan berbagai tindakan di frontend.

Pengamat

Pengamat diterapkan pada data yang berubah. Misalnya, elemen masukan formulir. Di sini, kami tidak perlu menambahkan acara tambahan apa pun. Pengamat menangani penanganan perubahan data apa pun yang membuat kodenya sederhana dan cepat.

Rute

Navigasi antar halaman dilakukan dengan bantuan vue-router.

Ringan

Skrip VueJS sangat ringan dan kinerjanya juga sangat cepat.

Vue-CLI

VueJS dapat diinstal pada baris perintah menggunakan antarmuka baris perintah vue-cli. Ini membantu untuk membangun dan mengkompilasi proyek dengan mudah menggunakan vue-cli.

Perbandingan dengan Kerangka Lain

Sekarang mari kita bandingkan VueJS dengan framework lain seperti React, Angular, Ember, Knockout, dan Polymer.

VueJS v / s Bereaksi

Virtual DOM

DOM virtual adalah representasi virtual dari pohon DOM. Dengan DOM virtual, objek JavaScript dibuat yang sama dengan DOM asli. Setiap kali perubahan perlu dilakukan pada DOM, objek JavaScript baru dibuat dan perubahan dilakukan. Kemudian, kedua objek JavaScript dibandingkan dan perubahan terakhir diperbarui di DOM asli.

VueJS dan React keduanya menggunakan DOM virtual, yang membuatnya lebih cepat.

Template v/s JSX

VueJS menggunakan html, js dan css secara terpisah. Sangat mudah bagi pemula untuk memahami dan mengadopsi gaya VueJS. Pendekatan berbasis template untuk VueJS sangat mudah.

React menggunakan pendekatan jsx. Semuanya JavaScript untuk ReactJS. HTML dan CSS adalah bagian dari JavaScript.

Installation Tools

React menggunakan create react app dan VueJS menggunakan vue-cli /CDN/npm. Keduanya sangat mudah digunakan dan proyek diatur dengan semua persyaratan dasar. React membutuhkan webpack untuk build, sedangkan VueJS tidak. Kita bisa mulai dengan pengkodean VueJS di manapun di jsfiddle atau codepen menggunakan perpustakaan cdn.

Popularity

React lebih populer daripada VueJS. Peluang kerja dengan React lebih dari sekadar VueJS. Ada nama besar di balik React yaitu Facebook yang membuatnya lebih populer. Karena, React menggunakan konsep inti JavaScript, ia menggunakan praktik terbaik JavaScript. Orang yang bekerja dengan React pasti akan sangat mahir dengan semua konsep JavaScript.

VueJS adalah kerangka kerja yang berkembang. Saat ini, peluang kerja dengan VueJS lebih sedikit dibandingkan dengan React. Menurut sebuah survei, banyak orang yang beradaptasi dengan VueJS, yang membuatnya lebih populer dibandingkan dengan React dan Angular. Ada komunitas yang baik yang mengerjakan berbagai fitur VueJS. Vue-router dikelola oleh komunitas ini dengan pembaruan rutin.

VueJS telah mengambil bagian yang baik dari Angular dan React dan telah membangun perpustakaan yang kuat. VueJS jauh lebih cepat dibandingkan dengan React / Angular karena perpustakaannya yang ringan.

VueJS v / s Angular

Similarities

VueJS memiliki banyak kesamaan dengan Angular. Direktif seperti v-if, v-for hampir mirip dengan ngIf, ngFor of Angular. Keduanya memiliki antarmuka baris perintah untuk instalasi proyek dan untuk membangunnya. VueJS menggunakan Vue-cli dan Angular menggunakan angular-cli. Keduanya menawarkan pengikatan data dua arah, rendering sisi server, dll.

Complexity

Vuejs sangat mudah dipelajari dan dimulai. Seperti yang telah dibahas sebelumnya, seorang pemula dapat menggunakan perpustakaan CDN VueJS dan memulai dengan codepen dan jsfiddle.

Untuk Angular, kita perlu melalui serangkaian langkah untuk instalasi dan agak sulit bagi pemula untuk memulai dengan Angular. Ini menggunakan TypeScript untuk pengkodean yang sulit bagi orang yang berasal dari latar belakang inti JavaScript. Namun, lebih mudah dipelajari untuk pengguna yang memiliki latar belakang Java dan C #.

Performance

Untuk memutuskan kinerjanya, terserah pengguna. Ukuran file VueJS jauh lebih ringan dari Angular. Perbandingan kinerja kerangka disediakan di tautan berikuthttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

Popularity

Saat ini, Angular lebih populer daripada VueJS. Banyak organisasi menggunakan Angular, menjadikannya sangat populer. Peluang kerja juga lebih banyak untuk kandidat berpengalaman di Angular. Namun, VueJS mengambil tempat di pasar dan dapat dianggap sebagai pesaing yang baik untuk Angular dan React.

Dependencies

Angular menyediakan banyak fitur bawaan. Kita harus mengimpor modul yang diperlukan dan memulainya, misalnya, @ angular / animations, @ angular / form.

VueJS tidak memiliki semua fitur bawaan sebagai Angular dan perlu bergantung pada pustaka pihak ketiga untuk mengerjakannya.

Flexibility

VueJS dapat dengan mudah digabungkan dengan proyek besar lainnya tanpa masalah. Angular tidak akan semudah itu untuk mulai bekerja dengan proyek lain yang sudah ada.

Backward Compatibility

Kami memiliki AngularJS, Angular2 dan sekarang Angular4. AngularJS dan Angular2 memiliki perbedaan besar. Aplikasi proyek yang dikembangkan di AngularJS tidak dapat dikonversi ke Angular2 karena perbedaan intinya.

Versi terbaru VueJS adalah 2.0 dan bagus dengan kompatibilitas ke belakang. Ini menyediakan dokumentasi yang bagus, yang sangat mudah dimengerti.

Typescript

Angular menggunakan TypeScript untuk pengkodeannya. Pengguna harus memiliki pengetahuan tentang Ketikan untuk memulai dengan Angular. Namun, kita bisa mulai dengan pengkodean VueJS di manapun di jsfiddle atau codepen menggunakan perpustakaan cdn. Kami dapat bekerja dengan JavaScript standar, yang sangat mudah untuk memulai.

VueJS v / s Ember

Similarities

Ember menyediakan alat baris perintah Ember, yaitu ember-cli untuk memudahkan instalasi dan kompilasi proyek Ember.

VueJS juga memiliki alat baris perintah vue-cli untuk memulai dan membangun proyek.

Keduanya memiliki fitur seperti router, template, dan komponen yang membuatnya sangat kaya sebagai framework UI.

Performance

VueJS memiliki kinerja yang lebih baik dibandingkan dengan Ember. Ember telah menambahkan mesin rendering kilau dengan tujuan meningkatkan kinerja render ulang, yang merupakan konsep yang mirip dengan VueJS dan React menggunakan DOM virtual. Namun, VueJS memiliki performa yang lebih baik jika dibandingkan dengan Ember.

VueJS v / s Knockout

Knockout menyediakan dukungan browser yang bagus. Ini didukung pada versi IE yang lebih rendah sedangkan VueJS tidak didukung pada IE8 dan di bawahnya. Perkembangan knockout telah melambat seiring waktu. Tidak banyak popularitas yang sama belakangan ini.

Di sisi lain, VueJS mulai mendapatkan popularitas dengan tim Vue menyediakan pembaruan rutin.

VueJS v / s Polimer

Perpustakaan polimer telah dikembangkan oleh Google. Ini digunakan di banyak proyek Google seperti Google I / O, Google Earth, Google Play Musik, dll. Menawarkan data binding dan properti komputasi yang mirip dengan VueJS.

Definisi elemen kustom polimer terdiri dari JavaScript / CSS biasa, properti elemen, callback siklus proses, dan metode JavaScript. Sebagai perbandingan, VueJS memungkinkan penggunaan JavaScript / html dan CSS dengan mudah.

Polymer menggunakan fitur komponen web dan memerlukan polyfill untuk browser, yang tidak mendukung fitur ini. VueJS tidak memiliki ketergantungan seperti itu dan berfungsi dengan baik di semua browser dari IE9 +.