Framework (kerangka kerja) adalah istilah yang sering muncul dalam dunia developer. Istilah tersebut memiliki fungsi yang sangat besar bagi pengembangan kode program secara sistematis. Saat ini, seorang pengembang khususnya dalam bidang web development diharuskan untuk mempelajari dan menggunakan sebuah kerangka kerja dalam pembuatan perangkat lunak.
Keuntungan lain adalah untuk mengembangkan perangkat lunak dengan penyusunan kode secara terstruktur dan konsisten. Kode yang baik tentu saja merupakan kode yang dapat dimengerti oleh mesin serta pengembang (developer).
Pengertian framework JavaScript
Setelah mengetahui pengertian dari framework, mari kita bahas lebih lanjut mengenai pengertian dari framework javascript.
Framework javascript merupakan bahasa pemrograman yang digunakan untuk sebuah situs web atau aplikasi yang menjadikan halaman website lebih dinamis serta interaktif. Javascript memudahkan urusan developer dalam melakukan pengembangan serta peningkatan dari website maupun aplikasi.
Dalam membuat aplikasi ataupun web seorang developer harus mampu memahami mengenai bahasa pemrograman, termasuk dengan pemahaman mengenai framework Javascript .
Cara kerja framework JavaScript
Dalam melakukan kerjanya sebuah framework memiliki cara kerjanya yang tentunya digunakan sebagai pendukung dari proses pembuatan atau pengembangan website serta aplikasi.
Javascript yang bersifat client-side atau semua proses dilakukan oleh pengguna atau pengunjung website. Dalam hal ini client meminta request atau permintaan kepada pemilik website kemudian permintaan tersebut diproses kemudian hasil selanjutnya dikirimkan kembali kepada pengunjung web.
Saat ini javascript semakin canggih dengan kemampuan yang tidak hanya digunakan oleh client, namun juga dapat digunakan oleh server, console, web, desktop, mobile, IoT, dan game.
Pembelajaran tentang javascript membutuhkan web browser serta text editor.
Framework JavaScript
Terdapat berbagai macam Framework JavaScript dengan mengusung berbagai fiturnya masing-masing, yaitu:
- AngularJS
AngularJs merupakan framework JavaScript yang paling populer di kalangan developer. Framework ini dikembangkan oleh Google dan dirilis tahun 2009. Versi baru AngularJS mulai diperkenalkan pada tahun 2014.
Versi baru ini dibangun dengan bahasa TypeScript yang memiliki komponen penting berupa 3 bagian utama, yaitu:
- ng-app, merupakan petunjuk dan link dari AngularJS ke HTML.
- ng-model, adalah arahan atau petunjuk data dari app AngularJS ke input kontrol pada HTML.
- ng-bind, berupa arahan atau petunjuk data dari app AngularJS ke tag HTML.
Fitur-Fitur AngularJS:
- Directives, fitur ini memberi kemudahan dalam pengaturan DOM (Document Object Model), untuk menghasilkan konten dengan HTML yang lebih dinamis lagi.
- Hierarchical Injections, memudahkan pengelolaan kode yang berfungsi untuk pengujian serta penggunaan ulang.
- Two-way Data Binding, untuk memudahkan sinkronisasi antara model dan view.
- Scope, merupakan objek yang digunakan untuk menampung data Model yang isinya Method/perantara antara Controller dan View.
- Controller, untuk mengontrol data juga alur kerja pada program yang dibangun, berupa kumpulan fungsi-fungsi JavaScript pada AngularJS.
- Services, merupakan objek yang digunakan di sebuah aplikasi untuk membuat XMLHttpRequest.
- Filter, untuk memilih item atau fungsi kode.
- Directives, digunakan dalam pembuatan tag pada HTML.
- Template, merupakan tampilan program yang sedang dibuat berdasarkan pada Controller serta Model.
- Routing, adalah proses perpindahan tampilan (switching).
- Model View Whatever, ialah pola desain MVC yang membagi proses kerja dan memiliki tanggung jawab berbeda. Oleh karena itu metodenya lebih menjadi MVVM (Model-View-Viewmodel).
- Deep Linking, merupakan fitur yang mengizinkan developer untuk melakukan encode aplikasi pada URL, membuat bookmark, dan melakukan restore kondisi terakhir URL.
- Dependency Injection, adalah fitur yang memungkinkan Developer bisa menulis komponen atau kode terpisah satu sama lain, yang dapat memudahkan pengujian dan pengembangan program.
- Ember.js
Ember.js merupakan Framework JavaScript yang berkonsep MVVM atau model-view-viewmodel. Dengan sifat open source dari Ember.js memungkinkan pengembang dapat meningkatkan website yang dibuatnya sesuai kebutuhan.
Ember.js juga mendukung Two Way Data Binding, apabila developer membuat perubahan pada kode JavaScript, akan memberikan pengaruh terhadap tampilan layar yang ada pada kode HTML.
Fitur-Fitur Ember.js
Fitur-Fitur yang terdapat pada Ember.js adalah sebagai berikut:
- Ember Inspector, adalah alat yang digunakan untuk men-debug aplikasi pada Ember.js.
- Route, merupakan fitur utama atau inti untuk mengelola URL.
- Computed Properties, adalah fitur yang dapat digunakan untuk mendeklarasikan fungsi sebagai sebuah properti, yang nantinya akan ditampilkan ketika properti tersebut diminta.
- ReactJS
ReactJS adalah Framework JavaScript yang memungkinkan untuk membangun komponen antarmuka (UI) yang bisa digunakan kembali dan visual bersifat dinamis. Tampilan UI dapat dikembangkan menjadi lebih detail di setiap komponennya.
Fitur-Fitur React:
- Virtual DOM, sebagai penyimpanan perubahan kode.
- Libraries Integration, dapat menghubungkan serta digunakan bersamaan dengan berbagai library yang basisnya JavaScript.
- JSX (JavaScript XML), merupakan ekstensi sintaks JavaScript yang memudahkan modifikasi DOM menggunakan kode HTML.
- Declarative, dapat membuat UI yang interaktif.
- React Native (Render khusus React), kode dimungkinkan dapat digunakan dalam dua aplikasi secara bersamaan pada Android dan iOS menggunakan satu block code saja.
- Flux, merupakan bangunan aplikasi yang mengontrol aliran data ke komponen hanya melalui operator atau satu titik kontrol saja.
- React Views, digunakan untuk melihat hasil program yang tengah dibuat.
- Vue.js
Vue.js adalah Framework JavaScript yang merupakan framework yang progresive sehingga berguna untuk membangun antarmuka bagi pengguna, serta memiliki kemampuan menjalankan halaman website yang canggih
Kerangkanya dapat dimodifikasi dan digunakan untuk keperluan website komersial maupun personal.
Fitur Vue.js:
- Virtual DOM (Document Object Model), lebih cepat daripada DOM biasa.
- Components, berfungsi pembuat dan kustomisasi elemen-elemen pada HTML.
- Computed Properties, digunakan untuk melihat perubahan tampilan.
- Directives, fungsinya untuk melakukan segala tindakan pada front-end.
- Data Binding, memberikan nilai pada atribut HTML.
- Lightweight, berguna untuk membuat program lebih sederhana dan cepat.
- Routing, merupakan perantara antarhalaman.
- Templates, sebagai penghubung antara DOM dengan data instance Vue.js.
- Watcher, fungsinya menangani berbagai perubahan data supaya kode menjadi lebih sederhana.
- Node.js
Node.js adalah server-side JavaScript yang dapat digunakan untuk membangun website yang dinamis. Framework ini menjadi pilihan banyak pengembang untuk membangun berbagai aplikasi, karena beberapa program dapat berjalan dalam waktu yang sama tanpa proses antrian.
Fitur-Fitur Node.js:
- Engine V8, merupakan compiler JavaScript yang dimiliki Google dan dibuat memakai bahasa pemrograman C++ untuk meng-compile kode JavaScript menjadi kode pada tingkat assembly.
- Libuv Library, adalah library C++ untuk mengatur operasi asynchronous I/O (input/output) di Node.js dan main event loop.
- Design Pattern, berupa object pool yaitu kumpulan objek untuk task tertentu dan Facade yang berfungsi untuk memberi tampilan antarmuka bagi body kode.
- Asynchronous Process, ialah proses jalannya program dapat dilakukan bersamaan tanpa proses antrian.
- Backbone.js
Backbone.js merupakan framework yang cukup dikenal oleh para web programer, yang bisa juga dipakai untuk membuat single-page application. Komunitas penggunanya nyaris sebesar AngularJS, dan framework ini dirilis tahun 2010.
Fitur-Fitur Backbone.js:
- Model, isinya berupa data interaktif berserta fungsinya.
- Tampilan, berfungsi mengatur antarmuka
- Koleksi, berisi model-model yang teratur.
- Acara, ini merupakan modul Backbone yang mudah dikompilasikan dengan kelas lainnya.
- Router,untuk menghubungkan URL klien ke tindakan aplikasi.
- Sinkronisasi, berfungsi memetakan status model ke database server.
- Key-Value Binding & Custom Events, setiap terjadi perubahan Model akan berpengaruh terhadap View, dan berlaku sebaliknya.
- Event Handling, memungkinkan untuk menyesuaikan perintah pengguna pada browser.
- Mithril
Mithril adalah framework JavaScript yang memakai konsep MVC klasik yang berukuran kecil, hanya 7 KB. Menariknya framework ini seakan menjadi kombinasi antara arsitektur dari AngularJS dengan Virtual DOM ReactJS.
Fitur-Fitur Mithril:
- JXS, merupakan ekstensi sintaks yang memungkinkan pengembang menulis tag HTML diselingi JavaScript.
- Animasi, memiliki fitur untuk membuat animasi yang kompleks.
- Path Handling, berfungsi menghasilkan rute URL.
- XHR, merupakan cara untuk terhubung dengan server, mampu membuat dan memperbaharui HTML, membuat komponen, juga membuat rute bagi Single Page Application.
- Routing, merupakan perpindahan tampilan atau switching.
- Polymer
Polymer merupakan Framework JavaScript yang dikembangkan oleh Google serta dirilis pada tahun 2015. Framework ini dapat digunakan membangun aplikasi website dengan memakai komponen dari website tersebut.
Fitur-Fitur Polymer:
- Terdapat fitur yang berfungsi untuk menyederhanakan proses pengembangan PWA.
- DOM Shadow, berfungsi sebagai enkapsulasi CSS, JavaScript, serta templating.
- Polyfills, sebuah fitur yang dapat dipakai membuat elemen serta bisa digunakan ulang.
- Catalog Elements, merupakan fitur yang menyediakan komponen web yang siap untuk digunakan.
- Express.js
Framework Express.js ini untuk membangun aplikasi website atau web app yang berbasis Node.js. Framework ini adalah back-end development untuk mengelola routing session, permintaan HTTP, dan lain-lain.
Fitur-Fitur Express.js:
- Routing, merupakan metode atau cara server untuk menampilkan permintaan browser (client).
- Middleware, untuk engakses permintaan dan merespons objek.
- Static File, merupakan file yang bisa diunduh baik oleh client maupun browser.
- Template Engine, adalah perpustakaan atau library tempat memilih template berbeda.
- Cache, berfungsi agar pengemang tidak perlu menulis ulang kode yang telah ada atau telah ditulis.
- Next.js
Next.js adalah Framework JavaScript yang mudah digunakan untuk membangun sebuah website maupun program, yang mana program tersebut siap dijalankan saat setup pertama kalinya. Next.js dianggap sebagai pelengkap ReactJS, sebab memiliki kemampuan rendering yang lebih baik.
Fitur-Fitur Next.js:
- Routing Pages, merupakan fitur routing otomatis di tiap halaman..
- Build-in CSS Support, bisa mengimport file CSS ke file JavaScript.
- Layout Component, fitur ini bisa memecah konstruksi halaman untuk menjadi kumpulan komponen, dimana komponen tersebut dapat digunakan ulang untuk halaman lain.
- Image Optimization, dapat merubah ukuran gambar supaya lebih responsif saat dibuka di browser.
- Font Optimization, otomatis mengatur inline font CSS
- Script Optimization, dapat mengatur loading di script pihak ketiga.
- Static File Serving, dapat memudahkan saat memanggil serta menggunakan file statis pada suatu halaman.
- Fast Refresh, dapat merefresh otomatis saat ada perubahan script.
- Meteor
Meteor merupakan framework yang digunakan untuk mengembangkan sebuah program dari pengembangan backend, logika bisnis, mengelola database, sampai front-end. Juga dikenal sebagai Isomorphic Development Ecosystem (IDevE) yang digunakan untuk membangun web app yang dapat berjalan secara real time.
Fitur-Fitur Meteor:
- Distributed Data Protocol, dapat melakukan perubahan dengan cara otomatis berdasarkan permintaan dari klien tanpa diperlukan menulis kode sinkronisasi.
- Universal app, menggunakan kode yang sama untuk website maupun mobile app.
- Package/paket, memudahkan proses pemrograman serta instalasinya.
- Meteor galaxy, merupakan layanan awan yang diperuntukan bagi penyebaran aplikasi meteor.
- Aurelia
Aurelia merupakan framework yang bertujuan untuk menginterpretasikan sisi server dan klien bersamaan serta dapat digunakan untuk memperluas kode HTML. Mampu menghasilkan tampilan website yang bagus dan website menjadi semakin kuat.
Fitur-Fitur Aurelia:
- Aurelia CLI, merupakan baris perintah resmi untuk framework Aurelia yang bisa digunakan untuk membangun projek baru.
- Two-way data binding, untuk memudahkan sinkronisasi model dan view.
- Board Language Support.
- Komponen, berupa blok penyusun kerangka kerja yang terdiri dari model tampilan JavaScript dan HTML.
- Routing, untuk konfigurasi routing.
- Server Side Rendering, berguna untuk merender aplikasi di server lalu mengirimkan lagi halaman sepenuhnya kepada klien.