JSF is not what you’ve been told anymore

Thoughtworks Technology Radar 2014 has made an “outdated” analysis on JSF with focusing on the abstraction of HTML-CSS-JS which is against modern web development. Notice they use the term “J2EE” that explains a lot already about their research.

The analysis has two major problems, JSF is not what they have been told anymore and second “We recommend teams use simple frameworks and embrace and understand web technologies including HTTP, HTML and CSS.” assumes there is a silver bullet in web frameworks where there is none, but there is a silver bullet for each project type. Things can get really messy for complex form oriented web applications with tons of javascript and css, JSF handles the heavy lifting here. I’m not saying you don’t need to know these technologies, it will be great to have this skill set so that you can tweak things around, it is just working with them directly has a bad impact on productivity and project deadlines. This comes from a team who makes a living with writing javascript, css and html. Regarding state, JSF is a stateful framework by nature and state makes web applications easy to develop with. With improved state management techniques introduced in JSF 2.0+ (e.g. stateless mode, partial state saving), JSF can scale as well.

Back to the analysis, it is not valid because it mentions improvements in JSF 2.0 without knowing JSF 2.2 is out for sometime with killer features catching up with so called modern web development (the one where you write your own javascript, css, ajax, html). Also the analysis claim that JSF is chosen because it is standard, remember what happened to EJB 2.x and why non-standard Spring got popular? Similarly, JSF 2.2 compared to 1.0, is what EJB 3.x to 2.x. Still haunted by bad initial reputation and hated by a group who doesn’t like it because it is standard and their favorite framework is not.

Best way to show how powerful JSF is with an example, following page makes use of bootstrap for css and regular html elements considered as JSF components. Plus we have a PrimeFaces messages and ajax update for messages.

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:jsf="http://xmlns.jcp.org/jsf" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title>User Page</title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"></link> </h:head> <h:body style="padding:20px"> <form jsf:id="userform"> <p:messages id="msg" showDetail="true" closable="true" /> <div class="form-group"> <label for="firstname">Firstname</label> <input id="firstname" type="text" class="form-control" placeholder="Enter firstname" jsf:value="#{userView.user.firstname}" /> </div> <div class="form-group"> <label for="lastname">Lastname</label> <input id="lastname" type="text" class="form-control" placeholder="Enter lastname" jsf:value="#{userView.user.lastname}" /> </div> <div class="form-group"> <label for="email">Email address</label> <input id="email" type="email" class="form-control" placeholder="Enter email" jsf:value="#{userView.user.email}" /> </div> <button type="Submit" class="btn btn-default btn-primary" jsf:actionListener="#{userView.save}"> Submit <f:ajax execute="@form" render="msg" /> </button> </form> </h:body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html> <html xmlns = "http://www.w3.org/1999/xhtml" xmlns : h = "http://xmlns.jcp.org/jsf/html" xmlns : jsf = "http://xmlns.jcp.org/jsf" xmlns : f = "http://xmlns.jcp.org/jsf/core" xmlns : p = "http://primefaces.org/ui" > <h:head> <title> User Page </title> <link href = "//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel = "stylesheet" > </link> </h:head> <h:body style = "padding:20px" > <form jsf : id = "userform" > <p:messages id = "msg" showDetail = "true" closable = "true" /> <div class = "form-group" > <label for = "firstname" > Firstname </label> <input id = "firstname" type = "text" class = "form-control" placeholder = "Enter firstname" jsf : value = "#{userView.user.firstname}" /> </div> <div class = "form-group" > <label for = "lastname" > Lastname </label> <input id = "lastname" type = "text" class = "form-control" placeholder = "Enter lastname" jsf : value = "#{userView.user.lastname}" /> </div> <div class = "form-group" > <label for = "email" > Email address </label> <input id = "email" type = "email" class = "form-control" placeholder = "Enter email" jsf : value = "#{userView.user.email}" /> </div> <button type = "Submit" class = "btn btn-default btn-primary" jsf : actionListener = "#{userView.save}" > Submit <f:ajax execute = "@form" render = "msg" /> </button> </form> </h:body> </html>

Page author is not abstracted from HTML, CSS and Javascript at all. When used like this, JSF does the heavy lifting on backend with value retrieval, validation, conversion, model update, actions and so on except rendering. That is up to the page author. When using a javascript mvc framework like angularjs, knockouts or *js, you need to bind the UI with a server backend using javascript calls, here JSF provides the integration out of the box. Note that, you can use these *js frameworks with JSF as well if you want.

Summary

JSF has been around for 10 years, if it was a bad framework, it will easily get lost in the jungle of web frameworks of Java. Various frameworks has reached their technology peek during past 10 years and started to fade away already. In JSF case, First Facelets saved it, JSF 2.0 fixed it along with JSF 2.2 and then PrimeFaces has given it a popularity boost. Clearly it solves a problem better than others which is creating web applications with an easy, efficient and productive way to meet deadlines. With JSF 2.2, using HTML friendly markup and pass through attributes it caught up with latest trends as well. Add PrimeFaces on top of your stack and get a productivity boost.

Haters gonna hate 🙂