Perubahan demi perubahan yang terjadi pada frontend development selama 2 tahun terakhir di Blibli.com

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

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

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

4. 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)

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

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

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

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

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

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

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

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

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

14. 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

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

16. THANK YOU