Langsung ke konten utama

Vue Js Tutorial Indonesia | 1 Pengenalan

Vue js adalah sebuah framework open source dari javascript yang digunakan untuk membuat situs web yang telah banyak di gunakan oleh banyak perusahaan-perusahaan di dunia termasuk Gitlab, Bukalapak dll, untuk pembahasan perusahan mana saja yang menggunakan Vue js akan kita bahas lebih detail di pembahasan terakhir.

Vue Js Tutorial Indonesia

Vue JS digunakan untuk membuat halaman web yang interaktif, untuk mengelolah data dari backend, yaitu seperti mengambil data, menampilkan data, mengirim data baru ke backend, dan banyak lagi.

Sejak rilisnya pada Februari 2014 telah membuat banyak perusahaan ingin memakainya dikarenakan sintag-sintagnya bisa di bilang hampir mirip dengan AngularJs dan juga simple.

Vue JS sangat cocok dipelajari untuk pemula yang belum pernah belajar framework javascript sebelumnya dan yang telah memahami fundamental javascript, dikarenakan kodingan yang sangat mudah dimengerti, contohnya:

<ul id="list-nama">
  <li v-for="item in items">
    {{ item.nama_barang }}
  </li>
</ul>

Kalian bisa liat contoh yang lainnya di https://vuejs.org/v2/examples/

Evan You membuat framework ini saat bekerja di perusahaan google yang kesehariannya menggunakan AngularJS yang anggapannya bisa dibilang mudah namun agak terlihat rumit, dari sana dia berfikir untuk mengekstrak AngularJS dan mengambil bagian yang paling dia sukai sehingga membentuk framework yang ringan, yaitu VueJs, dan dalam pengembangannya langsung didukung oleh google yang merupakan salah satu perusahaan terbesar didunia.

Membuat website dengan framework ini speednya bisa lebih cepat dibandingkan dengan menggunakan framework javascript lainnya seperti ReactJs, dikarenakan sintagnya yang begitu simple dan sangat indah dipandang, namun itu tergantung programmer-nya juga.

Dalam VueJS, kita membuat halaman website dengan komponen-komponen, contohnya komponen untuk header, komponen untuk footer, dan komponen untuk tempat konten, di dalam komponen kita bisa membuat komponen lagi, setiap komponennya akan selalu mendeteksi dependensi reaktifnya selama proses render, sehingga  jika ada perubahan data dia akan tau kapan komponen itu akan di update.

Di vue, ada yang namanya komponen root, disana kita bisa membuat komponen-komponen di dalamnya lagi, pemisahan suatu fitur jadi lebih mudah, dan jika ada penambahan fitur kita hanya perlu membuat komponen baru tanpa mengganggu komponen lain, kita bisa mengirim data  atau suatu aksi antar komponen, tidak ada batasan di vue, dengan vue kita lebih mudah dan bebas.

Nyamannya menggunakan framework ini kita bisa mengatur pusat datanya dengan mudah, tidak seperti framework lain, dengan adanya data pusat,  komponen-komponen yang ada, bisa melakukan request ke data pusat, tanpa harus memisah-misah yang membuat kodingan menjadi kotor, disini juga bisa menggunakan server side rendering yang berfungsi untuk mengurangi proses request ulang ke server.

Perusahaan-Perusahaan yang menggunakan Vue JS


  1. Facebook
    Perusahaan ini yang membuat framework ReactJS ternyata menggunakan vue juga di bagian newsfeednya kita bisa menggunakan extensi vue js di google chrome untuk melihatnya.
  2. Bukalapak
  3. Netflix 
  4. Adobe
  5. Xiaomi
  6. Alibaba
  7. WizzAir
  8. EuroNews
  9. Grammarly
  10. Laracasts
  11. GitLab
  12. CodeShip
  13. LiveStrom
  14. Behance
dan masih banyak 

Komentar

Postingan populer dari blog ini

Apa itu API | 1 Belajar REST API Dengan Python Flask

Dalam sesi ini kita akan belajar cara membuat API menggunakan Flask, di perlukan sedikit dasar bahasa pemrograman python untuk mempermudah dalam mempelajari ini, dan jangan kawatir jika anda belum pernah  Belajar Flask  sebelumnya, karena pada tutorial kita akan membahas dari dasar. Flask ini framework yang sangat cocok digunakan untuk membuat suatu service yang kecil, dan ini telah banyak di gunakan oleh perusahaan-perusahaan besar, anda bisa lihat  disini . Di saat saya menulis tutorial ini, pengembangan Flask sudah mencapai seperti berikut: Contributors :503 Commits : 3,5037 Ok, saya akan mulai dengan membahas apa itu API ? API (Application programming interface) - Mudahnya bisa di sebut sebuah service yang berfungsi untuk menghubungkan service antar service, contohnya frontend dan backend agar bisa bertukar data kita butuh yang namanya API Service, jadi kalau istilah lainnya ini bisa di sebut sebuah gerbang penghubung. Secara "garis besar" pekerjaan pr

Routing | 5 Belajar REST API Dengan Python Flask

Secara umum situs menyediakan beberapa link untuk bisa mengunjungi halaman pada websitenya, contoh pada situs facebook untuk melihat halaman profil linknya bisa  facebook.com/rhyanz46 , untuk melihat daftar yang kita simpan linknya  facebook.com/saved ,   proses pembuatan link ini bisa di sebut routing, tutorial kali ini kita akan belajar routing di flask. Sebenarnya pada tutorial sebelum-nya kita sudah menggunakan route, namun disini saya akan menjelaskan beberapa hal lagi seputar routing. URL secara umum di bagi menjadi dua sifat yaitu dinamis dan statis URL Statis  adalah url yang berfungsi untuk menampilkan suatu halaman dengan jenis data yang berbeda dengan halaman yang lainnya, seperti di suatu website kita ketahui ada halaman about, home, privacy and policy, dll. Contoh, sebut saja situs anda adalah ariansaputra.com  dan anda ingin membuat halaman 'about' dengan url  ariansaputra.com/about  , seperti tutorial sebelumnya kita bisa membuatnya dengan cara: URL d

ENV Konfigurasi | 4 Belajar REST API Dengan Python Flask

Kita bisa menjalankan aplikasi flask dengan beberapa envionment ( lingkungan ), misalnya environemt "prodution" yang di akses oleh banyak user, atau "development" pada saat proses development. Kita bisa menamakan environment dengan nama apa saja terserah kita. Konfigurasi environment berfungsi sebagai pembeda environment (lingkungan) mana yang sedang di gunakan, kita bisa mengatur konfigurasi ini dengan cara biasa seperti pada tutorial sebelumnya, namun lebihnya dari konfigurasi lain, di konfigurasi ini kita juga bisa mengaturnya melalui settingan environment global pada os kita, misalnya di linux: export FLASK_ENV = "development" Di linux, dengan menggunakan sintag "export" kita bisa mengubah variabel environment os kita, dari contoh tersebut saya membuat nama variabel FLASK_ENV dengan value "development", secara otomatis aplikasi flask yang akan kita jalankan mengambil value dari variabel FLASK_ENV dari variabel environment os k