Many web applications need to support multiple languages. The process of building in this support in a piece of software can be split in two parts: Getting it technically ready to support multiple languages/regions, and getting it ready for a particular language/region. The first part is called internationalization, often abbreviated to i18n (18 being the number of characters left out in the abbreviation). The second part is called localization, abbreviated as L10n. In this blog post, we'll see how we can support i18n in an AngularJS-based web application. There is an example project available containing all source code. It's a Maven project based on Tomcat 7 (Servlet API 3.0) and JDK 6, and can be downloaded here. The example builds on a an example case I created as part of a previous blog on AngularJS.
When we're building web applications containing data entry forms, it's sometimes a requirement that (part of) the form is dynamic, in the sense that the fields to be included in the form need to be determined at runtime. For instance, this may be required if application managers need to be able to add new data fields quickly through a management console, without support by a programmer.
After learning about AngularJS a couple of months ago, I started using it on new Java web projects, and that has been a great pleasure. If you haven't worked with AngularJS yet, you may be wondering what the hype is all about and whether or not it's a thing worthwhile of investing your time in. In this blog, I'd like to put some of the merits of AngularJS in the spotlights, by comparing it to some other approaches for web application programming in the Java world.
We all know Twitter Bootstrap, a great tool for quickly building "sleek and intuitive" web applications. But why are people actually choosing to use Twitter Bootstrap and why? And more importantly, why I think you should *not* use it (in most cases)!
You hear it all the time: "You should really use Twitter Bootstrap! It's really good and easy to use". Also, I notice that bootstrap enables backend developers to quickly set up a frontend using twitter bootstrap. And suddenly they have to admit that a little frontend development can actually be a lot of fun. However, typically things turn bad once the project progresses...
So what can bootstrap do for you and what makes that people find it useful:
- Quickly create a layout (fixed, fluid and responsive)
- Quickly create a form
- Everything imediatly in the same style
- Reasonable grid system
And there are many other useful things that bootstrap offers and allows you to add in no time. Just dive into it, it's more than worth it...
When and what for should you use bootstrap?
- A backend system without too much commercial purpose
- A website without fancy design
- Show (preliminary) functionality to a product owner during a project
So what remains and why should you *not* use bootstrap?
You have to consider that most frontend developers get their thrill from translating a spiffy design to HTML/CSS using client-side scripting when needed. They are typically good at just that thing using their own preferred tools and frameworks and typically less good at modifying existing code bases that they didn't create from scratch.
So when better not?
- When you are just interested in the grid layout, then there are better and more resource-friendly alternatives
- If you are only using one or two features, why not build them yourself? (why not reuse?)
- When dealing with a design of your own, you might end up removing bootstrap specifics or trying desperately to override them
To conclude, there are defintely reasons and scenarios where Twitter Bootstrap can be handy, but make sure that you don't shoot yourself in the foot, because it might cause you more work in the long run. Especially when using bootstrap in a larger project, it might save you time in the beginning, but it might start to bother you and cost you greatly a little further down the road. In those cases, setting up your project correctly yourself from the beginning, is a more recommendable approach.
This is the first entry in a new series of what we hope will become a regular appearance on our Trifork blog: “from the trenches”, with blogs that explain in a no-nonsense just-the-tech fashion how we applied certain tools, technologies, libraries and frameworks in our own projects to solve real-world challenges that we faced while building solutions for our clients. We hope that by sharing the solutions we came up with, we can provide you with some examples and ideas that you can apply to your own projects -- with the confidence of knowing that these techniques have proven themselves in real production systems.
We are also open to your suggestions on what technologies you might want us to cover. So don't be shy and just drop us a note if you have any ideas.
In this first blog I’d like to cover how we used FreeMarker to build a small library of macros that make it very easy and effort-free to work with Twitter Bootstrap-based forms in a Spring-MVC application.
TL;DR: we've built a set of FreeMarker form macros for Spring-MVC apps with a Twitter Bootstrap-based frontend that allow one-liners in your form templates to render full Bootstrap-based HTML structures for various input types that include internationalized labels and rendering of binding and validation errors while allowing passing in custom attributes and nested contents. It’s awesome.
In the past few weeks I have been working with Elasticsearch. I was missing a plugin to look at the data, create queries and evaluate different facets. That was when I decided to start working on a plugin that enables you to do just this.
I have been working on AngularJS together with Twitter Bootstrap, therefore the choice as to which technology to use was not a difficult one. I also used some additional libraries, but I'll tell you more on this later on.
Why did I put the part 1 in the title? I am going to split this information into two parts. This part deals with the setup of the plugin, the libraries I used and the functionality I implemented. Then the next part deals with providing more details about interacting with Elasticsearch; how I use the facets, create the queries, etc. I will also write down some lessons learned with respect to AngularJS in a later blog post.
Now let's move on and have a look at the features:
Some people on the Axon Framework mailing list were asking for more basic samples, preferably using something like vert.x. Since I am familiar with Axon as well as vert.x I thought I could help out. Therefore I have created a very basic application based on vert.x using the Axon Framework. The application is all about maintaining a list of TODO items. These items are shared between all connected web browsers. You have to be able to create a new TODO item and you have to be able to mark them as completed.
During my visit of Devoxx I learned about a front-end framework called AngularJS. This is a very nice addition to the vert.x technology stack. Since I always use Bootstrap for my front-end work, the front-end should look familiar to a lot of you. The following images shows the end result of the application. If you want to know how I created the sample, read on.
Fronteers Conference 2012 in Amsterdam came and went with a lot of great talks and more importantly, fantastic Q&A. After each talk, Chris Heilmann interviewed the speaker using questions tweeted by the audience. This made Q&A a lot less painful then throwing a mic into the audience and hopefully understanding a word or two of the question. A great way to do Q&A.
Talks where very diverse ranging from technical to comical, so rather then slavishly describing each talk, I will try to weave it categorically and add some personal insights which where inspired by those talks.
Read the rest of this entry »