Bliblidotcom - Evolusi Frontend Development di Bliblidotcom

Perubahan demi perubahan yang terjadi pada frontend development selama 2 tahun

Transcript

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