Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Precompilation preferences in example of GWT

Precompilation preferences in example of GWT

The presentation from DevClub meetup at 26.03.2015, Tallinn, Estonia. Video (in Russian): https://www.youtube.com/watch?v=lr0N5kyHny8

GWTP: https://gwtp.arcbees.com/
PWT (Putnami Web Toolkit): http://pwt.putnami.org/
Resty-GWT: http://resty-gwt.github.io/
Requestor library: https://github.com/reinert/requestor
Closure Stylesheets (as part of GCC): https://code.google.com/p/closure-stylesheets/
Errai: http://erraiframework.org/

Ilja Hämäläinen

March 29, 2015

More Decks by Ilja Hämäläinen

Other Decks in Programming


  1. Agenda • Demo ◦ How it works. Quick overview. ◦

    Myths. ◦ Development and debugging tools. • Advantages of precompilation • Future of GWT ◦ Is GWT dead? • Summary
  2. 1. It requires a lot of time: in real-life projects

    it can take more than 20-30 minutes Compilation and building
  3. #1 How to make compilation faster? • Hardware ◦ Uses

    a lot of CPU. Build in a cloud. • Restrict amount of permutations ◦ Compiler makes a lot of copies (permutations). Compile only those that you really need. <set-property name="user.agent" value="gecko1_8" /> (this will force generation only for Firefox)
  4. Do you really need to re-build your code after each

    modification? #2 How to make development faster?
  5. Dev Mode in GWT 1 Two browsers a. Browser runs

    Java code “as is” (hosted browser). b. Second one is used to test already compiled JavaScript code.
  6. Dev Mode in GWT 2 Dev mode a. Dev mode

    that runs on the background and compiles code on- demand (like a hot-swap). b. Requires browser plugin. c. Will be deprecated in GWT 3.
  7. Dev Mode in GWT 3 Super dev mode a. Does

    not require any browser plugin. b. Can compile (incrementally) right from browser. c. Today all the browsers support source maps.
  8. • Maven archetypes • Few backbone-like frameworks You can use

    for your bootstrapping: PWT Putnami Web Toolkit
  9. Chapter 1: Dependency Injection How it works: class A interface

    IB DI Impl 1 Impl 2 Impl 3 Impl 4 js file js file js file js file ← permutations
  10. <!-- Roles --> <define-property name ="role" values="user, admin, moderator" />

    <replace-with class="eu.devclub.modules.SettingsAdmin" > <when-type-is class="eu.devclub.modules.ISettings" /> <any> <when-property-is name="role" value="admin"/> <when-property-is name="role" value="moderator"/> </any> </replace-with> 1. When role is admin or moderator... 2. ... replace any occurrence of ISettings... 3. ...with SettingsAdmin Set rules in a *.gwt.xml file
  11. Dependency Injection • Generates all the variations ◦ Creation of

    an object happens during the compilation phase rather than during runtime • Security ◦ Only allowed code comes to browser from server • May look like server side DI ◦ Ginjector (GIN) framework looks like Google Guice • Performance ◦ Browser uses only code that is needed
  12. Let’s say we generate code for: • 5 browsers •

    2 languages • 2 roles (Admin and User) Permutations 5 x 2 x 2 = 20 permutations (20 versions of your application)
  13. Chapter 2: Code generation • Any library/framework ◦ Compilation is

    running on internal server rather than in browser. Thus, you are free to use any Java library or framework. • Performance on runtime ◦ Many dynamic functionalities may be pre-executed during compilation. • Base for many other features ◦ DI, RPC are fully based on code generation.
  14. Choice 1: RPC You need to create remote interfaces, compiler

    will generate a code for you. Chapter 3: RPC and Ajax client side server side client code Remote Service Interface Interface Remote Service stub will be generated
  15. Choice 2.1: the old-school Ajax request. You can build JS-like

    Ajax request using RequestBuilder. Chapter 3: RPC and Ajax /* Original GWT RequestBuilder approach */ RequestBuilder rb = new RequestBuilder(RequestBuilder.GET, "http://httpbin.org/ip"); rb.setCallback(new RequestCallback() { @Override public void onResponseReceived(Request request, Response response) { ... } @Override public void onError(Request request, Throwable exception) { ... } }); rb.send();
  16. Chapter 3: RPC and Ajax Choice 3: resty-gwt Uses classical

    JAX-RS and client. client: PizzaService service = GWT.create(PizzaService.class); service.order(order, new MethodCallback<OrderConfirmation>() { public void onSuccess(Method method, OrderConfirmation response) { … } public void onFailure(Method method, Throwable exception) { … } }); server: public interface PizzaService extends RestService { @POST @Path("pizzaorders") public void order(PizzaOrder request, MethodCallback<OrderConfirmation> callback); }
  17. Choice 4: additional 3rd-party libraries For example, the Requestor library

    which was released in January 2015… Chapter 3: RPC and Ajax requestor .req("http://httpbin.org/ip") .get(String.class) .done(new DoneCallback<String>() { public void onDone(String result) { Window.alert(result); } }); … or using Java8 syntax requestor .req("http://httpbin.org/ip") .get(String.class) .done(r -> Window.alert(r));
  18. Chapter 4: Code splitting 1. Analyzes code ◦ Makes sure

    that extracted code is not called from anywhere. 2. Moves the splitted code out ◦ After that it can be loaded asynchronously 3. Loads chunks of code on demand ◦ Extracted code is not loaded immediately, but when it is necessary 4. Initial loading speed improving ◦ When user loads an application, the initial time may be improved significantly Demo
  19. Chapter 5: Code optimisations ◦ 10 levels of optimisation ◦

    eliminates dead code ◦ in-line simple methods ◦ optimises strings ◦ replaces Enum calls with values ◦ checks params in a method ◦ removes unnecessary code, like super() ◦ set of normalisation rules - replaces common code with more optimal ◦ -draftCompile flag to omit all the optimisations
  20. JSNI - JavaScript Native Interface. Mix handwritten JavaScript into your

    Java source code. Chapter 7: JavaScript Native Interface public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/;
  21. GWT now: is it dead? It is not dead at

    least until Vaadin exists.
  22. It is JAVA! 1. IDEs ◦ Eclipse and Intellij give

    more options for refactoring, code suggestions and more. 2. Building tools ◦ Maven, Gradle. 3. Distributing ◦ All GWT libraries are distributed as usual JAVA-application - through Central Maven repository or internal repository (Atrifactory, Nexus). ◦ JavaDocs are useful for libraries. ◦ Source code is downloaded by default. 4. Shared code ◦ Constants, properties. ◦ Simple classes (like DTOs). ◦ Utilities.
  23. • Small UI-widgets and decorations (sliders, effects and etc) •

    Small projects • Backenders and frontenders are separate divisions • Consume 3rd party API using JSON • UI Designer should know how to run a project GWT is bad for: • Highly optimised code • Static checking • Shared code on Java • Multi-team development in UI • Java environment (tools, libs, frameworks), ideal support from IDE • Developers work both on server and client side • Traffic reducing GWT is good for:
  24. GWTP: https://gwtp.arcbees.com/ PWT (Putnami Web Toolkit): http://pwt.putnami.org/ Resty-GWT: http://resty-gwt.github.io/ Requestor

    library: https://github.com/reinert/requestor Closure Stylesheets (as part of GCC): https://code.google.com/p/closure-stylesheets/ Errai: http://erraiframework.org/ References