GWT React

[Paul Stockley]

We currently have a large GWT application that we have been working on for the last 4 years. We use Uibinder and Widgets very

 heavily, although we have our own Widget set and RPC mechanism. The application is being constantly expanded and realistically 

won’t be fully rewritten for 8-10 years. Given the news about J2CL not supporting widgets, I have been thinking about how we could 

migrate to a world without widgets on an incremental basis. 

 

In parallel, I have also being exploring writing native mobile apps. We tried the mobile web but it wasn’t great and we really needed

hardware integration for NFC and total offline capabilities. Which brings us React. I found React Native and started researching 

and playing around. I have to say I am very impressed. In my mind it is a game changer. They are getting close to allowing one code 

base to support iOS, Android and the Web with only about 10-20% custom code for each platform.

 

The more I played with React Native, the more I liked the React declarative model for defining UI’s. I started thinking that React 

would be ideal for incrementally embedding within an existing GWT application. Facebook designed it so they could incrementally

role it out into their existing Web application. When GWT 2.8 beta came out, I wanted something to try the new JsInterop out on.

React seemed like a good candidate. After a couple of weeks of experimenting, I have a working proof of concept for React. I 

have to say it was a real challenge and really pushed the capabilities of JsInterop. I had to do some javascript hacking to get it 

to work. My goal was to create an interface that was as close to JavaScript as possible. That way you could use the many React

tutorials and apply them to writing GWT React code without some huge mental translation.

 

I decided to try and port http://todomvc.com/examples/react/#/ to Java. The reason for this was so I could have a direct comparison 

between the Java and Javascript code. I have implemented enough of the React API to get this working. In addition, I also integrated 

a 3^rd party React component called React Router (https://github.com/reactjs/react-router). This is pretty much the de facto standard 

for routing in the React world. This proved that I could consume React components written by other people. Overall I am pleased with 

how it turned out. I find the java version easier to follow, especially since the Prop types are explicit. It would be nice to support JSX

 instead of the legacy createElement interface. However, it isn’t terrible. The Java version was 465 lines in total vs 419 for the original 

JavaScript code. If you take out the import statements which I don’t really count because the IDE creates them for you, the Java version 

was actually only 414 lines. You can take a look at the code here :

 

https://drive.google.com/folderview?id=0Bxp8vLBG2ol3NjAtRmdjMDhlc0k&usp=sharing

 

At this point I am about 80% sure what I have created could become a viable production solution. The next steps I want to do are:

1. Finish the API
   
2. Test embedding Gwt React within an existing GWT Widget based application.
   
3. Build an API for Redux (https://github.com/reactjs/redux) and React Redux (https://github.com/reactjs/react-redux) which is becoming the de facto standard for the MC in MVC. I will probably re-implement todomvc using this. 

 

If I don’t hit any roadblocks, I will either publish to Github or make the source publicly available. I haven’t made my mind up on which approach I will take.

[Juan Pablo Gardella]

Thanks for sharing!, worth to try it

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

[DavidN]

Nice work,

I prefer React over Angular it is so much cleaner in design. I will certainly take a look at what you have produced, since me too I am trying to find solutions for a post GWT Widget/UiBinder world.

For one component that we have, which generates a form driven by XSchema's I already moved to using JsInterop and Elemental as the basis and I was suprised that it was actually easy to move away from Widgets. 

The combination with Lambda's makes the code actually much cleaner and now I can do proper unittesting since all the JsInterop stuff can be easily mocked.

[Paul Stockley]

Just a quick update. I am continuing to finish and refine the API. I got a basic Redux example working. Every sample I convert exposes other areas I need to work on to make the API as usable as possible. I will post some details on the challenges of converting something like React to Java. The good thing is I haven't hit any roadblocks so far.

I am only working on the project in the evenings so I will probably be another 3-4 weeks before I have something I can let you play with. I think I will post the code on my google drive to start with. Once the API settles down and I have some more time I will create a project on github.

[Thomas LAURENT]

Hi Paul, the sample code in Drive you shared isn't accessible anymore, any chance you could make that accessible again? Thanks

[Paul Stockley]

Sorry,

  I was just updating it to include samples for Redux that I just got working. The new link is https://drive.google.com/folderview?id=0Bxp8vLBG2ol3ZERCc3lHUEhKU2M&usp=sharing

[Debasish Padhy]

Hi Paul,

Is there a possibility of you sharing the codebase over github and put a license to it ? I have been working extensively with JsInterOp / TypeScript cross usage and find your  POC interesting and would love to contribute if its with an open license.

thanks,

Debasish

[Paul Stockley]

I plan on doing this. I have a couple of things I need to prove out then I will start working on setting up the Github projects. I will post a preview to my google drive in a couple of weeks so you can take a look while I work on setting up the projects on Github.

[James Horsley]

Great work Paul. Thanks for sharing.

--