Skip to content
jhilden edited this page Aug 7, 2012 · 4 revisions

SMURF: Scalable, Modular, reUsable Rails Frontends

Problem statement: Web frontends lack modularity and consistency

I think every web developer can relate to the situation when the frontend code (HTML,CSS,JS) of larger web applications gets out of hand and very ugly. Questions arise like: "Why has this component been developed in 3 different places in three different ways?", "What part of the code do I need to touch in order to change that styling?", "Which parts of the app could/will break if I change this HTML/CSS/JS?", "Why are the naming and responsibilty of this code so unclear and inconsistent?"

The question is: Why is frontend code that way and what can we do about it?

This question especially arises if one, in comparison, takes a look at the backend code of well developed Rails applications. Obviously backend code ain't perfect either but we usually can find qualities such as code reuse, object orientation, unit tests, etc. So, why can't we do something similar in the frontend?

Some of the reason for the lack of modularity in frontend code might be inherent to its character, but a large part of it can also be blamed on the overall the design process. Features of web applications are usually designed using a "page mentality". Instead of also looking at the overall application and its component, the focus is almost exclusively on the specific problem/page. The consequence of this perspective are design inconsistencies and bad frontend code. So it is a combination of the defective design process plus the lack of conventions of current frontend code that causes our current suboptimal situation and both(!) areas need to be addressed in order to really improve it.

SMURF

In order to really improve web frontends towards more modularity and consistency, the SMURF approach is trying to establish more sensible modular frontend development conventions in the short-term, in order to provide the necessary feedback and tools to the design process in forms of "living styleguides" the long-term.

For the short-term goal of establishing conventions, SMURF draws on other similar approaches to modular frontend development (such as SMACSS, OOCSS, BEM) collecting sensibile theoretical concepts and turning them into opinionated, concrete conventions suited specially for a Rails appliacation.

Here are a couple of these concepts that would be touched upon in the talk:

  • depth of applicability
  • context independence
  • categorization of frontend components (base, module, layout, state, ...)
  • object orientation (granularity, single responsibility, "inheritance")

Besides better code, another great advantage of establishing and adhering to such modular frontend conventions is the ability to detect, extract, and display those modules into a form of a "living styleguide". This is the great communication device to feed existing modularity in the codebase back into the design process and ensure sustainable, long-term modularity. In addition, such a living styleguide might also enable a sort of "visual unit testing" that allows better development and refactoring of frontend code.


Target audience

The talk is targeted and web developers that have felt the pain of non-modular and convention frontend code in larger web applications. While the focus is on frontend developers I think backend developers and design people should also benefit. I also think that SMURF applies better to larger, long-lived web applications then it does to short-tem web sites.

Speaker Bio

Jakob is an "interface guy", who enjoys closely examining how everything interacts within the fascinating world of web applications and analyzing how these interfaces can be improved. This involves for example external interactions between users and web applications just as much as internal interactions between designers and developers.

Since the beginning of this century he has been working in web development and particularly enjoyed discovering the fields of open source and usability. He earned a Masters in Human-Computer Interaction from the University of Michigan (USA) in 2009 and has been working as a frontend web developer for Railslove in Cologne for the last years. In that time he also became a very active and involved member of the German and international Ruby & Rails community.

Personal website

Speaking experience:

He has given short talks at local user groups such as Cologne.rb (which he is also organizing), UX-CGN and DevHouse Friday in the past, as well as 2 project presentations and talks at academic conferences.