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:
HTML4 is the standard, that was created to provide structured information to the user. Before that there were mostly table- and frameset-based websites that didn't deliver structured information based on a common standard. Back then, JavaScript was probably in most cases used to validate web forms or to call popup windows and alerts on certain user clicks. PHP was used to dynamically manage website content or to take care of complex exchanges between server and client.
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.
First of all it is an MVC based JavaScript framework. This is probably the most important thing to understand for a web developer before jumping into SproutCore. MVC means Modell View Controller, wich is an architectural pattern used in software developement. Java developers will most likely be already familiar with this pattern, but to JavaScript developers this is probably something completly new. Check out Wikipedia to learn more about it.
Another thing to know about SproutCore is that it's a webstack framwork. This means that, instead of being only a library of code snippets, the framework provides a whole developement enviroment containing it's own virtual web server, database, "operating system" and "programming language". Don't get me wrong - if you already know JavaScript, you don't have to throw away what you've learned so far. You just have do adjust and extend this knowledge.
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.
Okay okay, don't worry: You'll have a basic theme CSS file for your app tough, so you don't have to be afraid of being forced to declare every style right into your JavaScript, messing it up. Also there is actually a "template", but as I said, it's a little different from what we know. We'll cover that later, too.
Summary
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...