Home > Administrasi Linux, Manajemen Database, Pemrograman Web > Pengembangan Aplikasi Web dengan MEAN (0) – Arsitektur Web dan MEAN

Pengembangan Aplikasi Web dengan MEAN (0) – Arsitektur Web dan MEAN


Pada tutorial ini saya akan mencoba merangkum bagaimana aplikasi web dikembangkan hubungannya dengan MEAN dan JavaScript. Topik ini merupakan bahasan pertama dari paket Tutorial MEAN yang totalnya (direncanakan) ada 12 bahasan singkat. Harapannya, para pembaca tertarik dan dapat menggunakan paket tool MEAN untuk pengembangan aplikasi web. Sasaran dari tutorial ini adalah para pemula di bidang pemrograman web yang sudah pernah belajar dasar-dasar HTML dan JavaScript .

1. Arsitektur Web

Secara umum, aplikasi web konvensional yang umumnya dikembangkan di Indonesia menggunakan paket tool AMP (Apache MySQL PHP) mengikuti arsitektur three tier yang terdiri dari database, server yang membangkitkan kode HTML dan browser yang me-render HTML tersebut.


Aplikasi dinamis disampaikan kepada pengguna web oleh aplikasi tradisional melalui proses berikut:

a. Web browser mengirim request ke suatu URL web. Ini terwujud saat pengguna meng-klik suatu tag anchor atau menuliskan suatu URL.
b. Server menerima request tersebut dan kemudian mengambil data dari database untuk memenuhinya
c. Server menggunakan data tersebut untuk membangkitkan suatu respon HTML dan mengembalikan respon tersebut ke browser.

Itulah yang terjadi jika aplikasi web dikembangkan menggunakan bahasa back-end seperti PHP, Java, Ruby, Python dan C#.

JavaScript sudah lama ada dalam web browser. Perubahan besar terjadi saat hadirnya AJAX (Asyncronous JavaScript and XML). Ajax memungkinkan pengembang mengerjakan request web seperti disebutkan di atas, tetapi tidak harus melakukan reload halaman penuh, dapat mengambil XML secara asinkron dari server dan kemudian menyebabkan halaman bereaksi. Kemudian, pengembang mulai menformat data menggunakan JSON (JavaScript Object Notation). Google Mail dan Google Maps adalah dua aplikasi besar di Internet yang dibangun menggunakan Ajax.

Arsitektur web modern bekerja mengikuti aliran berikut:

a. Browser pengguna meminta (request) suatu halaman web statis
b. Halaman HTML mengandung JavaScript yang membangun struktur dasar dari halaman tersebut.
c. JavaScript itu mengerjakan Ajax untuk memuat isi (content, biasanya JSON) melalui API.
d. JavaScript kemudian mengambil content ini dan memodifikasi DOM untuk merepresentasikan content.

HTML dibangkitkan di client, bukan di server.

Keuntungan dari arsitektur (workflow) modern tersebut:

a. Back-end yang lebih sederhana. Karena aplikasi hanya mensyaratkan API tunggal untuk transmit/receive content, API yang sama digunakan untuk aplikasi mobile dapat digunakan pula pada browser. Jauh lebih mudah membangun software yang menyampaikan JSON daripada yang menyampaikan HTML.

b. Kinerja. Memindahkan beban kerja dari server ke clinet. Client tidak perlu mendownload dan merender halaman secara lengkap.

c. Tool terstandardkan. Aplikasi dibangun menggunakan JavaScript, HTML dan CSS. Semua pengembang aplikasi web memahaminya.

d. Pembuatan prototipe yang cepat. Karena hanya menggunakan Javascript front-end.

e. Modularitas meningkat. Aplikasi dipecah-pecah ke dalam banyak potongan logis (modul) sesuai dengan tugas-tugas spesifik.

Pada stack MEAN, JavaScript mengikatnya menjadi SATU.

2. MEAN dan JavaScriptnya

A. Angular.js

Angular.js merupakan framework untuk membangun aplikasi di dalam browser. Ditujukan untuk aplikasi interaktif tinggi. Hadir dengan banyak komponen berdayaguna bagi aplikasi web. Menyediakan struktur untuk aplikasi yang tesable dan modular. Pemanfaatannya adalah dengan mengintegrasikannya kode JavaScript khusus ke dalam HTML melalui tag . Tools pentingnya adalah two-way binding, router, manipulasi DOM, animasi, dependency injection, utilitas testing, Ajax helper, dll.

Bagaimana menginstal dan menggunakan Angular.js? Kita akan mempelajarinya kemudian setelah pembahasan mengenai database server MongoDB.

B. Node.js

Node.js adalah runtime JavaScript yang dirancang untuk berjalan diluar browser. Utilitas general-purpose yang dapat digunakan untuk banyak hal termasuk kompilasi aset, scrpting, dan terutama web server.

Walmart merupakan salah satu Enterprise yang menerapkan MEAN dan Node.js sebagai Servernya. Jumlah request yang dapat ditangani perdetik meningkat 2 kali lipat, response timenya berkurang 35% atau 200 ms. CPU utilization tidak pernah lebih 2%, padahal ada 200 juta pengguna online. Ini karena Arsitektur Evented yang digunakan Node.js dalam menangani proses multi-thread.

Node memiliki tool NPM (Node Package Manager) yang dapat digunakan untuk menginstal framework atau modul tertentu. Misalnya untuk menambahkan Express ke dalam server Node.

Bagaimana membuat server HTTP di Node? Berikut langkah-langkahnya:

a. Download Node.js di http://nodejs.org/download dan install.
b. Instal juga version switcher (terutama jika ada beberapa versi Node.js yang terinstall) bernama n:

npm install -g n

c. Buat file JavaScript, misalnya bernama server.js seperti berikut:

var http = require(“http”);
http.createServer(function(request, response) {
response.writeHead(200, {“Content-Type”:”text/plain”});
response.write(“Hello World”);
response.end();
}).listen(3000);

d. Jalankan server web yang baru saja dibuat:

node server.js

e. Akses server tersebut melalui web browser: http://localhost:3000. Apa yang diperoleh?

C. Express

Express adalah suatu paket NPM untuk membangun web server. Paket yang paling sering digunakan bersama dengan Node.js. Kode JavaScript pada server Node di atas dapat disedehanakan dengan Express menjadi (misalnya disimpan dalam file server2.js):

var express = require(‘express’);
var app = express();

app.get(‘/’, function(req, res){
res.send(200, ‘Hello Wordl’);
});

app.listen(3333);

Bagaimana mengeksekusi server2.js tersebut?

– Instal Express: npm install express
– Jalankan server2 tersebut: node server2.js
– Buka alamat localhost:3333 pada web browser.

D. MongoDB

Stack web JavaScript akan lengkap jika ada akses ke mongoDB, suatu server database dokumen, bukan relasional. Ada banyak kelebihan dari database berbasis dokumen ini dibandingkan yang relasional. Silakan cari tentang ini di Google. Data tidak disimpan dalam baris dan tabel, tetapi dalam document dan collection. MongoDB menyimpan data dalam format BSON, yaitu JSON yang disimpan dalam bentuk biner.

Bagaimana menginstall dan menggunakan MongoDB? Silakan simak tutorial berikutnya. Semoga Allah mudahkan kita dalam belajar, memahami dan mengamal tetesan ilmu dariNya. Aamiin🙂

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: