Fitur Utama yang Dimiliki VueJs | JavaScript- Kuasai Teknologi

Fitur Utama yang Dimiliki VueJs | JavaScript

  1. Kuasai Teknologi
    2. →
  2. HTML
    3. →
  3. Pemrograman
Ditulis Oleh :

Virtual DOM

Fitur Utama yang Dimiliki VueJs | JavaScript

DOM singkatan dari Document Object Model merupakan model yang mnggambarkan halaman HTML atau XML. DOM berbentuk struktur hirarki pohon yang menghubungkan masing-masing element HTML/XML(node).
Contoh:
HTML

Kode HTML di atas jika dilihat dari sudut pandang DOM memiliki root node html, node html memiliki dua child node yaitu head dan body. Node head memiliki satu child yaitu title, sedangkan node body memiliki dua child yaitu h1 dan p.
HTML

 Javascript memiliki kemampuan untuk mengakses dan memanipulasi semua DOM tersebut secara langsung.


const h1s = Array.from(document.getElementsByTagName('h1')) 
console.log(h1s[0]);

Namun alih-alih memanipulasinya secara langsung, Vue memilih pendekatan lain yaitu membuat  abstraksi objek virtual dari DOM kemudian memanipulasinya baru kemudian merender atau menampilkan hasilnya. Pendekatan ini lebih efektif dan cepat dibandingkan langsung memanipulasi DOM-nya sebagaimana yang dilakukan pustaka lain semisal JQuery.

Component Base


Vue menggunakan pendekatan berbasis komponen, dimana setiap tampilan atau bagian dari tampilan merupakan komponen. Melalui pendekatan ini, tampilan yang komplek dapat dipecah menjadi beberapa bagian dan setiap bagian itu bisa digunakan kembali pada bagian lainnya. Hal ini akan membuat kode lebih efisien dan bersih. Kode komponen pada Vue ditulis menggunakan kode Javascript sebagai sebuah object.

Template

berkaitan dengan poin sebelumnya, template merupakan kode yang dijadikan dasar dari suatu komponen dann biasanya berupa kode-kode HTML biasa. Penulisan template pada Vue bisa sangat fleksibel dan out of the boc. Kita bisa tuliskan tag template tag HTML yang id-nya telah didaftarkan,, bisa juga dipisahkan pada file tersendiri yang umumnya menggunakan ekstensi Vue, dsb.

Modularity

Komponen pada Vue bisa dipecah menjadi modul-modul kecil. Hal ini akan memudahkan pengembangan untuk mengelola kodenya terutama pada proyek aplikasi yang besar.

Reactivity

Secara default, Vue mendukung reactivity yaitu perubahan data pada suatu bagian tertentu akan mempengaruhi bagian yang lain. Fitur ini akan memudahkan developer dalam mengembangkan aplikasi karena cukup fokus pada flow data dan template.

Routing

Routing merupakan kebutuhan untuk pembuatan aplikasi enterprise karena menyangkut bagaimana suatu halaman pada aplikasi tersebut diakses oleh pengguna melalui web browser. Meski bukan pada core-nya, namun Vue menyediakan pustaka yang didukung secara resmi untuk menangani routing aplikasi, yaitu Vue router https://router.vuejs.org.

State Management

Oleh karena vue berbasis komponen, maka diperlukan pendekatan terpusat untuk menyimpan state atau data aplikasi yang bisa dibaca dan dimodifikasi oleh semua komponen yang membutuhkannya. State management juga bukan core pada Vue seperti halnya routing, namun pustaka yang menangani state ini juga didukung secara resmi yaitu vuex https://vuex.vuejs.org.

Terima Kasih sudah membaca Fitur Utama yang Dimiliki VueJs | JavaScript. Semoga Bermanfaat!

Tag:

,