AngularJSF: Does combining Angular and JSF create a princess or a monster?

Discussions

News: AngularJSF: Does combining Angular and JSF create a princess or a monster?

  1. I like Angular. I've  been playing with AngularJS for a few weeks now and I have to admit, it's cool. From a UI standpoint, it can really make browser based applications responsive.

    Of course, there are some problems with AngularJS if you're a seasoned JSF developer, one of which is the lack of obvious server-side handling capabilities that compete with some of the popular Java based, web tier frameworks. Yes, I know, Angular applications simply have to call RESTful web services, and as Java programmers, we can just write some JAX-RS code and handle the incoming data. But still, it's not as elegant as JSF.

    Avoiding the Haitian Vodoo

    I will admit to my bias. I like JSF. I like the way HTML forms are mapped to backing beans. I like the lifecycle stages that do things like validation and conversion, and I like the way managed beans can be used to very easily update content spots on a page. And yes, I know that JAX-RS can do similar bean mappings using the @form tag and a little bit of Haitian Voodoo, but still, I like how JSF does it. And I also like how JSF integrates with the whole Java EE ecosystem.

    As I've fiddled around with AngularJS, I can't help think about how neat it could be if we could combine AngularJS and JSF. It actually wouldn't be too hard, because the two have very separate responsibilities, although JSF might have to be involved with updating the AngularJS model, as opposed to a JSON over HTTP interaction. Obviously I'm not the only one to have had that idea, as the concept has already been written about, and a little project named AngularFaces has been attempted to combine PrimeFaces with AngularJS. Reza Rahman wrote an interesting article about it: JSF + AngularJS = AngularFaces

    Anyways, I'm going to make an attempt of my own, without allowing those other projects to bias my angle of approach. Look for some tutorials coming out in the mean time that demonstrates how cool a merger of the two would be. Who knows, maybe this will be the next, hot, open source project? 

    If you're not up to speed on Angular, TheServerSide has run a few articles on the topic:

    8 AngularJS questions with Mark Bates
    Angular framework: Garnering attention at Fluent

    JavaScript frameworks: What are your options?
    O'Reilly Fluent 2014 conference coverage

    We've also run a few JSF tutorials, namely ones about templating with JSF and integrating Ajax calls into the Facelets framework. It's actually a pertinent discussion, because as responsive as Angular is, when you start doing Ajax calls within your JSF applications, the whole thing becomes pretty fast, so the need to use something like AngularJS becomes minimized:

    1. An introduction to template building with Facelets, CSS, HTML and JSF 2.2
    2. Turning a web page into a JSF 2.0 template with Facelets
    3. Creating pages based on a JSF template: Using the Facelets ui:define tag
    4. Template based web design with JSF Facelets: ui:insert versus ui:include
    5. Integrating Ajax into your Facelets pages: Death to JSF's request-response cycle
    6. Completing the Ajax based Facelets application

     Anyways, I'd be interested to hear what the community's take on AngularJS is, and how this whole JavaScript based MVC frameworks are changing enterprise programming. It really is one of the most interesting developments to hit the enterprise software market over the past few years.

    You can follow Cameron McKenzie on Twitter: @potemcam

  2. A princess and a monster.  I haven't had to deal with JSF for a while but agree with the thoughtworks 7/2014 assessment (http://www.thoughtworks.com/radar/languages-and-frameworks) on JSF.  I don't think I would start a project with it today.  Adding Angular on top seems like putting lipstick on a pig.

  3. Interesting challenge...[ Go to top ]

    Note: I've not used JSF in years. I moved on to other tech.

    I didn't look too much into to AngularFaces when i saw a post about it. But i went back and re-read the it. Here is my take based on what i read - you are fighting BOTH the frameworks. JSF wants to own the DOM. AngularJS wants to own the DOM.  While you will not get the binding that AngularJS provides, you are better off just using JQuery with JSF.

    I've seen this same sort of thing being done with AngularJS and ASP.NET MVC. Unless you are using it very simply (not a full blown app), even with a server-side MVC framework you run into issues. I've tried it with Spring MVC (using the server to control views) and have issues.  While a great percentage of the integration is easy, it is that small percentage that either will be very difficult or impossible.

     

  4. fighting frameworks[ Go to top ]

    I posted another comment - shorten version is that both JSF and AngularJS want to own the DOM. Use both and you are fighting one or the other or both. Just use JQuery if yoiu want to use JSF.

  5. If you stick with preserving and separation of responsibilities, the project difinition is simple: improve JSF rendering by leveraging Angular JS. While this is probably a very interesting project, it does not deal with core JSF weaknesses. Or, in other words, this won't bring any NEW capabilities and NO problems will be resolved.

    So the question is what you want:

    • Preserve the current development methodology and just improve rendering stack?
    • Try to evolve JSF?

    The first option looks like a plastic surgery. The second looks much more interesting, though it's very complex since you need to define clearly the migration process.

  6. If you stick with preserving and separation of responsibilities, the project difinition is simple: improve JSF rendering by leveraging Angular JS. While this is probably a very interesting project, it does not deal with core JSF weaknesses. Or, in other words, this won't bring any NEW capabilities and NO problems will be resolved.

    So the question is what you want:

    • Preserve the current development methodology and just improve rendering stack?
    • Try to evolve JSF?

    The first option looks like a plastic surgery. The second looks much more interesting, though it's very complex since you need to define clearly the migration process.

     

  7. take a look @ http://bessemhmidi.github.io/AngularBeans/