7

I'm coming back to web UI after a hiatus and looking to create a modern single-page javascript application using backbone.js (or batman.js if it ever desublimates), node.js, communication via now.js etc - but my question is how do I lay the thing out? CSS is not optimal for this case plus I believe css fixed positioning doesn't work on the iPad (and css layout ruins my soul). Ideally the library would work for both desktop and mobile layout, but this is not strictly a requirement as there seem to be libraries that handle mobile layout just fine.

I only care about supporting modern browsers (webkit and FF), and want to use css3 animations and rendering for everything, not legacy animations and rounded corner tricks. I also don't care if people with old browsers or js disabled can't view the site.

It seems like a lot of people are using JQuery (JQuery UI Plugin?) or similar "traditional" libraries, but with the explosion of modern js libraries I'm surprised there is not something standalone that pairs well with the likes of backbone.js. I saw jLayout (http://www.bramstein.com/projects/jlayout/) but it lacks features I need (draggable/collapsable panes in a border layout, etc).

So should I just go with a traditional framework such as JQuery + UI plugin or Mootools MochaUI? ExtJS is out due to licensing, UKI looked promising but seemed insanely under-documented. Does anyone have good experience with these or is there another option? Or should I be reconsidering the painful possibility of CSS layouts?

UPDATE:

Thanks guys. Unless I'm missing something, all the templating solutions are just that - templating solutions, not layout frameworks that can do what I want (border layouts with fixed regions etc). Does the consensus seem to be then I should stick to CSS, possibly using something like Compass + Sass? My understanding and experience was that it is difficult to do fixed-region border layouts that work cross-browser and don't fail on mobile devices, but I could be way off. I'm also not sure I understand the role of templating here, it's to render regions and models automatically right?

user445994
  • 229
  • 3
  • 10
  • 2
    It's all CSS anyway, so you might as well bite the bullet and learn it. It will save you many headaches when the "layout" and "ui" frameworks are not doing what you want. – Jeremy May 27 '11 at 01:26
  • Agree with Jeremy, CSS is not perfect but it is the best solution for layout out websites. The only other option is *gasp* tables. – T Nguyen May 27 '11 at 01:35
  • re your update -- i did link a few of these so-called layout frameworks. ajax.org, google gwt, and cappucino all use javascript based ui generation. gwt will have concepts like 'panels' and such which have borders/layout regions like you're talking about. however, i think these are HUGE dependencies. html/css has come a long way, and fixed layouts are not that hard to do if you are targeting newer browser – Josh May 27 '11 at 03:44

5 Answers5

4

Your question sounds less like you are looking for a javascript framework and more like you are looking for something to help with page layout. I use Backbone heavily and just started dabbling with Batman as well. I see no reason to not use these libraries/frameworks. I prefer using lightweight tools and avoid monolithic frameworks.

In my opinion, a solid knowledge of CSS is essential if you are building single page webapps. I totally agree that you should bite the bullet and learn it. Using Less, Stylus, or SASS to simplify your CSS is perfectly acceptable, but you should still understand the underlying CSS that these tools generate. I personally use Stylus at this time.

If you want to jump-start your project and learn CSS as you go, there are a few projects that you might want to look at. These will help you to get up and running quickly and reduce the amount of CSS you need to create from scratch.

HTML5Boilerplate

This is a good starting point for your HTML and includes a solid CSS reset. I personally don't use the entire reset and customize it to just what I need. There really is no reason to not use HTML5 at this point. Even if you don't use HTML5Boilerplate, still look into using Modernizr and YepNope for feature detection and polyfill resource loading.

Twitter Bootstrap

This project includes all sorts of CSS boilerplate to get many common layout features working consistently and attractively. Note that this will make your application have a "twitterish" feel to it, but of course you can tweak it to look different. It uses LESS to more easily manage the CSS. I might fork and convert this to stylus at some point.

Semantic.gs

The Semantic Grid System provides a grid system without filling markup with .grid_x classes. I haven't used it yet, but I plan to play with it soon. You might find it helpful for creating layouts. It also uses LESS. Again, I might fork and convert to stylus.

jQuery UI Layout

This is a powerful layout plugin that I'm using in my application, although it is quite heavy and I've recently been considering removing it and using custom CSS/javascript. I created a tabbed interface layout and custom theme and contributed it to Kevin of the UI Layout project. Perhaps you would find it useful. Here's a list of other layout solutions based on jquery.

Template Precompiler

There are tons of templating soutions, including underscore template, jquery templates, mustache, jade, coffeekup, and so forth. I'm currently using Jade and created the tmpl-precompile project with node.js to compile, combine, and compress/uglify jade templates into executable javascript functions that can be served to the client. The uglified precompiled templates aren't much bigger than raw HTML templates would be, and they don't need to be compiled on the client. Using these templates with Backbone is as simple as calling a function in the render method.

Community
  • 1
  • 1
Tauren
  • 26,795
  • 42
  • 131
  • 167
2

Perhaps microjs could be useful to you. You could look at templating libraries and css animation libraries, and even maybe even single page app libraries.

Alex
  • 1,327
  • 2
  • 11
  • 20
  • thanks Alex, I didn't know about microjs and this is awesome, though I'm not sure the templating libs help with my layout woes – user445994 May 27 '11 at 03:40
2

I wouldn't use them, but there are some toolkits that do layout abstraction.

As a commenter suggested, I would bite the bullet if I were you. backbone.js is pretty damn close to the metal, and a solid understanding of modern css/html combo is pretty mandatory imo.

I'd use templates and potentially a sass like language to make css a little more palatable.

Templating:

CSS meta languages:

Josh

Josh
  • 12,602
  • 2
  • 41
  • 47
  • thanks josh i was about to comment and say thanks but I have ruled out GWT and cappuccino having already looked at them and wanting to avoid monolithic libs -- just been googling around about css3 border layouts and not finding much - suppose thats another SO question thanks – user445994 May 27 '11 at 03:49
2

The best js layout plugin around:

http://masonry.desandro.com

34m0
  • 5,755
  • 1
  • 30
  • 22
  • really nice framework...can you achieve a border layout with it? – user445994 May 28 '11 at 02:02
  • Doesn't do border layout. It builds the page somewhat like a wall of bricks. For a borderlayout, try this one. http://layout.jquery-dev.net/ I used it before, and it was pretty decent. There was talk between the JQueryUI people and the author to incorporate it into JQueryUI, but not sure when/if that will happen. It has the draggable/collapsable panes you were talking about. Check out the demos here: http://layout.jquery-dev.net/demos.cfm – 34m0 May 28 '11 at 05:11
0

A very intersting and ultra lightweight is Tempo JS. Very good json render engine and you will find articles about tempo+backbone.

Necrower
  • 105
  • 6