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

References:
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/

Transcript

1. Precompilation preferences GWT example Ilja Hämäläinen Tallinn 2015
2. Agenda • Demo ◦ How it works. Quick overview. ◦ Myths. ◦ Development and debugging tools. • Advantages of precompilation • Future of GWT ◦ Is GWT dead? • Summary
3. Let’s make a new project from scratch and build it. Demo
4. 1. It requires a lot of time: in real-life projects it can take more than 20-30 minutes Compilation and building
5. 2. It requires a lot of hardware resources Compilation and building
7. Compilation and building 3. It uses hundreds of lines of code to write simple things
8. Is it good for comfy development? It is horrible!
10. Only full release workflow looks horrible. Actually… it is!
11. Let’s check the whole development flow.
12. #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)
13. Do you really need to re-build your code after each modification? #2 How to make development faster?
14. No, you don’t. There is DevMode for development.
15. 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.
17. 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.
19. 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.
21. Why do you need to write so much initial code? #3 Start new project.
22. • Maven archetypes • Few backbone-like frameworks You can use for your bootstrapping: PWT Putnami Web Toolkit
23. Let’s dig into our topic. Precompilation advantages
24. Chapter 1 Dependency Injection
25. Chapter 1: Dependency Injection How it works: class A class B new B();
26. Chapter 1: Dependency Injection How it works: class A class B DI
27. 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
28. Official term of the Dependency Injection in GWT. Deferred binding
29. <!-- 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
30. 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
31. 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)
32. Compile report
33. Chapter 2: meta-programming Generate code during building phase. Demo. We create drop-down list with all the timezones:
34. 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.
35. Chapter 3 PRC and Ajax
36. 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
37. Real world usage of RPC: 51% Chapter 3: RPC and Ajax by Vaadin
38. 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();
39. Real world usage of RequestBuilder: 8% Chapter 3: RPC and Ajax by Vaadin
40. 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); }
41. Real world usage of RestyGWT: 6% Chapter 3: RPC and Ajax by Vaadin
42. 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));
43. Do you want some more coding?
45. Chapter 4 Code splitting
46. Demo
47. 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
48. Chapter 5 Code optimisations
49. 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
50. Chapter 6 JSNI
51. 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); }-*/;
52. GWT now: is it dead? It is not dead at least until Vaadin exists.
53. • Errai • Vaadin • GXT • SmartGWT GWT forks
54. New logo (2015)
55. Conferences
56. GWT Material Design New trends http://gwt-material.appspot.com/
57. 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.
58. • 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:
59. Thank you! Questions?
60. 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