LearnAtlas: Under the Hood

Francisco Tolmasky
writes on February 28, 2009

Share with your friends










Submit

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]

81 Responses to “Atlas: Under the Hood”

  1. Francisco's demo (at FOWA) was awesome! I am clearly looking forward to see it in action 😉

  2. shaunandrews on February 28, 2009 at 8:15 pm said:

    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. Francisco's demo (at FOWA) was awesome! I am clearly looking forward to see it in action 😉

  4. shaunandrews on February 28, 2009 at 3:15 pm said:

    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.

  5. I happened to be there when Fransisco demoed Atlas, it was awesome to witness live and when that iPhone preview popped up the crowd went nuts.

  6. I happened to be there when Fransisco demoed Atlas, it was awesome to witness live and when that iPhone preview popped up the crowd went nuts.

  7. Dude, this is bitchin'! I can't wait to get started with the app ideas I have.

  8. Dude, this is bitchin'! I can't wait to get started with the app ideas I have.

  9. Anywhere I can watch that video from FOWA you guys are talking about?

  10. aito ehigie on February 28, 2009 at 7:58 pm said:

    i will definately check this out

  11. I was at the FOWA demo also. This write-up is good but really doesn't do it justice. You really have to see it.

  12. I was at the FOWA demo also. This write-up is good but really doesn't do it justice. You really have to see it.

  13. Richard Conyard on March 1, 2009 at 5:14 am said:

    Nice post, and the environment looks cools, but are there any thoughts as to the accessibility concerns as raised in: http://allinthehead.com/retro/337/the-cost-of-a… ?

  14. Hackfrag on March 1, 2009 at 5:15 am said:

    Any more news about Aristo?

  15. Ross wrote some thoughts on accessibility here: http://rossboucher.com/2009/02/26/accessibility

  16. 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?

  17. 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?

    • MySchizoBuddy on August 21, 2009 at 10:31 pm said:

      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.

  18. I was going to say “it looks like what NeXT was doing in 1992″.

  19. This is awesome! I can't for the release of Atlas. It is going to be great for the project I am working on :PThanks 280 North!

  20. This is awesome! I can't for the release of Atlas. It is going to be great for the project I am working on 😛

    Thanks 280 North!

  21. We have recently released a full featured visual tool for building flash applications online. If you are interested check it out at http://www.produle.com

  22. useless

  23. KANG Ghee Keong on March 2, 2009 at 7:46 am said:

    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.

  24. KANG Ghee Keong on March 2, 2009 at 2:46 am said:

    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.

    • MySchizoBuddy on August 21, 2009 at 10:34 pm said:

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

  25. Cappuccino is already open source. I don't know what their plans are for Atlas.

  26. Cappuccino is already open source. I don't know what their plans are for Atlas.

  27. Where I can watch that video from FOWA?

  28. double wow

  29. 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.

  30. 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

  31. 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

  32. The audience nearly crapped its collective pants when Atlas was demoed at FOWA in Miami. Awesome stuff.

  33. that is a good view about atlas. OK maybe i want to sign up for email updates at 280atlas.com. Sytropin

  34. that is a good view about atlas. OK maybe i want to sign up for email updates at 280atlas.com.

    Sytropin

  35. that is a good view about atlas. OK,maybe i want to sign up for email updates. Sytropin

  36. that is a good view about atlas. OK,maybe i want to sign up for email updates.
    Sytropin

  37. Sounds good. I will have to take a closer look. The reviews from others have been excellent, hope that it lives up to that.

  38. This looks awesome… but is Atlas IDE only for Apple…

  39. Steve Jabour on March 15, 2009 at 4:09 am said:

    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

  40. Steve Jabour on March 14, 2009 at 11:09 pm said:

    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.

    😀

  41. Hi,Thanks for the demo , i will definitely check this out …………………. : )

  42. Hi,
    Thanks for the demo , i will definitely check this out …………………. : )

  43. 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?

  44. 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?

  45. Atlas looks amazing…can't wait to try it out…thanks!

  46. Atlas looks amazing…can't wait to try it out…thanks!

  47. Sound like it would have been really cool to be there, darn it I wasnt

  48. The videos and pictures are unimaginable..sure i will check this out..Great post..Custom Research Paper

  49. The videos and pictures are unimaginable..sure i will check this out..Great post..
    Custom Research Paper

  50. This sounds great! Gotta love the drag and drop feature for people that are technically challenged!

  51. 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)

  52. 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)

  53. royalsd on April 5, 2009 at 7:34 am said:

    Nice post, and the environment looks coolshow to buy stock

  54. royalsd on April 5, 2009 at 2:34 am said:

    Nice post, and the environment looks cools

    how to buy stock

  55. Interesting thanks for your articles i have heard about these applications i had only a little bit knowledge of that.

  56. Yay.. Your demo is really instructional.. Easily understood.. Although it would have been better if I was at the demo.. Great workk

  57. Possibilties are unlimited… A possible plan for future systems can be found here at <a href="http://www.linqk.com.au” target=”_blank”>http://www.linqk.com.au

  58. Possibilties are unlimited… A possible plan for future systems can be found here at ” target=”_blank”>http://www.linqk.com.au

  59. 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)

    • Ryan Carson on July 13, 2009 at 10:28 am said:

      Hey Nick,

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

      Thanks,
      Ryan

  60. 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.

  61. pixelmixture on July 27, 2009 at 9:28 am said:

    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

  62. I want this.. NOW! :)

  63. Thanks for information..great articel..:)

  64. 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

  65. 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.

  66. Thanks Bernd! The world is always grateful for good documentation.

  67. drakehaven on December 7, 2009 at 10:25 am said:

    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

  68. thank u for share

  69. 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

  70. Tbjohnson on October 15, 2010 at 10:14 pm said:

    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

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more