Backend technology for front-end technologies like Twitter Bootstrap [closed]

Question

This a noob alike question, but here we go. I´ve read about Twitter Bootstrap (among other presentation frameworks), which gives the designer/programmer the tools to build easily the front end of a webapp. What I don´t know is how to integrate that with a, for example, Java EE backend. I mean, do those presentation frameworks allow to integrate them with any backend technology (such as Java, PHP, Python, etc)? or are they linked to a specific technology?

I've built a few Java EE web applications using GWT for the presentation layer and Java in the server side; but as I´ve pointed before, I still don´t catch how it would be integrate Bootstrap with Java for example.

I know it´s a very general question but I´d appreciate any help.

Answer 1

Twitter Bootstrap is a frontend toolkit, so it's basically css and HTML. That means it's not tied to any specific backend technology.

From the blog post announcing it:

At its core, Bootstrap is just CSS, but it's built with Less, a flexible pre-processor that offers much more power and flexibility than regular CSS. With Less, we gain a range of features like nested declarations, variables, mixins, operations, and color functions. Additionally, since Bootstrap is purely CSS when compiled via Less, we gain two important benefits:

First, Bootstrap remains very easy to implement; just drop it in your code and go. Compiling Less can be accomplished via Javascript, an unofficial Mac application, or via Node.js (read more about this at http://lesscss.org).

Second, once complied, Bootstrap contains nothing but CSS, meaning there are no superfluous images, Flash, or Javascript. All that remains is simple and powerful CSS for your web development needs.

What that means is that you can use it in any way you want. You can generate the markup server-side and serve it to the client (JSP for instance), you can serve a static fil from the server and add dynamic content via ajax (the backend could be servlets or some higher abstraction like Spring MVC or Jersey), or something in between like server-side generated "base" with some dynamic content/behavior via JavaScript/ajax. Another choice could be to drop the servlet container all together and use something like Play! Framework.

Edit:

I don't think Bootstrap creates the HTML elements for you, it creates the css using Less. You have to write the markup yourself on the server, and use the styles and idioms described in the docs: twitter.github.com/bootstrap/components.html You add dynamic values from java through technologies like JSP or template engines like Velocity, Freemarker, StringTemplate etc. Reading values from users is done by handling HTTP GET/POST actions and reading the attributes. Typically you handle a GET by

1. Reading the parameters
2. Select the template/JSP by the url
3. Interpolate dynamic values calculated by java.

For instance if a user does a GET on ./order.html?orderId=1 you select the order.html template, interpolate values from orderService.getOrder(1). Have a look at the Freemarker examples to understand how a template engine work. You basically pass in a Map<String, Object> and the value associated by a ${key} is rendered in the page before it's sent to the browser.

Answer 2

If you are Java-minded, you may like Tobacco, which I made just for that: http://tobacco.noroutine.me/.

Basically it's maven project template with latest js libs and latest Twitter Bootstrap.

There are some similar things around like this. One which is closest to your needs may be resthub especially their Backbone stack may be of interest.