Framework JavaScript

Saya sangat bingung dengan framework javascript karena sangat berbeda sekali dengan framework CSS, kalau CSS contohnya bootstrap dengan semantic ui tujuannya sama yaitu untuk tampilan dan cara penggunaannya pun sama hanya saja nama classnya yang berbeda2 disetiap framework. di javascript sangat jauh berbeda sekali. Yang mau saya tanyakan : 1. Apa fungsi atau tujuan dari penggunaan framework seperti react, angular, dan vue. kalo boleh tau apakah ketiga framework tersebut sama dengan polymer? 2. Apa perbedaan Grunt dengan Gulp? 3. Apa itu Mocha dan Chai, singkatnya saya tau unit testing tapi rincian masing2 dan penggunaannya saya tidak tau untuk apa. Mohon Mas/Mba yang paham betul untuk menjelaskan kepada saya yang masih awam ini di dunia pengembangan website. sekian terima kasih :)

avatar wandifrog
@wandifrog

274 Kontribusi 56 Poin

Diperbarui 7 tahun yang lalu

7 Jawaban:

Jawaban Terpilih

1. mungkin gini tujuan-nya - mempermudah utk membangun aplikasi berbasis client side javascript - membuat coding lebih readable dan human friendly - memberikan struktur ke koding kita sehingga benar-benar setiap code berada di tempat-tempat yg ideal - adanya struktur memudahkan kita utk menelusuri kembali, sehingga memungkinkan aplikasi dapat dikembangkan kedepannya utk menjadi lebih besar

\* client side javascript framework dan server side framework - client side javascript framework dapat menekankan source code lebih banyak diletakan di client side, namun dapat juga digunakan seimbang dengan server side

- hadir-nya konsep SPA (Single Page Application) di javascript framework memungkinkan seluruh resource aplikasi di load di 1 halaman, setelah seluruh resource aplikasi berada di dalam satu halaman maka aplikasi dapat berjalan dengan lebih cepat tanpa melakukan proses reload lagi (karena loading resource dibebankan di startup saja). Hal ini sama saja mengembalikan konsep lama yaitu dalam membangun aplikasi desktop. Jadi adanya SPA yg diterapkan dengan javascript framework mungkin dapat diibaratkan meletakan aplikasi desktop utk berjalan diatas web

- hadirnya teknologi third party yg didedikasikan utk javascript framework tertentu sangat membantu mempermudah utk membangun berbagai aplikasi smartphone hanya dengan menggunakan teknologi web. contoh;

  1. membangun aplikasi native -> reactnative (react js), weex (vuejs)
  2. membangun aplikasi hybrid -> ionic (angular), quasar (vuejs)

dari beberapa js framework yg agan sebutkan diatas, bisa dibilang juga memiliki fungsi dan tujuan yg sama. karena konsep/teknologi yg mereka sediakan kurang lebih berkisar antara ini;

  1. MVVM (Model View - View Model) -> memisahkan antara Model (data) dan View (tampilan), hingga benar-benar terpisah sehingga data tidak lagi tercampur dengan DOM
  2. Reactive -> walaupun terpisah antara model dan view dilekatkan, sehingga apa yg terjadi di view terhadap data maupun terjadi di model terhadap data, dapat mempengaruhi data yg sama (two way data binding CMIIW)
// reactive concept sample
// umpama aja, kalau dijalanin hasilnya ga kan bener ky yg disini :D :D
var a = 1;
var b = 2;
var c = a + b;

console.log(c);
// hasilnya 3

a++;
console.log(c);
// hasilnya 4 ?????????????????????????????????? WTF
// so yg terjadi di variable a dan b mempengaruhi c

  1. Web components , sebenernya bakal diterapkan di javascript native nantinya, tapi udah diimplementasikan di framework2 js ini (entah dia mirip sama yg standard native atau ngga), yaitu simplenya memungkinkan kita utk membuat tag baru

bayangkan;


<header>
    <toolbar>
       <tool-button icon="disk">Save</tool-button>
    </toolbar>
</header>
<content>
    <editor></editor>
</content>

singkat, readable dan semaunya

avatar QaiserLab
@QaiserLab

366 Kontribusi 390 Poin

Dipost 7 tahun yang lalu

Javascript Anywhere + Javascript on Steroid

Sekarang javascript ada di berbagai platform - untuk membangun aplikasi web (sudah jelas) - untuk membangun aplikasi desktop (Electron, NWJS) - untuk membangun aplikasi smartphone hybrid (Cordova -> ionic | quasar) - untuk membangun aplikasi smartphone native (reactnative -> weex) - untuk membangun aplikasi server side -> web, socket, api (nodejs)

jadi sangat menguntungkan skali bila kita memberikan steroid (framework) utk javascript sehingga kita dapat dengan lebih mudah membangun aplikasi.

avatar QaiserLab
@QaiserLab

366 Kontribusi 390 Poin

Dipost 7 tahun yang lalu

Mantap sekali agan satu ini. @QaiserLab boleh minta emailnya buat pm. gan sebenernya ane jg bingung sama VAR di javascript, pernah main2 sama LET dan CONST tapi ampir sulit ngebedain keduanya dan dipakai pada saat situasi apa. untuk contoh yang mas kasih sebelumnya saya prediksi nilainnya akan tetap 3 atau malah error jika memakai CONST

avatar wandifrog
@wandifrog

274 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

f.anaturdasa@qaiserlab.com

avatar QaiserLab
@QaiserLab

366 Kontribusi 390 Poin

Dipost 7 tahun yang lalu

Cmiiw

Var digunakan utk definisi awal variable Let digunakan utk mengisi ulang variable Const artinya variable sifatnya tetap ga bisa diubah lagi, gunain utk definisiin nilai yg tetap

Gan itu contoh reactive emang ga bener, sy cuma umpamain aja biar agan cepet nyambung. Kalo mw reactive bener coba implementasiin pake framwork. Waktu itu sy lihat contoh sperti itu di rxjs kalo ga salah, disitu sy jadi paham maksudnya reactive, yg sebelumnya sy kaget ngeliat angular terasa aneh ko urutan logikanya dinamis skali begitu diubah data smua bergerak, jadi ga aneh lagi karna tau konsepnya bgitu

avatar QaiserLab
@QaiserLab

366 Kontribusi 390 Poin

Dipost 7 tahun yang lalu

Cmiiw

Grunt itu utk otomatisasi task, biasanya utk building, compiling. Kan biasanya pngguna 3 framwork itu (vue, react, angular2) pakai environment builder misal nulisnya pake es6 babel di file2 terpisah trus di compile jadi js. Nah kalo ada grunt ga perlu ngulang2 ngetik perintah build dll, cukup diseting otomatis build sendiri

Gulp kynya utk nyatuin file2 yg terpisah tadi jadi satu

Mocha dan chai saya juga bingung, setiap sy bikin project baru pakai vue-cli sy jawab no utk mocha.. hahaha

Makanya ngarep bener supaya bang hilman ngebahas tools2 cli sakti ini di kelas video.

Terutama request juga ngebahas tentang vuex (ga nyambung karna bukan cli tapi library tambahan vue) (sok basa basi aja padahal ngarepin yg lain) :D:D:D

avatar QaiserLab
@QaiserLab

366 Kontribusi 390 Poin

Dipost 7 tahun yang lalu

Wah thanks banget gan atas penjelasannya. jadi tambah paham ane skarang

avatar wandifrog
@wandifrog

274 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban