Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bliblidotcom - Evolusi Frontend Development di Bliblidotcom

395 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Bliblidotcom - Evolusi Frontend Development di Bliblidotcom

  1. 1. EVOLUSI FRONTEND DEVELOPMENT di Blibli.com By Ifnu Bima x Irfan Maulana
  2. 2. Tentang Ifnu • Nama : Ifnu B Fatkhan • Development Manager di Blibli.com
  3. 3. Tentang Irfan • Nama : Irfan Maulana • Sr. SDE di Blibli.com
  4. 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. 5. KPI Departement Technology : Page Load Performance (3G) : 100% under 4sc Service Uptime : 99% Defect Detection Percentage : 85% PgM : Ontime Project Delivery : 97%
  6. 6. Dahulu Kala • Frontend x Backend di satu project • Server Render JSP – JSTL • AngularJS 1.x sbg data processor
  7. 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. 8. Evolusi Pertama : JS Task Runner • Memindahkan static build ke dalam JS task runner. Grunt -> Gulp
  9. 9. Evolusi Kedua : CSS menjadi SASS • Menggunakan SASS untuk memecah CSS menjadi lebih modular
  10. 10. Evolusi Ketiga : BEM Convention • BEM adalah CSS naming convention yang bisa memberikan kemampuan seperti component based framework
  11. 11. Evolusi Ketiga : BEM Convention Lanjutan • Masih bisa dilihat secara live di https://www.blibli.com/travel/hotel
  12. 12. Evolusi Keempat : Vue.js • Vue.js dipilih sebagai pengganti AngularJS 1.x secara bertahap : member dashboard
  13. 13. Evolusi Keempat : Vue.js Lanjutan • Blibli.com Travel menggunakan Vue.js dan full client rendering
  14. 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. 15. JS Ninja di Blibli.com Blibli.com perlahan menjadi tempat baru bagi para JS Ninja
  16. 16. THANK YOU

×