SproutCore Developers, Be Nice to your Themers!

May 8, 2012
blog author

Appno Blogger

Appnovation Coop

SproutCore is a powerful Javascript framework, but because of some legacy functionality it still allows you to get away with some bad habits. I’m referring specifically to the ability to put style declarations directly into your Javascript code, such as:

  • fontWeight: SC.BOLD_WEIGHT
  • backgroundColor: "#dde2e8"
  • textAlign:SC.ALIGN_CENTER

So for example, you can build an SC.View like this and the framework won’t complain:

contentView: SC.View.extend({
backgroundColor: "#dde2e8",
childViews: [ 'description' ],
description: SC.LabelView.extend({
layout: {height:120},
needsEllipsis: YES,
fontWeight: SC.BOLD_WEIGHT,
escapeHTML: NO,
isTextSelectable: NO,

This functionality is for backwards compatibility with SproutCore 1.0, but even then, let’s just be honest and admit that it wasn’t a good decision to build this into the framework in the first place! These commands are now deprecated in the current SproutCore documentation, and using CSS is the preferred method, but since they won’t break your code, they can still be used. Why is this so bad, you ask? Short answer: Separation of form and content! Long answer:When talking about form, we mean the presentation semantics, such as layout, colours and fonts. The content (and behaviour) side of things can be HTML, XML, Javascript, or any other language that contributes to building the DOM (but since we are talking about SproutCore here, we are concerned with Javascript). This kind of separation is important for a number of reasons, such as to improve content accessibility, allow for formatting to be shared amongst multiple views while only needing to define or edit the styles from a single file, and to reduce the amount of code repetition in the content markup. Erico, one of Appnovation’s front-end developers/designers, explains that using those commands in your Javascript “... injects inline styles on the dom, makes the app less efficient because of the extra code it has to load, and makes the theming process less efficient as well because we’re forced to look all over for styles and not just in the CSS.” This might be CSS 101, but the fact that I’ve seen instances of these deprecated commands still used in plenty of code means that we can all use a reminder. And using CSS exclusively for styles makes for an much more efficient and productive workflow, especially when working in a team of developers and front-end themers. Okay, unfortunately I now need to backtrack just a little bit. While all of your font, colour, alignment, etc. styles should be defined in your CSS when coding in SproutCore, you may still find that you need to set layout values in your Javascript. For example:

myScrollView: SC.ScrollView.design({
layout: { top: 10, bottom: 20, left: 0, right:0 }

Why is this? I suppose the best way to explain this is to emphasize that SproutCore is a framework designed to give a desktop-like application experience in a web browser. In traditional application programming the layout and structure is often highly integrated into the core code. And SproutCore’s default layout system is absolute positioning, which is why I guess it just makes sense to specify positioning coordinates in the Javascript code. SproutCore does have ways of overriding the absolute positioning, but when designing for mobile, it’s often a good strategy anyways to have all your elements absolutely positioned. So besides layout, remember to get all the other style properties out of your Javascript and into your CSS. In summary, here is why we all need to focus on, as much as possible, keeping our form and content separated:

  • Efficiency of code
  • Ease of maintenance
  • Accessibility
  • Device compatibility
  • Search engine friendly
  • Your themers won’t hate you!