Our Ba'le Against Technical Debt GeekCamp 2017

Transcription

1 Our Ba'le Against Technical Debt GeekCamp 2017 Ifnu, July, 15th 2017

2 Who am I? Ifnu Bima Computer Science IPB & MBA School of Bussiness Management ITB Join Blibli.com in 2012 Java & JavaScript Developer Development Manager 30 Developers : Android, ios and Front End Developers Blibli.com UI, Content Management System, Mobile Apps and Search

3 Agenda What is Technical Debt and why it is somepme sensible to take it Our journey to tackle technical debt and modernize our technology stack Peek into our future Front End technology

4 Blibli.com UI pre launch 2010

5 Blibli.com UI Circa 2012

6 Build Your Code for the Future Technical Debt

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. hwps://marpnfowler.com/bliki/technicaldebt.html

8 Taking Technical Debt is Sensible Time to market trump good design when you have unproven business UnPl it is hold you back, crippling your producpvity

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 Architectural Debt Blibli.com SOA architecture circa 2013 Store Front ESB Merchant Back office

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 Blibli.com UI rewrite 2014

13 Technology AngularJS 1.2 Responsive Design Solr 4 Java 7, Spring and Tomcat Redis Google Pagespeed and Varnish

14 CombinaQon 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 Content Problem Problem Content is scawered in Code No database to hold content data MulPchannel UI is not possible SoluPon In House CMS system Save content in database Layout in database

16 Improved Architecture CMS Internet Store Front UI Store Front Engine SOLR ESB Merchant Back office

17 Responsive vs AdapQve 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 Mobile Web UI revamp to adapqve 2015 One controller 2 completely sparate UI CMS support 2 layout : Desktop and Mobile Web SASS and Grunt introducpon on mobile web UI SPA page spll using responsive Mobile Web performance increase dramapcally

19 Break Monolithic to Microservices 2015 CMS Internet Store Front UI 20+ Microservices to handle transacpons SOLR Travel UI 10+ Microservices to handle travel Digital Product UI 10+ Microservices to handle Digital Product

20 Front End Performance Effort 2016 Server side load < 1s Front end average load Pme ~ 12s What was the problem Blocked javascript execupon DOM size ~ 700kb Page size ~ 3MB Single big CSS file block rendering SoluPon 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 Pme ~4s - 6s

21 Front End Performance Result

22 Code Quality : Block Element Modifier (BEM) Maintainable Easy Tracking Modular Flexible Support parpal load Fit with component based modern framework ex : React, Vue, Polymer.

23 Brand new Travel UI is using BEM and SPA

24 Code Quality : Design System and Blistrap

25 Front-End Tooling and Development Cycle It is crazy Pme where front end developer need compiler and build tools!! SASS Grunt : Concate & minify CSS + JS ExisPng UI applicapon is basically Java Project Use Maven to build Use tomcat to run applicapon Takes ~ 10 minutes from fresh build to applicapon ready

26 A Peek to Our Front End Technology in Future Separate backend and front end completely Single Page ApplicaPon Backend as API Front End developer friendly tools VueJS SASS Webpack NodeJS to simulate route and response of Backend API Automated tespng and quality gate VueJS unit tespng CodeceptJS for acceptance test ReacPve backend using Spring and RxJava to connect to many microservices using nonblocking IO

27 We Are Hiring!! THANK YOU