Backend, app e internet das coisas com NodeJS no Google Cloud Platform
Building Web Apps Sanely - EclipseCon 2010
1. Google Web Toolkit
Building Web Apps Sanely
Chris Ramsdale
Developer Relations, Google
2. Agenda
• Overview
• Demo
• Deeper dive
• Optimizations for developers
• Optimizations for users
• Testing and deployment
3. 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
4. The GWT Family
GWT SDK Google Plugin Speed Tracer
For Eclipse
9. 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 browser
10. 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
11. 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
13. Nothing against them, but...
Foo Player not available for
your device
We restrict use of
technologies required by
products like Foo Player...
14. 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
15. 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%
16. 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/
17. 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;
}
18. 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
29. 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
22
30. 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
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");
}
}
24
32. Generators Provide the power behind your
GWT app
Automate away boilerplate code
Foundation for permutations
25
33. Use Case #1: GWT RPCs
Typical Ajax call
Serialization Serialization
Code Code
Client XHR Server
26
34. Use Case #1: GWT RPCs
GWT-enabled Ajax
Serialization Serialization
GWT Proxy
GWT Proxy
Code Code
Client XHR Server
27
35. Use Case #1: GWT RPCs
Goals:
• Serialization code begone
• RPCs like theyʼre meant to be -
interface methods
• Make it fast to boot
28
36. Use Case #1: GWT RPCs
You write code that looks like this:
@RemoteServiceRelativePath("suggest")
public interface SuggestService extends RemoteService {
String getSuggestions(String str) throws IllegalArgumentException;
}
29
37. Use Case #2: Creating UIs
Goals:
• Utilize common dev practices
• Minimize boilerplate code
interface methods
• Remove a few other frustrations
along the way
30
38. 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
39. 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");
}
}
32
41. 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");
}
}
34
46. Question: What’s up with those compile times?
Answer: ...and optimizations
38
47. Permutations
Each *.cache.html is a
browser and language
specific version of the
app
48. Permutations
They’re a matrix, and will
grow fast
49. GWT Tips and Tricks
Reduce permutations, reduce compile time
EclipseCon.gwt.xml
<extend-property name="locale" values="en_US" />
<set-property name="user.agent" value="gecko" />
Now a single
permutation targeting
US versions of English
in Firefox browsers
50. GWT Tips and Tricks
Reduce optimizations, reduce compile time
-draftCompile
• Skip all optimizations
• Development only
51. GWT Tips and Tricks
Reduce optimizations, reduce compile time
-draftCompile
• Skip all optimizations
• Development only
Why worry about compiling at all?
58. Resource Bundling
One at a time
Image image = new Image("images/image1.gif");
image.setHeight("50px");
image.setWidth("50px");
imagesPanel.add(image);
60. 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();
...
}
65. 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
56
66. Testing
• Can be run as vanilla JRE tests
• Can be run as GwtTestCase(s)
- Requires a headless browser
- 15 sec vs 15 ms runtime
- Rely on design patterns such as MVP
69. Google Plugin for Eclipse 1.3
• Configurable WAR directory
• Transparent program and VM args
• Minor bug fixes
70. Takeaways
1. Large Javascript projects can get messy
2. Browsers can be a bit quirky at times
3. Web developers haven’t always had the best
tools
4. Ajax tends to require a fair amount of
boilerplate code
5. With GWT, you can forget 1-4 and focus on the
next killer feature
- Good morning everyone. My name is Chris Ramsdale and I work with the GWT team here in Atlanta.
- Today I want to discuss some of the techniques, patterns, and tricks that we and other internal Google teams find useful when building large scale applications.
- Before we get started, how many of you have used GWT before?
- How many have shipped a product of project with GWT?
- Great, so to make sure we&#x2019;re on the same page, I&#x2019;m going to take a few minutes to give an overview of GWT...which will also give me a chance talk about some of the new 2.0 features
- From there well jump right into the meat of this presentation.
- So what is GWT....
- It&#x2019;s a toolkit and not a framework. With GWT you can pick an choose to use certain tools that we offer without buying into all of them.
- Maybe you want to use GWT&#x2019;s RPC mechanism alongside your existing Javascript, or you may want to write your frontend in GWT and leave your server-side code as it exists today.
- It&#x2019;s all completely doable. In fact the only thing you have to buy into, is writing Web Apps in Java.
- Which leads me to point #2, Code in Java...run as Javascript. At the heart of GWT is a Java to Javascript compiler that (besides producing Javascript) optimizes and obfuscates this Javascript
- Separate Javascript is produced for each browser, we refer to these as permutations, and it&#x2019;s what allows facilitates correct behavior within each browser.
- You maintain a single Java codebase, and let GWT handle the browser quirks.
- XHRs aren&#x2019;t rocket science, by the code to handle them can get messy. RPCs in a GWT app look like nothing more than a method call on a class, and on top of that GWT&#x2019;s RPC generator helps optimize the serialization of objects over the wire.
- Finally, we eat generous amounts of our own dogfood. As mentioned before, this presentation is largely about what other teams learned over the past year. Wave and Ad Words are two products that, not only challenged browser capabilities, but GWT capabilities as well.
- So what is GWT....
- It&#x2019;s a toolkit and not a framework. With GWT you can pick an choose to use certain tools that we offer without buying into all of them.
- Maybe you want to use GWT&#x2019;s RPC mechanism alongside your existing Javascript, or you may want to write your frontend in GWT and leave your server-side code as it exists today.
- It&#x2019;s all completely doable. In fact the only thing you have to buy into, is writing Web Apps in Java.
- Which leads me to point #2, Code in Java...run as Javascript. At the heart of GWT is a Java to Javascript compiler that (besides producing Javascript) optimizes and obfuscates this Javascript
- Separate Javascript is produced for each browser, we refer to these as permutations, and it&#x2019;s what allows facilitates correct behavior within each browser.
- You maintain a single Java codebase, and let GWT handle the browser quirks.
- XHRs aren&#x2019;t rocket science, by the code to handle them can get messy. RPCs in a GWT app look like nothing more than a method call on a class, and on top of that GWT&#x2019;s RPC generator helps optimize the serialization of objects over the wire.
- Finally, we eat generous amounts of our own dogfood. As mentioned before, this presentation is largely about what other teams learned over the past year. Wave and Ad Words are two products that, not only challenged browser capabilities, but GWT capabilities as well.
Alright, a quick demo to give you a baseline idea of what we&#x2019;re talking about.
Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button.
Upon button click, we&#x2019;ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it&#x2019;s running on.
All pretty straight forward stuff...right?
Let&#x2019;s set some breakpoints....
Change the defaults text values...
Swap out the &#x201C;Send&#x201D; button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin
Btw...note that we&#x2019;re running in our browser of choice, a big improvement in 2.0
Alright, a quick demo to give you a baseline idea of what we&#x2019;re talking about.
Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button.
Upon button click, we&#x2019;ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it&#x2019;s running on.
All pretty straight forward stuff...right?
Let&#x2019;s set some breakpoints....
Change the defaults text values...
Swap out the &#x201C;Send&#x201D; button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin
Btw...note that we&#x2019;re running in our browser of choice, a big improvement in 2.0
Alright, a quick demo to give you a baseline idea of what we&#x2019;re talking about.
Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button.
Upon button click, we&#x2019;ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it&#x2019;s running on.
All pretty straight forward stuff...right?
Let&#x2019;s set some breakpoints....
Change the defaults text values...
Swap out the &#x201C;Send&#x201D; button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin
Btw...note that we&#x2019;re running in our browser of choice, a big improvement in 2.0
Alright, a quick demo to give you a baseline idea of what we&#x2019;re talking about.
Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button.
Upon button click, we&#x2019;ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it&#x2019;s running on.
All pretty straight forward stuff...right?
Let&#x2019;s set some breakpoints....
Change the defaults text values...
Swap out the &#x201C;Send&#x201D; button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin
Btw...note that we&#x2019;re running in our browser of choice, a big improvement in 2.0
Alright, a quick demo to give you a baseline idea of what we&#x2019;re talking about.
Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button.
Upon button click, we&#x2019;ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it&#x2019;s running on.
All pretty straight forward stuff...right?
Let&#x2019;s set some breakpoints....
Change the defaults text values...
Swap out the &#x201C;Send&#x201D; button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin
Btw...note that we&#x2019;re running in our browser of choice, a big improvement in 2.0
Alright, a quick demo to give you a baseline idea of what we&#x2019;re talking about.
Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button.
Upon button click, we&#x2019;ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it&#x2019;s running on.
All pretty straight forward stuff...right?
Let&#x2019;s set some breakpoints....
Change the defaults text values...
Swap out the &#x201C;Send&#x201D; button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin
Btw...note that we&#x2019;re running in our browser of choice, a big improvement in 2.0
Alright, a quick demo to give you a baseline idea of what we&#x2019;re talking about.
Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button.
Upon button click, we&#x2019;ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it&#x2019;s running on.
All pretty straight forward stuff...right?
Let&#x2019;s set some breakpoints....
Change the defaults text values...
Swap out the &#x201C;Send&#x201D; button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin
Btw...note that we&#x2019;re running in our browser of choice, a big improvement in 2.0
Alright, a quick demo to give you a baseline idea of what we&#x2019;re talking about.
Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button.
Upon button click, we&#x2019;ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it&#x2019;s running on.
All pretty straight forward stuff...right?
Let&#x2019;s set some breakpoints....
Change the defaults text values...
Swap out the &#x201C;Send&#x201D; button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin
Btw...note that we&#x2019;re running in our browser of choice, a big improvement in 2.0
In the context of &#x201C;Best Practices&#x201D; I&#x2019;m going to focus on these features today....
In the context of &#x201C;Best Practices&#x201D; I&#x2019;m going to focus on these features today....
In the context of &#x201C;Best Practices&#x201D; I&#x2019;m going to focus on these features today....
In the context of &#x201C;Best Practices&#x201D; I&#x2019;m going to focus on these features today....
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
Now, if you just jump into writing a GWT application, as we&#x2019;ve done a fair number of times, what's the most obvious approach?
- Subclass composite or complex panel or whatever, run the app, debug with developer mode, etc.
- First of all, as your application grows, it&#x2019;s going to become harder to test because it relies on GWTTestCase
* What&#x2019;s GWTTestCase you say? Good question. GWTTestCase wraps a JUnit test case and runs your tests within a headless browser. Which is really cool because you can easily test code that would require some testing harness, selenium integration, etc... That said, it does take longer (much longer) to execute these tests because...well...you&#x2019;re starting large parts of your application within a browser.
* And any test that requires a DOM to perform layout, amongst other tasks, is going to require a GWTTestCase. Put another way, GWT Widgets require you to test in the browser.
- Secondly, mocks are not encouraged. Tools like EasyMock don&#x2019;t play well within a GWTTestCase.
- You increase the chance that you have platform independent and dependent code intertwined, which limits code reuse. Use this for context...we want to create an app that will run in both desktop and mobile browsers. The one glaring differences in these platforms is their UI, so it makes sense to limit the amount of code we place here.
- Finally, you end up with dependency spaghetti. Your UI code knows about your DTOs, can make some RPCs, has all of the application logic built in to handle UI events, etc...
Now, if you just jump into writing a GWT application, as we&#x2019;ve done a fair number of times, what's the most obvious approach?
- Subclass composite or complex panel or whatever, run the app, debug with developer mode, etc.
- First of all, as your application grows, it&#x2019;s going to become harder to test because it relies on GWTTestCase
* What&#x2019;s GWTTestCase you say? Good question. GWTTestCase wraps a JUnit test case and runs your tests within a headless browser. Which is really cool because you can easily test code that would require some testing harness, selenium integration, etc... That said, it does take longer (much longer) to execute these tests because...well...you&#x2019;re starting large parts of your application within a browser.
* And any test that requires a DOM to perform layout, amongst other tasks, is going to require a GWTTestCase. Put another way, GWT Widgets require you to test in the browser.
- Secondly, mocks are not encouraged. Tools like EasyMock don&#x2019;t play well within a GWTTestCase.
- You increase the chance that you have platform independent and dependent code intertwined, which limits code reuse. Use this for context...we want to create an app that will run in both desktop and mobile browsers. The one glaring differences in these platforms is their UI, so it makes sense to limit the amount of code we place here.
- Finally, you end up with dependency spaghetti. Your UI code knows about your DTOs, can make some RPCs, has all of the application logic built in to handle UI events, etc...
Now, if you just jump into writing a GWT application, as we&#x2019;ve done a fair number of times, what's the most obvious approach?
- Subclass composite or complex panel or whatever, run the app, debug with developer mode, etc.
- First of all, as your application grows, it&#x2019;s going to become harder to test because it relies on GWTTestCase
* What&#x2019;s GWTTestCase you say? Good question. GWTTestCase wraps a JUnit test case and runs your tests within a headless browser. Which is really cool because you can easily test code that would require some testing harness, selenium integration, etc... That said, it does take longer (much longer) to execute these tests because...well...you&#x2019;re starting large parts of your application within a browser.
* And any test that requires a DOM to perform layout, amongst other tasks, is going to require a GWTTestCase. Put another way, GWT Widgets require you to test in the browser.
- Secondly, mocks are not encouraged. Tools like EasyMock don&#x2019;t play well within a GWTTestCase.
- You increase the chance that you have platform independent and dependent code intertwined, which limits code reuse. Use this for context...we want to create an app that will run in both desktop and mobile browsers. The one glaring differences in these platforms is their UI, so it makes sense to limit the amount of code we place here.
- Finally, you end up with dependency spaghetti. Your UI code knows about your DTOs, can make some RPCs, has all of the application logic built in to handle UI events, etc...
Now, if you just jump into writing a GWT application, as we&#x2019;ve done a fair number of times, what's the most obvious approach?
- Subclass composite or complex panel or whatever, run the app, debug with developer mode, etc.
- First of all, as your application grows, it&#x2019;s going to become harder to test because it relies on GWTTestCase
* What&#x2019;s GWTTestCase you say? Good question. GWTTestCase wraps a JUnit test case and runs your tests within a headless browser. Which is really cool because you can easily test code that would require some testing harness, selenium integration, etc... That said, it does take longer (much longer) to execute these tests because...well...you&#x2019;re starting large parts of your application within a browser.
* And any test that requires a DOM to perform layout, amongst other tasks, is going to require a GWTTestCase. Put another way, GWT Widgets require you to test in the browser.
- Secondly, mocks are not encouraged. Tools like EasyMock don&#x2019;t play well within a GWTTestCase.
- You increase the chance that you have platform independent and dependent code intertwined, which limits code reuse. Use this for context...we want to create an app that will run in both desktop and mobile browsers. The one glaring differences in these platforms is their UI, so it makes sense to limit the amount of code we place here.
- Finally, you end up with dependency spaghetti. Your UI code knows about your DTOs, can make some RPCs, has all of the application logic built in to handle UI events, etc...
Now, if you just jump into writing a GWT application, as we&#x2019;ve done a fair number of times, what's the most obvious approach?
- Subclass composite or complex panel or whatever, run the app, debug with developer mode, etc.
- First of all, as your application grows, it&#x2019;s going to become harder to test because it relies on GWTTestCase
* What&#x2019;s GWTTestCase you say? Good question. GWTTestCase wraps a JUnit test case and runs your tests within a headless browser. Which is really cool because you can easily test code that would require some testing harness, selenium integration, etc... That said, it does take longer (much longer) to execute these tests because...well...you&#x2019;re starting large parts of your application within a browser.
* And any test that requires a DOM to perform layout, amongst other tasks, is going to require a GWTTestCase. Put another way, GWT Widgets require you to test in the browser.
- Secondly, mocks are not encouraged. Tools like EasyMock don&#x2019;t play well within a GWTTestCase.
- You increase the chance that you have platform independent and dependent code intertwined, which limits code reuse. Use this for context...we want to create an app that will run in both desktop and mobile browsers. The one glaring differences in these platforms is their UI, so it makes sense to limit the amount of code we place here.
- Finally, you end up with dependency spaghetti. Your UI code knows about your DTOs, can make some RPCs, has all of the application logic built in to handle UI events, etc...
Now, if you just jump into writing a GWT application, as we&#x2019;ve done a fair number of times, what's the most obvious approach?
- Subclass composite or complex panel or whatever, run the app, debug with developer mode, etc.
- First of all, as your application grows, it&#x2019;s going to become harder to test because it relies on GWTTestCase
* What&#x2019;s GWTTestCase you say? Good question. GWTTestCase wraps a JUnit test case and runs your tests within a headless browser. Which is really cool because you can easily test code that would require some testing harness, selenium integration, etc... That said, it does take longer (much longer) to execute these tests because...well...you&#x2019;re starting large parts of your application within a browser.
* And any test that requires a DOM to perform layout, amongst other tasks, is going to require a GWTTestCase. Put another way, GWT Widgets require you to test in the browser.
- Secondly, mocks are not encouraged. Tools like EasyMock don&#x2019;t play well within a GWTTestCase.
- You increase the chance that you have platform independent and dependent code intertwined, which limits code reuse. Use this for context...we want to create an app that will run in both desktop and mobile browsers. The one glaring differences in these platforms is their UI, so it makes sense to limit the amount of code we place here.
- Finally, you end up with dependency spaghetti. Your UI code knows about your DTOs, can make some RPCs, has all of the application logic built in to handle UI events, etc...
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
- Now that we&#x2019;re all on the same page, let&#x2019;s jump into the discussion of GWT Best Practices
- Not that this is a comprehensive list, but these are the items that have been top of mind for a few months now
- We&#x2019;ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT
- In the process, we&#x2019;ll explain how to integrate Declarative UIs (mainly how to hook up UI events)
- With our architecture in place, we&#x2019;ll follow-up with several optimization techniques
* Bundling Resources
* Code Splitting
* And Prefetching RPCs
Now that we&#x2019;ve tackled architecture and testing, it&#x2019;s time to look at how we can optimize our application
While there are a plethora of techniques, here are 3 that we&#x2019;ve found useful when building large scale applications
Resource bundling...
So let&#x2019;s assume we want to allow users to associate icons with their contacts...
Yes, typically this would be facilitated by users selecting icons or images from disk...but bear with me for the sake of this example, and assume we&#x2019;re pulling them down from a server
We could choose to pull these images one at a time...
In which case we&#x2019;d end up with a request pattern that looks like this
Fetch the initial html page, followed-up by a request for our nocache.js file
And then at some point in time we&#x2019;ll request all of the images to select from
Not bad, but there&#x2019;s a large amount of HTTP overhead that we can remove from this flow
Remember, your users aren&#x2019;t always right next to your data center...even worse, more and more of them will be on mobile networks
3G networks are fast, but drop off points can be frequent and the cost of building that connection back up can be more than noticeable
Instead of pulling the images one at a time, we can define a Resources interface that overlays methods on top of our images
The ClientBundle generator will then
- Pull the necessary files together
- Generate code that allows us to access each accordingly
Think of it as spriting for all file types...we don&#x2019;t discriminate
You can see that our images are now bundled along with our initial JS call
And the subsequent call to display the images has almost zero overhead...basically all we&#x2019;re paying for is the images that make up the decorator panel
But we can do better
While we&#x2019;ve managed to reduce HTTP overhead by bundling all of our resources, they&#x2019;re in turn downloaded during application load
When in reality we only need them when the user navigates to the select Contact icon page
In case any of you haven&#x2019;t seen Google Wave yet, I&#x2019;ll give you the 10 sec tour
The important point here, is that there is large amount of UI, data, and logic taking place within this app
And as the app grew, so did there initial start time