Tutorial Vue.js 1 - Apa itu Vue.js?

Pada kali ini saya akan membahas materi tentang vue.js namun sebelum itu pastikan anda telah paham tentang dasar-dasar javascript, HTML dan CSS. Kebetulan saya telah membuat tutorial dasar javascript, jadi anda dapat mempelajarinya terlebih dahulu jika belum mempunyai dasar tentang javascript.

Rekomendasi : Tutorial JavaScript

Pada kali ini saya akan mengenalkan anda dengan vue lalu mengapa memilih vue kemudian tools apa saya yang diperlukan dan yang terakhir bagaimana cara menggunakanya secara sederhana.

Apa itu Vue.js?

Vue merupakan salah satu framework javascript yang sedang "naik daun" di kalangan developer saat ini, vue digunakan untuk membuat tampilan user interface dari suatu aplikasi berbasis web khususnya single page application (SPA).

Apa kamu tahu apa itu single page aplication?

Untuk sekedar info, spa itu merupakan aplikasi yang berkerja di browser yang tidak membutuhkan reloge page saat di gunakan, mudahnya user tidak akan berpindah halaman karena hanya mempunyai 1 halaman.

Vue jika di baca dengan bahasa inggrisnya "view", awalnya didesain untuk kebutuhan web, namun seiring perkembangan teknologi juga dapat digunakan untuk mengembangkan aplikasi berbasis desktop dan mobile.

Sejarah Vue

Pada mulanya Vue merupakan proyek pribadi milik Evan You ketika ia masih bekerja di Google pada tahun 2013. Di perusahaan tersebut Evan banyak terlibat dalam pembuatan berbagai prototype user interface yang menggunakan JavaScript dam AngularJS.

Hal ini lah yang membuat Evan "tergerak" untuk membuat suatu framework-nya sendiri dengan gaya Angular tetapi menggunakan pendekatan Application Programming Interface (API) yang lebih sederhana

Bagi anda yang belum paham dengan API, saya akan menjelaskan sedikit tentangnya.

Mengutip dari penjelasan mas toni dari CodePolitan

API atau Application Programming Interface berarti antarmuka pemrograman aplikasi. Maksudnya adalah seperangkat antarmuka (bisa berbentuk fungsi, method atau URL endpoint) yang dapat kita gunakan untuk mengembangkan aplikasi, baik dalam satu platform maupun lintas platform.

Tujuan dari API adalah untuk mempercepat pembuatan suatu aplikasi karena programmer tidak perlu menulis kode dari nol. API juga disediakan oleh sebuah platform untuk dapat mengakses fitur dari platform tersebut.

Di dalam framework-nya Evan You yaitu Vue, mengandung konsep web component dan virtual DOM Sebagaimana React tetapi dengan pendekatan yang natural, siapapun yang telah paham dengan konsep dasar HTML, JavaScript dan CSS akan dengan mudah sekaligus cepat untuk dapat menguasi Vue.

Vue pertama kali di publikasikan pada Februari 2014 dan langsung mendapat sambutan yang luar biasa di minggu pertamanya, ini lah yang membuat Evan semangat untuk lebih serius dalam mengembangkanya menjadi lebih baik.

Pada Oktober 2015. Vue versi 1 di luncurkan yang berarti menandakan bahwa framework Vue siap digunakan. Diawal tahun 2016, Evan mulai bekerja secara penuh dalam mengembangkan frameworknya, hal ini berkat dukungan atau sponsor yang telah ia dapatkan.

Salah satu sponsor utama yang sekaligus meningkatkan branding dari Vue adalah Taylor Otwell, ia merupakan founder dari Laravel PHP Framework yang menjadikan Vue sebagai pustaka JavaScript untuk Laravel.

Pada saat ini (saat pembahasan tutorial ini dibuat), Vue telah mencapai versi 2.0 dengan berbagai perbaikan dan penambahan fitur baru. Versi ini menggunakan engine yang berbeda untuk menangani Virtual DOM namun tetap ringan dan cepat, anda bisa menggunakan template HTML atau JSX sebagaimana yang sering dipakai di React. Manajemen state telah didukung secara resmi melalui Vuex dan secara alami telah mendukung sever side rendering.

Jika tadi saya telah menjelaskan mengenai apa itu vue? dan bagaimana sejarahnya, lalu mengapa anda harus memilih Vue jika dibangingkan dengan framework JavaScript lainya?

Kenapa Memilih Vue?

Jika dilihat dari karekteristik developer, React merupakan framework yang menarik bagi mereka yang suka dengan functional programming. Angular menarik bagi deveoper yang terbiasa dengan bahasa pemrograman Java atau C#. Sedangkan Vue menarik bagi mereka yang suka classic HTML, CSS dan JavaScript. Hal inilah yang menjadikan Vue menjadi alasan Vue untuk disukai para web developer.

Berikut ini beberapa alasan mengapa banyak developer memilih Vue:

Didukung Banyak Pustaka

Salah satu kelebihan dari framework Vue adalah didukung oleh banyak pustaka, sehingga cukup memudahkan para developer untuk berkerja. Untuk melihat berbagai pustaka yang mendukung Vue, anda bisa membukanya pada link berikut.

Bukan One Man Show

Saat ini Vue telah mencapai versi 2.0 dan juga bukan lagi sebuah proyek pribadi, sebab telah ada beberapa creator yang telah membantu Evan You untuk mengembangkan framework ini serta masih banyak lagi kontributor di GitHub yang ikut membantu.

Telah Digunakan Perusahaan Besar

Tidak hanya digunakan untuk mengembangkan aplikasi pribadi, namun Vue juga telah digunakan oleh beberapa perusahaan besar diantaranya: Adobe, Alibaba, Gitlab, Laravel, Line, Nintendo, Xiaomi dsb.

Mudah Dipelajari

Pendekatan yang ditawarkan oleh Vue cukup sederhana dan tidak banyak menggunakan konsep baru sehingga siapapun denga latar belakang pemahaman pengetahuan web dasar seperti HTML, CSS dan JavaScript dapat dengan mudah menggunakan Vue.

Mudah Terintegrasi dengan Pustaka Lain

Jika anda telah menggunakan pustakan lain pada pengembangan aplikasi saat ini, maka anda tidak perlu khawatir untuk mengintegrasikannya dengan Vue.

Dukungan Official untuk Pengembangan Aplikasi Enterprise

Berbeda dengan React, Vue mendukung dan mengembangkan sendiri secara resmi pustaka-pustaka yang digunakan untuk membangun aplikasi dengan skala yang besar, seperti routing (Vue Router), state management (Vuex), server side rendering, dsb. Namun hal ini tidak membuat kita kesulitan dalam menggunakan pustaka lain yang mungkin biasa kita gunakan seperti Redux dan Mobx.

Jika tadi saya telah menjelaskan alasan-alasan untuk menggunakan Vue, sekarang saya ingin memaparkan fitur utama Vue.

Berikut ini beberapa fitur utamanya:

Virtual DOM

DOM merupakan singkatan dari Document Object Model, artinya model yang menggambarkan halaman HTML atau XML. DOM berbentuk seperti struktur hirarki pohon yang menghubungkan masing-masing elemen HTML (node). Berikut contohnya:

<html>
 <head>
     <title>Belajar</title>
 </head>
 <body>
     <h1>Hello</h1>
     <p>World</p>
 </body>
</html>

Kode HTML tersebut jikat 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>.

Jika digambarkan dengan bagan, maka akan terlihat seperti dibawah ini:

	   html
	____|______
    |		  |
   head		 body
	|	  ____|____
  title	  |		  |
		  h1	  p

JavaScript mempunyai kemampuan untuk mengakses serta memanipulasi semua DOM tersebut secara langsung. Berikut contoh penggunaanya:

<html>
 <head>
     <title>Belajar</title>
 </head>
 <body>
     <h1>Hello</h1>
     <p>World</p>
	 <script>
    	const h1s = Array.from(document.getElementsByTagName('h1'));     
		console.log(h1s[0]);  // <h1> Hello </h1>
	 </script>
 </body>
</html>

Namun alih-alih memanipulasi secara langsung, Vue menggunakan pendekatan lain yaitu membuat abstraksi objek virtual dari DOM kemudian memanipulasinya baru kemudian merender atau menampilkan result. Pendekatan ini sangat efektif dan cepat jika dibandingkan langsung mamanipulasi DOM-nya sebagaimana yang dilakukan oleh pustakan lain, misalnya JQuery.

Component Base

Vue menggunakan pendekatan berbasis komponen, artinya dimana setiap tampilan atau bagian dari tampilan merupkan sebuah komponen. Melalui pendekatan ini, tampilan yang rumit dapat di pecah menjadi bagian-bagian yang bisa digunakan kembali pada bagian lainnya. Oleh karena itulah yang membuat framework Vue menjadi syntax yang bersih dan efisien.

Routing

Routing merupakan kebutuhan untuk pembuatan aplikasi enterprise karena menyangkut bagaimana suatu halaman pada aplikasi tersebut dapat diakses oleh user melalui web browser. Meski bukan pada core, namun Vue menyediakan pustaka penduking yang di support secara resmi untuk menangani routing aplikasi, yaitu Vue router.

State Management

Karena Vue berbasis komponen, maka diperlukan pendekatan terpusaat 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 di dukung secara resmi oleh Vue yaitu Vuex.