Backend technology for front-end technologies like Twitter Bootstrap

Backend technology for front-end technologies like Twitter Bootstrap

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.

Solutions/Answers:

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

Related:  Implementing jQuery DatePicker in Bootstrap modal

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.

Solution 2:

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

Related:  Using bootbox the show event is not fired

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.

Solution 3:

as ebaxt said, Bootstrap is only a modular front end technology. Your question is about the visual part of a Java EE based application.

It will basically deal with MVC patterns and their implementation/technologies (EJB, Spring MVC).

And then you will finally deal with presentation technologies : writting in .jsp pages, using JSF or Struts or GWT technologies or (of course) BootStrap (like any other js and css code) to get visual results and accessibility. By doing this, you will get an entire well structured app.

Sorry for English mistakes if I have done some, I’m a french guy.

Solution 4:

Here’s an example.
It shows a simple webpage with bootstrap front-end integrated with java-backend service.
Or in another post it mentions integrate bootstrap with spring.

Related:  What is the minimum code to make ScrollSpy bootstrap sidebar like the example?

References