June 24th, 2008 
Issue 195 

Newsletter Archives | Advertising | Contact us  

In This Issue…

• Introduction
• SproutCore: JavaScript Applications
• New Technical Articles
• Techy Forum Threads
• More Techy Blog Entries

Our web developer customers can sleep at night.

Your job is building great websites for your clients. Lying awake at night wondering if those sites are accessible is not.

That’s why we maintain Fully Redundant Network Operations Center capabilities from two cities 24/7/365. So you can impress your clients
and still get some shut-eye.

Find out why 3.1 million websites call The Planet home.

Dedicated servers start at just $89

Introduction

One of the unexpected gems at the recent Apple Worldwide Developer Conference (WWDC) in San Francisco was the session on SproutCore, a JavaScript framework for building web applications with desktop-style rich user interfaces.

Apple’s interest in SproutCore is tied in with its recently-announced MobileMe service (see Tech Times #193), which features a slick suite of web apps that provide mobile access to email, calendars, address books, and photo galleries.

In this issue, Tech Times co-editor Andrew Tetlaw takes a hands-on look at SproutCore, how it works, and how it fits into the landscape of other Rich Internet Application (RIA) platforms out there.

Meanwhile, I’m working with the development team here at SitePoint HQ on an all-new layout for the front page of sitepoint.com. As usual, getting the layout to work in Internet Explorer 6 involved roughly the same amount of work as it did for all other browsers combined. More than once, I considered giving IE6 support the boot—after all, our audience is tech-savvy and likely to have an up-to-date browser, right?

Well, despite signs that IE is on its way to extinction at SitePoint, IE6 still represents 13% of our audience, so I put in the extra time to get it working. Some judicious application of hasLayout did the trick in the end, as usual.

As it turns out, someone at Apple wasn’t quite so patient, because the SproutCore-powered MobileMe web apps won’t work in IE6! SproutCore itself does support IE6, and word from the development team is that it will continue to do so for awhile yet.

So here’s the question: what factors determine whether it’s worth investing the extra time and effort to keep a web app working in IE6?

SproutCore: JavaScript Applications

Revealed by Apple at the recent WWDC as the basis of the MobileMe web applications, is the newest member of the JavaScript framework fraternity: SproutCore. I’m pretty sure that if I told you SproutCore was yet another JavaScript framework for creating rich browser application interfaces, you’d prefer to scrub your eyeballs with steel wool than keep reading. Don’t head off just yet though, because SproutCore is quite different from other frameworks and worth taking a look at.

SproutCore is an open source framework for creating desktop-style applications that run in the browser using only HTML, CSS and JavaScript. You first create your application within a local development environment and then use the SproutCore build tools to compile the application in to a set of static files you can place on your web server. The term ‘thick client’ has been coined by SproutCore’s lead developer, Charles Jolley, to describe SproutCore’s approach. SproutCore applications are totally independent of any server-side technology. The whole application runs in the browser; the only interaction with the server is to save or load data via Ajax.

When I say, ‘creating applications’ I mean sophisticated, model-view-controller style application design, inspired by Apple’s Cocoa. In practice, it feels like you’re building a full-featured Ruby on Rails application — the build tools are written in Ruby and use Rails-like features such as generators. Models and controllers are written in JavaScript and views are written in Erubis, a high performing implementation of Embedded Ruby.

How it Works

Here’s a very simple demonstration of how it works. I recommend doing the hello world tutorial on the SproutCore site if you want to see more.

After installing the build tools via the RubyGems system, you begin a new application by typing the command: sproutcore hello_goodbye, replacing hello_goodbye with the name of your application. This will generate a directory with the same name as your application and all the required files to make your application run locally.

Get everything you need to learn JavaScript from scratch in my book – Simply JavaScript

• 400+ pages packed with full color examples
• Hundreds of clear illustrations
• JavaScript for the real world!
• Only $39.95!

Perfect for the JavaScript novice, this book will teach you JavaScript with unprecedented clarity, featuring loads of color illustrations and advice on how to use JavaScript the right way in the real world.

ORDER YOURSELF A COPY NOW!

* Get a FREE JavaScript poster with every book purchase of Simply JavaScript (worth $9.95)

Controllers and Views

To be able to do anything interesting you’ll need a controller — a JavaScript object that manages your application logic. You can use the built-in generator by typing in the following command from your project’s root directory:

sc-gen controller hello_goodbye/appThis will generate the application controller called HelloGoodbye.appController.You wire up the interface elements of your application using bindings and observers. Let’s modify our controller by adding a greeting property:

HelloGoodbye.appController = SC.Object.create( { greeting: "Hello World!" });Then we’ll add some view helpers to the default view file: a label view and a button view:

<%= label_view :my_label, :tag => 'h1', :bind => { :value => 'HelloGoodbye.appController.greeting' } %> <%= button_view :toggle_button, :title => 'Change Greeting', :action => 'HelloGoodbye.appController.toggleGreeting' %>Starting the included Mongrel web server by entering the command sc-server from the project’s root directory, will allow you to load the project in your browser at http://localhost:4020/hello_goodbye. You’ll see a h1 element with the text “Hello World!” and a “Change Greeting” button. The text content of the label view has been bound to the greeting property of the controller. If you change the value of greeting using the SproutCore API:

HelloGoodbye.appController.set('greeting', 'Goodbye World!')the text within the heading will miraculously change as well.The :action property of the button view indicates the controller method that will be called when the button is clicked. We’ll add that method to our controller:

HelloGoodbye.appController = SC.Object.create( { greeting: "Hello World!", toggleGreeting: function() { var currentGreeting = this.get('greeting'); var newGreeting = (currentGreeting === 'Hello World!') ? 'Goodbye World!' : 'Hello World!' ; this.set('greeting', newGreeting); } });If you refresh the page in your browser, clicking the button should toggle the text within the h1 element between “Hello World!” and “Goodbye World!”. You may notice this is achieved without us having to write any DOM manipulation code in JavaScript at all.

Deploying Your Application

Once you’re ready to deploy, all you need to do is run the following command from within your project’s root directory: sc-build. This will create a directory containing static files that you can move to your web server.

Our trivial example above is converted to the following html:

<h1 id="my_label" class="sc-label-view my_label"></h1> <a title="Change Greeting" id="toggle_button" class="sc-button-view button regular normal toggle_button"> <span class="button-inner"> <span class="label">Change Greeting</span> </span> </a>In addition to the HTML, you’ll also find all the JavaScript code required to run the application.

Final Thoughts

Looking at the generated source, it’s clear SproutCore is an application framework in the truest sense: ignore the generated HTML, the end product will look and feel like a desktop application. For a web standards fan like myself, browser-based, desktop-style applications are always a hard sell. I prefer the restful, semantic-markup based, document-centric approach that lets browsers act like browsers. You know: bookmarks and history, right-click > Open in new tab, the sanctity and purity of the hyperlink. It seems inevitable though, that the browser, as an application platform, will be pushed as far as it can go. I can’t help recalling Joel on Software predicted something like this might come along.

As a JavaScript fan I’m impressed; the interface performance is excellent. SproutCore raises the bar for what JavaScript can do in the browser. On a recent Audible Ajax Jolley talked about how a SproutCore application has only 6 event handlers. SproutCore uses event delegation to determine which element in the body was the target of the event. I’m certain that there are many other JavaScript gems to be mined from the SproutCore codebase. The SproutCore blog already contains some great posts.

What about accessibility? How will assistive technologies treat the HTML generated by SproutCore? I doubt screen readers that are compatible with standard HTML forms, but otherwise designed to interpret a web page as a document, will have any chance of making sense of it. Perhaps, in the future, standards like the WAI Accessible Rich Internet Applications specification will eventually come to the rescue. I’ll be interested to see the approach Apple takes for MobileMe.

Despite my concerns, I can certainly appreciate how Apple has chosen an open source technology that is browser based and requires no plugins as the basis for their online applications. In my mind, this beats the pants off the alternative technology stacks from Adobe and Microsoft.

Add your comment to the blog entry:

Technically Speaking: Web Tech Blog by Andrew TetlawSproutCore: JavaScript Applications

That’s all for this issue — thanks for reading! I’ll see you next week.

Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times

Understand & solve your user experience problems with TechSmith’s UX solutions.

Morae 2: Usability Re-Imagined.

UserVue: Real users, real feedback.

User experience made simple, adaptable and affordable.
TechSmith’s UX solutions are just a click away.

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the Tech Times!