php indonesia x bliblidotcom - architecting scalable css

30
ARCHITECTING SCALABLE CSS By Irfan Maulana

Upload: irfan-maulana

Post on 12-Apr-2017

331 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

ARCHITECTING SCALABLE CSSBy Irfan Maulana

Page 2: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

WHO AM I ?• Name: Irfan Maulana (mazipan)• Job : Software Development Engineer• Specialize : Front End Web Developer

Page 3: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

WHO WE ARE ?• We are Blibli.com• Indonesian e-commerce that start from 5 years ago.• We want to be no.1 E-commerce in Indonesia with the

most Loyal and Satisfy customer.

Page 4: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

OUR WEBSITES• We have 3 section commerce website that have

different goods for sell.• Retail Commerce : https://www.blibli.com/

Retail Goods• Blibli.com Pulsa : https://www.blibli.com/pulsa

Pulsa, Data, PLN Token• Blibli.com Travel : https://www.blibli.com/travel

Hotel Booking, KAI Ticket

Page 5: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

OUR TOPIC TODAY

Architecting Scalable CSS :

Find better way to write and maintain CSS code in Large Scale Project.

Page 6: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Outline

• Problem Analyzing• Set Goals• Finding Solution• Implementation• Challenges• Conclusion

Page 7: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Problem Analyzing

What things do you hate when coding CSS ?

Page 8: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Problem Analyzing

What do you think about this code ?

Page 9: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Problem Analyzing

What about this ?

Page 10: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Problem Analyzing

These are common problem in CSS :• Less modularity• Too much file and classes that not represent its

function or places. • Tons of confusions e.g. not clear dependency

(*we are afraid about removing and adding things)

• Problem with scalability, consistency and on-boarding new developers.

• Specificity. Too deep selector.• Have no standard.• 1 page always giving to 1 person.

Page 11: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Set Goals• Modular• Re-usable, Easy to extends, Easy to override• Readable and Easy Tracking• Less bloated code (Unused code)• Has Good Conventions• Easy to learn even for veteran developers

Page 12: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Finding Solution

Page 13: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Finding Solution

First we found that css pre-processor is one of key to solving our css problem.CSS Pre-Processor let us to write CSS code better with more logically, re-usable function and variable, and many more advance syntax.We choose SASS as our pre-processor.

Page 14: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Finding Solution

Page 15: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Finding Solution

We found many alternative for standardize our CSS code.Atomic, OOCSS, BEM, SMACSS, DRYCSS, etc.All those thing have same goals, to set a good structure in our CSS code.

Page 16: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Implementation

• This part will not tell you the best technical part to implement the solutions.This part will tell you about our journey in implementing to our code.

Page 17: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Implementation

• When I come to Blibli.com in 2015, Blibli.com have not implementing any cool tech in frontend side especially in CSS.

• Then we choose SASS for improve our CSS code.

• In the end of 2015, we migrate our retail mobile web with full SASS code.

Page 18: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Implementation

• In early 2016, we start develop Blibli.com Pulsa with full SASS code.

Page 19: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Implementation

• After a while, our code become bigger and complex, we face our old problem even we have implemented SASS.

• In last 2016, we start develop Blibli.com Travel and trying to find another solution for fixing that problem.

Page 20: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Implementation

Page 21: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Implementation

• We choose BEM and Blibli.com Travel now live in production with full BEM + SASS code

• BEM offer better CSS code collaboration especially when we are in big team and complex project.

• BEM works like charm with SASS advance supported.

Page 22: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Implementation

Page 23: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

ImplementationSee full sample code here : https://github.com/mazipan/bem-kit

Page 24: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Challenges

• Library that built in top of BEM is less, so better to build our own.

• Keep BEM to be not bloated.• Make the team to have same vision.• Mixing BEM code with JS Framework that

component based.• Spread an Indonesian to be mindBEMding.

Page 25: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Lookup Our Goals• Modular • Re-usable, Easy to extends, Easy to override• Readable and Easy Tracking• Less bloated code (Unused code)• Has Good Conventions• Easy to learn even for veteran developers

Page 26: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

Conclusion

• Scalable CSS is when your code was easy to learn, easy to maintain in the future, easy to refactor, easy to tracking the problem.

• SASS (*or other pre-processor) is must when you want your CSS code become better.

• Strict BEM convention make you have confidence to add/update/remove CSS without side effect.

Page 27: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

YesWE’RE HIRING

a RockStars Engineerhttps://www.blibli.com/page/karir

Page 30: Php Indonesia x Bliblidotcom - Architecting Scalable CSS

THANK YOU