SlideShare a Scribd company logo
1 of 16
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

More Related Content

What's hot (17)

Clean code chapter11 - systems
Clean code   chapter11 - systemsClean code   chapter11 - systems
Clean code chapter11 - systems
 
MYSQL-Database
MYSQL-DatabaseMYSQL-Database
MYSQL-Database
 
QSpiders - Unix Operating Systems and Commands
QSpiders - Unix Operating Systems  and CommandsQSpiders - Unix Operating Systems  and Commands
QSpiders - Unix Operating Systems and Commands
 
Web Application
Web ApplicationWeb Application
Web Application
 
Multimedia IT Presentation
Multimedia IT PresentationMultimedia IT Presentation
Multimedia IT Presentation
 
Hypertext
HypertextHypertext
Hypertext
 
Vi editor in linux
Vi editor in linuxVi editor in linux
Vi editor in linux
 
Presentation on web browser
Presentation on web browserPresentation on web browser
Presentation on web browser
 
Intro to Web Design
Intro to Web DesignIntro to Web Design
Intro to Web Design
 
Live VM Migration
Live VM MigrationLive VM Migration
Live VM Migration
 
Evolution of the Windows Kernel Architecture, by Dave Probert
Evolution of the Windows Kernel Architecture, by Dave ProbertEvolution of the Windows Kernel Architecture, by Dave Probert
Evolution of the Windows Kernel Architecture, by Dave Probert
 
Test data generation
Test data generationTest data generation
Test data generation
 
Introduction to multimedia
Introduction to multimediaIntroduction to multimedia
Introduction to multimedia
 
How to Make Your CMS Rollout a Success
How to Make Your CMS Rollout a SuccessHow to Make Your CMS Rollout a Success
How to Make Your CMS Rollout a Success
 
introduction of Multimedia
introduction of Multimedia introduction of Multimedia
introduction of Multimedia
 
Digital Audio in Multimedia
Digital Audio in MultimediaDigital Audio in Multimedia
Digital Audio in Multimedia
 
Evolution of web browsers ppt
Evolution of web browsers pptEvolution of web browsers ppt
Evolution of web browsers ppt
 

More from Irfan Maulana

Modern Web - an Introduction
Modern Web - an IntroductionModern Web - an Introduction
Modern Web - an IntroductionIrfan Maulana
 
Unit Testing for Frontend Code at Blibli.com
Unit Testing for Frontend Code at Blibli.comUnit Testing for Frontend Code at Blibli.com
Unit Testing for Frontend Code at Blibli.comIrfan Maulana
 
Programmer In Startup Era
Programmer In Startup EraProgrammer In Startup Era
Programmer In Startup EraIrfan Maulana
 
Bliblidotcom - Tech In Asia PDC 2017 Takeaway
Bliblidotcom - Tech In Asia PDC 2017 TakeawayBliblidotcom - Tech In Asia PDC 2017 Takeaway
Bliblidotcom - Tech In Asia PDC 2017 TakeawayIrfan Maulana
 
Bliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWABliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWAIrfan Maulana
 
Angular - The Return of The King
Angular - The Return of The KingAngular - The Return of The King
Angular - The Return of The KingIrfan Maulana
 
How to Become Rockstar Programmer
How to Become Rockstar ProgrammerHow to Become Rockstar Programmer
How to Become Rockstar ProgrammerIrfan Maulana
 
Bliblidotcom - AngularJS Introduction
Bliblidotcom - AngularJS IntroductionBliblidotcom - AngularJS Introduction
Bliblidotcom - AngularJS IntroductionIrfan Maulana
 
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSPhp Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSIrfan Maulana
 
Journey To The Front End World - Part3 - The Machine
Journey To The Front End World - Part3 - The MachineJourney To The Front End World - Part3 - The Machine
Journey To The Front End World - Part3 - The MachineIrfan Maulana
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionIrfan Maulana
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The CosmeticIrfan Maulana
 
Journey To The Front End World - Part1 - The Skeleton
Journey To The Front End World - Part1 - The SkeletonJourney To The Front End World - Part1 - The Skeleton
Journey To The Front End World - Part1 - The SkeletonIrfan Maulana
 
Bliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSBliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSIrfan Maulana
 
PHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SidePHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SideIrfan Maulana
 
JakartaJS - How I Learn Javascript From Basic
JakartaJS - How I Learn Javascript From BasicJakartaJS - How I Learn Javascript From Basic
JakartaJS - How I Learn Javascript From BasicIrfan Maulana
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentIrfan Maulana
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of JavascriptIrfan Maulana
 
Create Rest API in Nodejs
Create Rest API in Nodejs Create Rest API in Nodejs
Create Rest API in Nodejs Irfan Maulana
 
Irfan Maulana - Career Journey
Irfan Maulana - Career JourneyIrfan Maulana - Career Journey
Irfan Maulana - Career JourneyIrfan Maulana
 

More from Irfan Maulana (20)

Modern Web - an Introduction
Modern Web - an IntroductionModern Web - an Introduction
Modern Web - an Introduction
 
Unit Testing for Frontend Code at Blibli.com
Unit Testing for Frontend Code at Blibli.comUnit Testing for Frontend Code at Blibli.com
Unit Testing for Frontend Code at Blibli.com
 
Programmer In Startup Era
Programmer In Startup EraProgrammer In Startup Era
Programmer In Startup Era
 
Bliblidotcom - Tech In Asia PDC 2017 Takeaway
Bliblidotcom - Tech In Asia PDC 2017 TakeawayBliblidotcom - Tech In Asia PDC 2017 Takeaway
Bliblidotcom - Tech In Asia PDC 2017 Takeaway
 
Bliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWABliblidotcom - AMP And PWA
Bliblidotcom - AMP And PWA
 
Angular - The Return of The King
Angular - The Return of The KingAngular - The Return of The King
Angular - The Return of The King
 
How to Become Rockstar Programmer
How to Become Rockstar ProgrammerHow to Become Rockstar Programmer
How to Become Rockstar Programmer
 
Bliblidotcom - AngularJS Introduction
Bliblidotcom - AngularJS IntroductionBliblidotcom - AngularJS Introduction
Bliblidotcom - AngularJS Introduction
 
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSPhp Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
 
Journey To The Front End World - Part3 - The Machine
Journey To The Front End World - Part3 - The MachineJourney To The Front End World - Part3 - The Machine
Journey To The Front End World - Part3 - The Machine
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
 
Journey To The Front End World - Part2 - The Cosmetic
Journey To The Front End World - Part2 - The  CosmeticJourney To The Front End World - Part2 - The  Cosmetic
Journey To The Front End World - Part2 - The Cosmetic
 
Journey To The Front End World - Part1 - The Skeleton
Journey To The Front End World - Part1 - The SkeletonJourney To The Front End World - Part1 - The Skeleton
Journey To The Front End World - Part1 - The Skeleton
 
Bliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSSBliblidotcom - Reintroduction BEM CSS
Bliblidotcom - Reintroduction BEM CSS
 
PHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer SidePHP Indonesia - Understanding UI UX from Developer Side
PHP Indonesia - Understanding UI UX from Developer Side
 
JakartaJS - How I Learn Javascript From Basic
JakartaJS - How I Learn Javascript From BasicJakartaJS - How I Learn Javascript From Basic
JakartaJS - How I Learn Javascript From Basic
 
PHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web DevelopmentPHP Indonesia - Nodejs Web Development
PHP Indonesia - Nodejs Web Development
 
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript[Blibli Brown Bag] Nodejs - The Other Side of Javascript
[Blibli Brown Bag] Nodejs - The Other Side of Javascript
 
Create Rest API in Nodejs
Create Rest API in Nodejs Create Rest API in Nodejs
Create Rest API in Nodejs
 
Irfan Maulana - Career Journey
Irfan Maulana - Career JourneyIrfan Maulana - Career Journey
Irfan Maulana - Career Journey
 

Bliblidotcom - Evolusi Frontend Development di Bliblidotcom

  • 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