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.
Our Battle Against Technical Debt
Behind Great Product #3: Build Your Code for the Future
Frandy & Herwidodo, February, 24...
Who are we?
• Frandy Jaya
• Binusian
• Join blibli in 2012
• Java & JavaScript
Developer
• Herwidodo
• Budi Luhur, Compute...
Agenda
• What is Technical Debt and why it is sometime
sensible to take it
• Our journey to tackle technical debt and
mode...
Blibli.com UI pre launch 2010
Blibli.com UI Circa 2012
Build Your Code for the Future
Technical Debt
Technical Debt
Technical Debt is a wonderful metaphor developed by
Ward Cunningham to help us think about this problem.
In...
Taking Technical Debt is Sensible
• Time to market trump good design when you
have unproven business
• Until it is hold yo...
Taking Technical Debt is Sensible
• Paying technical debt is hard, it needs support
from very top level
• Rewrite / Refact...
Architectural Debt
Blibli.com SOA architecture circa 2013
Store Front
Back officeMerchant
ESB
Blibli.com UI Circa 2013
• Technology
– Dojo
– JSP
– JQuery
– Websphere Commerce Server
• Technical Debt
– Huge javascript...
Blibli.com UI rewrite 2014
Technology
• AngularJS 1.2
• Responsive Design
• Solr 4
• Java 7, Spring and Tomcat
• Redis
• Google Pagespeed and Varnish
Combination of Server Side Rendering and SPA
• Checkout page is
SPA
• Product Detail page
is half SPA
• Catalog, search an...
Content Problem
• Problem
– Content is scattered in Code
– No database to hold content data
– Multichannel UI is not possi...
Improved Architecture
Store Front
Engine
Back officeMerchant
ESB
Store Front
UI
SOLR
CMS
Internet
Responsive vs Adaptive
• Our responsive problem
– Desktop and mobile web UI share almost nothing,
all element are differen...
Mobile Web UI revamp to adaptive 2015
• One controller 2 completely sparate UI
• CMS support 2 layout : Desktop and Mobile...
Break Monolithic to Microservices 2015
Store Front
UI
SOLR
CMS
Internet
20+ Microservices
to handle transactions
Travel UI...
Front End Performance 2016
• Server side load < 1s
• Front end average load time ~ 12s
• What was the problem
– Blocked ja...
Front End Performance Result
Code Quality : Block Element Modifire (BEM)
• Maintainable
• Easy Tracking
• Modular
• Flexible
• Support partial load
• F...
Brand new Travel UI is using BEM and SPA
Code Quality : Design System and Blistrap
Front-End Tooling and Development Cycle
• It is crazy time where front end developer
need compiler and build tools !!
– SA...
A Peek to Our Front End Technology in Future
• Separate backend and front end completely
– Single Page Application
– Backe...
We Are Hiring!!
THANK YOU
Upcoming SlideShare
Loading in …5
×

Our Battle Against Technical Debt

Presentation at Tokopedia's event Behind Great Product : Build Your Code For the Future. Frandy and Herwidodo was presenting it. It was great experience both of them and they nail it.

  • Be the first to comment

Our Battle Against Technical Debt

  1. 1. Our Battle Against Technical Debt Behind Great Product #3: Build Your Code for the Future Frandy & Herwidodo, February, 24th 2017
  2. 2. Who are we? • Frandy Jaya • Binusian • Join blibli in 2012 • Java & JavaScript Developer • Herwidodo • Budi Luhur, Computer Science • Join blibli in 2015 • Front End Developer – Focus on Performance and technology
  3. 3. Agenda • What is Technical Debt and why it is sometime sensible to take it • Our journey to tackle technical debt and modernize our technology stack • Peek into our future Front End technology
  4. 4. Blibli.com UI pre launch 2010
  5. 5. Blibli.com UI Circa 2012
  6. 6. Build Your Code for the Future Technical Debt
  7. 7. Technical Debt Technical Debt is a wonderful metaphor developed by Ward Cunningham to help us think about this problem. In this metaphor, doing things the quick and dirty way sets us up with a technical debt, which is similar to a financial debt. Like a financial debt, the technical debt incurs interest payments, which come in the form of the extra effort that we have to do in future development because of the quick and dirty design choice. https://martinfowler.com/bliki/TechnicalDebt.html
  8. 8. Taking Technical Debt is Sensible • Time to market trump good design when you have unproven business • Until it is hold you back, crippling your productivity
  9. 9. Taking Technical Debt is Sensible • Paying technical debt is hard, it needs support from very top level • Rewrite / Refactor based on proven technology
  10. 10. Architectural Debt Blibli.com SOA architecture circa 2013 Store Front Back officeMerchant ESB
  11. 11. Blibli.com UI Circa 2013 • Technology – Dojo – JSP – JQuery – Websphere Commerce Server • Technical Debt – Huge javascript file – Slow backend • Temporary remedies – YSlow to evaluate performance – YUI Compressor – Implement SOLR to help backend performance issue
  12. 12. Blibli.com UI rewrite 2014
  13. 13. Technology • AngularJS 1.2 • Responsive Design • Solr 4 • Java 7, Spring and Tomcat • Redis • Google Pagespeed and Varnish
  14. 14. Combination of Server Side Rendering and SPA • Checkout page is SPA • Product Detail page is half SPA • Catalog, search and others are server side rendering for SEO puprpose
  15. 15. Content Problem • Problem – Content is scattered in Code – No database to hold content data – Multichannel UI is not possible • Solution – In House CMS system – Save content in database – Layout in database
  16. 16. Improved Architecture Store Front Engine Back officeMerchant ESB Store Front UI SOLR CMS Internet
  17. 17. Responsive vs Adaptive • Our responsive problem – Desktop and mobile web UI share almost nothing, all element are different – Mobile web was really slow • Responsive done right – Start with mobile web design – Make it responsive to desktop web – Success example • salestockindonesia.com
  18. 18. Mobile Web UI revamp to adaptive 2015 • One controller 2 completely sparate UI • CMS support 2 layout : Desktop and Mobile Web • SASS and Grunt introduction on mobile web UI • SPA page still using responsive • Mobile Web performance increase dramatically
  19. 19. Break Monolithic to Microservices 2015 Store Front UI SOLR CMS Internet 20+ Microservices to handle transactions Travel UI Digital Product UI 10+ Microservices to handle travel 10+ Microservices to handle Digital Product
  20. 20. Front End Performance 2016 • Server side load < 1s • Front end average load time ~ 12s • What was the problem – Blocked javascript execution – DOM size ~ 700kb – Page size ~ 3MB – Single big CSS file block rendering • Solution – Differ javascript – Decrease DOM size using ajax and lazy load – Lazy load all image, start download when image in viewpoint – Break CSS, inline CSS for layout and rendering – Put third party JS at the and of DOM • Result : frond end average load time ~4s - 6s
  21. 21. Front End Performance Result
  22. 22. Code Quality : Block Element Modifire (BEM) • Maintainable • Easy Tracking • Modular • Flexible • Support partial load • Fit with component based modern framework ex : React, Vue, Polymer.
  23. 23. Brand new Travel UI is using BEM and SPA
  24. 24. Code Quality : Design System and Blistrap
  25. 25. Front-End Tooling and Development Cycle • It is crazy time where front end developer need compiler and build tools !! – SASS – Grunt : Concate & minify CSS + JS • Existing UI application is basically Java Project – Use Maven to build – Use tomcat to run application – Takes ~ 10 minutes from fresh build to application ready
  26. 26. A Peek to Our Front End Technology in Future • Separate backend and front end completely – Single Page Application – Backend as API • Front End developer friendly tools – VueJS – SASS – Webpack – NodeJS to simulate route and response of Backend API • Automated testing and quality gate – VueJS unit testing – CodeceptJS for acceptance test • Reactive backend using Spring and RxJava to connect to many microservices using nonblocking IO
  27. 27. We Are Hiring!! THANK YOU

×