Lesson learned in developing UI and mobile apps blibli.com

Ifnu, 8 April 2016

What are we going to talk today?

• Lesson learned in developing UI and mobile apps blibli.com

• List of lesson I learn during my time at blibli.com

• Lesson developing UI• Lesson developing mobile apps

Agenda

• Who am I?• What we learn about customer• Then vs Now• Lesson 1 : People• Lesson 2 : Process• Lesson 3 : Solr• Lesson 4 : Cache• Lesson 5 : Microservices• Lesson 6 : Web UI• Lesson 7 : Mobile First • Lesson 8 : Content

Who am I?

• Ifnu Bima• Ilmu Komputer IPB• Join blibli in 2012• Was working for Deustche Bank Singapore since 2010• Employee no 69• Engineers no ~13• Development Manager

– blibli.com Web UI– Mobile Apps : Android, iOS, Windows Phone– Content Management System – Search– Product Discovery : Wishlist, Product Review

What we learn about customer

• Fast UI – Speed & Performance

• Website stay up during promotion and flash sale – Scalability & Elasticity

• Consistently good user experience– Great UI/UX– Timely order delivery – Original and high quality product

• New features– Rapid Deployment– Continuous Delivery

Then vs Now

• Based on 4 things that customer have, how do we improve over time

• Things we learn along the way

Blibli UI circa 2012

Blibli architecture circa 2012

Store Front

Back officeMerchant

Blibli GUI application architecture 2016

Lesson 1 : People

• Hiring is the most important job in growing company– 800+ people– 150+ engineers

• Right person with knowledge, skill and attitude

• Do not compromise on quality• Hire someone better than you, at least when

you are at their age

Lesson 2 : Process => Product development

Product

Program Manager

Development Manager

Product Manager

1. Product Manager (PM)– Defining the right product

2. Development Manager (DM)

– Building the product right3. Program Manager (PgM)

– Cross-functional executioner

Source: Inspired: How To Create Products Customers Love

Lesson 2 : Process => Agile, XP and Scrum

• Scrum role is perfectly fit with product development role

• Release fast• Test Driven Development, 90% code coverage• Refactor often

Lesson 3 : SOLR

• Product catalog and category • Full text search on product

– Very vast full text search compared to database– Relevancy score to sort search result

• Filtering and Faceting• Very fast• Elasticsearch as alternative • CQRS (Command Query Responsibility

Segregation) pattern

Lesson 4 : Cache

• Redis– User session– Very fast for small and lots of data– Turn off disk flush, it can make server disk IO 100% and

response timeout while flusing• Guava

– Cache content from CMS– In memory cache– Background cache reload

• Varnish– Cache HTML in front of app server– Same content for all user, cannot do personalization

Lesson 5 : Microservices

• Small team working on product• Independence release• Cross functional team vs Siloed functional

team• GUI application as orchestrator

Lesson 6 : Web UI

• Responsive vs Adaptive• AngularJS is great• Browsing through mobile web then purchase

through desktop web• Image is our biggest enemy

– 95+% traffic is image– Compress, resize and optimize it reduce 50% bandwith– Image operation need very high CPU

• Client side performance is much much harder than server side performance

Lesson 7 : Mobile First

• Based on our traffic, there are 3 peak each every day: morning, afternoon and night

• Morning and afternoon from desktop, Night from mobile web & apps• Only office worker is using desktop• To reach majority of Indonesia user, we need first class mobile web and

apps• Mobile apps conversion is 7x web conversion• 70% web traffic goes to mobile web• 80% transaction happen on desktop web• We want user to use mobile apps as much as possible

Lesson 7 : Mobile First

• Native is first choice• Others if you constrained by budget or team

size• More engineers currently working in mobile

apps than web

Lesson 8 : Content

• Banner and promotion page• Different content for different channel : web

and mobile apps• Control UI from CMS• Layout and content saved in database, no

deployment while update it

THANK YOU