I am considering making use of GWT as the front-end to an existing web application.
I can't justify a complete rewrite to 100% GWT in one go. It is likely that I would migrate parts of the system to GWT gradually. However for consistency I would like to make use of the GWT TabPanel, MenuBar, etc as global interface elements from day one.
As an experiment to see how 'legacy' parts of the system could be incorporated, I have done the following.
The application's main page template now loads a small 'wrapper' GWT module on every page. This GWT module looks for a selection of DIVs in the dynamically generated host page. If the DIV is found, a suitable widget is slotted into place, i.e. menuBar, tabPanel.
A lot of the configuration for the included widgets can also be slotted into the host page as JSON structures. For instance, I have implemented an adapter that dynamically sets up a TabPanel in this way. I've also added some very simple widgets that load remote HTML, etc.
As a prototype, this all appears to work perfectly and loads quickly.
However, it seems that GWT apps are really designed to be run from a single host page, not hundreds of dynamically generated ones.
Can anyone highlight any issues that the above approach may run into, particularly as the GWT module increases in size? I would aim to keep the legacy wrapper module intentionally lean. Other functionality would be implemented in separate modules.
How have other people integrated GWT into their front end in a gradual fashion?
One of the ways GWT was designed to be used is exactly as you've used it. We have done that in many of our apps - where there is one GWT module with multiple 'parts' that are loaded based on whether a given id exists on a page or not. So I don't see that you'll have any issues at all going this way. We often use this approach even for new web applications, where we just want a few 'widgets' on the page, rather than coding the whole application in GWT.
It won't make a huge difference, but one thing I would suggest is not putting the GWT javascript code into your main template, but rather only put it on the pages that need it. It's true that if you're not running HTTPs it is cached basically forever, but it seems wrong to get people to load in the module if it's not actually needed on that page. This of course depends on how people use your site, if they are likely to download it anyway then it won't make any difference.
You're doing it right. Avoid avoid avoid the temptation to try to 'minimize' the GWT footprint by breaking it up into multiple separate apps.
The key to GWT performance is to have as few downloads as possible and to make sure they're cached. Loading a 250k bundle once is much better than two 200k bundles and because compression get's better with larger files you really start to reap benefits as things grow.
y-slow & firebug can be really helpful when it comes to convincing yourself of this.
One performance trick you might check out is available in the sample chapter here: http://www.infoq.com/articles/progwt
It shows a mini-architecture around loading GWT widgets into any number of slots and pre-populating data in JavaScript variables. This allows your GWT widgets to load and not require a second HTTP GET to get the data they use. In practice I found that this was a nice performance boost.
Related
I am working with an application that has some Wicket pages, divided into some Applications. We are expanding the Wicket development to substitute other legacy content. Right now, there is no clear path wether to write new Wicket Applications for each workflow, or if we should have one big Application with many URL mappings. I did not find any information about this either.
As far as we are, we see following issues:
Many Wicket Applications pattern:
Each Application (Workflow) can be easily mounted without much of a hassle.
Even if it's not more time consuming, you end up writing more Java Classes (at least for each Application you need at least some basic structure).
Each Application default URL get's accessed by it's homepage, so no further config is necessary.
One big Application pattern:
Each Workflow needs a Page, which has to be mapped in the Application class. As far as I've seen, there is no configuration in xml files to archieve this, but it should be possible to develop some schema that allows to structure this in some xml file. Disatvantage: more time consuming for the first time
For further addings, it should be somewhat easier than with the Application pattern, but it doesn't make a difference that would make a real difference considering that the workflow development is always way bigger than the initial config.
Each Workflow default URL can be accessed by the URL mapping, and can be changed easily, it seems a little easier than with the Application approach, but doesn't make a big difference either.
Now, what I'm looking for:
Opinion based on experiences, maybe arguments for deciding for one or another way.
Is there any documentation from Apache or some source for this? If so, some reference would be a great advice.
As I understand it, you would still deploy all of your Wicket Applications within one single Web Archive.
Doing that, in my opinion you lose the only real advantage of separating your code into different Wicket Applications. If you separate your code into multiple Wicket Application classes
you have to think of configuring each Wicket Application the same way and not forget a single one (include it in the web.xml, call the same settings in the init()-method, ...)
you are writing more boilerplate code as you already said yourself
The configuration and code would be more complex than with the "single application" approach. With a single application
you only have to mount the start page of each workflow in your single application class...which is one line of code compared to a new class and some lines of web.xml config with the multiple applications approac
So, if you don't want to deploy your workflows separately, I'd go with a single application. It makes it so much easier. Especially when you have accumulated more than a couple workflows the single application approach will probably be much easier to maintain.
How much shared coda are you likely to have?
Are there different performance/load tolerance/availability requirements for the different workflows?
These are the questions I use in general to decide whether two things should go in one application or not, and that's pretty much independent from Wicket.
Obviously much shared code points towards a single application. Of course you can still use separate applications with all of them depending on a set of shared modules but in practice you'll spend a lot of time trying to keep your modules in sync.
Similarly, wildly different availability requirements might steer you in the direction of separate applications as you'd probably want to deploy them separately.
The most difficult scenario is if you have much shared code AND you still want to deploy them separately, in that case a multi-tiered approach (multiple frontends connecting to a common backend) might be worth considering.
I have been developing a plain JSP/Servlet web application, which focuses mainly in collecting large sets of data through JSPs, processing them and finally commiting them to a MySQL database. Imagine something like a declaration of assets for a pretty big number of people.
While it works pretty good now, the code is really jumbled up and since I now have the time, I am thinking of completely redesigning the whole application in a more sophisticated and reusable way. My main problem is that forms are built mainly through jQuery (my form_build.js and form_validate.js files span over 600 lines each at the moment), and the back-end java code is jumbled up since there is massive use of name[counter] input fields.
I.e. The user can add 5 assets in the form, where he has to submit something like 30 fields of information on each one. The form sends them in the form of attribute[asset_counter].
If I managed to make myself clear, I have been looking into the Google web toolkit - which I had no idea of before - and from what I gather mastering it will take some time for me. Is it worth the trouble, or is it aimed at something completely different? And is there a framework or technique that can handle efficiently what I need?
Frankly, I am a senior java developer and I used a lot of jsp/jsf web applications accompanied by EJB, webservice, simple spring web apps, and I recently came up to use GWT.
It's a very nice platform, it has the following advantages:
All the code is compiled to html/JS which is better in terms speed
and browser understanding agilty
It uses built in JSON xml transer (nice approach)
It use built in AJAX (nice approach)
It use it's own cleint server platform (no need to use other
libraries for each one)
It will adopt to any browser (strong competetor)
drowbacks:
Sometimes it takes time to load in the browser (specially when using
FlexTables)
I advise you to use it!
GWT is a very powerful toolkit, and from what I understand it might help you to better organize you client side code. But you also have to consider some high-level JS framework like backbone.js+require.js or Google Closure. Time spent to learn this frameworks this bascially the same as for GWT, the choice basically depends on what your team prefer, JS or Java. In most cases when logic on client side gets very complicated, I will choose GWT.
By 'web developer' I mean a software developer having a sound
understanding of web fundamentals (HTTP, HTML, CSS, JavaScript and
Ajax).
By 'successful GWT developer' I mean someone who can produce
high quality and polished looking GWT apps in timely fashion.
My department is gearing-up for a project that will require the development of a number of single screen RIA web apps. These will front enterprise server components implemented in Java. Our UI prototype was developed using ExtJS and was successful (in terms of speed of development and producing a professional, polished looking UI that integartes well with a service oriented API implemented using Spring-MVC + Jackson). However, in gearing-up to develop the actual product we have realised that our department's skills profile isn't ideal for ExtJS. We are strong on Java but relatively weak on web developers. The development of the UI prototype demonstrated that you really need fully feldged web developers to get to grips with ExtJS, since they will spend a significant amount of time grappling with CSS and JavaScript issues. As a result, the question has arisen as to whether we might be better off going with GWT (combined with a library that offers a level of polish comparable to ExtJS, such as SmartGWT). Obviously this assumes that GWT is significantly less demanding in terms of web development skills. To what extent would GWT + SmartGWT allow our Java developers to crank out high quality RIAs without them having to acquire anything more than a basic appreciation of the web fundamentals listed above?
If we decide to explore GWT further we'll do another prototype, but in the mean time it would be very interesting to hear the opinions of experienced GWT developers.
My experience is that you can get away with a lot without advanced web skills, but the end result is a pretty bland looking app, but even worse, you'll find yourself struggling to achieve all the dynamic effects you want.
As an example, my app has a DataGrid on the main tab. That could be done easily enough using pure GWT. But then I wanted to put a checkbox under the DataGrid widget that the user could use to select "single line mode", in which the rows are one line each -- any data in cells that would have word-wrapped just disappears at the edge of the cell. Hit the checkbox, and the rows collapse to one line each, then hit it again, and the row heights expand to whatever size is needed to display all the data in the cells. There isn't a method for that. What you have to do is adjust the row style of the DataGrid to add or remove the CSS element "white-space:nowrap;". So you add a ValueChangeHandler to a CheckBox widget (GWT skills) that modifies a CSS style of the DataGrid widget (web skills).
Without web skills, you'll find yourself hitting walls in trying to achieve the look-and-feel (and even dynamic behaviour) you want. Having said that, you can find these sorts of answers easily enough on the web. The key thing to remember is that just because GWT doesn't seem to have a method for something, that maybe it's really a web issue, not a GWT issue, and that you have to remember to think outside of the GWT box to solve your problem (instead of throwing up your hands, blaming GWT for lacking a feature, and hoping something like SmartGWT will solve all your problems).
The fact that every GWT widget has a plethora of methods for setting, adding, and removing styles, and the very rich integration via ClientBundles and UiBinder and the like, means that this was always the intent.
GWT is a very capable framework and can be used to produce great results such as Pictarine, but as the developers of Pictarine indicate:
Another thing that was not obvious to us when we started with GWT was that a java developer needs an intimate knowledge of HTML/CSS if he/she wants to go beyond the basic user interface provided by the GWT widgets.
I'm not quoting this to discourage anyone. Basic interfaces are indeed within reach with GWT without much HTML/CSS knowledge. GWT, however, leans on web languages and so in a non-trivial application familiarity with JavaScript, HTML, and CSS will come handy. Personally, using GWT has been continuously deepening my JS/HTML/CSS skills as I've been searching for ways to enhance my GWT projects, which in the end has been very rewarding.
I typically work on web apps that will only be used by a small group of well-controlled people, but now find that I'm writing something that has the potential to be used by a very large population. This means that the design and "look" will be very important to the success.
While I can certainly code up something functional, it ain't gonna look pretty, so I know that I'll need to get an outside designer to make things look good. Never having worked that way before I had a few questions about the mechanics of how this happens and how to try to make things easier.
We do Java, so when building a rich interface, we use GWT. I know that when working with designers, they typically provide images of what the interface should look like without any type of "useable" output. My question is how best to bridge that gap between a simple drawing of an interface to a fully functional realized one.
Any thoughts are appreciated.
Well, "it depends", as always.
Nowadays, I don't think you can work wit someone who simply provides PhotoShop mockups. At least not at your level. Mockups are simply too static, and translating those mockups to actual pages that actually work with different browsers properly is a skill set all its own.
So, you need someone beyond simply a designer, especially if you are planning any javascript wizardry, animations, or other dynamic elements that don't capture at all well on a static image.
What you really want is an "operational" mockup. Static HTML files that look and behave as best as can be done to what the UI designer wants to do, including transitions, work flow, etc. This artifact can be run through all of the stake holders as a live mockup, letting folks "Feel" the site.
Once you have these HTML files, you can then do your part of backfilling these pages with actual server side content. Obviously you can start early working on models and working with the designers so as to have services ready to support the site functionality, but you shouldn't be committing any real time in to actual pages for the site.
As for interacting with the designers, I talk more about that over here: How can I make my JSP project easier for a designer to work with
I worked on a project very much like this. We had "comps" which were pictures of what the interface would look like. We identified common objects and build modules. Then built pages (this was for a web app) from modules plus any elements that were unique to that "comp".
A couple things to keep in mind that will make life much easier: use the comps/drawings as more of a recommendation rather than set in stone design. Try to identify common pieces early on and reuse code.
Also, designers aren't user experience gods. They often have a good idea of how things should work, but if you are close to your product and have a lot of product knowledge, don't be afraid to tweak the design as you and your group see fit. One thing that designers typically lack is product knowledge. They know a lot about general user experience and how a site should work, but they often won't know the in's and out's of your use cases and products.
If you are working with GWT, you should look for designers who are expert in CSS. Apart from, may be, the main layout of the website, all the application components like form fields, dialogs, tabs and grids etc. will need to be styled using CSS.
If the designers are not experienced in working with GWT, share the GWT's documentation about styling with them. It's a good idea to read these yourself as well. Specifically explore the GWT's theme-ing system.
Also try to make use of UiBinder as much as possible. This would allow you to stay as close to traditional HTML based design while still enjoying the GWT high level object oriented interfaces (both widgets and DOM).
Optionally you might want to tell the designers that GWT image bundles will automatically do "CSS Sprites" so they don't need to worry about page load performance issues related to images.
I have read that gwt-ext is slow and it seems too bulky. How does this compare with Ext-GWT? Are there any other libraries out that can easily handle dragging, resizing, minimizing?
In my opinion there are no real worthy GWT widget libraries that I want to even consider. If there is a widget missing you can always try to get one included in the incubator, this way it will maybe end up in the GWT distribution one day.
The bigger, impressive looking ones tend to be a wrapper for an existing JS widget library. Which means that you have to pass on many of the benefits of GWT.
Others like Rocket GWT are a complete rewrite of existing widgets which ties you to another abstraction. That means that if you need extra widgets outside of the Rocket ones you will need to use widgets that follow different design principles.
I tend to stick to the default ones and I use the incubator widgets but I always try to keep those dependencies to a minimum since these are still changing dramatically (changing classnames, packagenames, complete design changes, ...). You do not want to keep on modifying existing code.
In most cases I just create my own widgets that does what I need and nothing more. That takes a lot less time to create than if I have to implement a complete API that would cater a lot more usecases.
Have you looked at http://www.smartclient.com/smartgwt/showcase/
The controls are licensed as LGPL, but advanced server site libs are only included in the professional edition.
we're having some success with Mosaic from the GWT incubator. You'll wish for better documentation, but once you get past that you'll find useful widgets (split panels, etc.) that you can mix with gwt's basic widgets.