Atlas: Under the Hood

At 280 North we’ve been working on a framework called Cappuccino for creating what we like to call desktop class applications. These are not your average web sites, but instead a new breed of web application that aims to replace many of the programs that currently run on your desktop. When we launched 280 Slides, the first application built on this framework, many people were surprised to see just what was possible in the browser. Since then, Cappuccino has been steadily progressing with over 40,000 downloads and code contributions from twenty-one individuals.

The goal of Cappuccino has always been to make it as simple as possible to build high quality applications in the browser, and up until now we’ve worked on providing built-in behavior for enabling such tasks as autosaving, undo/redo, and copy/paste. But recently we’ve been focusing on an entirely new product: Atlas. Atlas is a new IDE and visual layout editor that leverages the power of Cappuccino, but drastically reduces the amount of work required for creating a truly rich application experience on the web.

WYSIWYG

With Atlas you can build and style your entire interface using drag and drop. By default we provide you with a large library of built in widgets along with the new Aristo open source theme, meaning your application will look fantastic with no additional work. However, you can also skin these applications entirely from the editor and extend the library of widgets with Atlas’ plugin architecture. And unlike a lot of existing layout editor availabe today, Atlas is not a code generator. On the contrary, Atlas lets you edit the live JavaScript objects in memory and then takes a “snapshot” of them in place. When your application runs, it ‘thaws’ these objects out, making sure that you see exactly how your application will look before you run it.

Layout that Makes Sense

Atlas provides a new take on web layout that make it easy to define precisely the behavior you want, while simultaneously doing away with existing browser inconsistencies. Instead of having to learn the variety of different ways to position and resize elements in the browser, Atlas introduces the simple concept of ‘anchors and springs’. Anchoring an interface element to one of the edges around it ensures that it will stay “stuck” there when it’s container resizes. Activating the internal ‘springs’ causes it to resize with its container.

While simple to learn, these two tools enable you to create incredibly complex and fluid layouts. More importantly, they’re guaranteed to behave the same way regardless of the browser you’re running your web app in. Atlas also provides a large selection of collection views to handle common layout tasks such as split views, table views, and scroll views.

Connections Reduce Glue Code

A common problem that has plagued layout editors in the past is the need for additional glue code to “talk” to the generated interface. In Atlas, much of this work can be done with a technology called ‘connections’. Connections allow you to visually define the interactions between interface elements and other objects. For example, you can define what action a slider should take when it is dragged:

Similarly, you can ‘bind’ the contents of an array to a table, so that when it changes the table automatically updates as well, all without having to ever touch the keyboard:

Model View Controller Built-In

Cappuccino is a Model-View-Controller framework, and Atlas takes this idea to the next level by allowing you to not only create visual elements, but abstract models and controllers as well. By allowing you to interact directly with the objects in your program visually, you can focus on building unique interactions instead of learning a myriad of APIs.

Atlas has gone a step further and provided a number of pre-built controllers to existing web services that you can simply drop in to their applications. You can then simply use connections to grab information from services like RSS and Twitter. Once again, Atlas’ plugin architecture allows you to create controllers for your own web services as well, which you can then share with others.

Multi-Platform Support

Cappuccino was built from the ground up in preparation for a world of multiple platforms. It is becoming increasingly important for applications to run in several different environments: browsers, social networks, handheld devices, and much more. In general, very little application logic or backend code has to change from platform to platform, but the interface usually needs to be recreated from scratch.

With Atlas, it is drop dead simple to create a unique and custom interface for different platforms like the web browser and the iPhone. Cappuccino will then intelligently load the correct interface for your application depending on the environment it is being run on, allowing you to reduce the amount of code you need to rewrite and as well as using just one language and API for all the platforms you deploy on. We call this idea ‘Write once, layout everywhere’, and we feel it is the right way to gaurantee a high quality experience everywhere you ship your application.


View full size


View full size

Atlas will be shipping this summer and you can sign up for email updates at 280atlas.com.

[Photo credit: flickr.com/photos/atelier_tee]

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Comments

81 comments on “Atlas: Under the Hood

  1. I was in the audience when they demoed Atlas at FOWA in Miami. My jaw hit the floor. The possibilities for rapid prototyping and even end-product development is amazing. I had heard about cappuccino before, but I think Atlas really puts it's power in the fore front.Plus is a really beautifully designed environment. I can't wait to play with Atlas, and to see what the 280North guys do next. They're really on top of their game.

  2. I was in the audience when they demoed Atlas at FOWA in Miami. My jaw hit the floor. The possibilities for rapid prototyping and even end-product development is amazing. I had heard about cappuccino before, but I think Atlas really puts it's power in the fore front.

    Plus is a really beautifully designed environment. I can't wait to play with Atlas, and to see what the 280North guys do next. They're really on top of their game.

  3. OK, it's great, but that's because it's a clear ripoff of Apple's Interface Builder. Why not at least give them some well deserved acknowledgment for the design inspiration, if not the design itself?

  4. OK, it's great, but that's because it's a clear ripoff of Apple's Interface Builder. Why not at least give them some well deserved acknowledgment for the design inspiration, if not the design itself?

    • Cappucino has a nib2cib program that can take interface builder nib files and create cib files for cappucino. There is a demo video of this available as well. There they do mention interface builder as an inspiration for Atlas. The developers of Cappucino are all mac users anyway.

  5. I'm beginning to assume that Objective-J, Objective-C, Cocoa, Cappuccino, Atlas and Interface Builder are all related to Apple.It is a good thing. Think about intuitive UI, nothing beats Apple so far. So this interface for the web is going to become the Apple of the Web. I won't be surprised if Apple buys up this whole thing completely next! Only logical to do so. But if Microsoft buys it instead, we are going to see a strange thing soon…merger of Silverlight and Cappuccino…very different animals…Before everything goes awry, maybe it is best to start an open source branch of this, to ensure the good stuff stays free.

  6. I'm beginning to assume that Objective-J, Objective-C, Cocoa, Cappuccino, Atlas and Interface Builder are all related to Apple.

    It is a good thing. Think about intuitive UI, nothing beats Apple so far. So this interface for the web is going to become the Apple of the Web. I won't be surprised if Apple buys up this whole thing completely next! Only logical to do so. But if Microsoft buys it instead, we are going to see a strange thing soon…merger of Silverlight and Cappuccino…very different animals…

    Before everything goes awry, maybe it is best to start an open source branch of this, to ensure the good stuff stays free.

    • Apple is already using Sproutcore of its web apps. I doubt they will scrape it and buy Cappucino. Cappucino is already opensource.

  7. Awesome work, but the last time I saw capuccino it had its problems with Opera, are you guys working on solving this? I mean, Atlas is looking awesome, would be sad to be restricted to run in just a couple browsers.

  8. Francisco, saw your demo at FOWA and was blown away. Keep up the great work and we're looking forward to giving Atlas a spin.-=Vin

  9. Francisco, saw your demo at FOWA and was blown away. Keep up the great work and we're looking forward to giving Atlas a spin.

    -=Vin

  10. Hey Pete,Atlas is a obj-j app, which means it's browser based and runs on any OS. So, don't worry, that opera port for OS/2 that you're using is supported.:D

  11. Hey Pete,

    Atlas is a obj-j app, which means it's browser based and runs on any OS. So, don't worry, that opera port for OS/2 that you're using is supported.

    :D

  12. I can't wait to have a play around with Atlas, it looks amazing! I can definitely see the use of an IDE such as this – I have to admit that not coming from an Objective-C background, I was put off by the Objective-J syntax which seemed to be an over-complication of Javascript. This tool would help to get past that initial barrier for sure!Any idea what kind of license it will be released under?

  13. I can't wait to have a play around with Atlas, it looks amazing! I can definitely see the use of an IDE such as this – I have to admit that not coming from an Objective-C background, I was put off by the Objective-J syntax which seemed to be an over-complication of Javascript. This tool would help to get past that initial barrier for sure!

    Any idea what kind of license it will be released under?

  14. Hi, I think browser driven applications that work on your desktop are the way of the future. They are cheaper and they'll allow users more interactivity with the web and more user generated plug – ins etc. More variety of plug – ins will be awesome. Look at how plug – ins and applications have affected facebook and Firefox. Now imagine that on Micrsoft Word. So many possibilitiesMurphy (Sexual Techniques For Men)

  15. Hi, I think browser driven applications that work on your desktop are the way of the future. They are cheaper and they'll allow users more interactivity with the web and more user generated plug – ins etc.

    More variety of plug – ins will be awesome. Look at how plug – ins and applications have affected facebook and Firefox. Now imagine that on Micrsoft Word. So many possibilities

    Murphy (Sexual Techniques For Men)

  16. your rewrite rules from thinkvitamen site are a bit screwy – most of image urls result in a 404 error (fixed by removing the /blog of the rewritten url)

    • Hey Nick,

      Thanks for mentioning that – we’re aware of it and are working to fix it.

      Thanks,
      Ryan

  17. I saw the demo in Miami and I’m willing to bet that I’m not the only one that was a little more than impressed. This is definitely going to cause some waves.

  18. how can apple continue with sproutcore when something like this is release to the audience….mobile me mail keeps reloading itself forever….

    mobile me should be re designed from the ground to the roof with atlas and cappuccino

  19. Pingback: [FOWA 2009]: Introducing Atlas: A Visual Development Tool for creating Web Applications | sprain's

  20. Pingback: Tim Anderson’s ITWriting - Tech writing blog » Future of Web Apps cheers the independent Web

  21. Hello,

    One of the greatest apps I’ve seen in some time. In a weird fashion it reminds me of Qt, don’t know why. Anyway, I would have some questions regarding Atlas…

    Will it run in Windows/Linux? Also,what’s the pricing for it? To be honest I just read parts of the post and watched the video with no sound so I’m sorry if you already mentioned this somewhere else.

    I know you said it’s portable but hey, there’s allways a “but”, right?

    Thanks!
    Kind regards,
    Claudiu

  22. Talking about Glue code I would like to say that Glue code often appears in code written to let existing libraries or programs interoperate, as in foreign function interfaces like the Java native interface, or when mapping objects to a database using Object-Relational Mapping, or when integrating two or more Commercial off-the-shelf programs.

  23. Will it run in Windows/Linux? Also,what’s the pricing for it? To be honest I just read parts of the post and watched the video with no sound so I’m sorry if you already mentioned this somewhere else.

    Thanks!
    Kind regards,
    Drake Haven – Pool Supplies

  24. I am just new to your blog and just spent about 1 hour and 30 minutes lurking and reading. I think I will frequent your blog from now on after going through some of your posts. I will definitely learn a lot from them. Regards – Leah of Alternative Allergy Treatment

  25. With the purchase of 280 North by Motorola, will there be a continuation of Atlas and Cappuccino as per the past, or is this project going to be motorolafied. If one is looking to develop web applications should one look at a different development environment?

    TJo