From
Website
to
Webapp

Introducing SAFE

Murat Çorlu

Principal Front-End Developer at sahibinden.com

Sahibinden.com

Leading classified website of Turkey
2 millions of visitors for a day
3 billions of pageviews for a month
4.5 millions of active classified online
16 minutes of average visit duration

sahibinden.com architecture

(1 year ago)

pain of front-end developers

Backend oriented development environment
Long adaptation period
Similar problems different solutions
Dependent teams to each other

Resolving front-end issues in a kind of that architecture is very painful for a developer. This is a very backend oriented development environment. So it's not enough to know Javascript, HTML and CSS very well to develop resolve some issues on that codebase as a frontend developer. When a new front-end developer join the sahibinden team he must learn to run a php development environment, a java development environment and a django development environment to have to ability to make all kind of front-end works at sahibinden.com. It may last several months... We resolve similar problems with different technologies again and again. Also, in that architecture, backend and frontend developers depends each other very much to develop a feature. When a new feature request came to engineer team, firstly, frontend developers develop static pages. Then some backend developers do their backend works and make htmls dynamic. Then work come back to frontend team to write javascript code like making ajax requests or some interactivity tasks. This flow may be very long and boring.

then adventure has begun

Browsers are clients like mobile apps
Backend should focus on it's tasks
Frontend should focus on it's tasks too
Unlimited scalability: Using visitors' devices

Then, wind of change began to flow at sahibinden.com. We wanted to develop frontend codes, totally seperatad from backend inspired by mobile apps. Because browsers are like mobile apps actually. They are more powerful than old. We have a lot of HTML5 and CSS3 capabilities. Templating is a huge resource eater and it's not a backend task nowadays. Also some tasks of a web page like routing, form validation, translating ui texts etc. are not backend tasks actually. Backend should focus on it's real tasks like data management, scalability, security, availibility, data mining, caching and invalidate caching... Not templating. Also, backend development environment problems are not frontend tasks. We don't want to say "I couldn't test my javacript code because mysql is broken". I want to focus only my tasks: making web applications that cross platform, robust, more performant and has a good user experience. This architecture has good advantages about scalability. If you can distribute a task to your clients' devices, than this is the most scalable way of the web.

SAFE

SAhibinden Front-End
"Be calm, it's SAFE"

what techs we used

Node.js/npm
AngularJS
Grunt
Stylus
Bower

It was not very hard to choose our tools actually. Node.js is awesome platform that gives us big possibilities in commandline. So we can think about frontend development environments without any language except javascript. When we want to choose a framework, we try backbone firstly, but not impressed. We disquss to write a new library for us inspired by TartJS and Koding's framework, when we try angular, then boom! We found our hero! We also look at ember and knockout but angular was matching our expectations. We are using angularjs over one year and we are very happy. Especially Angular's declarative template syntax did help us very much. I think that template idea is very efficient for big frontend teams. Grunt is our key tool of SAFE. We make a lot of boring task with grunt automatically. We check our code quality dynamically by jshint, we generate our css sprites without pain by spritesmith, we optimize our javascripts, css and templates easily. Also, there is a good alternative to Grunt named Gulp nowadays and it can be our next task runner tool. We were sure that we must use a css pre-processor our next development environment. We looked at all alternatives, and we choose stylus. We have not very big words about why we chose stylus over sass or less. It has more flexible syntax than others. Also a big motivation for us is that it's a node package. Bower is a package manager for client libraries like Angular, jQuery or bootstrap. It simplifies our repository by excluding all of this 3rd party library codes from our codebase.

what we success

Totally seperated development environment
Working without a backend (connect-api-mocker@github/sahibinden)
More testable code (karma)
Less fault tolerant (jshint)
Less boring tasks (stylus, grunt)

And, what we success... Now, we have totally seperated development environment from our backend environments like java or php. We have a simple to use mock api to mock requests to our rest api. So we can test our workflow simply without needing to run any other service like java services or database, memcache, proxy etc. Also mock api gives us a simply way to test weird scenarios. AngularJS has an encouraging community to write testable code. So we are more familiar with unittests without fear. We use some grunt tasks to check our code for syntax or styling errors dynamically. That guards our code from very common mistakes. Also we front-end developers has some boring tasks. For example, using a css sprite for icon graphics is a best practice but creating and updating a sprite is really boring. You need an image editor, you merge a lot of images in one file, you calculate their positions and update your css with that positions. It's really hard. But, in SAFE with Grunt, we are generating and updating our sprites dynamically and easily. Even this feature of SAFE has given us weeks within last year.

give me some spoiler!

Thank You! / Questions?

Presentation will be on github.com/muratcorlu

For further questions @muratcorlu