Structuring Your SproutCore Application: Part 2

written by Colin Campbell

In Part 1, we started developing a Contact application for managing groups and people. Continuing with Part 2, we’re going to be implementing the application’s functionality in a way that’s going to scale with its complexity.

Loading The Application’s Data

Now that we have the base of our application, we need to start by loading some data into the application. Before we proceed, let’s make sure we’re on the same page. Check out step 4:

	git checkout step4

We’re going to do this using `SC.FixturesDataSource`. It allows you to use fixture data local to your application, but also simulates remote responses. That means when you implement a connection to a remote server, your application works as expected. Let’s create the FixturesDataSource in `apps/contact/data_sources/fixtures.js`:

1
2
3
4

	Contact.FixturesDataSource = SC.FixturesDataSource.extend({
	  simulateRemoteResponse: YES,
	  latency: 250
	});

We’ve defined a new FixturesDataSource class, turned on the simulation of remote responses, and set the latency to 250ms. This is a typical amount of latency between a client and a server but you can tweak this number to suit your needs.
Continue reading →

Structuring Your SproutCore Application: Part 1

written by Colin Campbell

This is the first in a series of posts that recap Colin’s talk at the San Francisco Meetup 6/14 and go into some detail about structuring a SproutCore application. Stay tuned for more posts in this series, and, as always, we’re listening to your feedback– let us know where you’re confused or what you want to learn more about.

Building applications that scale well is very important, but “scaling well” isn’t limited to ensuring your servers can handle the load. It is equally important to structure your application so that you can easily maintain your code and introduce new functionality without needing to rewrite significant portions. There are libraries provided by SproutCore, like the statechart library, that will help your application grow smoothly.

Let’s dive into how to structure your SproutCore application so that it’s maintainable and can grow with your project. In Part 1, I’ll be covering how to set up your application so that you will be able to add functionality later with minimal refactoring.

Introduction

We’ll be going through an application I built for the SproutCore San Francisco Meetup earlier this month. It is available on Github.

To get started, let’s generate the application using the following command:

sc-init Contact --template

As you can see, we’ve named our application `Contact` and we’re choosing to use the new HTML-based application structure. We’re going to be developing this SproutCore 1.6 application so that we can upgrade it to the SproutCore 2.0 stream eventually. That means using `SC.TemplateView` for all of our content views, and limiting our usage of other views that rely on layout.
Continue reading →

SproutCore and PhoneGap

written by Colin Campbell

Making sure your apps work everywhere is an important part of any mobile strategy. The mobile web allows you to reach your users wherever they are, and users have grown to expect that you’ll be there wherever they go.

Increasingly, users want to access applications through app stores; to reach your users, you have to be available to them as many ways as possible. PhoneGap allows you to put your web applications in a native wrapper and deliver them in the Apple App Store, Android Marketplace, and many other native app stores. It also integrates really well with SproutCore, making it the natural choice.

Getting Started

PhoneGap provides both JavaScript and native code. First, let’s deal with setting up the native side. For the purposes of this post, we’ll assume you’re setting up an iOS project. You can follow the Getting Started docs on PhoneGap’s website to get a running start.

Create your PhoneGap XCode project and save it right inside your SproutCore project’s directory (the one created with you ran sc-init). Let’s assume you’ve saved your PhoneGap project to ‘iphone/'.

Integrating PhoneGap with SproutCore Projects

The JavaScript code that comes with PhoneGap allows you to communicate with the Objective-C code (in the case of iOS) running on the native side. The best way to include this JavaScript API in your SproutCore application is to create a framework and then require it in your Buildfile. In your projects directory, run the following commands:

mkdir -p frameworks/phonegap

cp ~/Documents/PhoneGapLib/javascripts/phonegap-uncompressed.js frameworks/phonegap

Then, when editing your application’s Buildfile, require the PhoneGap framework you’ve just added:

 config :all, :required => [:sproutcore, :phonegap]

The next time you build your app, the JavaScript you’ve included in your framework will be built with your project.  Continue reading →