ongwt.com - Vaadin : who can explain me what is Vaadin ?

Commentaires

1.Tuesday 23 June 2009 04:52 par Stan B

<p>It's GWT:<br /><br/>Looking at the source of one of the examples:</p><br/><p>Yet another widget library</p><br/><p>document.write("<script language='javascript'<br/>src='/VAADIN/widgetsets/com.vaadin.terminal.gwt.DefaultWidgetSet/com.vaadin.terminal.gwt.DefaultWidgetSet.nocache.js?1245768663898'><\/script>");</p>

2.Tuesday 23 June 2009 05:29 par Patrice

<p>It's use GWT as "rendering engine" in the client, but the difference seems<br/>that vaadin run on the server.</p><br/><p><a href="http://vaadin.com/faq" title="http://vaadin.com/faq">http://vaadin.com/faq</a></p>

3.Tuesday 23 June 2009 05:36 par Giovanni Ganassin

<p>ye in fact... basically its a GWT extension that adds some richness to the<br/>widgets library and transform the GWT client-side model into ZKoss&Co.<br/>ones.</p><br/><p>Anyway... it worth a try for sure - thanks for the link!</p><br/><p>PS: Vaadin's comparsion table is missing ZKoss framework tbh... which is the<br/>most similiar competitor ;P</p>

4.Tuesday 23 June 2009 06:34 par Henry Hagnäs

<p>Yes Patrice is correct, Vaadin uses GWT as a rendering engine and you can<br/>also use GWT to extend Vaadin applications if there is something you'd like to<br/>add that Vaadin doesn't provide.</p><br/><p>Vaadin also allows you to write web applications in a more desktop like way<br/>- no need to touch Javascript or figure out browser incompatibilities. We also<br/>try to keep the API so stable it'll be easy to upgrade later on (our latest<br/>major version upgrades have been great successes in this regard).</p><br/><p>Giovanni, I will look into possibly adding the ZKoss framework to our<br/>comparison chart - comparison charts are hard to do because you always end up<br/>forgetting or missing someone :).</p><br/><p>I'll try to drop by again later if there is anything else you'd like to know<br/>but if I forget, drop by our forums - we are quick and happy to answer any<br/>questions there :)</p>

5.Tuesday 23 June 2009 06:35 par Henry Hagnäs

<p>oh and yes.. it is very spectacular, but then again, I might be biased as I<br/>work with the Vaadin-team ;)</p>

6.Tuesday 23 June 2009 07:17 par dgirard

<p>[@]All : Thanks for help<br /><br/>[@]Henry : A pure GWT application is client side, a Vaadin application seems to<br/>be more server side (the renderer is on the client). Could you explain us what<br/>are the technical reasons of this choise ?<br /><br/>[@]Henry : is it easy to port a GWT application to Vaadin ?</p>

7.Tuesday 23 June 2009 07:41 par Henry Hagnäs

<p>Vaadin renders its UI using GWT but all the logic and data is kept on the<br/>server-side. This gives the developer the ability to use any Java-technology at<br/>his or her disposal without having to take into consideration the users<br/>platform (no plugins, wide browser support etc). You also alot of added<br/>security by default when you aren't running any logic in client-side scripts,<br/>no XSS or SQL-injections. The programming model is also more like<br/>desktop-application writing than web development, which has its appeals but<br/>obviously isn't for everyone.</p><br/><p>Unfortunately I haven't done any development on the GWT level or with GWT so<br/>I'll point someone more experienced in those things here first thing in the<br/>morning to tell you more about that!</p><br/><p>As for the technical reasons I'll have to defer to someone else on that<br/>aswell if you want more how or why-answer, I'm not on the R&D-team :)</p>

8.Tuesday 23 June 2009 08:48 par Sakuraba

<p>As I understand it: You program to a GWT-like interface, but the actual<br/>"state" is not on the client side. State changes are sent to the client in a<br/>JSON-style format to tell what UI-element to change. The decision on what to<br/>change is done on the server, if I understand it correctly.</p>

9.Tuesday 23 June 2009 09:24 par Marc Englund

<p>Vaadin is what we like to call "server-driven"; your application logic is<br/>running on the server, and the client is 'rendering' the UI using GWT.<br/>Components always consist of a server-side and a client-side, and the framework<br/>takes care of the communication between these, taking care of security<br/>considerations (e.g. XSRF protection) and making sure only the updates needed<br/>are sent over the network.</p><br/><p>The client-side widgets are GWT widgets implementing one additional<br/>interface, though the widgets are not necessarily designed to be used w/o the<br/>server-side (although some of the components can be used as vanilla GWT<br/>components directly). Implementing a new Vaadin component thus allows you to<br/>code both server-side and client-side using plain Java.</p><br/><p>As mentioned above, the programming model is very desktop application -like<br/>(swing-like, as GWT puts it). It's one jar only, and requires tedious XML<br/>configurations or such (other than the standard web.xml).</p><br/><p>Vaadin is a general purpose webapp UI library, but it really shines for<br/>highly stateful webapps, and is less useful for REST-style websites (if you can<br/>excuse that sledgehammer-precision definition...)</p><br/><p>As far as being easy to port a GWT application, I'm guessing the answer is<br/>no, not in the way you mean. Vaadin is coded server-side, and the APIs are not<br/>the same as in GWT (we pre-date GWT by a number of years). The programming<br/>model is quite similar though, using the same concepts, so in that way it would<br/>be fairly 'easy' to port - in the same way a SWING application could 'easily'<br/>be ported to GWT...</p><br/><p>Hopefully this did not confuse things even more... ;-)</p><br/><p>Oh, one more thing: we've noticed it's quite difficult to grasp exactly how<br/>Vaadin differs from other frameworks without trying it out - perhaps because<br/>most 'it sort of like ...' fall short. It's actually a little different than<br/>most frameworks out there. Fortunately it's quite easy to try: we have an<br/>eclipse plugin, that will get you going in no time.</p><br/><p>Best Regards,<br /><br/>Marc</p>

10.Tuesday 23 June 2009 10:56 par dgirard

<p>[@]Marc : Thanks a lot for all these precisions. I have a better idea of what<br/>is Vaadin.</p>

11.Wednesday 24 June 2009 08:40 par Alex

<p>Vadin with it's server driven app. logic looks pretty interesting. Is there<br/>a small/not so small tutorial of a sample app? The one that handles some<br/>client, server, und communication between them?</p>

12.Wednesday 24 June 2009 10:05 par Marc Englund

<p>Demos w/ sources: <a href="http://vaadin.com/demo" title="http://vaadin.com/demo">http://vaadin.com/demo</a><br /><br/>Tutorial: <a href="http://vaadin.com/tutorial" title="http://vaadin.com/tutorial">http://vaadin.com/tutorial</a></p><br/><p>But here's a minimal example (the easiest way is to use the eclipse plugin<br/><a href="http://vaadin.com/eclipse" title="http://vaadin.com/eclipse">http://vaadin.com/eclipse</a> and paste this into<br/>the application class), use firebug Net/XHR -tab to see what get's sent back<br/>and forth (as you can see, you normally don't code anything on the client-side,<br/>only if you're making a completely new component that can't be made using<br/>composition):</p><br/><p>// Excuse the lost formatting:</p><br/><p>package com.example.tutorial;</p><br/><p>import com.vaadin.Application;<br /><br/>import com.vaadin.ui.Button;<br /><br/>import com.vaadin.ui.TextField;<br /><br/>import com.vaadin.ui.Window;<br /><br/>import com.vaadin.ui.Button.ClickEvent;<br /><br/>import com.vaadin.ui.Button.ClickListener;</p><br/><p>public class TutorialApplication extends Application {<br /><br/>[@]Override<br /><br/>public void init() {<br /><br/>// we need one main window<br /><br/>final Window mainWindow = new Window("Tutorial Application");<br /><br/>setMainWindow(mainWindow);</p><br/><p>// add a text input field<br /><br/>final TextField input = new TextField();<br /><br/>mainWindow.addComponent(input);</p><br/><p>// Button w/ click-listener<br /><br/>final Button echo = new Button("Echo");<br /><br/>echo.addListener(new ClickListener() {</p><br/><p>public void buttonClick(ClickEvent event) {</p><br/><p>// show a "humanized" message w/ input<br /><br/>mainWindow.showNotification("Echo: " + input.getValue());</p><br/><p>}</p><br/><p>});<br /><br/>mainWindow.addComponent(echo);</p><br/><p>}</p><br/><p>}</p>

13.Wednesday 24 June 2009 10:11 par Henry Hagnäs

<p>Alex,</p><br/><p>there are a bunch of different samples of different sizes and complexities<br/>here: <a href="http://vaadin.com/demo" title="http://vaadin.com/demo">http://vaadin.com/demo</a> and the book, <a href="http://vaadin.com/book" title="http://vaadin.com/book">http://vaadin.com/book</a> has some tutorials aswell.<br/><a href="http://vaadin.com/tutorial" title="http://vaadin.com/tutorial">http://vaadin.com/tutorial</a> is a short tutorial<br/>on how to create this: <a href="http://demo.vaadin.com/AddressBook/" title="http://demo.vaadin.com/AddressBook/">http://demo.vaadin.com/AddressBook/</a></p><br/><p>Let us know if we are missing some interesting piece of sample you'd like to<br/>see!</p>

14.Wednesday 24 June 2009 10:14 par Marc Englund

<p>The important thing to notice in the above example is that when the "Echo"<br/>button is clicked in the browser, the ClickListener gets called _on the server<br/>side_.</p><br/><p>The ClickListener then updates the UI (shows a notification), which gets<br/>sent to the browser. But you don't actually have to think client/server, it<br/>looks like you're coding a desktop app.</p>

15.Wednesday 24 June 2009 11:18 par Thomas

<p>Hi all,</p><br/><p>Vaadin is a great framework, my company has made the choice to use it on our<br/>main application since one year. Components are interesting, customizable and<br/>easy to use. That's why we have moved from GWT v1.4 to Vaadin (ItMill v5.2.11).<br/>Moreover they have a good project management, and their team is very<br/>pleasant.</p>

16.Wednesday 24 June 2009 12:17 par Dharivs

<p>Hi,</p><br/><p>Vaadin looks really great, I'm going to give it a try. But I don't find<br/>references to internationalization, localization and accessibility<br/>capabilities.</p><br/><p>As long as I understand, we can use GWT capabilities in a Vaadin based<br/>project (i.e. <a href="http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideAccessibility" title="http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideAccessibility"><br/>http://code.google.com/docreader/#p...</a>), but it would be great to confirm<br/>my thoughts.</p><br/><p>Thanks!</p>

17.Wednesday 24 June 2009 01:17 par Marc Englund

<p>You can use standard java i18r with Vaadin, see for instance discussion<br/>here: <a href="http://vaadin.com/forum/-/message_boards/message/19095" title="http://vaadin.com/forum/-/message_boards/message/19095">http://vaadin.com/forum/-/message_b...</a><br /><br/><br/>Personally, I think it would be great to provide best-practices or at least a<br/>recommended way w/ example, but each project seems to have it's own needs.<br/>Please feel free to join the discussion with suggestions/questions.</p><br/><p>Regarding accessibility; yes, we're using GWT on the client side, so what<br/>applies to GWT basically applies to Vaadin as well.<br /><br/>However, there has been no effort to ensure all components are accessible yet,<br/>so I'm sure support is, uhm, less than perfect at the moment... There is a<br/>ticket, but frankly nobody has actually asked for support, so it's in the<br/>backlog - feel free to vote for it by adding comments: <a href="http://dev.vaadin.com/ticket/2710" title="http://dev.vaadin.com/ticket/2710">http://dev.vaadin.com/ticket/2710</a><br /><br/>Oh, and we would certainly accept patches improving accessibility :-)</p>

18.Wednesday 24 June 2009 02:15 par honsali

<p>When I was evaluating it-mill about one year ago, I found that component<br/>were not bidirectional<br /><br/>therefore I have not been able to create pages rtl<br /><br/>This functionality was added in the latest version of GWT, but what about<br/>vaadin ?</p>

19.Wednesday 24 June 2009 05:23 par Dharivs

<p>Thanks Marc ;) Your answer makes Vaadin more interesting! I'm going to check<br/>it soon.</p>

20.Thursday 25 June 2009 08:27 par mon

<p>Very interesting framework, but demo looks sluggish to me (No offence guys<br/>:)). As I understand there are more round trips to the server then in "classic"<br/>GWT application as all logic on the server. (Remember even the "Echo" button in<br/>the example above needs a call to server).<br /><br/>Do you see it slow too?</p>

21.Thursday 25 June 2009 08:54 par Alex

<p>Henry Hagnäs,</p><br/><p>thanks for pointing the tutorial out - i will definitely take a look at it.<br/>I'm planing on starting a new project - an application that would also be used<br/>on smartphones (android, osx). Not sure how or whether this could be a problem<br/>with vaadin. With almoust everything happening on the server i'm a little bit<br/>concerned about the speed of the app. Do you have any real world examples made<br/>with vaadin? Smth. like google app galery?</p>

22.Thursday 25 June 2009 10:16 par Henry Hagnäs

<p>mon,</p><br/><p>do you find it slow to start/load or also slow when the UI has loaded? The<br/>demos are running on an Amazon east-coast EC2-server so depending on where you<br/>are the roundtrip can make it feel sluggish. This is obviously one of the<br/>drawbacks of any server-based implementation if you will only have one server<br/>for global users. So of course the GWT-only application will feel alot faster,<br/>especially if you are far from the server. It's not noticeable for most users<br/>if the server is decent and geographically close. No perfect solution for these<br/>kinds of choices unfortunately :).</p><br/><p>Alex,</p><br/><p>We actually have future plans for a Google App Gallery-type solution for<br/>people to showcase their products with but not yet.</p><br/><p>Unfortunately all the big, complex, Vaadin-applications we or our customers<br/>have created are Intranet-type systems so I can only point you to a few more<br/>real-wordly proofs of concept we have created in-house, here's an<br/>RSS-feedreader: <a href="http://jonatan.virtuallypreinstalled.com/CommunityNews" title="http://jonatan.virtuallypreinstalled.com/CommunityNews">http://jonatan.virtuallypreinstalle...</a><br/>and a Photobrowser for instance: <a href="http://www.peterl.fi/browser" title="http://www.peterl.fi/browser">http://www.peterl.fi/browser</a> .</p><br/><p>About the mobile part, I have a feeling that might be a problem - atleast we<br/>don't officially support mobile browsers yet and you are right, the speed could<br/>easily make it a very annoying issue. Seems like Javascript heavy-solutions<br/>would be a problem either way? I'll have to defer to some other authority on<br/>that though. Same goes for honsali's question - i'll remind Marc to drop by<br/>again :)</p>

23.Thursday 25 June 2009 10:35 par mon

<p>Henry, I was talking about UI when it is already loaded. As a user (I'm<br/>developer my self) I see the delays in the UI at the unexpected places.<br/>Consider "Sampler" demo application: for example the button "quick jump" at the<br/>top right corner. You click on it and there is a delay before you see search<br/>field.</p><br/><p>Again I see Vaadin as very interesting framework with very nice<br/>look&feel and richness of server side java. Just probably it more targets<br/>applications which run on intranet where it feels snappier.</p>

24.Thursday 25 June 2009 11:57 par Henry Hagnäs

<p>mon,</p><br/><p>Yes, Vaadin is more for applications than for just web-sites. Most Vaadin<br/>projects are business applications run relatively nearby but I should note that<br/>Vaadin applications aren't bandwidth hogs so its mostly the response time that<br/>is important.</p>

25.Friday 26 June 2009 10:18 par Jani Laakso

<p>mon,</p><br/><p>When you need the speed, GWT inside Vaadin comes for the win!-)</p><br/><p>For some use cases I've hit same issue that you got. For those widgets that<br/>really have to be as snappy as possible we code them mostly with GWT. This<br/>means sending "enough" data from server to client immediately when widget is<br/>first time rendered and adding logic to client-side, hence you get rid of<br/>server round trip.</p><br/><p>All in all, I enjoy Vaadin's widgetset with server-side components that is<br/>pretty easy to use even for those Java developers that do not wish to stress<br/>themselves on how DOM or JavaScript hacking works.</p><br/><p>Cheers, Jani</p>

26.Friday 26 June 2009 10:26 par Marc Englund

<p>[@]honsali<br /><br/>I added a ticket for RTL language support: <a href="http://dev.vaadin.com/ticket/3093" title="http://dev.vaadin.com/ticket/3093">http://dev.vaadin.com/ticket/3093</a></p><br/><p>We use GWT 1.6 at the moment, but our themes are significantly more advanced<br/>than the basic GWT ones, and there has not been any efforts to make them RTL<br/>compatible yet. One reason for this is that we do not have anyone that knows a<br/>RTL language at the moment, and we'd definitely need help with this, otherwise<br/>we'd just be guessing. We'd be glad to work with anyone needing RTL support to<br/>make it happen - patches, anyone? :-)</p>

27.Friday 26 June 2009 11:00 par Marc Englund

<p>[@]mon<br /><br/>[@]Alex</p><br/><p>A few things to note about 'speed':</p><br/><p>Vaadin tries to minimize the client/server traffic, but network latency is<br/>always a factor.<br /><br/>An example of the 'optimizations' taking place: If you change the caption of a<br/>panel, but the content of the panel has not changed, the server only sends the<br/>new caption, not the content. Several 'updates' targeting different parts of<br/>the UI that have changed are sent in the same response.<br /><br/>These are the obvious things to do, but it gets cumbersome real quick if you're<br/>not using something that does this things automatically.</p><br/><p>Vaadin components can be set in a immediate or non-immediate mode; when<br/>non-immediate, the 'change' (e.g text input in a field) will not be sent to the<br/>server immediately, but will instead 'piggyback' when a 'immediate' event<br/>happens (e.g button clicked). This for instance allows a whole form to be<br/>filled out, only to be submitted when the 'Save' button is clicked.<br /><br/>Most components are non-immediate by default (notable exception: Button), but<br/>in the demos components are usually configured as immediate, in order to show<br/>some immediate feedback to the user.</p><br/><p>Finally, if part of your UI is very performance-critical, you can make a<br/>specialized component that handles that part of the UI on the client side,<br/>using GWT. You do this by making a new Vaadin Component.<br /><br/>For instance: you have made a XYZ-builder by composing Vaadin components on the<br/>server-side - but you notice that when building a XYZ, even the slightest<br/>network latency is distracting. In this case, you can make a new specialized<br/>XYZBuilder component that sends all the data needed to build the XYZ to the<br/>client, which is a specialized GWT XYZBuilder widget that sends the result back<br/>only when the XYZ is done.</p><br/><p>In effect, building a new Vaadin component from scratch is very much like<br/>building a new GWT component, except that Vaadin provides a framework for<br/>communicating with the server-side of the component. But obviously it's usually<br/>enough to use the ready-made components.</p>

• Archives