Vue.js adalah sebuah librari javascript untuk membangun antarmuka web yang interaktif. fokus utama Vue.js adalah menyediakan mekanisme Reactive Data Binding dan menyediakan fungsi untuk mengatur komponen View dengan API yang sederhana mungkin.

Vue js adalah salah satu framework javascript. Vue Js merupakan framework untuk kebutuhan front end dari sebuah project.

Vue js merupakan salah satu framework yang banyak digunakan. Jika anda telah terbiasa dengan menggunakan angular js, maka untuk melakukan migrasi ke vue js tidak lah terlalu susah karena mereka mempunyai kemiripan di bagian sintak, hanya saja angular js memiliki development stack yang lebih rumit dibandingkan dengan vue js :). Bagi anda yang penasaran dengan angular js, Jika di angular js menggunakan fungsi controller, maka di vue js akan menggunakan pendekatan dom yaitu akan menggunakan id, name atau class dari suatu component html. Vue js juga memiliki component routing yaitu vue-router,

Vue.js dibuat untuk di fokuskan pada komponen Frontend.
Vue.js adalah framework javascript yang berupa Angular,React,Polymer, Riot dan lain-lain.
Vue js juga memiliki component routing yaitu vue-router

Membuat CRUD Sederhana Dengan Vue JS

Untuk membuat crud, kita akan menggunakan data array pada javascript sehingga data ini hanya bersifat sementara. Untuk mempersingkat artikel, silahkan ubah codingan yang berada pada file index.html seperti berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Belajar Vue JS</title>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
        <link rel="stylesheet" href="./dist/css/bootstrap.min.css" type="text/css">
    </head>
    <body id="belajar">

        <div class="container">
            <div class="row">
                <div class="col-lg-2">
                    <div class="form-group">
                        <label>Nama</label>
                        <input type="text" class="form-control" placeholder="Masukkan Nama Anda" v-model="nama"/>
                    </div>

                    <h2>Hello {{ nama }}</h2>
                </div>
                <div class="col-lg-10">

                    <p></p>

                    <button @click="tambahBarang" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
                        Tambah Barang
                    </button>

                    <p></p>

                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">ID Barang</th>
                                <th class="text-center">Nama Barang</th>
                                <th class="text-center">Jenis Barang</th>
                                <th class="text-center">Tanggal Kadaluarsa</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="b in dataBarang">
                                <td>{{ b.idBarang }}</td>
                                <td>{{ b.namaBarang }}</td>
                                <td>{{ b.jenisBarang }}</td>
                                <td>{{ b.tanggalKadaluarsa }}</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" @click="editBarang(b)">
                                        <i class="glyphicon glyphicon-pencil"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger" @click="hapusBarang(b)">
                                        <i class="glyphicon glyphicon-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 v-if="enable" class="modal-title">Tambah Barang</h4>
                        <h4 v-else="enable" class="modal-title">Edit Barang</h4>
                    </div>
                    <div class="modal-body">
                        <form v-if="enable">
                            <div class="form-group">
                                <label>Nama Barang</label>
                                <input type="text" class="form-control" placeholder="Masukkan Nama Barang" v-model="inputDataBarang.namaBarang"/>
                            </div>
                            <div class="form-group">
                                <label>Jenis Barang</label>
                                <select class="form-control" v-model="inputDataBarang.jenisBarang">
                                    <option value="" disabled>Pilih Jenis Barang</option>
                                    <option value="gas">Gas</option>
                                    <option value="padat">Padat</option>
                                    <option value="cair">Cair</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Tanggal Kadaluarsa</label>
                                <input type="date" class="form-control" placeholder="Masukkan Tanggal Kadaluarsa" v-model="inputDataBarang.tanggalKadaluarsa"/>
                            </div>
                        </form>
                        <form v-else="enable">
                            <div class="form-group">
                                <label>ID Barang</label>
                                <input type="text" class="form-control" v-model="inputDataBarang.idBarang" disabled/>
                            </div>
                            <div class="form-group">
                                <label>Nama Barang</label>
                                <input type="text" class="form-control" placeholder="Masukkan Nama Barang" v-model="inputDataBarang.namaBarang"/>
                            </div>
                            <div class="form-group">
                                <label>Jenis Barang</label>
                                <select class="form-control" placeholder="Pilih Jenis Barang" v-model="inputDataBarang.jenisBarang">
                                    <option value="" disabled>Pilih Jenis Barang</option>
                                    <option value="gas">Gas</option>
                                    <option value="padat">Padat</option>
                                    <option value="cair">Cair</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Tanggal Kadaluarsa</label>
                                <input type="date" class="form-control" placeholder="Masukkan Tanggal Kadaluarsa" v-model="inputDataBarang.tanggalKadaluarsa"/>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-dismiss="modal">Batal</button>
                        <button v-if="enable" type="button" class="btn btn-primary" data-dismiss="modal" @click="simpanBarang(inputDataBarang)">Simpan</button>
                        <button v-else="enable" type="button" class="btn btn-success" data-dismiss="modal" @click="updateBarang(inputDataBarang)">Update</button>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="./dist/js/jquery.min.js"></script>
        <script type="text/javascript" src="./dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./dist/js/vue.min.js"></script>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

Dari codingan diatas bisa kita lihat, terdapat sedikit perbedaan diantaranya adalah jika pada angular biasanya kita menggunakan perintah ng-click sedangkan pada vue js kita menggunakan perintah @click. Jika pada angular, untuk menampilkan data yang berbentuk array kita akan menggunakan perintah ng-repeat sedangkan jika pada vue js kita akan menggunakan perintah v-for. Sedangkan pada perintah – perintah yang lain adalah sama.

Selanjutnya silahkan buka file app.js kemudian ubah codingannya menjadi seperti berikut.

'use strict';

new Vue({
  el: '#belajar',
  data: function() {
    return {
      dataBarang: [],
      inputDataBarang: {},
      enable: false
    }
  },
  methods: {
    generateUUID: function() {
      var d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
        d += performance.now();
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
      return uuid;
    },
    tambahBarang: function() {
      this.enable = true;
      this.inputDataBarang = {};
    },
    simpanBarang: function(barang) {
      this.dataBarang.push({
        'idBarang': this.generateUUID(),
        'namaBarang': barang.namaBarang,
        'jenisBarang': barang.jenisBarang,
        'tanggalKadaluarsa': barang.tanggalKadaluarsa
      });
    },
    editBarang: function(barang) {
      this.enable = false;
      this.index = this.dataBarang.indexOf(barang);
      this.inputDataBarang.idBarang = barang.idBarang;
      this.inputDataBarang.namaBarang = barang.namaBarang;
      this.inputDataBarang.jenisBarang = barang.jenisBarang;
      this.inputDataBarang.tanggalKadaluarsa = barang.tanggalKadaluarsa;
    },
    updateBarang: function(barang) {
      this.dataBarang[this.index].idBarang = barang.idBarang;
      this.dataBarang[this.index].namaBarang = barang.namaBarang;
      this.dataBarang[this.index].jenisBarang = barang.jenisBarang;
      this.dataBarang[this.index].tanggalKadaluarsa = barang.tanggalKadaluarsa;
      this.inputDataBarang = {};
    },
    hapusBarang: function(barang) {
      var result = confirm('Anda ingin menghapus data barang ?');
      if (result) {
        this.index = this.dataBarang.indexOf(barang);
        this.dataBarang.splice(this.index, 1);
      }
    }
  }
});

Dari codingan diatas, terdapat perbedaan antara angular js dan vue js. Dimana pada vue js, antara data dan method akan dibagi berdasarkan section, sehingga kita akan melakukan deklarasi data dan method di section yang berbeda. Setiap variabel yang terdapat di dalam section data dapat kita panggil dengan menggunakan perintah this.nama variabel. Semua function yang terdapat di dalam section method juga dapat kita panggil melalui function lain yang berada di dalam section method tersebut, contohnya adalah function generateUUID.

Setelah selesai, silahkan akses kembali http://127.0.0.1:8080 berikut adalah output ketika anda melakukan insert.

berikut adalah output ketika anda melakukan select data.

berikut adalah output ketika anda melakukan update data.

berikut adalah output ketika anda melakukan delete data.

Pengenalan Tentang Framework Vue.js

Vue.js merupakan sebuah library yang digunakan untuk membangun sebuah halaman website yang interaktif, framework Vue.js dalam pengucapannya biasa disebut sebagai (vju atau seperti view). Dengan menggunakan vue.js memiliki sebuah kelebihan dari reactive data binding dan composable view component dengan menggunakan API (Application Programming Interface) yang lebih sederhana, pada tutorial kali ini kita akan membahas tentang Pengenalan Tentang Framework Vue.js

Pada framework vue.js bukanlah sebuah framework yang utuh, namun pada framework vue.js ini lebih berfokus kepada tampilan atau view, dan pada framework vue.js jika kita memiliki sebuah project lebih mudah untuk mengintegrasikan atau menghubungkan dengan vue.js, dan pada vue.js juga bisa digunakan untuk membuat single page Application.

Reactive data binding

Berikutnya ada Reactive data binding, merupakan sebuah fitur yang ditawarkan oleh framework vue.js untuk memudahkan dalam menjaga sebuah data dan DOM (Document Object Model) agar tetap terhubung, ketika kita menggunakan sebuah jQuery untuk memanipulasi sebuah DOM secara manual dan cenderung terjadi error, namun pada vue.js menggunakan sebuah konsep data driven View, maksudnya yaitu dengan menggunakan vue.js kita dapat menggunakan sebuah sintaks dalam template HTML.

Selanjutnya kita akan mencoba membuat sebuah contoh untuk penggunaan vue.js, nah untuk contoh vue.js nya teman-teman bisa menyimpan script yang terdapat dibawah ini dengan nama index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
 <div id="contoh-1">
  Hello {{ name }}!
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script src="index.js" ></script>
</body>
</html>

Selanjutnya kita akan membuat proses untuk vue.js nya, nah silahkan teman-teman simpan simpan script dibawah ini dengan nama index.js

// Model
var exampleData = {
  name: 'Vue.js'
}
// "ViewModel"
// yang menghubungkan antara view dan model
var exampleVM = new Vue({
  el: '#contoh-1',
  data: exampleData
})

pada script index.html diatas terdapat sebuah id=”contoh-1”, id tersebut berfungsi untuk menjalankan proses yang terdapat pada index.js, dan hasil dari index.js akan di view pada index.html pada {{ name }} yang terdapat pada index.html nah, Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini

Reactive data binding

Selanjutnya kita akan mencoba membuat sebuah contoh untuk penggunaan vue.js, nah untuk contoh vue.js nya teman-teman bisa menyimpan script yang terdapat dibawah ini dengan nama index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
 <div id="contoh-1">
  Hello {{ name }}!
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script src="index.js" ></script>
</body>
</html>

Selanjutnya kita akan membuat proses untuk vue.js nya, nah silahkan teman-teman simpan simpan script dibawah ini dengan nama index.js

// Model
var exampleData = {
  name: 'Vue.js'
}
// "ViewModel"
// yang menghubungkan antara view dan model
var exampleVM = new Vue({
  el: '#contoh-1',
  data: exampleData
})

Reactive data binding

Selanjutnya kita akan mencoba membuat sebuah contoh untuk penggunaan vue.js, nah untuk contoh vue.js nya teman-teman bisa menyimpan script yang terdapat dibawah ini dengan nama index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
 <div id="contoh-1">
  Hello {{ name }}!
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script src="index.js" ></script>
</body>
</html>

Selanjutnya kita akan membuat proses untuk vue.js nya, nah silahkan teman-teman simpan simpan script dibawah ini dengan nama index.js

// Model
var exampleData = {
  name: 'Vue.js'
}
// "ViewModel"
// yang menghubungkan antara view dan model
var exampleVM = new Vue({
  el: '#contoh-1',
  data: exampleData
})

Pengertian AngularJS

AngularJS adalah sebuah framework Javascript yang di kembangkan atau di bangun oleh tim Google. angularjs menggunakan metode MVC yang membuat source code aplikasi kita menjadi bersih dan mudah di kembangkan.Sampai saat ini angularjs sudah menjadi salah satu framework javascript yang paling populer dan sangat banyak di gunakan oleh para developer di seluruh dunia untuk membangun aplikasi.

Kehandalan dari angularjs sendiri tidak bisa di ragukan lagi, salah satu faktor nya karena di kembangkan oleh para tim ahli dari google. AngularJS juga menyediakan panduan cara penggunaannya pada situs resmi angularJS,dan angularJS juga di gunakan untuk membangun aplikasi yang bersifat single page application. Tutorial AngularJS Pengertian Dan Cara Menggunakan AngularJS.

AngularJS, sebuah front-end framework untuk JavaScript yang dikembangkan oleh Google, belakangan ini sedang sering dibicarakan di kalangan developer. Tutorial AngularJS di artikel ini akan membantumu dalam memahami seputar AngularJS.

AngularJS mempunyai fitur-fitur yang sangat kuat sehingga proses pengembangan aplikasi bisa menjadi jauh lebih singkat dan juga sangat mudah dipelajari. Framework AngularJS ini menjadikan kode Javascript lebih terstruktur karena AngularJS menerapkan pola MVC pada aplikasi yang akan kita kembangkan.

Beberapa contoh situs atau aplikasi yang dibuat menggunakan AngularJS di antaranya adalah Youtube for PS3, Netflix, Weather.com dan lainnya.

Untuk mengimplementasikan AngularJS, kita perlu menggunakan directive pada aplikasi web kita. Bagi yang belum tahu, directive merupakan penanda pada elemen DOM (Document Object Model) seperti atribut, nama elemen, atau kelas CSS (Cascading Style Sheet).

ANGULAR JS

Angular JS merupakan framework javascript open souce yang dirilis oleh google pada tahun 2009. Konsep dari Angular JS adalah meningkatkan fungsi dari HTML untuk membangun web app. Bayangkan awalnya HTML hanya digunakan untuk membuat halaman website statis dan kini bisa berfungsi untuk membuat web app dengan menggunakan Angular JS.

Angular JS bukan berupa libary melainkan framwork yang solid. Sama seperti framwork lainnya. Angular JS memiliki onsep MVC (Model, View, Control) meskipun dengan cara yang berbeda.

Angular JS memiliki banyak keunggulan diantaranya :

1. Mengenalkan browser dengan sintak HTML baru

HTML5 telah menawarkan elemen baru seperti video, audio, canvas dan sebagainya. Dengan Angular JS kita dapat menambah banyak lagi elemen baru yang dimengerti oleh browser seperti draggable yang berfungsi agar elemen bisa di drag, zippy yang membuat akordion, juga sintak bisa dibuat dalam bahasa indonesia seperti <sembunyikan> yang berfungsi jika diklik maka elemen akan disembunyikan. Fungsi ini disebut Directive. Kitalah yang bertanggung jawab dalam pembuatan atau penambahan fungsi elemen HTML atau dengan kata lain kita mengajari browser mengerti bahasa sintak HTML yang kita buat.

2.HTML Template

Template yang digunakan Angular JS adalah template HTML biasa dengan penambahan ekspresi. Tidak perlu template yang memiliki engine khusus

3. Dependency Injection

Developer dapat membuat beberapa komponen kode yang bisa digunakan fungsinya berulang kali. Komponen ini disebut juga reusable komponen. Developer dapat memanggil komponen yang dibuat secara terpisah.

REACT JS

Apa Itu React ? Dan Mengapa Menggunakan React ?

Mengapa Memilih React ?

Pernahkan kalian membayangkan, selain infrastrukturnya yang memang besar, apa framework yang digunakan oleh situs raksasa macam Facebook pada antarmukanya, sehingga meskipun digunakan oleh milyaran orang, baik dari PC Desktop hingga Smart Phone tapi masih bisa menangani dan terlihat sedikit pun tidak mengalami kelelahan untuk melayani permintaan yang bermilyar itu ?

Karena mereka menggunakan suatu pustaka yang memang didesain untuk itu, namanya adalah React.

React adalah pustaka JavaScript untuk membuat antarmuka kelas atas. React sendiri selain memang dibangun langsung oleh Facebook, juga telah digunakan secara live pada antarmuka Facebook dan Instagram. Jika dilihat dari arsitektur pengimplementasian antarmuka pengguna, maka React dapat dikatakan sebagai komponen V dalam MVC.

Tujuan dibangunnya React adalah untuk menyelesaikan satu masalah pokok: membangun aplikasi berskala besar dengan data yang selalu berganti seiring waktu.

React itu Sederhana

Bahasa kasarnya, cukup ungkapkan bagaimana aplikasi mu harus terlihat pada suatu waktu, dan React akan secara otomatis mengatur semua pembaharuan antarmuka pengguna (UI) ketika data yang mendasari mengalami perubahan.

React Memiliki Sifat Deklaratif

Ketika ada data yang berubah, Reach secara konseptual akan menekan tombol "refresh", dan dia tau bagian yang harus diperbaharui hanya bagian yang datanya mengalami perubahan.

Membuat Komponen Composable dengan Mudah

Menggunakan React adalah tentang bagaimana kita membuat komponen yang dapat digunakan berulang kali. Faktanya, dengan React hal yang kita lakukan hanyalah membuat komponen-komponen. Dan karena komponen-komponen tersebut bersifat sangat terbungkus (encapsulated), maka komponen-komponen yang telah dibuat tersebut, menjadikan penggunaan kode yang ditulis sekali namun dapat digunakan berulang kali, kemudian pengujian, hingga pemisahan bagian-bagian program menjadi sangat mudah.

Kelebihan ReactJS dan alasan menggunakan ReactJS untuk membuat aplikasi web | ReactJS merupakan library JavaScript yang bersifat open source dan dikelola oleh perusahaan IT ternama didunia seperti Facebook dan Instagram bersama dengan komunitas pengembang dari seluruh dunia.

Framework ini digunakan secara luas untuk mengembangkan tampilan antarmuka pada sebuah aplikasi web. Framework khusus ini diciptakan dengan tujuan untuk:

“Membangun aplikasi skala besar dengan data yang berubah dan terus berubah dari waktu ke waktu.”

Sudah banyak alat yang diciptakan dan digunakan oleh para pengembang, namun tidak banyak yang benar-benar bisa merevolusi cara kerja sebuah tim pengembang, salah satunya yang bisa merevolusi alur kerja adalah ReachJS, hal itu juga disampaikan oleh Arnab Sarkar dari ValueCoders pada website Dzone beberapa waktu lalu.

ReactJS memang tergolong cukup baru, namun sangat powerful dan digunakan oleh aplikasi raksasa seperti Facebook, Instagram dan WhatsApp. Nah berikut ini adalah mengapa aplikasi-aplikasi tersebut menggunakan ReactJS.

1. ReactJS sangat efisien

ReactJS membuat DOM (virtual) nya sendiri pada komponen yang Anda. Cara ini memberikan sebuah fleksibilitas yang tinggi pada developer dan performa yang luar biasa dapat diperoleh karena ReactJS melakukan kalkulasi terhadap perubahan apa yang perlu dibuat di DOM dan melakukan update pada DOM yang sesuai. Dengan cara ini React menghindari operasi DOM yang berlebihan dan melakukan update DOM dengan cara yang efisien.

2. Library Javascript

Sintaks JSX merupakan perpaduan yang sangat bagus dan sehat antara Javascript dan HTML. Hal ini digunakna khusus di ReachJS. JSX menyederhanakan seluruh proses penulisan komponen untuk website dan aspek HTML memungkinkan developer untuk membuat fungsi tanpa menggabungkan (concatenating) string.

Keuntungan lain React adalah ini membuat penggunaan API lebih lepat dan asli, dan sebagai hasilnya, antrian bisa bekerja pada berbagai platform.

3. Sangat bagus untuk SEO

Salah satu tantangan utama saat bekerja dengan framework Javascript adalah mereke sama sekali tidak baik untuk mesin pencari, walaupun belakangan ini sudah mulai banyak perbaikan.

Anehnya, React.js cukup menonjol dalam hal ini, karena Anda dapat menjalankan React.js pada server dan DOM virtual akan dikembalikan dan diberikan kepada browser sebagai halaman web biasa. Tidak memerlukan trik lainnya.

4. Fokus pada antarmuka

React Native jauh lebih fokus pada tampilan antarmuka dibandingkan dengan MeteorJS, Firebase dan AngularJS. Hal ini tentu memberikan para pengguna Anda tampilan yang sangat responsif dengan bantuan interaksi Javascript antara lingkungan asli perangkat dan React Native. Sebagai hasilnya, ini akan dapat meningkatkan waktu muat (loading) aplikasi dan membantu untuk tetap berjalan dengan sangat lancar tanpa interupsi.

5. Sangat mudah dan lain dari yang lain

Ketika Anda memulai proyek Anda dengan React, jangan lupa untuk menginstal ekstensi Chrome resmi untuk ReactJS. Hal ini akan membuat proses debugging aplikasi menjadi lebih mudah.

Setelah menginstall ekstensi, Anda dapat melihat langsung ke dalam virtual DOM seperti ketika Anda sedang berada pada sebuah DOM biasa dalam panel elemen. Ini cukup menarik tentunya.

6. Faktor Facebook

ReactJS merupakan gagasan dari Facebook dan Instagram, dan oleh karena itu sangat diukungan oleh dua rakasasa media sosial tersebut. Selain itu ini adalah framework open source, yang berarti berkembang dan tumbuh subur dari komunitas yang ada di seluruh dunia. Facebook awalnya menciptakan ReactJS untuk keperluan internal, namun dengan potensinya yang luar biasa, mereka memutuskan untuk berbagi proyek ini dengan pengembang dari seluruh dunia. Berbagai produk yang dikelola oleh Facebook seperti Instagram juga dibangun dengan bantuan ReactJS.

Semoga beberapa manfaat dan kelebihan menggunakan ReactJS diatas membuat Anda yakin bahwa ini adalah Framework yang unik dan menarik untuk dicoba. Jika Anda mencoba untuk mengembangkan aplikasi web yang perlu SEO friendly dan memiliki kapasitas penanganan lalu lintas yang bergerak cepat, maka pastikan ReactJS adalah salah satu pilihan yang Anda gunakan.

Perbandingan React JS dengan Angular JS

ReactJS (kadang-kadang bergaya React.js atau ReactJS) adalah perpustakaan JavaScript sumber terbuka untuk membangun antarmuka pengguna.

Ini dikelola oleh Facebook, Instagram dan komunitas pengembang perorangan dan perusahaan. Menurut analisis JavaScript, Libscore, React saat ini sedang digunakan di situs Netflix, Imgur, Buffer, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart, dan lain-lain.

Bereaksi memungkinkan pengembang membuat aplikasi web besar yang menggunakan data yang bisa berubah seiring waktu, tanpa reload halaman. Tujuan utamanya adalah untuk menjadi cepat, sederhana dan terukur. Bereaksi hanya memproses antarmuka pengguna pada aplikasi. Ini sesuai dengan Lihat pada template Model-View-Controller (MVC), dan dapat digunakan dalam kombinasi dengan pustaka atau kerangka JavaScript lainnya di MVC, seperti AngularJS.

Angular JS adalah salah satu framework javascript yang mengusungkan pola MV* dan dikembangkan oleh google”

Angular JS biasanya digunakan sebagai framework di bagian front end suatu website. Salah satu kelebihan dari angular js ini adalah data binding sehingga antara model dan controller datanya akan dilakukan sinkronisasi secara asynchronous. Kelebihan angular yang lain adalah angular dapat melakukan routing, membuat sebuah directive dan biasanya digunakan sebagai client untuk sebuah web service.

Perbedaan antara ReactJS dan AngularJS

Saat bekerja dengan AngularJS, template HTML digunakan atas nama JavaScript asli sedangkan di ReactJS, library RequireJS digunakan untuk memuat kode saja.
Dengan menggunakan AngularJS, kode sulit untuk di debug. Sedangkan, di ReactJS, harus menggunakan extension dari chrome yang bernama React Developer Tools supaya tidak ada hambatan pada DOM virtual.
AngularJS menggunakan metode MVVM (Model View ViewModel), sedangkan ReactJS menggunakan metode MVC (Model View Controller).
Framework ReactJS di kembangkan dan dibuta oleh para enginner dari facebook, sedangkan AngularJS di kembangkan oleh para tim dari Google.

Keuntungan menggunakan ReactJS

Framework paling simple,ringan dan mudah di gunakan.
Mudah dalam hal menangani kompnen yang terisolasi
Fluks arsitektur yang sangat nyaman dan sangat kompetitif untuk metode MVC.
Template tidak digunakan dalam tampilan JavaScript.
Konsisten saat rendering komponen sehingga meningkatkan pengaturan yang efisien dan kompleksitas.
DOM virtual nya yang dapat membuat Framework ini berkerja dengan cepat.

Keuntungan menggunakan AngularJS

Dokumentasi nya yang disusun secara rapi dan tepat
Memiliki Kemampuan untuk menulis custom arahan.
Penggunaannya utama untuk menulis aplikasi dalam kasus modul.
Dapat mengembangankan CoffeeScript, JavaScript atau TypeScript.
Data dua arah nya cukup sederhana dalam beberapa bidang proses.
Komponen terkaitnya bisa digunakan dengan framework lain.

Oke, Jadi Kesimpulannya Apa?

Jadi kesimpulannya, Kedua Framework JavaScript di atas memiliki beragam manfaat dan cukup sulit untuk dibandingkan salah satunya sebagai yang terbaik. Sebenarnya, semua itu tergantung dari kebutuhan anda saja. Pilih yang paling sesuai dengan kebutuhan anda mana yang paling terbaik untuk digunakan dari keduanya. Karena ReactJS banyak yang minat karena fleksibilitasnya, jika AngularJS terkadang membatasi dalam beberapa kasus.

Suciariani

Sunday, March 31, 2019

Aku mencintaimu :)

Friday, October 20, 2017

Tugas Webprogramming tentang Vue.js

Membuat CRUD Sederhana Dengan Vue JS

Pengenalan Tentang Framework Vue.js

Pengertian AngularJS

ANGULAR JS

REACT JS

Apa Itu React ? Dan Mengapa Menggunakan React ?

Mengapa Memilih React ?

React itu Sederhana

React Memiliki Sifat Deklaratif

Membuat Komponen Composable dengan Mudah

1. ReactJS sangat efisien

2. Library Javascript

3. Sangat bagus untuk SEO

4. Fokus pada antarmuka

5. Sangat mudah dan lain dari yang lain

Perbandingan React JS dengan Angular JS