Added GWT implementation #103
Conversation
|
Hey @ColinEberhardt. First, thank you very much for taking the time out to put this together. I'd love to include a GWT example in the project and it's fine that it's MVP rather than MVC (most of our apps are using a variation of MV*). We'll review this for inclusion in our next major release (1.0). Cheers! |
| Whilst this application is very different to the other TodoMVC implementations, it still makes for | ||
| an interesting comparison. Large-scale JavaScript applications are often written with GWT or Closure, | ||
| with the resulting JavaScript code delivered to the client being compiled. | ||
|
|
There was a problem hiding this comment.
Bonus points for including a readme about the implementation 
There was a problem hiding this comment.
Can you add a section on how to compile it?
Also add which GWT and Java version used.
|
Thanks for the contribution, we really appreciate it 😃 I've reviewed the commit and added some inline comments. Some more:
|
| <section class="main" ui:field="mainSection"> | ||
|
|
||
| <g:CheckBox ui:field="toggleAllCheckBox"></g:CheckBox> | ||
| <label for="toggle-all">Mark all as complete</label> |
There was a problem hiding this comment.
The checkbox need to have the id toggle-all to make the label clickable.
|
Hi @sindresorhus - many thanks for the thorough review comments. I should be able to resolve most of these tomorrow. The only one that could be trick is 'restoring' the ul / li semantics. The GWT implementation uses a CellList - a framework widget for rendering a list of cells. Unfortunately the CellList uses a div as its root container and wraps each cell in a separate div. Unfortunately there are no extension points that allow you to change this. I could create my own cell renderer to correct this, however, it would involve quite a bit of code. I think this issue highlights a key difference between GWT and the other JavaScript frameworks. With GWT you rarely try to precisely match a given HTML markup. Anyhow, I plan to put this all in a blog post in the near future. I will link to it from the readme file. Colin E. |
|
@sindresorhus I'll look into cleaning up some of the generated output, just FYI, the HTML files contain the compiled JavaScript for this application. There are 6 versions because GWT works with a concept called 'permutations', separate versions of the application are created for each permutation. With this application there are 6 permutations each targeting a different browser - however in a production app you might have permutations to target different languages / locales. This means the code delivered to the browser is specific to the browser version being used. The files are large because of the general GWT overhead. It isn't meant to be lightweight, being intended for use on large scale applications. Colin E. |
@ColinEberhardt Just though we could minimize the need for CSS overrides, but this sounds like too much extra work to be worth it, not that important. I tried searching the GWT mailing-list and Google, and I'm amazed that no one has had the same question.
Yeah it really does... I've noticed GWT has some superbly bad HTML output.
Cool, let us know when it's published ;)
Wait, what!?! This sounds like something we did in the late nineties... How does it work? Do you have to recompile when there's a new browsers released? And what about browser versions? |
|
Found another thing, there should be a space between the checkbox and the label, in the listItem. I have no idea why there isn't one, since it should be there by default. |
|
(not sure how you reply with a block quote here) With reference to the 'permutations', I should have been more specific. GWT detects user-agent, then has permutations that target specific 'problem' cases, for example there is a permutation for ie6, but not ie7, ie8, ie9. Therefore, future compatibility is most likely not going to be an issue. This isn't so different from the thoroughly modern approach of using JavaScript to write your CSS because of all the repetition needed in order to output various prefixes that are currently required! On the plus side, GWT ensures that the 'junk' required to keep ie6 happy is only ever sent to ie6 users (may they rest in peace). I think the whole GWT approach feels quite strange to JavaScript developers. As a pragmatist I can see the value in it for large applications, much as I love KnockoutJS (my personal favourite framework), it is not the ideal tool for apps with 1000s of lines of code. Colin E. |
|
You use Ok, got it, not as bad as I thought. That is actually quite useful. Since, as you say, you don't have to send all the IE junk to users that actually cares about which browser they're using. Agreed. GWT is probably best fit for bigger apps than a todo app. But still, nice to have an example :) |
|
FYI ... I have moved your comments to https://github.com/ColinEberhardt/todomvc/issues so that I can track them more easily, and make sure I do not miss anything. |
Element IDs added within Java rather than via UiBinder XML. 'Mark all as complete' label is clickable via using GET CheckBox correctly!
|
@sindresorhus I think I am pretty happy with the GWT implementation now, I'll leave those few remaining issues open. Let me know if you are happy to pull this code. |
| toggleAllCheckBox.setValue(totalTasks == completedTasks); | ||
| } | ||
|
|
||
| private void hideElement(Element element, boolean hide) { |
There was a problem hiding this comment.
Should be called toggleElement, since it doesn't just hide it.
There was a problem hiding this comment.
It doesn't really toggle it either! - perhaps showOrHideElement?
Added id 'new-todo' to the input field.
|
@sindresorhus how happy are you with the GWT implementation at the moment? We probably won't be merging this one in until we're closer to 1.0 so there's certainly time if more work needs to be done on this. (thanks again @ColinEberhardt for being so responsive to our requests for tweaks) :) |
|
@addyosmani @sindresorhus I'm more than happy to resolve this via http://colineberhardt.github.com/ Let me know when you plan to merge this in. An idea when your next release will be? I plan to write up my experiences of developing the GWT version in a blog post next week, and will certainly highlight the benefits of the entire Todo MVC project. Regards, Colin E. |
|
@ColinEberhardt Happy to RT that article when you publish, Colin. Thanks for taking the time on this again. In terms of when our next release will be, early April might be a realistic first target for us. That'll give us a month to rewrite the existing apps, test and do as much additional documentation work or adoption of new frameworks as we might like. |
|
What Addy said ;) Though I don't see why you would need to add any CSS for this. Just use the Tested it out, and it looks good. One thing has changed since last time. We have decided that when a todo is edited, if it's empty or only contains whitespace (.trim() before check) when it's blur'ed, it should be removed instead of saved. This is to prevent empty todos. In my opinion this is ready to be merged whenever you fix the above. But it's @addyosmani decision. And again, thanks for contributing this app. I thinks it's very useful to have a GWT example in our collection. |
|
👊 Damn you Addy, you always answer while I'm writing my comment :P |
|
Bwaha! It's what I do :) |
One thing has changed since last time. We have decided that when a todo is edited, if it's empty or only contains whitespace (.trim() before check) when it's blur'ed, it should be removed instead of saved. This is to prevent empty todos. ^^^ Fixed :-) |
|
Hey guys ... @addyosmani @sindresorhus @boushley I have written a blog post about the TodoMVC project and my GWT implementation here: http://www.scottlogic.co.uk/blog/colin/2012/03/developing-a-gwt-todomvc-application/ Regards, Colin E. |
|
Great write-up @ColinEberhardt!. Thanks for mentioning the project. Sure we'll be tweeting this :) |
|
Yes, a good read :) Found a couple of grammatical errors |
|
Thanks, glad you liked it. I'll sort out the errors you spotted when I There should be more software engineers as thorough as yourself! And I'm just as quilty of that as others ;-) Found a couple of grammatical Reply to this email directly or view it on GitHub: |
|
Hi @ColinEberhardt hope you had a nice easter holiday :) Would you be interested in updating the GWT app further? We're working on standardazing the todo apps.
|
|
Hi @sindresorhus no problem, I'll try to sort something out later this week. |
…, apart from 'toggle-all' button which is now plain-old HTML rather than a GWT CheckBox. Uses common CSS file (../../assets/base.css) Spaces => Tabs in Java code
|
Hi @sindresorhus & @addyosmani I have updated the GWT implementation. Most of it was straightforward, apart from Sindre's funky re-styling of the toggle-all checkbox, which forced me to abandon the GWT CheckBox due to incompatible markup :-P At least it demonstrates that you can throw out the high-level GWT framework and program directly against the DOM. You can see it up and running here: http://colineberhardt.github.com/latest/gwt/ Diffs are a bit messy, should have committed the rename & space=>tab as separate units. Live and learn. Regards, Colin E. |
|
Look good :)
I like tha funky :p Can you elaborate? The HTML for the checkbox is the same as it has always been, only the CSS changed.
GitHub tip: You can append |
It's a GWT issue, because the Regarding the other two issues, I'll try to sort them out in the next couple of days. Any idea when the next official release of TodoMVC will happen (and include GWT)? |
|
Ok, got it. Thanks for explaining :) We're shooting for a release in the end of May. As you can see from the milestone, there's a lot of stuff todo before that. |
|
Any updates? |
|
@sindresorhus sorry, nothing yet. I'm having a bit of a manic time at the moment! |
|
We are releasing TodoMVC in 19 days. Would love to have the GWT example in there ;) |
|
This has been on my personal todo list for a long time now ;-) Finally found the time to sort these two issues out. Hopefully it is all OK now for GWT to be part of your upcoming release? Good luck with it all! |
|
Yes it is! Awesome work Colin. Thanks a lot for doing this :) Landed. |
Hi,
I have created a GWT implementation of the TodoMVC application, following your latest specification / template. I know that this version is a little different to the others (and not just because it follows the MVP pattern rather than MVC!).
I have included the compiled code which allows you to run the application, together with the src folder, which includes the Java source.
I think this example could be useful for people show are evaluating the difference in approach between programming in JavaScript directly and using Java to compile to JavaScript.
Regards, Colin E.