Web apps don’t have to suck. Here’s proof. And here’s the annotated source.

Q Branch’s Vesper is a beautiful, simple, functional note-taking app, with design and attention to detail like I want every app to have. So, obviously, I decided to port it to SproutCore.

Two reasons. First, I wanted to combat the widespread notion that web apps are fundamentally crappy. There are loads of terrible ones, but they’re not bad because JavaScript is (undeniably) slow: most apps don’t need the full computational power of a C-level language. With the right toolkit, web apps can hold their own against most native apps, even and especially those like Vesper whose power is in beautiful design and sterling execution. Bad web apps are bad because they were built badly, with the wrong toolkits. SproutCore is the right toolkit.

Similarly, I wanted to show how great an experience developing with SproutCore can be. The learning curve is definitely steep – it’s a completely different way to write code than that jQuery plugin you put on GitHub. But that jQuery plugin you put on GitHub isn’t a native-caliber application, so that’s a good thing, and once you’re up the curve, SproutCore is tremendously enabling: I built this from sc-init to a fully armed and operational note-taking app in fewer than a hundred hours.

It’s not feature-complete – no image attachments, no dedicated large-screen interface, and of course no back end or sync. But the transitions are smooth and the data persists. It feels like a world-class app and it works like a world-class app, but it’s in your browser.

Second reason. There’s a complete lack of any really complete, open SproutCore codebases. Developers learn best reading code next to running code, to poke at one and dig into the other, but until now there hasn’t been any place to do that.

With this project, I’ve opened the source and written a companion guide, available in the GitHub repo’s README. If you’re learning, or thinking you might want to learn, then fire up the app and dive into the guide. It’s not a flawless codebase – see the above note about a hundred hours – but it embodies a lot of the best practices I’ve picked up over the years. I’ll also highlight some specific features in upcoming posts.

So check out Juniper here; the heavily-annotated source is here. Poke around, and if you want to see how it’s done, now you can dig deeper. If you have any questions or run into any issues, well, there you go.

If you like Juniper and want to try the real thing, just mix in some vodka and Lillet Blanc, head over to the App Store, and try Vesper. Tell ’em the web sent you.