Getting started with SproutCore - Part I: Basic Principles
As HTML5 and modern WebApp developement keeps on turning heads in the web, more and more designers and developers are looking for ways to dive into it. And since I'm one of those people myself, I want to let others take part of my learning progress.
In my case I chose SproutCore as my framework of choice to dive into modern web developement. Not only is SC a perfect tool to deliver cross-plattform user experiences with very little effort, it also takes a whole new approach of web developement under the usage of HTML5 standards.
Interested in taking a closer look at SproutCore with me?
Well, let's get it on then!
HTML 4 / 5 - The Core Differences
First important thing to understand what's happening out there in the web are the origins of the HTML standards. If you want to learn more about how a web standard gets made, you should check out Mark Pilgrim's Dive into HTML5 Infopage. In our case I'll try to keep it short and simple:
As web developement got more adavanced, the powerful combination of these technologies led from simple information providing sites to more and more application-like web experiences (speaking of Google Apps, Facebook, Amazon, eBay and so on). Soon, web developers started to notice the limits of HTML4: Since it was never created to build WebApps in the first place, it couldn't provide the full capabilities of native applications.
And that's exactly the aim that HTML5 had to take: A standard that is made to build rich user experiences on the web without compromising the feel and functionality of native applications. With that beeing said, let's take this idea as our basic approach on SproutCore developement.
So what is SproutCore?
"SproutCore is an open-source framework for building blazingly fast, innovative user experiences on the web". That's what the SC homepage says and I couldn't explain it better. But to start with a little more information than this, let me explain what SproutCore is actually made of.
Note: If you aren't familiar with any of the basics mentioned above, I'd encourage you to learn more about it first. Yes I know, boring theory and stuff - but since I thought so too, I can now tell you that it'll help you to get things right and start off faster with SproutCore.
Building a web application in SproutCore
Now that I've coverd all of the basic knowledge that I think is necessary to get comfortable with SproutCore, let's take a deeper look at the core concept of how to build wep apps with an MVC based framework. First of all I have to say that this is something new for me too, so I'll try to explain it the way I got it so far:
Withouth MVC pattern
When building a web app, say in HTML4, you'll probably follow a basic concept: You'll write a template, set up all the frameworks / technologies to provide functionality and finally add some CSS to make the site look good and easy to use.
Well, if you're used to this principle, things will get pretty confusing when you start building a web app using an MVC pattern.
With MVC pattern
What's the difference? Building a web app using SproutCore, there is no template as we know it to structure the application. Instead an app is made out of different states, all summarized in a statechart. We'll get deeper into that in Part II of this guide.
Further, instead of including frameworks and scripts somewhere in our source code, we let the SproutCore script generate our actually source code. That may be odd when you're used handcraft your templates by yourself but later on we'll see why this is actually a pretty cool thing. At last, the CSS is also part of the generated code in SC.
As you can see, getting started with an HTML5 MVC based framework is a totally different approach when you've been an "ordinary web developer" so far.
But let me give you some good advice: Don't keep your familiar principles too close and just view yourself as a beginner to something fresh and awesome in web developement. Our journey just began...