Try Tuts+ Premium, Get Cash Back!
Build a Micro-Blog with SproutCore: New on Premium
plusvideos

Build a Micro-Blog with SproutCore: New on Premium

on May 27th 2011 with 14 comments
Tutorial Details
  • Applications Used: SproutCore
  • Difficulty: Intermediate
  • Completion Time: 1.5 Hours
Download Source Files

SproutCore is a revolutionary JavaScript framework for creating client-side desktop-class applications that run in the browser. This tutorial will introduce you to the core concepts within SproutCore by developing a simple Twitter like micro-blog.

Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Sproutcore

Using SproutCore means moving your business logic client side.

SproutCore – unlike jQuery, which is primarily a DOM library – is a MVC framework for client-side desktop-class applications written in JavaScript and heavily influenced by Cocoa (Apple’s Mac OSX development framework). It differs itself from other JavaScript libraries because it focuses on providing all the tools required to build a full desktop-like application in the browser – like routing, view controllers, UI components, data store layer, unit testing and deployment tools. Using SproutCore means moving your business logic client side which significantly decreases latency because your application only needs to reach back to the server for data (and to perform business logic you may not want client side).

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Greg Stiffler

    Estimated Completion Time: 1.5 Minutes

    My kind of tutorial!

    • http://newarts.at Drazen Mokic

      1 Hour Screencast and 1.5 Minutes completion?

      • http://gavincoop.co.uk Gavin Cooper

        Thanks for letting us know, should be 1.5 hours!

  • http://www.aphrodite1994.com mark

    Would probably be a useful tutorial if I had access to Tuts+

  • Riley

    Sproutcore 2 was just released to developers. I would probably skip this and wait for v2 stuff.

    • http://gavincoop.co.uk Gavin Cooper

      Indeed, however its still a developer preview and not for production. The API’s are changing rapidly. 2.0 also takes SproutCore in a new direction. “SproutCore 1.6 is still the best way to write desktop-style apps, and will continue to be maintained and developed by the core team and contributors.” – http://blog.sproutcore.com/announcing-sproutcore-2-0/#more-1173

  • http://newarts.at Drazen Mokic

    I hope there will be someday a way to pay by paysafecard or something easy like that. Paypal and Moneybookers just suck, i quited my account

  • http://www.thoughtresults.com Saeed Neamati

    I don’t like introducing new platforms over and over. It’s like getting lost in thousands of ways. I think we have to converge technologies into few powerful languages and tools.
    Anyway, let’s support CSS3. Read CSS3 Multi-Column Layout Module.
    Thanks

    • Jason

      How do you think things evolve if we don’t learn and try new things? So I suppose I should have never learned how to use Codeignter, just kept writing PHP by hand, even though CI can save you a ton of time.

      More so, what on earth does learning CSS3 have to do with a JavaScript framework.

      Oh, that’s because your comment is total spam linking back to your site….Got it now…

  • Barry

    @Saeed: Sproutcore is a very known and underestimated framework for years, dont judge if you dont know what it is.

  • http://nvmind.com Ignacio

    Nice, is this for sale on the store?.
    It would also be nice to see a screen-cast for Dojo

  • http://davidphillips.us David

    I am really excited for this screencast. I’m debating between buying this one solo or buying the quarterly. Does this tutorial also include the handlebars templating stuff?

  • Regis

    Hi Gavin,
    Very nice tutorial. I am new to both SC and CouchDB, so there is quite a learning curve. I have followed your advice and also went through the very good CouchDB intro tut.

    Everything in your tutorial worked well (or almost, as my sc-gen’s output is slightly different from yours, for example, it did output a model file called ‘posts_model.js’ and not ‘posts.js’ like with you).

    So, everything seemed to work until I tried to connect to couchdb.
    First problem, this path:
    “/”+this._dbname+”/_design/”+view+”/_view/”+view+”/?”+queryString; returned by getView (and similar for getPath) return “not found” errors. On my setup, it cannot find it because it resolve to “localhost:4020/microblog/_design/posts/_view/posts/?descending=true”, but couchDB runs on localhost:5984.
    So I thought of trying to change the first “/” of the path to “http://localhost:5984/” with some success: no more 404 error, but now a 405 sneaks in: Method not allowed.
    If I type the following directly in my browser window:
    http://localhost:5984/microblog/_design/posts/_view/posts?descending=true
    I get a very nice (though empty) json response
    {“total_rows”:0,”offset”:0,”rows”:[]}

    but if I hardcode the exact same query in SC, I get 405 the error. What gives? I am completely confused and would tremendously appreciate help.
    Thanks,
    Regis

    • Regis

      I guess I have to answer my own question if anyone with the same issue reads this thread. I went to the very good stackoverflow.com website and got answers within minutes. Apparently, making a call to a different port on the same local server (I am running MAMP) is equivalent to making a cross- domain call, which is prevented in JavaScript for security reasons. I was given a solution and will post it back here as soon as make sure it works. Still, this is a nice tutorial. :)