Deploying Cloud Native Red Team Infrastructure with Kubernetes, Istio and Envoy
JBoss World 2010
1.
2. Google Web Toolkit
0-60 in no time flat
Chris Ramsdale
Developer Relations, Google
new java.util.Date();
3. Agenda
• Overview
• Demo
• Deeper dive
• Optimizations for developers
• Optimizations for users
• Intro to GWT & MVP
4. From 25,000 feet
• Development toolkit, not a framework
• Code in Java, run as Javascript
• One codebase, any browser
• Makes Ajax a piece of cake...and faster
• Used within many Google products, including
Google Wave and Ad Words
5. The GWT Family
GWT SDK Google Plugin Speed Tracer
For Eclipse
10. Focus on the users
Our users - developers
– Leverage existing IDEs and tools
– Minimize refresh time between codes changes
– Automate where possible
Your users - customers
– Minimize startup time
– Make it a comfortable experience
– Allow them to select the browse
13. Different Goals
Developers Customers
• Next killer feature • Make it fast
• Making it look good • ...oh, and don’t charge
my credit card twice
• Code refactoring
14. Different Goals
Developers Customers
• Next killer feature • Make it fast
• Making it look good • ...oh, and don’t charge
my credit card twice
• Code refactoring
16. Nothing against them, but...
Foo Player not available for
your device
We restrict use of
technologies required by
products like Foo Player...
17. Quirkiness
Firefox Webkit (Safari) Opera IE
Typical portable 2876 ms 1276 ms 2053 ms 4078 ms
setInnerText()
textContent=... - 908 ms 1386 ms -
innerText=... 2477 ms 918 ms 1520 ms 2469 ms
DOM manipulation 7148 ms 1997 ms 4836 ms 14800 ms
18. Quirkiness
Firefox Webkit (Safari) Opera IE
Typical portable 2876 ms 1276 ms 2053 ms 4078 ms
setInnerText()
textContent=... - 908 ms 1386 ms -
innerText=... 2477 ms 918 ms 1520 ms 2469 ms
DOM manipulation 7148 ms 1997 ms 4836 ms 14800 ms
Improvement 14% 29% 32% 39%
19. Quirkiness
Firefox Webkit (Safari) Opera IE
Typical portable 2876 ms 1276 ms 2053 ms 4078 ms
setInnerText()
textContent=... - 908 ms 1386 ms -
innerText=... 2477 ms 918 ms 1520 ms 2469 ms
DOM manipulation 7148 ms 1997 ms 4836 ms 14800 ms
Improvement 14% 29% 32% 39%
http://quirksmode.org/blog/
20. Can you find the bug?
function getMax(values) {
var maximum = values[0];
for (var i = 0; i < values.length; ++i) {
if (values[i] > maximum) {
maxinum = values[i];
}
}
return maximum;
}
21. Can you find the bug?
function getMax(values) {
var maximum = values[0];
for (var i = 0; i < values.length; ++i) {
if (values[i] > maximum) {
maxinum = values[i];
}
}
return maximum;
}
Hint: Javascript is a dynamic language
23. Demo time
To see this in action, letʼs:
• Create a new web app
• Debug within the browser
• Update, refresh, run
• Deploy to JBoss Enterprise Application Platform
14
30. From Eclipse to your browser
Eclipse
Browser Plugins
package com.google.gwt.samples.eclipsecon.client;
TCP
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
Code
public class EclipseCon implements EntryPoint {
Server
public void onModuleLoad() {
Window.alert("foo");
}
HTTP
}
Jetty
Server
21
31. From Eclipse to deployment
Your code... Generators Translators Linkers
package com.google.gwt.samples.eclipsecon.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
public class EclipseCon implements EntryPoint {
public void onModuleLoad() {
Window.alert("foo");
}
}
22
32. From Eclipse to deployment
Your code... Generators Translators Linkers
package com.google.gwt.samples.eclipsecon.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
public class EclipseCon implements EntryPoint {
public void onModuleLoad() {
Window.alert("foo");
}
}
23
33. Provide the power behind your
GWT app
Automate away boilerplate code
Foundation for permutations
24
34. Use Case: GWT RPCs
Typical Ajax call
Serialization Serialization
Code Code
Client XHR Server
25
35. Use Case: GWT RPCs
GWT-enabled Ajax
Serialization Serialization
GWT Proxy
GWT Proxy
Code Code
Client XHR Server
26
36. Use Case: GWT RPCs
Goals:
– Serialization code begone
– RPCs like they’re meant to be - interface
methods
– Make it fast to boot
37. Use Case: GWT RPCs
You write code that looks like this:
@RemoteServiceRelativePath("suggest")
public interface SuggestService extends RemoteService {
String getSuggestions(String str) throws IllegalArgumentException;
}
28
38. Behind the scenes
• Eclipse plugin creates the scaffolding
• GWT’s RPC generator creates the
implementation
39. Use Case #2: Creating UIs
Goals:
– Utilize common dev practices
– Minimize boilerplate code interface methods
– Remove a few other frustrations along the way
40. Use Case #2: Creating UIs
You write code that looks like this:
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.contactsViewButtonHPanel {
margin: 5px 0px 0x 5px;
}
</ui:style>
<g:HorizontalPanel addStyleNames="{style.contactsViewButtonHPanel}">
<g:Button ui:field="addButton">Add</g:Button>
<g:Button ui:field="deleteButton">Delete</g:Button>
</g:HorizontalPanel>
</ui:UiBinder>
31
41. Behind the scenes
• Eclipse plugin creates the scaffolding
• GWT’s UiBinder creates the implementation
42. From Eclipse to your browser
Your code... Generators Translators Linkers
package com.google.gwt.samples.eclipsecon.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
public class EclipseCon implements EntryPoint {
public void onModuleLoad() {
Window.alert("foo");
}
}
33
44. From Eclipse to your browser
Your code... Generators Translators Linkers
package com.google.gwt.samples.eclipsecon.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
@SuppressWarnings("unused")
public class EclipseCon implements EntryPoint {
public void onModuleLoad() {
Window.alert("foo");
}
}
35
46. GWT Tips and Tricks
-gen will output a copy of the
generated classes
37
47. GWT Tips and Tricks
Reduce optimizations, reduce compile
time
– -draftCompile
• Skip all optimizations
• Development only
Why worry about compiling at all?
48. A more efficient SDLC
Refresh Does it work? Yes Compile
No
Develop Deploy
53. Resource Bundling
One at a time
Image image = new Image("images/image1.gif");
image.setHeight("50px");
image.setWidth("50px");
imagesPanel.add(image);
55. Resource Bundling
All at once
public interface Resources extends ClientBundle {
public static final Resources INSTANCE = GWT.create(Resources.class);
@Source("Contacts.css")
public ContactsCss contactsCss();
@Source("images0.gif")
public ImageResource image0();
@Source("images1.gif")
public ImageResource image1();
...
}
60. Real world results - Google Wave
1500
1400 KB
Size of Initial JavaScript Download (KB)
1125
750
7x Decrease In
Initial Download Size
375
200 KB
0
26-Nov 29-Apr 18-Jun 28-Jul 12-Sep 27-Oct 24-Dec 16-Mar
61. Creating GWT apps - “Direct” approach
Write a bunch of widgets with self-contained
logic
Problems:
• Hard to test - need GWTTestCase
• Mocks not encouraged - harder to write smaller tests
• Platform specific UI code - limits code reuse
• Too many dependencies - difficult to optimize
62.
63. Creating GWT apps - MVP approach
Cast:
– Model - DTOs, and business logic
– View - The display
– Presenter - Application logic
Goals:
– Be practical
– Avoid rigid patterns
– Put the complex logic in your Presenters
– Put the widget code in your Views
