EVOLUSI FRONTEND DEVELOPMENT
di Blibli.com
By Ifnu Bima x Irfan Maulana

Tentang Ifnu
• Nama : Ifnu B Fatkhan
• Development Manager di Blibli.com

Tentang Irfan
• Nama : Irfan Maulana
• Sr. SDE di Blibli.com

Mengenai Evolusi
Evolusi adalah proses perubahan secara
berangsur-angsur (bertingkat) dimana sesuatu
berubah menjadi bentuk lain (yang biasanya)
menjadi lebih kompleks/rumit ataupun berubah
menjadi bentuk yang lebih baik
https://id.wikipedia.org/wiki/Evolusi_(istilah)

KPI Departement
Technology :
Page Load Performance (3G) : 100% under 4sc
Service Uptime : 99%
Defect Detection Percentage : 85%
PgM :
Ontime Project Delivery : 97%

Dahulu Kala
• Frontend x Backend di satu project
• Server Render JSP – JSTL
• AngularJS 1.x sbg data processor

Masalah yang terjadi
• Frontend dependent dengan backend
• Compile backend harus juga dilakukan oleh
Frontend
• Environment tidak frontend friendly
• Monolith frontend membuat kode terlalu
besar

Evolusi Pertama : JS Task Runner
• Memindahkan static build ke dalam JS task
runner. Grunt -> Gulp

Evolusi Kedua : CSS menjadi SASS
• Menggunakan SASS untuk memecah CSS
menjadi lebih modular

Evolusi Ketiga : BEM Convention
• BEM adalah CSS naming convention yang bisa
memberikan kemampuan seperti component
based framework

Evolusi Ketiga : BEM Convention Lanjutan
• Masih bisa dilihat secara live di
https://www.blibli.com/travel/hotel

Evolusi Keempat : Vue.js
• Vue.js dipilih sebagai pengganti AngularJS 1.x
secara bertahap : member dashboard

Evolusi Keempat : Vue.js Lanjutan
• Blibli.com Travel menggunakan Vue.js dan full
client rendering

Evolusi Kelima : Modern Frontend
• Kode JS ES6 keatas.
• ESLint : Gagal bundle bila rule dilanggar.
• Webpack : Advance Compile, bundling, hot
reload.
• i18n : Multi bahasa
• Unit Test : Gerbang kualitas minimal 93%
coverage

JS Ninja di Blibli.com
Blibli.com perlahan menjadi tempat baru bagi
para JS Ninja

THANK YOU