ngide
← ngideWeb Development

Kenalan dengan RequireJs

bcscoder 04 Oct 2014 at 12:12 am Nge-Tekno Dalam tutorial kali ini, kita akan sedikit berkenalan dengan RequireJs , sebuah javascript file yang berfungsi sebagai module loader. Terus kenapa kita harus

a
Agus Yusida · 7 menit baca
bcscoder
04 Oct 2014 at 12:12 am Nge-Tekno

Dalam tutorial kali ini, kita akan sedikit berkenalan dengan RequireJs, sebuah javascript file yang berfungsi sebagai module loader. Terus kenapa kita harus mencoba RequireJs ini? Tentu saja supaya kita bisa menikmati fitur modular approach dimana kita bisa membuat beberapa module dalam app dan meloadnya saat kita butuhkan. Selain itu dengan modular ini membuat struktur kode javascript kita menjadi lebih rapi dan dapat meningkatkan loading speed web aplikasi yang kita buat.

Secara pribadi, RequireJs sangat menarik untuk di coba dan setelah di test ternyata 'Amajink' maka saya putuskan untuk beberapa project kedepan saya pasti menggunakan RequireJs untuk memanage module javascript saya. Yes, apa kalian pernah sebelumnya memiliki banyak script tag di dalam web app kalian dan harus meloadnya satu-satu? Dan dengan order dari file tersebut secara benar?  Sangat menyusahkan bukan? Apalagi terkadang muncul konflik antara satu module dangan yang lainnya.Oke cukup sakit kepala. Tapi degan RequireJS yang mengimplementasikan AMD (Asynchronous Module Definition) spec, yang berarti kita bisa membuat modules kita sendiri atau punya orang lain dan meloadnya tanpa harus kita buat script tag satu-satu dan dengan urutanya yang benar. Jadi singkatnya RequireJs ini nanti yang memanage dependencies project kita.

Jadi kita mulai dari mana sekarang? Sebagai contoh, kita akan membuat sebuah app ( sample code yang sangat basic) yang akan memiliki beberapa depedency. App yang kita buat akan menggunakan Underscore dan Jquery. Kalau tanpa RequireJs kita pasti akan membuat 2 buah script tag yang masing-masing menginclude file tersebut ke app kita. Tapi itu ga keren dong ya? kalau kalian bilang keren, bagaimana kalau App tersebut punya 20 dependency? Mau buat 20 tag untuk include satu-satu? Belum lagi kita harus menentukan order filenya secara benar kan? Oke kalian memang luar biasa. Dengan RequireJs kita hanya perlu 1 tag saja. Kenapa bisa seperti itu? Oke kita lanjut dibawah ya.

Sebelumnya, kita buat dulu struktur App yang mau kita buat:

|--- main.js
|--- index.html
|--- lib
|    |---  modules
|    |      '-- example.js
|    |---  jquery.js
|    |---  require.js
|    |---  underscore.js

 Sedikit penjelasan dari struktur app yang kita buat:

  • main.js : adalah main js file dari app kita (kita akan bahas selanjutnya)
  • index.html : adalah main html file dari app
  • example.js : sebuah contoh javascript module yang akan kita buat untuk nanti diload dengan RequireJs
  • require.js & underscore.js library

Step 1. Create Index.html

<!DOCTYPE html>
<html>
<head>
	<title>Sample App : RequireJs</title>
</head>
<body>
	<h1>Hello World!</h1>
</body> 
</html>

Sebuah simple html page, nah jika sudah membuat file index.html selanjutnya kita tambahkan RequireJs melalui tag di dalam head tag.

<script src="lib/require.js" data-main="main"></script>

Line diatas akan meload file RequireJs yang ada di folder lib dan  attribute data-main bertujuan untuk memberi tahu RequireJs untuk secara otomatis meload file main.js. Jadi atribute data-main tersebut memberi tahu RequireJs yang manakah file utama kita. Jadi di dalam main.js inilah kita akan menaruh konfigurasi untuk RequireJs seperti basePath dan path dari module yang kita butuhkan dan yang lainnya.

Step 2. Create main.js

Selanjutnya kita akan membuat file main.js yang akan berisi beberapa config untuk require js.

require.config({
    baseUrl: 'lib',
    paths: {
        "jquery"    : 'jquery',
        "underscore"      : 'underscore',
    }
});
require([
  'jquery',
  'underscore'
], function($, underscore)
{
   //some code here 
});

Dalam main.js ini kita membuat beberapa config seperti baseUrl yang berfungsi memberi tahu RequireJs di manakah file-file module tersebut berada saat di load nanti. Jika kalian tidak mendeklarasikan baseUrl maka pada bagian path, kalian perlu untuk menuliskan lokasi lengkap dari file tersebut. Jadi jika baseUrl tidak di deklarasikan maka config file kita akan seperti dibawah ini:

require.config({
    
    paths: {
        "jquery"    : 'lib/jquery',
        "underscore"      : 'lib/underscore',
    }
});
require([
  'jquery',
  'underscore'
], function($, underscore)
{
   //some code here 
});

Terlihat bedanya? Jadi kita hanya perlu mendeklarasikan pathnya secara lengkap. Oh iya, RequireJs tidak memperdulikan ekstensi .js di dalam config, jadi jika kalian membuat path berupa 'lib/jquery'  maka sebernarnya RequireJs mencari file 'lib/jquery.js'.

Tapi bagaimana jika module yang kalian berada di CDN? Tenang saja, require js support loading file dari CDN, contohnya saja jika kita mau include Jquery dari Google CDN maka config file kita akan menjadi seperti dibawah ini:

require.config({
    baseUrl: 'lib',
    paths: {
        "jquery"    : 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
	"underscore": 'underscore',
    }
});

Jadi kita include tetap tanpa extesin .js .

Sebenarnya sekarang kita sudah bisa test app yang kita buat, coba kalian buka file index.html kalian memalui browser (saya disini coba pakai google crome) dan lihat page yang kita buat.

Tidak ada yang spesial dari tampilan diatas, tapi jika kalian inspect halaman tersebut, kita akan melihat file jquery dan underscore sudah terload dengan sukses padahal kita tidak meloadnya melalui tag script bukan? Yup, RequireJs lah yang sudah meload dua file tersebut. Jika kita buka file main.js lagi dan perhatikan pas bagian code dibawah ini:

require([
  'jquery',
  'underscore'
], function($, _)
{
   //some code here 
});

Jadi fungsi require tersebutlah yang meload dua file tersebut secara tidak langsung ke app yang kita buat. Jadi saat kira me-require jquery dimana path name jquery tersebut mereferensi pada config yang sudah kita buat sebelumnya di file main.js yaitu "jquery" : 'jquery' dan mereturn sebuah callback yang kita tampung di var $. Begitu juga saat kita mau meload underscore, maka kita tampung apapun yang di return oleh module underscore tersebut di dalam callback _ .

Step 3. Create Custom Module : example.js

Jika step 2 sudah berhasil kamu lakukan, maka selanjutnya bagaimana jika kita mau membuat javascript module kita sendiri dan ingin RequierJs untuk meloadnya ke app kita?

Oke, pertama kita buat dahulu sebuah file example.js di dalam modules folder yang sudah ada di app kita. Nah nantinya kita ingin module example ini untuk membuat memanipulasi dom HTML dengan menggunakan Underscore dan Jquery. Sebenarnya kita buat ini untuk memastikan bahwa apakah RequireJs bisa meload module yang  kita buat dan bisa berfungsi dengan baik.

define(['jquery','underscore'], function() {});

Pertama kita define dahulu module yang kita ingin pakai di dalam example.js ini. Oke kita butuh 2 module yaitu jquery dan underscore maka kita akan define 2 module tersebut seperti code diatas.

define(['underscore', 'jquery'], function() {
  return {
    showName: function(name){
          var temp = _.template("Hello <%= name %>");
         $("body").append(temp({name: name}));
    }
  };
});

Kemudian kita buat return fungsi dari module example.js . Disini, kita ingin module example ini untuk mereturn sebuah function bernama showName dimana akan manampilkan sebuah template underscore ke dalam file index.html yang sudah kita punya.

Setelah kalian membuat file example.js ini, buka lagi file main.js yang sudah kita buat sebelumnya dan tambahkan sebuah path baru di confignya dan require module example yang kita buat tersebut. Jadi file main.js nantinya akan menjadi seperti di bawah ini:

require.config({
    baseUrl: 'lib',
    paths: {
        "jquery"    	: 'jquery',
        "underscore"    : 'underscore',
        //modules
        "example"		: 'modules/example' 
    }
});
require([
  'example'
], function(ExampleModule)
{
   //some code here 
   ExampleModule.showName('John');
});

Sebelumnya, kita me-require modul Jquery dan Underscore di main.js, tapi karena sebenarnya kita tidak butuh 2 module tersebut secara langsung di file main.js maka kita bisa hapus dan kita hanya perlu define Jquery dan Underscore di module example saja. Oke, jadi sudah siap test app kita lagi?

Nah Jadi bisa dilihat jika fungsi showHello dari module example yang kita buat tadi sudah berhasil di panggil di mana kita pass value name = John. Selanjutnya  juga bisa dilihat di network dari google crome tersebut file example.js otomatis terload. Oke berhasil :))

Conclusion

Walaupun ini hanya contoh yang sangat simple, Kita harap bisa memberikan perkenalan yang bagus terhadap kekuatan tersembunyi dari RequireJs  ini dan apa yang bisa dilakukannya terutama dengan fitur modular apporoachnya. Jadi kita bisa lihat bagaimana RequireJs ini bisa memanage dependency dan module-module dengan lebih baik dan efisien dibandingkan dengan include script tag satu-satu. Tentunya dengan approach ini, kita bisa memecah file javascript yang bisa kita buat biasanya sampai ratusan bahkan ribuan line of code itu menjadi beberapa module-module kecil sehingga lebih mudah untuk di manage. Karena ini hanya sebatas perkenalan, pastinya beberapa tutorial yang lebih mengasikkan tentang RequireJs akan segera ditulis. 

Seperti biasa, silakan tinggalkan komen dan feedback, very appreciate!!

Need sample code? github

Share via:

About Author

@bcscoder

hello! saya seorang pecinta dunia programming, gamer dan freelancer web developer. Follow me @bcscoder

← Baca artikel lain