ngide
← ngideTips

Requirejs + pjax : Part 1 Membuat website yang lebih efisien dan lebih cepat

bcscoder 01 Oct 2014 at 11:11 pm Web Development requirejs pjax Ada banyak cara untuk membuat website yang lebih efisien dan memiliki loading yang lebih cepat. Salah satu cara untuk membuat kecepatan

a
Agus Yusida · 5 menit baca
bcscoder
01 Oct 2014 at 11:11 pm Web Development
requirejs pjax

Ada banyak cara untuk membuat website yang lebih efisien dan memiliki loading yang lebih cepat. Salah satu cara untuk membuat kecepatan website menjadi lebih cepat adalah dengan mengurangi request (http request) yang tidak perlu pada halaman website kita seperti asset dan gambar. Kali ini kita mau membahas tentang bagaimana cara memanage asset seperti css dan js yang lebih efesien. Tutorial kali ini akan membahas tentang html5 pushstate dan AMD (Asynchronous Module Definition).

Lalu apa saja yang kita perlukan dalam tutorial kali ini? Pertama kita akan mencoba menggabungkan salah satu AMD yaitu Require.Js, sebuah javascript file yang berfungsi sebagai module loader dengan Jquery PJax, sebuah jQuery plugin yang menggunakan ajax and pushState untuk menghasilkan sebuah pengalaman browsing yang cepat. 

Tapi ada baiknya kita list dahulu library atau plugin yang akan kita gunakan/kamu pelajari di projek ini:

  1. Require.Js, untuk yang belum tahu apa itu requirejs, bisa cek introductionnya disini (Kenalan dengan RequireJs)
  2. Jquery Pjax
  3. Bower : bower.io sebuah website package management, 

Persiapan

Apa saja yang kita butuhkan untuk memulai tutorial kali ini? 

  1. Pengalaman dengan programming PHP (dikit aja cukup)
  2. Sedikit pengetahuan tentang htaccess (dikit aja cukup)
  3. HTML + CSS + Javascript (wajib)
  4. Command Line (dikit aja cukup)
  5. Text Editor kesayangan kalian
  6. XAMPP/MAMP/LAMP atau local server untuk menjalankan website yang kita buat

Tahap 1 : Install Bower & Create bower.json

Kalau kalian belum tahu atau belum menginstall bower sebelumnya, silakan check posting tentang install bower disini. Kalau sudah buka terminal kesayangan kalian dan buat sebuah directory baru di local server komputer kamu dan masuk ke dalam directory tersebut. Silakan cek contoh di bawah ini bagaimana kita mensetup directory project kita untuk pertama kali.

//contoh jika kalian menggunakan OSX dan MAMP
$ cd /Application/MAMP/htdocs //htdocs directory
mkdir your_direcory_name 
cd your_directory_name
//contoh jika kalian menggunakan windows dan XAMPP
cd c:/xampp/htdoc
mkdir your_direcory_name
cd your_directory_name

Nah pastikan kalian sudah berada di dalam directory project kamu, selanjutnya kita akan membuat sebuah file bower.json yang nanti kita gunakan untuk memanage dependency aplikasi kita. Kalian bisa membuat file bower.json secara manual menyimpan code di bawah ini dengan nama bower.json

{
  "name": "require_pjax",
  "version": "0.0.0",
  "authors": [
    "bcscoder <bcscoder@gmail.com>"
  ],
  "description": "example requirejs + pjax",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "app/bower_components",
    "test",
    "tests"
  ]
}

Atau kalian tinggal ketik bower init  lewat terminal dan tinggal mengikuti step-stepnya, maka kamu bisa juga membuat file bower.json secara otomatis.

Step 2 : Install dependency

Kita akan membutuhkan beberapa dependency/library untuk tutorial kali ini, yaitu:

  1. RequireJs
  2. JqueryPjax
  3. Bootsrap (untuk styling)

Untuk menginstall package-package tersebut, kita tentu tidak mendownloadnya secara manual dong, kita serahkan kepada bower saja. Caranya buka file bower.json yang tadi kita buat dan tambahkan script di bawah ini :

"dependencies": {
    "requirejs": "~2.1.15",
    "jquery": "~2.1.1",
    "jquery-pjax": "~1.9.2",
    "bootstrap": "~3.2.0"
}<br>

Kalau kamu sudah mengedit file bower.jsonnya, sekarang buka terminalnya lagi dan ketik bower install Bower akan mendownload dependecynya buat kamu dan tinggal tunggu sebentar.

Atau kalau kalian males ngedit file bowernya, kalian juga bisa menginstall dependecynya lewat terminal satu persatu, tinggal ketik masing-masing code di bawah ini dan file bower.json kamu akan terupdate otomatis dan dependecynya akan otomatis terdownload.

$ bower install requirejs --save
$ bower install jquery --save
$ bower install jquery-pjax --save
$ bower install bootsrap --save

Nah kalau sudah selesai, coba perhatikan di dalam directory yang kita buat tadi. Jika semua proses sudah benar, maka kamu akan mendapati sebuah folder baru dengan nama app di dalam directory project kamu. SusunanDirectory akan menjadi seperti ini:

your_dir/
    - bower.json
    - app/
      |_ bower_components
          |_ bootstrap
          |_ jquery
          |_ jquery-pjax 
          |_ requirejs 

Step 3. Buat Homepage

Sebelumnya, kita akan buat 2 buah folder baru di dalam folder app yaitu styles dan scripts  untuk tempat style dan script tambahan yang akan kita gunakan nanti.

Buat sebuah file dengan nama style.js di dalam folder styles yang berfungsi untuk tambahan atau modifikasi css untuk project kita

Sekarang saatnya kita membuat halaman homepage untuk project kali ini. Buat sebuah file dengan nama index.html dan simpan di main directory ya.

<!DOCTYPE html>
<html>
<head>
	<title>RequireJs + Pjax</title>
	<link rel="stylesheet" type="text/css" href="app/bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="app/styles/style.css">
</head>
<body>
<div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right" role="tablist">
          <li role="presentation" class="active"><a href="#">Home</a></li>
          <li role="presentation"><a href="#">About</a></li>
          <li role="presentation"><a href="#">Contact</a></li>
        </ul>
        <h3 class="text-muted">RequireJs + PJax</h3>
      </div>
      <div class="jumbotron">
        <h1>My Homepage</h1>
        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-lg btn-success" href="#" role="button">Hello World!</a></p>
      </div>
      <div class="footer">
        <p>&copy; @bcscoder 2014</p>
      </div>
    </div> <!-- /container -->
</body>
</html>

Dan untuk file style.css, kamu bisa gunakan kode style di bawah ini.

/* Space out content a bit */
body {
  padding-top: 20px;
  padding-bottom: 20px;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-right: 15px;
  padding-left: 15px;
}
/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  padding-bottom: 19px;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
}
/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}
/* Customize container */
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}
.container-narrow > hr {
  margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
  padding: 14px 24px;
  font-size: 21px;
}
/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}

Jika sudah kalian simpan semua file-file tersebut, sekarang saatnya kita coba lihat bagaimana tampilannya di browser kamu, coba ketik http://localhost/require_pjax . Kalau semua berhasil, kalian akan melihat tampilan seperti gambar di bawah ini.

Bagaimana? Tertarik dengan part selanjutnya? Pada part 2 kita akan membuat 2 buah halaman lagi yaitu About dan Contact. Punya Masukan, silakan tinggalkan comment di bawah ya :)

Share via:

About Author

@bcscoder

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

← Baca artikel lain