Understanding Vaadin Flow / Vaadin 10 - vaadin

preamble: I'm an advanced Vaadin developer (I've used 6, 7, and now all my project are migrated to Vaadin 8).
I'm starting to study Vaadin 10 / Flow, but I find myself in some hot waters.
What I'm actually struggling with is the "project" itself.
The more I deep into, the more I feel like this framework is moving into a css / html based framework, which requires more css/html knowledge than java.
What I mean is that if you don't perfectly know how css and html works, you can't use this framework easly anymore.
The problem is that I don't know if I'm totally missing the point here and I'm losing into a glass of water, or if that's if really a totally different framework.
Here is where I'm asking an opinion from you, and some confrontations.
I'm finding some very good stuff like #Router and all new navigation paradigms and new Mobile First components, but in example I really can't find a rapid way to build a nice look and feel layout without working with css and html.
Easy stuff done with Vaadin 8 looks now for me very hard to understand... like Templates: working with Vaadin 10 Designer is really, really weird.
I hope I'm simply missing the point, and some of you can help me clearing my thoughts.

I share your concerns about Vaadin Flow. Here are some impressions I have gathered in learning about Vaadin 6-14, studying the doc, reading the forums, watching the Vaadin Ltd YouTube videos. While I do not cite technical proof for every point below, this might help you orient to the purpose and new reality of Vaadin Flow.
Web browsers have matured
The years in developing HTML5 are paying off with huge rewards now.
One of the major goals of the leaders of WHATWG was to rewrite the specs from the practical viewpoint of programmers trying to actually build real browsers. As a result, the modern browsers have far more behavior in common than ever before, with far less “quirks”. Web apps nowadays behave much more predictably across the major browsers.
Also, note that the web browser makers have consolidated in their use of engines. Every major browser has abandoned their own engine to use either Apple WebCore/WebKit or its spin-off Blink/Chromium. Even Microsoft has given up on its own browser engine Trident/EdgeHTML, and has switched to Chromium for their line of Microsoft Edge browsers. So Safari, Edge, Chrome, Opera, Brave, Vivaldi, and so on are all using much the same engine now, for much closer behaviors. Only Mozilla Firefox continues to use its own web browser engine, Gecko (except for Firefox for iOS which uses WebKit per Apple policy). So, we are down to two main browser engines: WebKit/Chromium & Gecko.
This means a major burden on the previous versions 6, 7, and 7 of Vaadin, making up for behavior differences between browsers, has greatly eased. Vaadin’s internal design can now work more directly with the web's own HTML/CSS/DOM model without having to create it's own intervening layer of behavior.
CSS
CSS has improved radically in recent years with CSS3 finally getting fleshed-out and widely adopted.
For decades the experts said “don’t use HTML table for layout” yet offered no page layout in CSS except for the anemic float feature. Finally, CSS 3 offers real layout, feature-rich and robust. And more amazingly, apparently the browsers have broadly supported these features with very compatible implementations. These new layout technologies are Flex-box and Grid-layout.
By the way, there will be no “CSS 4”. Each of the functionality areas comprising CSS 3 is now its own project with its own development and versioning. This is explained well in one of the excellent videos by Jen Simmons on YouTube channel LayoutLand though I cannot locate it at the moment.
Flexbox
Arrange items in a 1-dimensional horizontal row or vertical column. Control stretching-shrinking, inbetween-spacing, left-centering-right positioning, and relative aligning including baseline.
See this excellent visual guide and tutorial.
Sound familiar? CSS flex-box provides the same kind of functionality as the Vaadin HorizontalLayout and VerticalLayout classes. Indeed, in Vaadin Flow those classes have been rebuilt to directly use this CSS functionality rather than recreating that behavior within Vaadin. Vaadin Flow has changed its terminology to match that of the CSS standard, such as setExpandRatio becoming setFlexGrow.
See what versions of what browsers support Flexbox.
Grid Layout
Arrange items in a 2-dimensional grid of rows and columns. Features are similar to to arranging data in cells in an HTML table. Contents can be aligned up-down or left-right within the cell. Contents can optionally span across multiple cells. You can control gap-spacing and justification.
See an excellent tutorial by the same CSS-Tricks.com site as mentioned above.
Sound familiar? CSS grid layout provides the same kind of functionality as the GridLayout in previous versions of Vaadin. The GridLayout class in no longer built for Vaadin Flow, but you can get much the same behavior using a Vaadin Div object combined with direct CSS commands.
See what versions of what browsers support CSS Grid.
Roll-your-own AbsoluteLayout
On a related note, CSS now provides for on-the-fly pixel-oriented layout. Again, this seems to be well-supported across browsers in a consistent matter. So in Vaadin Flow, they decided to drop the AbsoluteLayoutwhich provided this ability to layout widgets in a x-y coordinate system.
In place of AbsoluteLayout, you can make your own simple little layout class by extending the new Div component. In that subclass, for any given widget, you can extract the Element object that represents the HTML element for that widget within the rendered web page. With that Element in hand, you can specify the left & top (x-y) coordinates to be respected.
CSS can be updated dynamically now, so you can change positioning around, or add/drop widgets, within this layout dynamically during runtime.
For an example of such a CSS layout subclass of Div, see Replacement for AbsoluteLayout from Vaadin 8 Framework in Vaadin 10 Flow?.
Web Components
The emerging Web Components technologies are a game changer, having replaced GWT. They allow web pages, and web apps, to be assembled as a collection of chunks each with their own little world of HTML, CSS, and DOM. This encapsulated scope lets a chunk be added without affecting the rest of the chunks. For example, no namespace collisions in naming of CSS classes and identifiers.
This has meant a huge re-write of the Vaadin internals. And so we must be patient (or just keep using Vaadin 8), as some parts we rely on in previous Vaadin are gradually added to Flow. See the page in the manual on Components in Vaadin 10 for a comparison of v8 versus v10/11/12 components. This page has been kept up to date. For example MenuBar changed from being unplanned to now being expected in Vaadin 14.
On the downside, some features of previous Vaadin may not appear. But read that page carefully and research. Some parts that Vaadin previously created on its own are now directly represented as now-reliable HTML or CSS features.
Conclusion
Like you, I have mixed feelings about Vaadin Flow.
The recent talk from Vaadin Ltd about “mobile first” is worrisome. That seems tangential from their legacy of building serious business apps, enterprise-style invoice/purchase-order/accruals kinds of apps, “boring” software as I call it (and make my living from), as opposed to startup-of-the-week web app with severe design and wacky interfaces.
Some parts important for enterprise business apps such as menu bars are currently missing with no good workaround. The Web Components technologies are relatively new in the industry, and will likely have some rough edges and problems in these next few years. The nice safe Vaadin-only bubble I enjoyed is now porous, with app development likely to have some need to involve a bit more CSS or other web tech.
On the other hand, it looks like the enterprise/business features may come, either from within Vaadin or from outside as web-components wrapped as Vaadin objects. The Web Components technologies and their various polyfills are not new, and have been worked on seriously for some years by many people, and seem to be workable now. As for CSS or other web tech leaking into Vaadin, I do not minding learning a bit more about these given how robust and well-designed they are now and how that means much more documentation and stability may come with them, with Vaadin not having to re-create features across squirrelly browsers.
And some of that porousness of CSS/HTML leaking-in may be closed where it makes sense and provides convenience to the Vaadin programmer. For example, I noticed in the Vaadin-12 Releases page, there is a new Java API for choosing an alternative built-in component style from Lumo or Material theme for any of the components that have a variant, along with convenient Java constants defined for naming those variants. Ex: primaryButton.addThemeVariants( ButtonVariant.LUMO_PRIMARY ) ;. This alleviates the need to access the inner Element and manipulate CSS.
I believe in the long run, the future for Vaadin is bright. As a server-side stateful application server able to auto-generate web app clients from (for the most part) non-web programming leaves it as an amazing tool in a position with no direct competition (save Xojo Web Edition, using a similar architecture).
Resources
Should you upgrade to Vaadin 14?by Marcus Hellberg 2019-08-21 on Vaadin.com blog
V8 vs. V10 - two maintained Vaadin versions, which one to choose?by Matti Tahvonen 2018-06-13 on Vaadin.com blog

Vaadin 10 keeps the same philosophy of previous versions: Implement the UI with Java. No need to use HTML or JavaScript at all. Vaadin 10 added some support for HTML templates, but it's an optional feature.
This video can help you to understand Vaadin 10: https://www.youtube.com/watch?v=Un8zKzw6twM
The Wikipedia page for Vaadin is also useful: https://en.wikipedia.org/wiki/Vaadin
Read the documentation chapter on migrating from Vaadin 8 to Vaadin 10.

Related

Which is more customizable between jQuery Mobile and Sencha Touch in terms of UI?

I am an iOS developer with decent experience, After a lot of decsion making, we have coome to a conclusion of using phoneGap for our next project which is suppose to be a multi platform app.
Now the question is what to use with PhoneGap, Sencha and jQuery Mobile?
I visited old posts at SO,Quora and a lot of blogs and came to a conclusion that, jQuery Mobile is good to start and learn but Sencha is much more powerful in terms of controls,MVC on client and extensibility.
I have used jquery,jquery plugins and ExtJS in the past and I am fine with either of their mobile counterparts .
So coming to the point, Our application will be designed by a designer who will not know what we will be using to make the app.
he will give us wireframes of the application and slices for images to put on buttons,tab bars etc.
This is how our standard iOS design process works.
So which of the two frameworks will suit this kind of development style where I will be able to replicate the UI given by the designer.
Coming from iOS, Sencha Touch might be a little closer to what you're used to. Having had a little iOS experience, I feel like ST has a much closer layout system. jQuery Mobile would be best if the implementor is used to building things for the browser.
I think both are equally customizable. Having that said ST provides more built in components and hooks whereas jqm wants you to do more on your own. Both frameworks differ extremely in their approach. Jqm uses a declarative designer friendly approach whereas ST uses an OOP programmer friendly approach.

Icesfaces vs Myfaces vs Primefaces

I am starting out a new project that involves the use of JSF 2.0.
From my initial reading, the Mojarra and Apache Implementation of the
project covers the basic components that you will need.
But I know that user's would seek gui with better presentation such as
panel tab, accordion, slider etc... Currently, there are other implementation that I am seeing, the Primefaces, RichFaces and Icefaces.
But I cant find a good article that discusses which among the three are the best.
I have used Spring MVC before but I use JqueryUI for those widget.
Now that I am into component based framework, I would like to use the best JSF Implementation.
I would like to know metrics such as performance/interoperability/ease of use/support.
Sorry if my question might be vague but I would like to hear comments before I select my JSF Vendor Implementation.
Thanks.
I happily use Primefaces as it is by far the most rich set of open source JSF2 controls out there, but they can be infuriatingly buggy at times. It is best to operate under the assumption that component X will not work correctly in a dialog without heavy tinkering.
I would avoid Primefaces if you operate in a development environment with strict UI design requirements as getting everything exactly the way you would like it to look and operate may not be a possibility.
Further I would avoid Primefaces if you are not comfortable with JSF, HTML, JQuery, JavaScript and CSS as you will need a good bit of JQuery trickery to work around the bugs that crop up.
But on that note, I haven't run into a problem yet that a couple lines of custom Javascript haven't fixed for me, and I have one of the most feature rich applications I have ever wrote in the shortest amount of time.
The speed of development is very fast in this area, and any article gets outdated quickly. I used Primefaces for a new project almost a year ago, because at that time it was the only one that was fully compatible with JSF 2 (both Icefacves and Richfaces have had JSF 2 compatible releases in the meantime).
Primefaces has a lot of powerful components that automatically use AJAX, and even more were added in version 3. Unfortunately this focus on new features led to a lot of bugs, but the developers said they would focus on bugfixing after release 3; I can't say anything about the current status since I left the project after 3 months.
There is one thing against Icefaces: a lot of components and functionality are only available in the Enterprise version, which is commercial, not free (but that might as well be a good thing since you get support etc. if your project can afford it).
Why not play with all three libs for a short time, build a simple project and see how you are getting along with either of them. My personal taste prefers Primefaces, but I haven't tried Richfaces since it turned JSF 2 ready.
I have successfully used JBoss RichFaces on a large online B2B store. RichFaces is a quite good framework for building webapps Web 2.0 style, and have easy to use tags that help you develop features faster.
I do not have any metrics regarding performance between RichFaces and IceFaces/Primefaces, but the ease of development should be approximately the same. All three frameworks have similar components, and they are all working towards more and more logic on the client via JavaScript.
At the current state of the JSF libraries, I am fairly sure that you will be happy with whichever framework your choose. IMO RichFaces and IceFaces are the two frameworks that have been around the longest, and i would put my bet on one of these two. IIRC both frameworks have key developers in the JSF design group as well.
As a general rule of thumb, these framework should work interoperably, but I wouldn't mix and match between them. The frameworks are really ment to be used on their own.

Having trouble with precise positioning of Vaadin components

I am spending alot of time positioning my Vaadin components and was wondering what other people's experiences when developing their own Vaadin applications was when layout out their GUIs.
Regarding CSS positioning:
My experience/knowledge as a former Vaadin core developer, current Vaadin application designer/developer is that you shouldn't touch the positioning of the components using CSS, unless you use either CssLayout or CustomLayout.
Inside those layouts you can do pretty much anything CSS permits (Vaadin adds some inline sizes to the contained components, mind you), but with the other core layouts I advice that you don't try to do any fancy tricks unless you know the inner workings of the layout system intimately :)
For options to the core layouts, see the DashLayout and WeeLayout add-ons, which provide some additional freedom in terms of CSS styling.
But if you're talking positioning components using the Java API's then please clarify a bit where you're spending a lot of time.
Coming from desktop world the AbsoluteLayout using pixel positions and sizes has proven very straight-forward way to do component layouts.
That is a bit trade-off between Java-only layout and powerful web-style layout mechanism you get with CssLayout and CustomLayout, but you should get quite far by smartly mixing of these.
I only use css to style the background of some component or panel...
The main layout of my applications is usually looked like the AddressBook demo, sometimes look like iTunes. (with some splitpanel, expandratio or gridlayout)
And I use a lot of window (calling center() almost everytime).
I used to worry about the deep hierarchy of the component tree making it hard to do communication between components. But with the BlackBoard add-on, now it's easy.
I found this something interesting but never have time to try.
And I'm thinking of implementing some declarative form/table field factory (using xml).
imho, developing with vaadin is such a joy...

What are the main disadvantages of Java Server Faces 2.0?

Yesterday I saw a presentation on Java Server Faces 2.0 which looked truly impressive, even though I am currently a happy ASP.NET MVC / jQuery developer. What I liked most about JSF was the huge amount of AJAX-Enabled UI components which seem to make development much faster than with ASP.NET MVC, especially on AJAX-heavy sites. Integration testing looked very nice too.
Since the presentation only emphasized the advantages of JSF, I'd like to hear about the other side as well.
So my questions are:
What are the main disadvantages of Java Server Faces 2.0?
What might make a JSF developer consider using ASP.NET MVC instead of JSF?
JSF 2.0 disadvantages? Honestly, apart from the relative steep learning curve when you don't have a solid background knowledge about basic Web Development (HTML/CSS/JS, server side versus client side, etc) and the basic Java Servlet API (request/response/session, forwarding/redirecting, etc), no serious disadvantages comes to mind. JSF in its current release still needs to get rid of the negative image it gained during the early ages, during which there were several serious disadvantages.
JSF 1.0 (March 2004)
This was the initial release. It was cluttered with bugs in both the core and performance areas you don't want to know about. Your webapplication didn't always work as you'd intuitively expect. You as developer would run hard away crying.
JSF 1.1 (May 2004)
This was the bugfix release. The performance was still not much improved. There was also one major disadvantage: you can't inline HTML in the JSF page flawlessly. All plain vanilla HTML get rendered before the JSF component tree. You need to wrap all plain vanilla in <f:verbatim> tags so that they get included in the JSF component tree. Although this was as per the specification, this has received a lot of criticism. See also a.o. JSF/Facelets: why is it not a good idea to mix JSF/Facelets with HTML tags?
JSF 1.2 (May 2006)
This was the first release of the new JSF development team lead by Ryan Lubke. The new team did a lot of great work. There were also changes in the spec. The major change was the improvement of the view handling. This not only fully detached JSF from JSP, so one could use a different view technology than JSP, but it also allowed developers to inline plain vanilla HTML in the JSF page without hassling with <f:verbatim> tags. Another major focus of the new team was improving the performance. During the lifetime of the Sun JSF Reference Implementation 1.2 (which was codenamed Mojarra since build 1.2_08, around 2008), practically every build got shipped with (major) performance improvements next to the usual (minor) bugfixes.
The only serious disadvantage of JSF 1.x (including 1.2) is the lack of a scope in between the request and session scope, the so-called conversation scope. This forced developers to hassle with hidden input elements, unnecessary DB queries and/or abusing the session scope whenever one want to retain the initial model data in the subsequent request in order to successfully process validations, conversions, model changes and action invocations in the more complex webapplications. The pain could be softened by adopting a 3rd party library which retains the necessary data in the subsequent request like MyFaces Tomahawk <t:saveState> component, JBoss Seam conversation scope and MyFaces Orchestra conversation framework.
Another disadvantage for HTML/CSS purists is that JSF uses the colon : as ID separator character to ensure uniqueness of the HTML element id in the generated HTML output, especially when a component is reused more than once in the view (templating, iterating components, etc). Because this is an illegal character in CSS identifiers, you would need to use the \ to escape the colon in CSS selectors, resulting in ugly and odd-looking selectors like #formId\:fieldId {} or even #formId\3A fieldId {}. See also How to use JSF generated HTML element ID with colon ":" in CSS selectors? However, if you're not a purist, read also By default, JSF generates unusable ids, which are incompatible with css part of web standards.
Also, JSF 1.x didn't ship with Ajax facilities out of the box. Not really a technical disadvantage, but due to the Web 2.0 hype during that period, it became a functional disadvantage. Exadel was early to introduce Ajax4jsf, which was thoroughly developed during the years and became the core part of JBoss RichFaces component library. Another component libraries were shipped with builtin Ajax powers as well, the well known one being ICEfaces.
About halfway the JSF 1.2 lifetime, a new XML based view technology was introduced: Facelets. This offered enormous advantages above JSP, especially in the area of templating.
JSF 2.0 (June 2009)
This was the second major release, with Ajax as buzzword. There were a lot of technical and functional changes. JSP is replaced by Facelets as the default view technology and Facelets was expanded with capabilities to create custom components using pure XML (the so-called composite components). See also Why Facelets is preferred over JSP as the view definition language from JSF2.0 onwards?
Ajax powers were introduced in flavor of the <f:ajax> component which has much similarities with Ajax4jsf. Annotations and convention-over-configuration enhancements were introduced to kill the verbose faces-config.xml file as much as possible. Also, the default naming container ID separator character : became configurable, so HTML/CSS purists could breathe relieved. All you need to do is to define it as init-param in web.xml with the name javax.faces.SEPARATOR_CHAR and ensuring that you aren't using the character yourself anywhere in client ID's, such as -.
Last but not least, a new scope was introduced, the view scope. It eliminated another major JSF 1.x disadvantage as described before. You just declare the bean #ViewScoped to enable the conversation scope without hassling all ways to retain the data in subsequent (conversational) requests. A #ViewScoped bean will live as long as you're subsequently submitting and navigating to the same view (independently of the opened browser tab/window!), either synchronously or asynchronously (Ajax). See also Difference between View and Request scope in managed beans and How to choose the right bean scope?
Although practically all disadvantages of JSF 1.x were eliminated, there are JSF 2.0 specific bugs which might become a showstopper. The #ViewScoped fails in tag handlers due to a chicken-egg issue in partial state saving. This is fixed in JSF 2.2 and backported in Mojarra 2.1.18. Also passing custom attributes like the HTML5 data-xxx is not supported. This is fixed in JSF 2.2 by new passthrough elements/attributes feature. Further the JSF implementation Mojarra has its own set of issues. Relatively a lot of them are related to the sometimes unintuitive behaviour of <ui:repeat>, the new partial state saving implementation and the poorly implemented flash scope. Most of them are fixed in a Mojarra 2.2.x version.
Around the JSF 2.0 time, PrimeFaces was introduced, based on jQuery and jQuery UI. It became the most popular JSF component library.
JSF 2.2 (May 2013)
With the introduction of JSF 2.2, HTML5 was used as buzzword even though this was technically just supported in all older JSF versions. See also JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used. Most important new JSF 2.2 feature is the support for custom component attributes, hereby opening a world of possibilities, such as custom tableless radio button groups.
Apart from implementation specific bugs and some "annoying little things" such as inability to inject an EJB in a validator/converter (already fixed in JSF 2.3), there are not really major disadvantages in the JSF 2.2 specification.
Component based MVC vs Request based MVC
Some may opt that the major disadvantage of JSF is that it allows very little fine-grained control over the generated HTML/CSS/JS. That's not JSF's own, that's just because it's a component based MVC framework, not a request (action) based MVC framework. If a high degree of controlling the HTML/CSS/JS is your major requirement when considering a MVC framework, then you should already not be looking at a component based MVC framework, but at a request based MVC framework like Spring MVC. You only need to take into account that you'll have to write all that HTML/CSS/JS boilerplate yourself. See also Difference between Request MVC and Component MVC.
See also:
What is the difference between JSF, Servlet and JSP? (just to understand the basics)
Using JSF to develop tableless CSS layouts (another myth about JSF)
JSF vs plain HTML/CSS/JS/jQuery (when JSF is the wrong choice)
Design patterns in web applications (illustrates the ideology behind MVC)
After 5 years of working with JSF, I think that I can add my 2 cents.
Two major JSF drawbacks:
Big learning curve. JSF is complex, that's just true.
Its component nature. Component-based framework tries to hide the true nature of the Web, which comes with a huge amount of complications and disasters (like not supporting GET in JSF within almost 5 years).
IMHO hiding HTTP Request/Response from the developer is an enormous mistake. From my experience, every component-based framework adds abstraction to the Web development, and that abstraction results in unnecessary overhead and higher complexity.
And minor drawbacks that come to my mind:
By default ID of the object is composed of its parents' ids, for example form1:button1.
No easy way to comment-out incorrect page's fragment. Tag <ui:remove> needs syntactically correct content which is parsed anyway.
Low quality 3rd party components which e.g. don't check isRendered() inside processXxx() method before continuing.
Incorporating LESS & Sencha is hard.
Doesn't play well with REST.
Not so easy for UX designers, because ready-to-use components have their own CSS styles, that need to be overwritten.
Don't get me wrong. As a component framework JSF in version 2 is really good, but it's still component-based, and always will be...
Please take a look at the low popularity of Tapestry, Wicket and low enthusiasm of experienced JSF developers (what is even more meaningful).
And for contrast, take a look at the success of Rails, Grails, Django, Play! Framework - they all are action-based and don't try to hide from the programmer true request/response and stateless nature of the web.
For me it's major JSF disadvantage. IMHO JSF can suits some type of applications (intranet, forms-intensive), but for real-life web application it's not a good way to go.
Hope it helps somebody with his/her choices that regards to front-end.
A few drawbacks that pop to mind:
JSF is a component-based framework.
This has inherent restrictions that
have to do with obeying the
component-model.
AFAIK JSF supports only POST, so if you want a GET somewhere you have
to do a plain servlet/JSP.
Most components try to provide abstractions over domains like
relational databases and front-end
JavaScript, and many time these
abstractions are "leaky" and very hard to debug.
These abstractions might be a good starting point for a junior developer or someone not comfortable with a particular domain (e.g. front-end JavaScript), but are very hard to optimise for performance, since there are several layers involved, and most people that use them have little understanding of what is going on under the hood.
The templating mechanisms that are usually used with JSF have nothing to do with how web desigers work. The WYSIWYG editors for JSF are primitive and in any case, your designer will give you HTML/CSS that you'll have to spend ages converting.
Things like EL expressions are not statically checked and both the compiler and IDEs are not doing a good job at finding errors, so you'll end up with errors that you'll have to catch at run-time. This might be fine for dynamically typed language like Ruby or PHP, but if I have to withstand the sheer bloat of the Java ecosystem, I demand typing for my templates.
To sum up: The time you will save with JSF, from avoiding to write the JSP/servlet/bean boilerplate code, you'll spent it x10 to make it scale and do exactly what you want it to do.
To me the biggest disadvantage of JSF 2.0 is the learning curve not only of JSF, but the component libraries that you have to use in order to get it to do useful work. Consider the staggering number of specifications and standards you have deal with to really be proficient:
HTML in the various incarnations. Don't pretend you don't need to know it.
HTTP -- when you can't figure out what is going on you have to open Firebug and see. For that you need to know this.
CSS -- Like it or not. It isn't so bad really and there are some nice tools out there at least.
XML -- JSF will probably the first place you use namespaces to this degree.
Servlet Specification. Sooner or later you will get into calling methods in this package. Aside from that you have to know how your Facelets gets turned into XHTML or whatever.
JSP (mostly so you know why you don't need it in JSF)
JSTL (again, mostly to cope with legacy framework)
Expression Language (EL) in its various forms.
ECMAScript, JavaScript, or whatever else you want to call it.
JSON -- you should know this even if you don't use it.
AJAX. I would say JSF 2.0 does a decent job of hiding this from you but you still need to know what is going on.
The DOM. And how a browser uses it. See ECMAScript.
DOM Events -- a topic all by itself.
Java Persistence Architecture (JPA) that is if you want your app to have any back end data base.
Java itself.
JSEE while you are at it.
The Context Dependency Injection specification (CDI) and how it clashes with and is used with JSF 2.0
JQuery -- I would like to see you get along without it.
Now, once you are done with that you can get on with the proprietary specifications, namely the component libraries and provider libraries you will pick up along the way:
PrimeFaces (my component library of choice)
RichFaces
MyFaces
ICEFaces
EclipseLink (my JPA Provider)
Hibernate
Weld
And don't forget the container! And all those configuration files:
GlassFish (2, 3, etc)
JBoss
Tomcat
So -- THIS IS MAKING IT EASY? Sure, JSF 2.0 is "easy" as long as all you want to do is the most basic web pages with the simplest interactions.
Simply put, JSF 2.0 is the most complicated and cumbersome mishmash of glued together technologies as exists in the software universe today. And I can't think of anything I would rather use.
Inexperienced developers usually will create applications that are painfully slow and code will be really ugly and hard to maintain. Its deceptively simple to start, but actually requires some investment in learning if you want to write good programs.
At least at the start you will often "stuck" on some problem and will spend more time reading balusc posts on internet than actually working :) After a while it will be less and less of that, but it still can be annoying.
Even more annoying when you find out that the problem is not due to you lack of knowledge/mistake but actually a bug. Mojarra was(is?) quite buggy, and another layer of components adds even more problems. Richfaces was biggest piece of crap software ever written :) Don't know how it is now on version 4. We have Primefaces which is better, but still you will run into bugs or lack of features especially with more exotic components. And now you will need to pay for Primefaces updates. So I would say its buggy but its getting better especially after 2.2 version fixed some problems with spec. Framework getting more mature but still far from perfect (maybe myfaces better?).
I don't find it especially flexible. Often if you need something very very customized and there are no components that does that - it will be a bit painful. Again I'm talking from average developer perspective - the one with deadlines, quick reading tutorials, and searching stackoverflow when getting stuck because no time to learn how it really works :) Often some components seems to have "almost" what you need, but not exactly and sometimes you might spend too much time to make it do something you want :) Need to be careful in evaluating if its better to create your own or torture existing component. Actually if you are creating something really unique I would not recommend JSF.
So in short my drawbacks would be: Complexity, Not very smooth development progress, buggy, inflexible.
Of course there are advantages too, but that's not what you asked. Anyway that's my experience with framework others might have different opinions, so best way is to just try it for a while to see if its for you (just something more complex - not naive examples - JSF really shines there:) IMHO best use case for JSF is business applications, like CRMs etc...
"JSF will output View-layer HTML and JavaScript that you cannot control or change without going into Controller code."
Actually JSF gives you the flexibility, you can either use standard/third-party components or create your own which you have full control over what is rendered. It is just one xhtml you need to create your custom components with JSF 2.0.
We developed a sample project with JSF (It was a three week research so we may have lose some things!)
We try to use core jsf, if a component is needed we used PrimeFaces.
The project was a web site with navigation. Each page should be loaded via ajax when the menu is clicked.
The site has two usecases:
A page with a grid. The grid is loaded via ajax and should support sort and paging
A three step wizard page. Each page has client side validation (for simple validations) and server side ajax base validation (for complex validations). Any server exception ( from service layer) should be displayed on the same page of wizard without navigating to next page.
We found that:
You need to use some hacks from omniFaces to make the JSF view state fixed. The JSF state will be corrupted when you include pages via ajax in each other. This seems a bug in JSF and may be fixed on next releases (not in 2.3).
The JSF Flow is not working correctly with ajax (or we could not make it work!) We try to use primeface wizard component instead but the client validation seems not supported and mean while it was not standard JSF flow standard.
When using some jQuery components like jqGird, and you need to load JSON results, then you are advised to use pure servlet, The JSF will do nothing for you. So if you use these kind of components, your design will not fit in JSF.
We try to do some client scripts when ajax complete by ajaxComplete and we found that the PF 4 has implemented its own ajax events. We had some jQuery components and we need to change their code.
If you change the above sample to a non Ajax project ( or at least less ajax project) you will not face lots of above issues.
We summarize our research as:
JSF is not working well in an fully ajax base website.
Of course we find lots of nice features in JSF which may be very helpful in some projects, so consider your project needs.
Please refer to JSF technical documents to review JSF advantages, and in my opinion the biggest advantage of JSF, is the COMPLETE AND HUGE support from #BalusC ;-)
I'm not a Java Server Faces expert at all. But IMHO the main disadvantage is that it's server side. I'm tired of learning and using server side web presentation layer frameworks like ASP.NET Web Forms, ASP.NET MVC, Java Server Faces, Struts, php frameworks and ruby on rails frameworks. I said goodbye to all of them, and I said hello to Angularjs and TypeScript. My presentation layer runs on the browser. I doesn't matter if it is served by Windows IIS running php or ASP.NET, or if it is served by an Apache web server running on Linux. I just need to learn just one framework that works everywhere.
Just my two cents.
For me the biggest shortcoming of JSF is poor support for programmatically (dynamically) generated pages.
If you want to construct your page (create page component model) dynamically from java code. For example if you are working on WYSIWYG web page constructor. Adequate documentation of this use case in not generally available. There are many points where you have to experiment and development is quiet slow. Many things just don't work how you would expect. But generally its possible hack it somehow.
Good thing is that it's not problem in philosophy or architecture of JSF. It's simply not elaborated enough (as far as I know).
JSF 2 brought Composite Components which should make component development easy, but their support for dynamic (programmatic) construction is very poor. If you overcome quiet complicated and almost undocumented process of dynamic Composite Component construction, you will find out that If you nest few Composite components little deeper, they stop working, throwing some exceptions.
But It seems that JSF community is aware of this shortcomings. They are working on this as you can see from these two bugs
http://java.net/jira/browse/JAVASERVERFACES-1309
http://java.net/jira/browse/JAVASERVERFACES_SPEC_PUBLIC-599
Situation should be better with JSF 2.2 at least if we are talking about specification.
Commenting on my last few months of Primefaces/JSF experience:
If you can use components "off the shelf", I guess it's not terrible.
However, it doesn't play well as soon as you step outside and need custom UIs. - For example, we needed to use Twitter's bootstrap for our project. (Not primefaces bootstrap).
Now our pages work as follows:
Page loads.
User interacts with a Primefaces that has ajax functionality
Bootstrap's javascript bindings break
We run extra javascript to rebind everything
The promise of JSF to avoid writing javascript turned into writing more javascript than we would have if not using Primefaces--and that javascript to is fix what Primefaces breaks.
It's a time sink--unless you again use "off the shelf" stuff. Also really ugly (Primefaces) when having to work with Selenium. It can all be done--but again--there's only so much time.
Definitely avoid this if you're working with a UX/design team and need to rapidly iterate on the UI--you can save time by learning jquery/writing straight HTML--or looking at react/angular.
JSF has many advantages, question being on disadvantage let me add couple of points on it.
On a practical scenario of implementing a web project with in a time frame you need to keep an eye on the following factors.
Do you have enough senior members in your team who can suggest best
controls suitable for each scenario?
Do you have the bandwidth to accommodate the initial learning curve?
Do you have enough expertise in your team who can review the JSF
stuff produces by the developers?
If your answer is 'No' for the questions, you may end up in a non-maintainable codebase.
JSF has only one disadvantage: before starting "JSF" development you should clearly understand web development, core java and front-end architecture.
Nowadays "new" JavaScript frameworks just try to copy/paste "JSF" component-based model.
Among all the "mainstream" frameworks such as Spring MVC, Wicket, Tapestry, etc., the JSF of Java EE with its composite components is the most elaborated presentation-layer and component-oriented technology provided. It is a bit cumbersome and incomplete compared to solutions provided by HybridJava.

Vaadin vs Apache Click which one to choose for my webapp development

Vaadin and Apache Click seem to be equally good, which one should I choose for developing my web application. Or rather, what are the Pros and Cons of each framework.
I'm a committer of Apache Click but hopefully you will find my opinion objective.
I don't know Vaadin at all, just had a cursory look at their website and examples and mission statement.
Apache Click and Vaadin are meant for different problem spaces. Apache Click is targeted at traditional enterprise web applications while Vaadin targets the Rich Internet Application (RIA) space.
Apache Click is a traditional share nothing, stateless framework. Unlike traditional action based web frameworks Click provides a slightly higher level of abstraction by using Pages and Components. At the of the day Click isn't a revolution. Its just one of many approaches of doing web application development. In my opinion its a very good approach, both from a developer and maintainer point of view. (In enterprise environments the developer and maintainer are often not the same individual, so I differentiate between the two roles).
However developers sometimes have requirements that cannot be satisfied by traditional web applications, which is where RIA comes in. They provide a richer user experience (think desktop) but this does not come for free. RIA comes at a cost in terms of complexity, productivity and time-to-market. It makes sense though, if the requirements are for a richer experience, you need to do more in order to deliver that experience.
My advice here is: think carefully about your requirements. Don't simply assume that RIA is better, there is a price to pay, so make sure you get return for your investment.
Lastly, if your requirement is for RIA, then you should compare Vaadin with Flex. If your requirement is for a more traditional web application then compare Click with Struts, Stripes, Wicket, Tapestry etc.
Kind regards
Bob
I use both ;-)
Click is the best for classic web applications (pure html with no/ small/ handmade javascript).
It is very lightweight (small size and stateless), less verbose (you can do your html in html with velocity/freemarker power ;-).
A real php-killer.
Vaadin is the best for desktop like enterprise applications.
It is statefull, heavyweight, verbose, but amazing.
Grails, Play!, Spring MVC is a real step back after Click/Vaadin.
So my advice: use both!
For most of your pages you will use Click, for complicated tasks - Vaadin.
I've been using Click since 2006. I've built various web applications with it in the last 4 years. All apps (B2B) are still going strong and continue to be maintained/added to now. The best things about Click IMO include:
Very little magic and almost no plumbing. It's all just plain java (and jsp/velocity/freemarker take your pick; or alternatively use all 3 if you so choose; I have for some scenarios because it's so easy to).
It's super fast (It doesn't mean your app won't be slow, it just means Click will never be the reason why your app is slow)
It is so easy to integrate your favourite java lib eg. Ibatis SQLMAP, Spring, displaytag, DWR etc.etc.
You don't need to buy a book to understand/use it (although you may need books for all the other 3rd part libs you plan to use).
Most of my code written 4 years ago still works with the current release. That is just awesome.
Click fits in your head. The whole framework that is. It is so simple you don't have too many questions even as a beginner.
The guys that maintain Click are super responsive and very noob friendly.
It's simplicity helps my apps adapt to new/old tech. i.e I can easily do AJAXy stuff if I want or not.
The form features make handling html forms very easy/fast.
The table features make displaying data super easy/fast
Click's features help me write apps very quickly. Makes the need for scaffolding unnecessary imo.
If you want a light weight, fast, easy to understand framework which helps you build applications as fast as you or your team are personally able to, check out click, it will be worth your while.
Before making your choice you should evaluate all options by taking them out on a test drive.
I'm not familiar with Click, and someone should correct me if I'm wrong, but I understand Click basically a technique to link your server side code to web pages. The UI is page-based and you define the UI with components corresponding to HTML elements. Ajax is not (yet) supported, I gather.
Vaadin operates at a higher level of abstraction. With Vaadin you get to concentrate on your business logic, and build your UI naturally with views, layouts and other components (check out the Sampler). You don't need to care about RPC, page transitions, HTML or templates. Vaadin gives you a fully cross-browser compliant Ajax UI that looks and works great out of the box. It's very easy to get started, and the forum is very active (>700 messages last month compared to 96 on the Click mailing list).
Disclaimer: I'm a member of the Vaadin team and have not used Click.
I would choose, and I already did in a few projects Click (over all other frameworks).
The main selling point for me was that I was able to learn Click and be quite productive in one week-end (Vaadin - but other frameworks too took me much more).
The free and available documentation for Click is much better - you can compare the sites yourself (even if the Vaadin site looks cooler, the Click site is simply more useful - at least it was for me).
The live examples are much better - I always look at them as a snippet repository, and just copy what I need from there (since I'm a lazy programmer :) ) - there's a "Page Java" and "Page HTML" link for every example that shows the source code for every available example.
Regarding the message traffic, I don't think that should be a criteria, since having so good free online docs, and the framework being so much simpler, the users simply don't need to ask that much.
Disclaimer: I'm just a simple user that have used both frameworks.
Is Apache wicket an option as well ?
My experience is with jboss/ejb/jquery, but looking at technologies for starting a new project. I've done a quick bit of research myself abd Vaadin seems to be very well regarded.
Surely Apache Wicket is something you can not ignore if you are comparing UI frameworks. ( I am doing same.) I dropped Vaadin because of poor documentation ( maybe I am not a good Googler.)
Currently comparing Wicket, Click, and ZK.
Click and Wicket are ahead so far for the following reasons:
Generates pure HTML instead of rendering UI using JavaScript which happens in GWT, Vaadin, and ZK. You can use HTML5 features then.
Even with native HTML, server-side binding of UI forms is possible.
You don't need to worry about communication with the server. ZK also does this but with their own language ZUML.
I have found server-side memory footprint higher in ZK in the case of components like the ZK Grid. (Memory footprint for Click is not known to me yet.)

Resources