SproutCore 1.0: Platforms
Mobile is a really interesting area for any web developer. With the iPhone and Android, there are finally phones with serious browsers that can run actual app-like code. Very exciting.
Of course, developing an application for a phone has its own unique limitations. Bandwidth is an issue of course. As is memory constraints and the UI has to look completely different.
Nevertheless, I believe that the thick-client model that SproutCore is based upon holds great promise for the phone. Precisely because of the bandwidth constrained, memory limited environment, downloading and installing code that runs right in the web browser can produce a dramatically better experience than forcing the user to wait on regular HTTP or even Ajax requests to complete. All you need is the framework.
SproutCore was originally designed for desktop applications, where you can potentially display large amounts of data. Neither the UI controls nor some of the large-data technologies we use on the desktop make sense on the phone. This is why we are working on creating a mobile version of the framework.
Starting with SproutCore 1.0, you will have a few new options in the SproutCore build tools to let you output a version of your application just for the mobile phone. Rather than force you to create an entirely new app for mobile devices, SproutCore treats platforms a bit like creating multiple languages. That is, you simply add a “foo.platform” folder to your project. Anything you place in that folder will only be included in the build for that platform.
For example, let’s say you were designing a Contacts application. You might create some models and controllers for your app. These will live in the models and controllers folder just like before. But now you could also create a “desktop.platform” folder and a “mobile.platform” folder. Inside of these folders, you can add the views and view-level resources needed to build the unique UI for that platform. Here is how that folder structure would look:
contacts
core.js <-- namespace
models/
contact.js <-- Contact model object
controllers/
master.js <-- typical controllers
detail.js
desktop.platform <-- for the desktop browsers
main.js <-- this main() is run when loading the app in the desktop
english.lproj
body.rhtml <-- view helpers for desktop
mobile.platform <-- for the mobile browsers
main.js <-- this main() is run when loading the app on the phone
english.lproj
body.rhtml <-- view helpers for mobile
When you run a build, SproutCore will output both the desktop and mobile directories in your bundles. Once your app is deployed, you can visit your two apps by going to either:
| Desktop: | http://www.example.com/contacts/en/desktop |
| Mobile: | http://www.example.com/contacts/en/mobile |
There is also a facility to add auto-detection code at the top of your template page so you can redirect to the correct version of your app whenever a user visits your app’s main URL.
Of course, this means that the SproutCore JavaScript itself will also come in desktop and mobile flavors. More on that as it develops.
This new feature in the build tools is still fairly primitive. I’m sure we’ll be adding many more features to it once we get into your hands, but in general this opens up a new and very exciting area for SproutCore. I can’t wait to see what you all do with it!
