PERBANDINGAN CSS PREPROCESSOR SASS DAN LESS PADA PENGEMBANGAN ANTARMUKA PENGGUNA WEB NASKAH PUBLIKASI
diajukan oleh Arif Riyanto 09.11.3024
kepada JURUSAN TEKNIK INFORMATIKA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA YOGYAKARTA 2013
v
COMPARISON OF SASS AND LESS CSS PREPROCESSOR ON WEB USER INTERFACE DEVELOPMENT PERBANDINGAN CSS PREPROCESSOR SASS DAN LESS PADA PENGEMBANGAN ANTARMUKA PENGGUNA WEB Arif Riyanto Kusnawi Jurusan Teknik Informatika STMIK AMIKOM YOGYAKARTA ABSTRACT Browsers can only understand CSS (Cascading Style Sheets) as a styling technique for HTML DOM (Document Object Model) element. Most of the programming languages allow the programmer to write code properly and neatly. Unlike programming languages, CSS has a weakness, among others: there are no variables, there is no hierarchy like DOM. CSS preprocessor is a way to add functionality to CSS, especially in the form of abstractions such as variables and mixins. CSS preprocessor offer additional things that can not be done in CSS alone, which makes development faster, easier, more maintainable, and more structured . This paper presents a comparison between SASS and LESS CSS preprocessor on website user interface development. The results of this research can be used as consideration for font-end web developer who will be using one of the SASS and LESS CSS preprocessor to build a web application user interface. Keywords: CSS Preprocessor, SASS, LESS
1.
Pendahuluan Perkembangan teknologi saat ini terutama teknologi web telah memasuki
memasuki babak web 2.0. Konsep ini memungkinkan aplikasi-aplikasi yang berbasis web dapat lebih interaktif terhadap pengguna internet. Pada pengembangannya, kelebihan dari aplikasi-aplikasi website web 2.0 terletak pada dukungan basis data yang kuat dan unik serta antarmuka pengguna yang komplek. Pengembangan sebuah aplikasi website Web 2.0 dari tahap awal akan sangat menyita sumber daya, baik tenaga, biaya maupun waktu. Terlebih bagi pengembang web profesioal yang harus mengejar deadline untuk membangun aplikasi-aplikasi website. Sebab itu, dibuatlah bermacam-macam tool yang diharapkan dapat meningkatkan efisiensi pengembang web dalam membangun aplikasi. Salah satu hal penting pada pengembangan aplikasi web adalah antarmuka pengguna. Untuk membuat antarmuka yang baik diperlukan styling yang baik. Namun, browser hanya dapat memahami CSS (Cascading Style Sheets) sebagai teknik styling untuk elemen html DOM (Document Object Model). Sebagian besar bahasa pemrograman memungkinkan programmer menulis kode dengan baik dan rapi. Tidak seperti bahasa pemrograman, CSS memiliki kelemahan antara lain: tidak terdapat variable, nesting dan melakukan operasi. CSS preprocessor adalah cara untuk menambahkan fungsionalitas ke CSS terutama dalam bentuk abstraksi seperti variable, nesting dan mixin. CSS preprocessor menawarkan hal-hal tambahan yang tidak dapat dilakukan di CSS saja, yang menjadikan pengembangan lebih cepat, lebih mudah, lebih maintainable, dan lebih terstrukur. Karya tulis ini memaparkan perbandingan antara CSS preprocessor Sass dan LESS pada pengembangan antarmuka pengguna website. Hasil dari penelitian ini diharapkan dapat digunakan sebagai bahan pertimbangan bagi font-end web developer yang
akan menggunakan CSS preprocessor untuk membangun sebuah antarmuka
pengguna aplikasi web. 2.
Landasan Teori
2.1
Antarmuka Pengguna Antarmuka pengguna merupakan bentuk tampilan grafis yang menghubungkan
antara pengguna dengan sistem sehingga memudahkan pengguna dalam menjalankan suatu aplikasi.
1
Antarmuka pengguna dalam bidang web merupakan tempat interaksi manusia dengan aplikasi web terjadi. Tujuan dari interaksi manusia dan aplikasi web pada antarmuka pengguna adalah pengoperasian dan pengendalian aplikasi dan umpan balik dari aplikasi yang membantu pengguna membuat keputusan operasional. Konsep yang lebih luas dari antarmuka pengguna ini termasuk aspek-aspek interaktif dari sistem operasi komputer, alat-alat, kontrol operator mesin berat dan aplikasi web. 2.2
Word Wide Web Menurut Turban et al. (2003), World Wide Web adalah sebuah sistem dengan
standar yang diterima secara universal untuk penyimpanan, pengambilan kembali, penyusunan struktur, dan penampilan informasi menggunakan arsitektur client server. Sementara menurut Raggett (1999), World Wide Web adalah sebuah jaringan sumber-sumber data informasi. Wolrd Wide Web bergantung pada tiga mekanisme untuk membuat sumber daya tersebut siap tersedia kepada sebanyak mungkin audien: (1) skema penamaan untuk menempatkan sumber daya di Web (contoh URI), (2) protokol untuk mengakses sumber data di web (contoh HTTP), dan (3) hypertext untuk memudahkan navigasi antarsumber data (contoh HTML). World Wide Web, atau sering disebut juga dengan Web, WWW, ataupun W3, tidak sama dengan internet. Internet berfungsi sebagai mekanisme transportasi, sementara Web adalah salah satu aplikasi yang menggunakan fungsi transpor tersebut (Turban et al, 2003). 2.3
Cascading Style Sheet CSS merupakan singkatan dari Cascading Style Sheet yang digunakan sebagai
teknik styling elemen html DOM (Document Object Model). CSS pertama kali dikembangkan pada tahun 1997, sebagai cara bagi para pengembang Web untuk menentukan tampilan halaman Web. Hal itu dimaksudkan untuk memungkinkan pengembang memisahkan konten dari desain sehingga HTML bisa melakukan lebih dari fungsi dasar yang tidak harus harus mencampur tentang desain dan tata letak. 2.4
CSS Preprocessor CSS preprocessor adalah cara untuk menambahkan fungsionalitas ke CSS
terutama dalam bentuk abstraksi seperti variabel dan mixin. CSS preprocessor
2
menawarkan hal-hal tambahan yang tidak dapat dilakukan di CSS saja, yang menjadikan pengembangan lebih cepat, lebih mudah, lebih maintainable, dan lebih terstruktur.
CSS Preprocessor
Compiler
Style sheet
Gambar 2.1 Anatomi CSS Preprocessor
2.5
Sass Sass
didesain
oleh
Hampton
Catlin
dan
dikembangkan
oleh
Nathan
Weizenbaum. Sass merupakan ekstensi dari CSS3 yang memungkinkan untuk menambahkan aturan bersarang, variabel, mixin, operasi. Sass diterjemahkan ke format CSS yang lebih bagus. Sass memiliki dua sintak. Sintak utama yang baru pada versi 3 dikenal sebagai "SCSS" (singkatan dari "Sassy CSS"), dan merupakan superset dari sintak CSS3. Ini berarti bahwa setiap CSS3 yang valid berlaku juga untuk SCSS. File SCSS menggunakan ekstensi .SCSS. Sintak yang kedua adalah sintak lama yang dikenal sebagai sintak Sass. Terinspirasi oleh Haml, sintak Sass dimaksudkan untuk orang-orang yang lebih memilih keringkasan penulisan code tapi memiliki kesamaan dengan CSS. Sass tidak menggunakan semikolon disetiap akhir value, tetapi menggunakan kurung baris sebagai penanda setiap selector. 2.6
LESS LESS adalah bahasa stylesheet dinamis yang dirancang oleh Alexis Sellier.
LESS dipengaruhi oleh Sass dan telah mengadaptasi sintak SCSS untuk format blok seperti CSS. LESS merupakan proyek open-source. Versi pertama ditulis dalam Ruby, namun dalam versi selanjunya digantikan oleh JavaScript. 2.7
Ruby
3
Ruby adalah pemrograman dinamis yang diciptakan oleh Yukihiro Matsumoto dan dirilis ke publik pertama kali pada tahun 1995. Pada tahun 1993 Yukihiro ingin membuat sebuah bahasa skripting yang memiliki kemampuan orientasi obyek. Pada saat itu pemrograman berorientasi obyek sedang berkembang tetapi belum ada bahasa pemrograman scripting yang mendukung pemrograman obyek. 2.8
JavaScript JavaScript adalah bahasa pemrograman interpreted yang dikembangkan
pertama kali di Netscape oleh Brendan Eich. JavaScript diimplementasikan sebagai bagian dari browser sehingga client-side scripts dapat berinteraksi dengan pengguna. 2.9
Web Browser Web browser adalah sebuah aplikasi perangkat lunak yang digunakan untuk
mengambil, menyajikan, dan menjelajahi sumber informasi di dalam World Wide Web. Sumber informasi diidentifikasi dengan Uniform Resource Identifier (URI) yang dapat berupa halaman web, gambar, video atau bagian dari konten lainnya. Contoh dari web browser adalah Mozilla Firefox, Google Chrome, Safari, Internet Explorer, dan Opera. 2.10
Variabel Perbandingan Yang dimaksud variabel adalah segala sesuatu yang menjadi obyek pengamatan
pelitian. Adapun obyek pengamatan yang akan dianalisis pada penelitian ini dibatasi oleh beberapa variabel perbandingan yang ditentukan sebagai acuan mengenai hal-hal yang akan diperbandingkan antara CSS preprocessor Sass dan LESS. Adapun variabel perbandingan yang akan dibahas dalam penelitian ini adalah setup CSS preprocessor, Watch Mode, Variable, Nesting, Mixin, Operasi, dan Load Speed.
3.
Perancangan Antarmuka Pengguna
3.1
Persiapan
3.1.1
Persiapan Perangkat Keras Perangkat keras menggunakan notebook PC dengan spesifikasi sebagai berikut: 1. Processor Intel® Core™ i3 350M
4
2. Memory DDR3 1066 MHz SDRAM 2 GB 3. Harddisk 2.5" SATA 320 GB 4. Optical Drive Super-Multi DVD 5. Monitor 14.0" 16:9 HD (1366x768) LED Backlight 6. Modem Huawei
3.1.2
Persiapan Perangkat Keras Penelitian menggunakan perangkat lunak sebagai berikut: 1. Sistem Operasi Windows 7 2. Untuk compiler Sass menggunakan aplikasi ruby rubyinstaller-1.9.3p429.exe
yang
diunduh
dari
situs
web
rubyforge
dengan
alamat
http://rubyforge.org/frs/download.php/76952/rubyinstaller-1.9.3-p429.exe 3. Untuk compiler LESS menggunakan script Less.js yang diunduh dari alamat https://github.com/cloudhead/less.js 4. Aplikasi untuk membuat mockup desain menggunakan Adobe Photoshop CS 4 5. Text editor menggunakan Sublime Text 2 6. Web browser yang digunakan: Internet Explorer, Mozilla Firefox, Google Chrome, dan Safari for Windows. 3.2
Penentuan Antarmuka Pengguna Pada penelitian ini akan dibuat dua buah prototipe antarmuka pengguna website
direktori jasa menggunakan CSS preprocessor Sass dan LESS. Pada penelitian ini tidak akan dibahas desain database. Prototipe yang dibuat menggunakan halaman statis. Tujuan penggunaan halaman statis agar bahasan tidak melebar sehingga tetap fokus pada CSS preprocessor. Prototipe antarmuka pengguna website ini didesain menggunakan aplikasi grafis Adobe Photoshop CS 4. Pada aplikasi Adobe Photoshop akan didesain tampilan halaman depan, halaman daftar layanan jasa, halaman detail layanan jasa dan struktur menu navigasi. Masing-masing halaman terdepat detail warna, ukuran tipografi dan layout yang menjadi acuan konversi dari file .PSD ke file HTML.
5
4.
Hasil dan Pembahasan
4.1
Setup CSS Preprocessor Sass menggunakan ruby sebagai compiler. Untuk menginstall ruby pada system
operasi Windows dapat menggunakan Ruby Installer for Windows. Setelah Ruby Installer terpasang di komputer selanjutnya install Sass dengan cara menuliskan kode berikut pada jendela Command Promt.
gem install sass LESS menggunakan JavaScript sebagai compiler.
Pada dasarnya browser
hanya dapat membaca file .css untuk styling. Sedangkan file .less tidak dapat eksekusi oleh browser. Less menyediakan file JavaScript yang dapat digunakan oleh browser untuk mengeksekusi file dengan ekstensi .less. Dengan begitu browser dapat membacanya meski berekstensi bukan .css. Cara menggunakan file JavaScript untuk compiler LESS adalah dengan menautkan file .less dengan rel sebagai “stylesheet/less” diantara
dan pada halaman website.
4.2
Watch Mode Watch mode pada Sass adalah mengkonversi file .scss menjadi file .css. Proses
konversi tersebut dilakukan ketika file .scss yang selesai ditulis kemudian disimpan. Artinya, ruby sebagai compiler membuat file baru dengan ekstensi .css hasil konversi dari file .scss. File baru yang berkstensi .css dapat diubah namun hasil ubahan tersebut tidak mempengaruhi kode asli file .scss. Cara mengkonversi file .scss ke file .css adalah dengan menuliskan sass --watch style.scss:style.css pada jendela Command Promt.
Watch mode pada LESS menggunakan JavaSript dan langsung dilakukan di browser. JavaScript tidak mengkonversi file .less menjadi file .css namun tetap menjadikannya sebagai file yang berekstensi .less. File JavaScript tersebut membantu browser untuk dapat mengeksekusi file .less. Cara melakukan watch mode pada LESS adalah dengan menambahkan #!watch pada akhir URL.
6
4.3
Variable Variable pada Sass berfungsi sama dengan bahasa pemrograman pada
umumnya yaitu menyimpan suatu nilai. Nilai dapat berupa integer ataupun string. Berikut adalah contoh dari kode yang buat pada penelitian ini. Sass menggunakan tanda dollar ($) untuk mendeklarasikan sebauh variable.
$warna-abu : #ededed; $warna-border2 : #d9d9d9; $warna-border3 : #f6f6f6; .cari-wrapper { background: $warna-abu; border-top: solid 1px $warna-border3; margin-bottom: 20px; } Pendeklarasian variable pada LESS menggunakan tanda “@”. Variable pada LESS sama dengan fungsi variable pada umumnya. Berikut ini adalah penggunaan variable LESS pada penelitian ini.
@warna-abu @warna-border1 @warna-border2 @warna-border3
: : : :
#ededed; #dddddd; #d9d9d9; #f6f6f6;
.cari-wrapper { background: @warna-abu; border-top: solid 1px @warna-border3; padding: 10px; margin-bottom: 20px; }
4.4
Nesting Nesting pada Sass memungkinkan penulisan kode secara bersarang. Penulisan
selector di dalam selector menjadikan penulisan kode lebih terstruktur dan meminimalisir pengulangan penulisan. Berikut adalah kode bersarang pada CSS preprocessor Sass.
7
.list-detail { width: 470px; h2 { a { color: #273d6a; font-family: $font; font-weight: normal; } a:hover { color: #273d6a; text-decoration: underline; } } } 4.5
Mixin Mixin adalah cara menuliskan banyak property dan digunakan kembali dalam
class lainnya. Cara mendeklarasikan mixin pada preprocessor Sass adalah dengan menulis tanda “@” diikuti nama mixin tanpa spasi. Untuk menyisipkan dalam class lainnya hanya menuliskan @include [nama mixin] di dalam selector.
@mixin bordered { border-top: solid 5px $warna-border1; border-bottom: solid 1px $warna-border2; } .header-wrapper { height: 70px; background: $warna-abu; @include bordered; }
Penulisan mixin pada LESS diawali dengan tanda titik (.) diikuti nama mixin tanpa spasi. Berikut adalah kode mixin pada LESS
8
@mixin bordered { border-top: solid 5px $warna-border1; border-bottom: solid 1px $warna-border2; }
.header-wrapper { height: 70px; background: $warna-abu; @include bordered; } Pembahasan: Kedua preprocessor sudah mendukung fitur mixin. Perbedaan terletak pada penulisan deklarasi. Pada Sass penulisan deklarasi mixin diawali dengan tanda “@” sedangkan pada LESS diawali dengan tanda titik (.).
4.6
Operasi Pada CSS preprocessor Sass memungkinkan untuk melakukan operasi
matematika baik penjumlahan, pengurangan, perkalian ataupun pembagian. Berikut adalah contoh dari kode Sass dengan operasi matematika.
$lebar $lebarbox $nilai $border10
: : : :
880px; $lebar / 4; 50; $nilai / 5;
.box { width: $lebarbox; float: left; margin: 0 20px 20px 0; } .box-inner { background: red; background: #f4f4f4; margin-bottom: $border10; } Pembahasan:
9
Kedua preprocessor, Sass dan LESS dapat melakukan operasi matematika dasar. Pada pengujian diatas dilakukan operasi pembagian dengan nilai yang sama antara Sass dan LESS. Tidak ada perbedaan baik dari operasi maupun cara penulisan kode.
4.7
Load Speed Pengujian kecepatan loading dilakukan dengan browser Google Chrome. Google
Chrome memiliki fitur developer tool yang dapat digunakan untuk melihat waktu yang diperlukan file sebuah website dibaca oleh browser. Pengujian dilakukan tiga kali kemudian diambil waktu rata-rata.
Gambar 4.1 Waktu Loading Website menggunakan Sass pada Localhost
10
Tabel 4.1 Waktu Load Sass Offline
Percobaan
Waktu (ms)
1
47
2
63
3
50
Rata-rata
53,3
Gambar 4.2 Waktu Loading Website Menggunakan LESS pada Localhost
11
Tabel 4.3 Waktu Load LESS Offline Percobaan
Waktu (ms)
1
9
2
4
3
21
Rata-rata
11,3
Gambar 4.3 Waktu Loading Website menggunakan Sass Secara Online
12
Tabel 4.2 Waktu Load Sass Online Percobaan
Waktu (ms)
1
227
2
292
3
1180
Rata-rata
566,3
Gambar 4.4 Waktu Loading Website Menggunakan LESS Secara Online
13
Tabel 4.4 Waktu Load LESS Online
Percobaan
Waktu (ms)
1
842
2
1020
3
1600
Rata-rata
1154
Pembahasan: Dari data diatas dapat dilihat bahwa waktu loading file CSS hasil konversi Sass memerlukan waktu 47 ms, 63 ms dan 50 ms. Rata-rata waktu load speed Sass di localhost adalah 53,3 ms. Sedangkan saat pengujian online Sass memerlukan waktu 227 ms, 292 ms dan 1180 ms. Rata-rata waktu load speed Sass secara online adalah 566,3 ms. Hasil pengujian untuk LESS pada localhost adalah 9 ms, 4 ms dan 21 ms. Rata-rata waktu load speed Sass secara online adalah 11,3 ms. Sedangkan saat pengujian online LESS memerlukan waktu 842 ms, 1020 ms dan 1600 ms. Rata-rata waktu load speed LESS secara online adalah 1154 ms. Dari data tersebut dapat dilihat bahwa load speed pada localhost LESS lebih cepat dari Sass. Sedangkan saat online Sass lebih cepat daripada LESS. LESS pada localhost lebih cepat karena proses pemuatan halaman web tidak memerlukan koneksi internet sehingga file less.js dapat lebih cepat dirender. Pada saat online Sass lebih cepat karena file .css dapat langsung dibaca oleh browser. Sedangkan LESS saat online memerlukan waktu tunggu hingga file less.js selesai. Selain itu dapat dilihat juga bahwa font face museo yang digunakan dapat penelitian ini berhasil dimuat oleh Sass sedangkan LESS gagal memuatnya.
5.
Penutup
5.1
Kesimpulan Setelah dilakukan penelitian perbandingan antara preprocessor Sass dan LESS
dapat diambil kesimpulan sebagai berikut:
14
1. Langkah yang dilakukan pada penelitian ini untuk membandingkan CSS preprocessor Sass dan LESS pada pengembangan antarmuka pengguna adalah dengan studi literatur dan pembuatan prototipe antarmuka pengguna sebuah website layanan jasa. 2. Sass memiliki kelemahan proses instalasi yang lebih rumit dibandingkan dengan LESS. Pada dasarnya sistem operasi Windows yang digunakan pada penelitian ini tidak terinstall ruby sehingga untuk menggunakan Sass harus menyiapkan ruby terlebih dahulu. Pada sisi lain Sass memiliki kelebihan yaitu load speed lebih cepat dibandingan LESS pada saat online. Selain itu Sass dapat memuat font face dengan baik. Kelemahan pada LESS adalah karena menggunakan JavaScript agar dapat dibaca oleh browser, apabila opsi JavaScript pada browser dimatikan maka file .less tidak dapat dibaca oleh browser. Sedangkan LESS memiliki kelebihan kemudahan pada saat instalasi dibandingkan dengan Sass. LESS hanya memerlukan file less.js yang ditautkan diantara dan 3. Tidak dapat ditarik kesimpulan secara garis besar alternatif CSS preprocessor mana yang lebih baik diantara kedua preprocessor ini. Hal ini disebabkan kedua CSS preprocessor ini memiliki banyak kesamaan, tetapi untuk beberapa hal, keduanya saling mengungguli satu sama lain.
5.2
Saran Setelah dilakukan penelitian perbandingan antara preprocessor Sass dan LESS
dapat diambil kesimpulan sebagai berikut:
1. Penulis menemukan kendala dalam menentukan variable perbandingan karena sedikitnya literatur mengenai isu perbandingan CSS preprocessor. Sehingga dalam penelitian variable perbandingan untuk analisis diambil berdasarkan halhal pokok yang sering muncul di berbagai literaratur mengenai kedua CSS preprocessor tersebut. Penulis berharap penelitian selanjutnya dapat melengkapi kekurangan-kekurangan yang ada pada kriteria perbandingan dan tahap analisis. 2. Hasil penelitian belum mendetail untuk analisisnya, sehingga diharapkan untuk penelitian selanjutnya dapat dilakukan secara lebih mendalam.
15
DAFTAR PUSTAKA
Catlin, Hampton and Michael Lintorn Catlin. 2011. Pragmatic Guide to Sass. Pragmatic Bookshelf. Croft, Jeff, et al. 2006. Pro CSS Techniques.Apress. Kadir, Abdul. 2011. From Zero to A Pro : CSS - Tip Dan Trik Untuk Menyertakan Cascading Style Sheet Dalam Web. Yogyakarta: Andi Publisher. Sudarmawan dan Dony Ariyus. 2007. Interaksi Manusia & Komputer. Yogyakarta: Penerbit Andi. Garsiel, Tali. 2011. How Browsers Work: Behind the scenes of modern web browsers. http://www.html5rocks.com/en/tutorials/internals/ howbrowserswork.diakses pada 8 April 2013 Geneves, Pierre, et al. On the Analysis of Cascading Style Sheets. http://hal.inria.fr/docs/00/64/30/75/TEX/RR-7808.pdf diakses tanggal 29 April 2013. Kumar, Ranjith. 2011. Understand the Power of Sass and Why You should use CSS Preprocessors, http://www.1stwebdesigner.com/css/ power-sass-why-use-css-preprocessors/ , diakses tanggal 5 Mei 2012. Zeldman, Jeffrey. 2006. Web 3.0. http://alistapart.com/article/web3point0, diakses tanggal 8 April 2013.
16
