Bliblidotcom - Evolusi Frontend Development di Bliblidotcom

Bliblidotcom - Evolusi Frontend Development di Bliblidotcom

Perubahan demi perubahan yang terjadi pada frontend development selama 2 tahun

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

August 29, 2017
Tweet

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