1 / 338

Seminar : Rich Java Client with GWT, Ext JS and GXT Presenter: Yoav Aharoni, Chief Architect

Seminar : Rich Java Client with GWT, Ext JS and GXT Presenter: Yoav Aharoni, Chief Architect. Agenda. What is RIA? RIA Solutions Overview Focus on Leading RIA JavaScript Solution Ext-JS in a nutshell GWT – The Java Advantage What is it, Why it is good for us, How to use it

alice
Download Presentation

Seminar : Rich Java Client with GWT, Ext JS and GXT Presenter: Yoav Aharoni, Chief Architect

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Seminar: Rich Java Client with GWT, Ext JS and GXT Presenter: Yoav Aharoni, Chief Architect

  2. Agenda • What is RIA? • RIA Solutions Overview • Focus on Leading RIA JavaScript Solution • Ext-JS in a nutshell • GWT – The Java Advantage • What is it, Why it is good for us, How to use it • GXT – Great Library for GWT • Creating beautiful RIAs with GWT & GXT

  3. Agenda • Best Practices & Design Patterns • Alternative Solutions • Other 3rd Party Libraries & Frameworks • Recap

  4. RIA Let’s get started...

  5. An HTMLTale

  6. Evolution Tim Berners-Lee HTML 90

  7. Evolution 1990 HTML5 GWT LESS SASS Ajax CSS Libs JS HTML JS Libs CSS 90

  8. Then, an idea...

  9. And that’s were things went wrong...

  10. Because HTML wasn’t designed for it

  11. Heck, developers aren’t designed for it...

  12. So what’s bothering us with HTML/CSS/JS development?

  13. What is RIA • Type of application • Not a framework • Specs • Responsive • Desktop-like • Not a website • Usually runs on the client (plugins / js)

  14. Web Development Issues Stuff We Can’t Do Hard to Develop • Play Media: Video, Audio • Draw: 2D, 3D • Store Local Data • Bi-directional Client-Server Communication • Concurrent JavaScript • More... • JavaScript: • Dynamic • Prototype based OO • Lack of Tools • HTML/CSS: • Quirks • Hacks • Boilerplate code

  15. Evolution LESS Silverlight SASS JavaFX Ajax CSS Libs Flash Flex Applets JS HTML JS Libs CSS

  16. Evolution Better Specs, Better Browsers HTML5 GWT LESS Silverlight SASS JavaFX Ajax CSS Libs Flash Flex Applets W3C JS HTML JS Libs CSS

  17. GWT in a Nutshell HTML CSS JavaScript

  18. Web Development Sore Spots • Cross Browser Compatibility Issues • JavaScript: • Dynamic • Prototype based OO • Lack of tools • Managing 3rd party dependencies and a large code base is an issue. • HTML/CSS: • Quirks • Hacks • Boilerplate code

  19. GWT The Java Advantage

  20. GWT in a Nutshell Java GWT Compiler JavaScript

  21. GWT in a Nutshell HTML CSS JavaScript

  22. GWT Benefits • Develop using Java. • Using YOUR IDE. • Java tools: refactoring, debugging, profiling, etc… • Detect error in compile-time rather than runtime. • JUnit integration. • Good holistic development environment. • Cross browser compatible. • Runs natively on the browser, no plugins needed.

  23. GWT Benefits • Built for speed, lots of optimizations. • Has everything a framework needs. • Dynamic, rich, reusable widgets. Lots of them. • Ajax, utilities and more. • Plus: • It’s Open source, Apache v2.0 license. • It’s Google’s...

  24. GWT Cons • Google has practically stopped actively developing GWT • Java is less powerful than JavaScript

  25. Who Is Using GWT? • Used by Google: • iGoogle, Google Flights, Blogger, Google Shopping, Google Offers, Google Wallet, AdWords, AdSense, Orkut, Google Health,Google Wave (may it RIP) • Companies I’ve been to and use GWT: • PayPal, HP, Intel, BillGuard, Malam-Team, EMC, CA,... • Rovio and King.com • And also...

  26. Agenda • Introduction • GWT Basics • Developing with GWT • Widgets • Internationalization • ClientBundle • Ajax • UiBinder • Security • Bookmarks & History

  27. Agenda • Best Practices & Design Patterns • Testing & Profiling • 3rd Party Libraries • Reference

  28. Introduction • GWT What?

  29. Rich Internet Applications • RIA – a cross between web applications and desktop applications. • Introduced in a Macromedia whitepaper in March 2002. • RIA is typically run in a web browser, or do not require software installation. • Current solutions include Flash/Flex, Silverlight and JavaScript.

  30. GWT Introduction Service-Oriented Front-End Architecture or Service-Oriented User Interface • Google Web Toolkit Is: • A Web Framework. • A SOUI / SOFEA Framework. • A Sort of JavaScript Framework. • One of Google’s gifts to Java developers. • All of the Above.

  31. Introduction • GWT in a Nutshell... • A web framework for rapid developing and debugging of JavaScript front-end applications in Java. • Develop in Java. • Compile into JavaScript. • Run on a Browser. Java JavaScript Browser

  32. Introduction • Mission Statement “GWT's mission is to radically improve the web experience for users by enabling developers to use existing Java tools to build no-compromise AJAX for any modern browser.”

  33. Introduction • What’s so good about it? • It’s built for speed and it’s fast as it gets. • Runs natively on the browser, no plugins needed. • Cross browser compatible. • Has everything a framework needs. • Dynamic, rich, reusable widgets. Lots of them. • Utilities and more. • Big active community. • Many 3rd party libraries already out there. • Simple built-in Ajax/RPC mechanism.

  34. Introduction • What’s so good about it? • Develop using Java. • Using YOUR IDE. • Detect error in compile-time rather than runtime. • Java tools: refactoring, debugging, profiling, etc… • JUnit integration. • Good development environment. • It’s Open source: Apache v2.0 license. • It’s Google’s – will be around for a long time.

  35. Introduction • History • Announced at JavaOne, 2006. • Formerly known as “Project Red Pill”. • Current release: 2.1. 2.0 1.5 1.7 2.1 2.2 1.0 RC 1 08/2007 04/2009 08/2008 02/2007 11/2006 05/2006 06/2009 12/2009 10/2010 10/2010 08/2006

  36. Introduction • History • Announced at JavaOne, 2006. • Formerly known as “Project Red Pill”. • Current release: 2.1. • Support for Java 5 features. • Even more compiler optimizations. • UI library additions (animations, themes). • I18N (Bi-di, pluralizations), accessibility. • Better DOM API. 2.0 1.5 1.7 2.1 2.2 1.0 RC 1 08/2007 04/2009 08/2008 02/2007 11/2006 05/2006 06/2009 12/2009 10/2010 10/2010 08/2006

  37. Development Mode • Speed Tracer • Code Splitting • Compiler Optimizations • Draft Compile • Declarative UI • ClientBundle • HtmlUnit Introduction • History • Announced at JavaOne, 2006. • Formerly known as “Project Red Pill”. • Current release: 2.1. 2.0 1.5 1.7 2.1 2.2 1.0 RC 1 08/2007 04/2009 08/2008 02/2007 11/2006 05/2006 06/2009 12/2009 10/2010 10/2010 08/2006

  38. Cell Widgets • MVP Framework • Request Factory • Editor framework • Logging • SafeHtml • Spring Integration Introduction • History • Announced at JavaOne, 2006. • Formerly known as “Project Red Pill”. • Current release: 2.1. 2.0 1.5 1.7 2.1 2.2 1.0 RC 1 08/2007 04/2009 08/2008 02/2007 11/2006 05/2006 06/2009 12/2009 10/2010 10/2010 08/2006

  39. Introduction • Integrated designer • HTML5 Canvas, Audio and Video • CellTable Updates • SafeHtml lenient parser • Mobile touch events • Improved Bidi support • History • Announced at JavaOne, 2006. • Formerly known as “Project Red Pill”. • Current release: 2.1. 2.0 1.5 1.7 2.1 2.2 1.0 RC 1 08/2007 04/2009 08/2008 02/2007 11/2006 05/2006 06/2009 12/2009 10/2010 10/2010 08/2006

  40. How does it work? • ... and why is it so damn fast...

  41. Architecture Compiled JavaScript Dev. Mode Class Library Compile Client-Side JRE Emulation GWT Runtime Development GWT Compiler Ajax GWT RPC Remote Service Servlet Web Services Server-Side Servlet Container

  42. JRE emulation library • JavaScript implementations of the most commonly used classes in JRE • most of the java.lang package • a subset of the java.util package • Several classes are missing • java.util.Calendar • date-formatting classes More Info

  43. Deferred Binding • Definition: a technique used by the GWT compiler to create and select a specific implementation of a class based on a set of parameters. • GWT produces a different application permutations for each browser environment. • Only one permutation is downloaded and executed by the browser. • Permutations can be created for each Locale. • Additional custom parameters can be configured. DOMImplimpl = GWT.create(DOMImpl.class);

  44. Deferred Binding - Benefits • Branching is done in compile time rather than runtime. • No runtime penalty for lookup. • Download and evaluate only the minimum needed code. • Reduce download size. • Reduce execution time. • Saves development time by automatically generating code to implement an interface or create a proxy class. More Info

  45. Development Lifecycle Download SDK + Browser Plugin Create Project with IDE/Maven Develop & Code Compile to JavaScript Unit Test with Java Tools View & Debug using Dev. Mode Profile with Speed Tracer Deploy to Prod Server Fix Bugs Debug using Dev. Mode

  46. Developing with GWT • Lets get to work!

  47. Developing with GWT • Available Tools • Standard Directory Layout • Building Blocks • Module • Host Page • Entry Point • RootPanel • Running the Application • Application Modes • Development Mode

  48. Available Tools • Google SDK • Eclipse • Google Plugin for Eclipse • Google GWT Designer (previously Instantiations) • IntelliJ IDEA – GWT Support Plugin (built-in). • Netbeans - GWT4NB Plugin • Maven - gwt-maven-plugin • Speed Tracer • GWT Theme Generator

  49. Creating a New Project • webAppCreator - Generates all files needed in order to start a new GWT project. • Generates Eclipse project files and launch configuration • Generates Ant build.xml

  50. Creating a Project: webAppCreator • -out specifies which directory to place the generated files in • A second argument specifies the GWT logical module name. • From the project root directory, use: • ant devmode: runs in development mode • ant build: runs in production mode

More Related