Friday, February 21, 2014

Web technology: JSF vs angularjs

I use angularjs in one of my recent project. I had been using JSF since the very beginning, almost 10 years. My conclusion is that angularjs is definitely the way to go.

Learn curve.

Assume that you know javascript/html/dom/jquery concept, the basic set of tool for web development, angularjs definitely wins out. I spent two days over angularjs documentation and starting coding after it. I believe I am an expert after one month. Have question on it? No problem. Test it out in offline html, plunker, or dig into the angular.js source code.

On the other hand, JSF is not so easy. Check out here how many chapters you need to go through before you can start work on it. There are tons of concepts and API. Suppose you are good at learning new stuff and ready to go right now, you will be surprised! The build/render concept is subtle and very difficult for beginner. Even experienced developers are bitten by it from time to time. Do a search on JSF build/render. You can find out how many questions are asked.

Reusable UI component

JSF struggles hard to provide facility to author reusable component. First authoring a new UI component is not easy, even right now in jsf 2.2. JSF 2.0 provides composite component and resources. It seems framework is there. Component developers are ready to go. Developing component to show some text is easy and it always work. Once you are trying to develop some component with form fields, trouble will comes. It works in your test, but not in some situation. From my experience, this is related to component state management by UIData(html datatable or UI repeat). JSF just can not handle the input state component if they are deeply nested in UIData. Go mojarra issues track to search for UIData related issues. You are surprised how many are unresolved, or reopened.
Even the component is for static text display, it is not easy to use. Here is one comparison example. To display a tree in html, I use popular primefaces library. You can find out how many class you need to write at server side to just display the tree. I did a search before writing up this post for tree component in angularjs. Here is an example. You just need to supply a tree-style json object, just as I expect, as simple as it.

Buggy

JSF library is buggy, just because its concept is complicated. In lasy two years, I reported around ten bugs in mojarra. I did not find any bug in angularjs core library so far.

Simplicity

Angularjs is simple. It core library is only about 20,000 lines. Most of it is inline documentation. It can be easily understood. On the other hand, JSF is way too complicated.If you do not believe, grab the mojarra source code and try to figure out how it does its trick. Why do you need to read the source? Soon or late, you find your code does not work. You need to understand why it does not. The source comes to rescue at this time. So you need to understand portion of source related to your problem.

Server requirement

JSF: CDI for scope management. EL for data binding. Bean validation for validation.
Angular js: JAX-RS for data. No scope is need. Data-binding is done at client side. Validation can be done easily in client side.