OurBa'leAgainstTechnicalDebtGeekCamp2017

Ifnu,July,15th2017

WhoamI?

•  IfnuBima•  ComputerScienceIPB&MBASchoolofBussinessManagementITB

•  JoinBlibli.comin2012•  Java&JavaScriptDeveloper•  DevelopmentManager– 30Developers:Android,iOSandFrontEndDevelopers

– Blibli.comUI,ContentManagementSystem,MobileAppsandSearch

Agenda

•  WhatisTechnicalDebtandwhyitissomePmesensibletotakeit

•  Ourjourneytotackletechnicaldebtandmodernizeourtechnologystack

•  PeekintoourfutureFrontEndtechnology

Blibli.comUIprelaunch2010

Blibli.comUICirca2012

BuildYourCodefortheFuture

TechnicalDebt

TechnicalDebt

TechnicalDebtisawonderfulmetaphordevelopedbyWardCunninghamtohelpusthinkaboutthisproblem.

Inthismetaphor,doingthingsthequickanddirtywaysetsusupwithatechnicaldebt,whichissimilartoa

financialdebt.

Likeafinancialdebt,thetechnicaldebtincursinterestpayments,whichcomeintheformoftheextraeffortthatwehavetodoinfuturedevelopmentbecauseof

thequickanddirtydesignchoice.

hWps://marPnfowler.com/bliki/TechnicalDebt.html

TakingTechnicalDebtisSensible

•  Timetomarkettrumpgooddesignwhenyouhaveunprovenbusiness

•  UnPlitisholdyouback,cripplingyourproducPvity

TakingTechnicalDebtisSensible

•  Payingtechnicaldebtishard,itneedssupportfromverytoplevel

•  Rewrite/Refactorbasedonproventechnology

ArchitecturalDebt

Blibli.comSOAarchitecturecirca2013

StoreFront

BackofficeMerchant

ESB

Blibli.comUICirca2013

•  Technology–  Dojo–  JSP–  JQuery–  WebsphereCommerceServer

•  TechnicalDebt–  Hugejavascriptfile–  Slowbackend

•  Temporaryremedies–  YSlowtoevaluateperformance

–  YUICompressor–  ImplementSOLRtohelpbackendperformanceissue

Blibli.comUIrewrite2014

Technology

•  AngularJS1.2•  ResponsiveDesign•  Solr4•  Java7,SpringandTomcat•  Redis•  GooglePagespeedandVarnish

CombinaQonofServerSideRenderingandSPA

•  CheckoutpageisSPA

•  ProductDetailpageishalfSPA

•  Catalog,searchandothersareserversiderenderingforSEOpuprpose

ContentProblem

•  Problem– ContentisscaWeredinCode– Nodatabasetoholdcontentdata– MulPchannelUIisnotpossible

•  SoluPon–  InHouseCMSsystem– Savecontentindatabase– Layoutindatabase

ImprovedArchitecture

StoreFrontEngine

BackofficeMerchant

ESB

StoreFrontUI

SOLR

CMS

Internet

ResponsivevsAdapQve

•  Ourresponsiveproblem– DesktopandmobilewebUIsharealmostnothing,allelementaredifferent

– Mobilewebwasreallyslow

•  Responsivedoneright– Startwithmobilewebdesign– Makeitresponsivetodesktopweb– Successexample

•  salestockindonesia.com

MobileWebUIrevamptoadapQve2015

•  Onecontroller2completelysparateUI•  CMSsupport2layout:DesktopandMobileWeb

•  SASSandGruntintroducPononmobilewebUI

•  SPApagesPllusingresponsive•  MobileWebperformanceincreasedramaPcally

BreakMonolithictoMicroservices2015

StoreFrontUI

SOLR

CMS

Internet

20+MicroservicestohandletransacPons

TravelUI

DigitalProductUI

10+Microservicestohandletravel

10+MicroservicestohandleDigitalProduct

FrontEndPerformanceEffort2016

•  Serversideload<1s•  FrontendaverageloadPme~12s•  Whatwastheproblem

–  BlockedjavascriptexecuPon–  DOMsize~700kb–  Pagesize~3MB–  SinglebigCSSfileblockrendering

•  SoluPon–  Differjavascript–  DecreaseDOMsizeusingajaxandlazyload–  Lazyloadallimage,startdownloadwhenimageinviewpoint–  BreakCSS,inlineCSSforlayoutandrendering–  PutthirdpartyJSattheandofDOM

•  Result:frondendaverageloadPme~4s-6s

FrontEndPerformanceResult

CodeQuality:BlockElementModifier(BEM)

•  Maintainable•  EasyTracking•  Modular•  Flexible•  SupportparPalload•  Fitwithcomponentbasedmodernframeworkex:React,Vue,Polymer.

BrandnewTravelUIisusingBEMandSPA

CodeQuality:DesignSystemandBlistrap

Front-EndToolingandDevelopmentCycle

•  ItiscrazyPmewherefrontenddeveloperneedcompilerandbuildtools!!– SASS– Grunt:Concate&minifyCSS+JS

•  ExisPngUIapplicaPonisbasicallyJavaProject– UseMaventobuild– UsetomcattorunapplicaPon– Takes~10minutesfromfreshbuildtoapplicaPonready

APeektoOurFrontEndTechnologyinFuture

•  Separatebackendandfrontendcompletely–  SinglePageApplicaPon–  BackendasAPI

•  FrontEnddeveloperfriendlytools–  VueJS–  SASS– Webpack–  NodeJStosimulaterouteandresponseofBackendAPI

•  AutomatedtesPngandqualitygate–  VueJSunittesPng–  CodeceptJSforacceptancetest

•  ReacPvebackendusingSpringandRxJavatoconnecttomanymicroservicesusingnonblockingIO

We Are Hiring!! THANK YOU