Blibli.com – How we use SASS and Grunt

SASS and Grunt

Kali ini saya akan coba berbagi cerita tentang bagaimana kami di blibli.com mencoba meng-implementasikan SASS dan Grunt di release code yang terbaru.
Semoga bisa membantu memberikan pencerahan bagi kalian-kalian diluar sana yang sedang atau akan meng-implementasikan hal yang sama di code kalian.

  1.  Alasan

    SASS
    Alasan yang paling kuat mengapa kami memilih untuk menggunakan SASS dibandingkan CSS native yang selama ini kami pakai adalah Code Management, SASS memiliki feature dimana kita bisa membuat stylesheet lebih partial/modular untuk dibaca.
    Hal ini sangat membantu ketika code CSS kita semakin besar, kompleks dan mulai kehilangan konsistensi-nya.
    Mengapa kami memilih SASS dibandingkan preprocessor lain adalah karena experience, dimana ada salah satu front-end developer kami yang sudah pernah menggunakan SASS sehingga akan lebih mudah untuk yang lain dalam learning curve-nya.
    Dari saya pribadi, sebenarnya saya lebih merekomendasikan less atau stylus karena tidak perlu engine lagi untuk menjalankannya tidak seperti SASS yang harus diatas Ruby.
    Namun dari sisi code dan feature saya rasa memang pilihan pertama masih SASS.Grunt
    Grunt adalah Javascript Task Runner yang biasa digunakan untuk minify, concat dan compile beberapa front-end code kami.
    Sebelumnya kami telah menggunakan YUI Compressor yang di jalankan diatas Maven untuk me-minify dan concat front-end code (*yang sayangnya hanya digunakan untuk homepage saja), tetapi memang XML style lebih susah dibaca dibandingkan JSON style.
    Ini karena kami menyisipkan code YUI Compressor di pom.xml sehingga file pom semakin membengkak dan menjadi tidak readable lagi.
    Mau tidak mau kami mesti mencari alternatif lain untuk memisahkan minifyer dan concatenation front end code ke tempat lain.
    Pilihan pertama yang saya rekomendasikan adalah Grunt dibanding Gulp dan lainnya.
    Alasannya karena saya sendiri pernah menggunakan Grunt sehingga akan mudah untuk implementasinya.

  2.  Implementasi

    Untuk SASS yang kami gunakan adalah version 3.4.22 dan syntax yang digunakan adalah SCSS dimana lebih familiar untuk yang sebelumnya menggunakan CSS native dibandingkan menggunakan native SASS syntax yang menghilangkan bracket dan semicolon.
    Hal pertama yang kami buat adalah membuat partial code SCSS untuk core style kami, seperti _variable, _typography, _grid, _form, _header, _footer dan _core. ini akan digunakan sebagai partial import. kami juga menyiapkan beberapa mixin variable yang mungkin akan sering digunakan seperti

    @mixin border-radius($radius){
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        border-radius: $radius;
    }
    

    dan kita bisa menggunakan dengan cara :

    .box { @include border-radius(10px); 
    

    Selanjutnya kami mulai me-migrasikan code kita per page, dimulai dari halaman-halaman penting yang akan sering diakses, seperti homepage, catalog, product detail dan halaman member. pada release ini kami hanya mengerjakan untuk mobile view saja, dikarenakan kompleksitas yang terlalu tinggi di desktop view sehingga akan butuh effort lebih banyak.
    Kami menggunakan grunt-contrib-sass sebagai compiler SASS code yang di jalankan diatas Grunt.

    Untuk plugin lain yang kita gunakan antara lain :

    {
    "grunt": "^0.4.5",
    "grunt-concurrent": "^2.2.1",
    "grunt-contrib-concat": "^1.0.0",
    "grunt-contrib-cssmin": "^1.0.1",
    "grunt-contrib-sass": "^1.0.0",
    "grunt-contrib-uglify": "^1.0.1",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-ng-annotate": "^2.0.2"
    }

  3.  Masalah

    Masalah terbesar ketika refactor code dengan tools baru sebenarnya bukan terletak pada learning curve tools baru tersebut tapi justru pada dosa-dosa masa lalu yang akhirnya terungkap dan harus dibenahi.
    Ini juga yang jadi penghalang kami, selain migrasi kami juga harus membenahi code-code yang tidak seharusnya, mungkin ini juga kenapa kami menyebut feature ini di branch git sebagai ui-cleanup.
    Untuk masalah penggunaan SASS yang paling banyak adalah fixing style yang affected akibat bersih-bersih code yang kami rasa tidak dibutuhkan, ini rasanya hampir seperti develop UI ulang dari awal😦.

    Untuk masalah lain yang minify Javascript file sendiri, masalah pertama yang dari awal memang kami bahkan sudah tau adalah bahwa AngulaJS code yang kami buat selalu gagal start ketika di minify. hal ini terjadi karena kesalahan dalam penggunaan Depedency Injection bawaan AngularJS.

    Langkah pertama adalah menggunakan grunt-ng-annotate untuk memperbaiki initialisasi depedency yang ada, sayangnya tidak semua masalah dipecahkan dengan ngAnotate ini.
    Berdasar experiance di Blibli.com Pulsa development kemarin yang saya dan team lakukan adalah menambahkan manual inject di masing controller AngularJS.
    Dan yang lebih menyedihkan adalah bahwa bukan hanya file controller yang membuat masalah ini, namun juga cara kami membuat custom directive juga salah.

    Kami membuat injection di directives dan membuat inline controller yang menggunakan depedency yang di-inject-kan ke dalam directives, ini tidak seharusnya. karena tidak ada satu tutorial yang mengajarkan untuk meng-inject depedency ke directives, namun ke controller.
    Kami harus me-refactore code kami, memisahkan directives dari controller dan meng-inject depedency ke controller untuk digunakan oleh directives.
    Sehari sebelum naik, saya baru dikabari bahwa ada depedency error yang disebabkan hal lain, yakni pembuatan inline controller di dalam controller (*WTF). Solusinya mengeluarkan controller menjadi independent controller dan menggunakan id dari controller tersebut pada yang membutuhkan.
    Sebelumnya saya sudah membagikan teknikal post disini : https://mazipanneh.wordpress.com/2016/05/23/blibli-com-how-i-refactor-angularjs-1-x-to-be-minify-able/

    Untuk concate Javascript juga pelik karena kami harus mencari-cari dan memilah-milah library mana yang dibutuhkan di halaman mana, untuk sementara mungkin ada yang missed karena sebagian besar tidak melalui testing yang cukup tapi missed disini kemungkinan adalah kelebihan concat file yang unused dan semoga tidak ada kurang concate 🙂.

    Kami juga mengalami kesulitan ketika deployment menggunakan Continues Integration dengan bamboo dari atlassian. kami kesulitan untuk membuat bamboo plan karena untuk saat ini belum ada ruby untuk menjalankan SASS compiler.
    Hal ini mengerikan sebenarnya apalagi mengingat kami punya beberapa developer yang inline mengerjakan feature yang sama, akan terjadi banyak conflict hasil build grunt. Sampai ada solusi yang lebih elegan untuk sementara kami melakukan compile di lokal dan hasilnya di push ke server git agar bamboo tidak perlu melakukan build lagi.

  4.  Langkah ke Depan

    Yang paling dekat adalah di sprint selanjutnya kami akan berusaha refactore code di desktop kami, dan semoga bisa kelar di satu sprint dikarenakan feature/revamp yang juga cukup banyak di bagian front-end yang mesti di deliver.
    Kami juga masih akan terus fokus memperbaiki performance front-end dikarenakan ini masih menjadi bottle-neck ketika kami sudah cukup optimis dengan performance server-side.
    Berbagai cara coba kami terapkan demi mencapai target tahun ini, dimana kami berharap semua page bisa di load < 4 second.

Bila teman-teman ada yang mempunyai cerita menarik mengenai Sass dan Grunt, silahkan dibagikan di kolom komentar.

Demikian sharing dari saya, semoga bermanfaat
mazipan-signature

Be a good reader, leave your comment please.

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