Google Developer Fest 2010

Editor's Notes

• #3: - So what is GWT.... - It’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’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’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’s what allows facilitates correct behavior within each browser. - You maintain a single Java codebase, and let GWT handle the browser quirks. - XHRs aren’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’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.
• #4: - So what is GWT.... - It’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’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’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’s what allows facilitates correct behavior within each browser. - You maintain a single Java codebase, and let GWT handle the browser quirks. - XHRs aren’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’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.
• #5: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #6: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #7: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #8: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #9: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #10: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #11: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #12: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #13: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #14: Alright, a quick demo to give you a baseline idea of what we’re talking about. Here I have a simple HelloWorld demo that has a textbox, a few labels, and a button. Upon button click, we’ll make an RPC call that returns the string we sent it plus some other stats regarding the app server it’s running on. All pretty straight forward stuff...right? Let’s set some breakpoints.... Change the defaults text values... Swap out the “Send” button with a demo button...what do I need to define to implement ClickHanlder?...ahh thanks Plugin Btw...note that we’re running in our browser of choice, a big improvement in 2.0
• #15: In the context of “Best Practices” I’m going to focus on these features today....
• #16: In the context of “Best Practices” I’m going to focus on these features today....
• #17: In the context of “Best Practices” I’m going to focus on these features today....
• #18: In the context of “Best Practices” I’m going to focus on these features today....
• #19: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #20: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #21: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #22: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #23: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #24: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #25: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #26: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #27: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #28: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #29: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #30: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #31: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #32: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #33: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #34: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #35: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #36: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #37: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #38: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #39: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #40: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #41: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #42: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #43: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #44: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #45: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #46: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #47: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #48: Now, if you just jump into writing a GWT application, as we’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’s going to become harder to test because it relies on GWTTestCase * What’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’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’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...
• #49: Now, if you just jump into writing a GWT application, as we’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’s going to become harder to test because it relies on GWTTestCase * What’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’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’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...
• #50: Now, if you just jump into writing a GWT application, as we’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’s going to become harder to test because it relies on GWTTestCase * What’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’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’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...
• #51: Now, if you just jump into writing a GWT application, as we’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’s going to become harder to test because it relies on GWTTestCase * What’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’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’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...
• #52: Now, if you just jump into writing a GWT application, as we’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’s going to become harder to test because it relies on GWTTestCase * What’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’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’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...
• #53: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #54: - Now that we’re all on the same page, let’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’ll tackle the largest first, how to reap the benefits of a MVP-based app when using GWT - In the process, we’ll explain how to integrate Declarative UIs (mainly how to hook up UI events) - With our architecture in place, we’ll follow-up with several optimization techniques * Bundling Resources * Code Splitting * And Prefetching RPCs
• #55: Now that we’ve tackled architecture and testing, it’s time to look at how we can optimize our application While there are a plethora of techniques, here are 3 that we’ve found useful when building large scale applications Resource bundling...
• #56: So let’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’re pulling them down from a server
• #57: We could choose to pull these images one at a time...
• #58: In which case we’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’ll request all of the images to select from Not bad, but there’s a large amount of HTTP overhead that we can remove from this flow Remember, your users aren’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
• #59: 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’t discriminate
• #60: 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’re paying for is the images that make up the decorator panel
• #61: But we can do better While we’ve managed to reduce HTTP overhead by bundling all of our resources, they’re in turn downloaded during application load When in reality we only need them when the user navigates to the select Contact icon page
• #65: Now, if you just jump into writing a GWT application, as we’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’s going to become harder to test because it relies on GWTTestCase * What’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’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’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...
• #66: Another way of approaching the problem is with the MVP pattern. A couple of points tough: - Be practical, don’t assume that every aspect of the MVP pattern is applicable to your application - Put the complex logic in your Presenters, and make them testable using vanilla JRE tests - Try to contain your widget code, minimize logic that requires GWTTestCase. - Don’t create views in your presenter’s ctors, doing so makes it impossible to mock them out for testing later - Make the Views as dumb as possible, widget/display code is ideally "correct by construction"
• #67: Another way of approaching the problem is with the MVP pattern. A couple of points tough: - Be practical, don’t assume that every aspect of the MVP pattern is applicable to your application - Put the complex logic in your Presenters, and make them testable using vanilla JRE tests - Try to contain your widget code, minimize logic that requires GWTTestCase. - Don’t create views in your presenter’s ctors, doing so makes it impossible to mock them out for testing later - Make the Views as dumb as possible, widget/display code is ideally "correct by construction"