Ajax and GWT


Published on

Ajax presentation given for LA JUG

Published in: Technology, News & Politics
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ajax and GWT

  1. 1. Ajax and GWT Niraj Juneja Blog : http://www.gandalf-lab.com
  2. 2. Your speaker <ul><li>{ </li></ul><ul><li>Niraj Juneja </li></ul><ul><li>Principal – Webscale Solutions </li></ul><ul><li>Focus on : </li></ul><ul><li>- Cloud Computing (Amazon EC2 , AppEngine , Project Caroline) </li></ul><ul><li>- Webscale (Big Table , Hadoop , Hbase) </li></ul><ul><li>- Collective Intelligence </li></ul><ul><li>Tools of the Trade : </li></ul><ul><li>- GWT , Spring , Hibernate , Map Reduce , python </li></ul><ul><li>} </li></ul>
  3. 3. What is AJAX <ul><li>Asynchronous JavaScript + XML </li></ul><ul><li>XMLHttpRequest Object </li></ul><ul><li>Rich Internet Applications with JavaScript </li></ul><ul><li>Is it new? </li></ul><ul><ul><li>Not Really </li></ul></ul><ul><ul><ul><li>Hidden Frames </li></ul></ul></ul><ul><ul><ul><li>IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+ </li></ul></ul></ul><ul><li>Examples of AJAX </li></ul><ul><ul><ul><li>GMail </li></ul></ul></ul><ul><ul><ul><li>Google Maps </li></ul></ul></ul><ul><ul><ul><li>Most new Web2.0 applications </li></ul></ul></ul>
  4. 4. What is AJAX <ul><li>Why is it popular? </li></ul><ul><li>Google helped popularize, and legitimize it in GMail </li></ul><ul><li>Increase Usability of Web Applications </li></ul><ul><li>Rich Internet Applications without Flash </li></ul><ul><li>Save Bandwidth </li></ul><ul><li>Download only data you need </li></ul><ul><li>Faster interfaces (sometimes) </li></ul><ul><li>Why is it bad? </li></ul><ul><li>Breaks back button support </li></ul><ul><li>URL's don't change as state changes </li></ul><ul><li>Cross Browser Issues can be a pain </li></ul><ul><li>JavaScript may tax older machines CPU </li></ul><ul><li>Can't access domains other than the calling domain </li></ul><ul><li>May be disabled (for security reasons) or not availiable on some </li></ul>
  5. 5. So what is XMLHttpRequest ? <ul><li>XMLHttpRequest </li></ul><ul><ul><li>A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript </li></ul></ul><ul><ul><li>Make an HTTP request from a JavaScript event </li></ul></ul><ul><ul><li>A call back JavaScript function is invoked at each state of the HTTP request and response </li></ul></ul><ul><li>XMLHttpRequest Properties </li></ul><ul><ul><li>onreadystatechange - call back function for state changes </li></ul></ul><ul><ul><li>readyState - the current state of the HTTP call </li></ul></ul><ul><ul><li>responseText - the text result of the request </li></ul></ul><ul><ul><li>responseXML - DOM xml object from the request </li></ul></ul><ul><ul><li>status - HTTP status code of the response </li></ul></ul><ul><ul><li>statusText - HTTP status text </li></ul></ul>
  6. 6. Comparing Ajax and Non-Ajax <ul><li>Web1.0 UI </li></ul><ul><li>AJAX UI </li></ul><ul><li>The shift above has a big impact on the style of application development </li></ul><ul><li>In and 100% Ajax driven application you will end up implementing MVC but the Controller will be on the client and in Javascript </li></ul><ul><ul><li>This has implications to the choice of Web Framework you use (Struts , JSF etc) </li></ul></ul>
  7. 7. AJAX Marketplace <ul><li>Javascript based libraries </li></ul><ul><ul><li>Prototype </li></ul></ul><ul><ul><li>YUI </li></ul></ul><ul><ul><li>A whole lot of others </li></ul></ul><ul><li>IDE’s with end to end solutions </li></ul><ul><ul><li>Adobe </li></ul></ul><ul><ul><li>Tibco </li></ul></ul><ul><li>GWT – googles web toolkit </li></ul>
  8. 8. Ajax Decisions <ul><li>Usage Scenarios </li></ul><ul><ul><li>Ground Up – The Entire Applications driven by Ajax </li></ul></ul><ul><ul><li>Incremental </li></ul></ul><ul><li>Usage scenarios will drive the choice of Web-Ajax Framework to use </li></ul><ul><li>Please don’t build your own Ajax Framework </li></ul>
  9. 9. Things to be aware of <ul><li>Browser has a max on the number of threads(3 ??) </li></ul><ul><li>You are shifting your processing and potentially a lot of logic to the client (Browser) </li></ul><ul><li>Don’t use the traditional web1.0 paradigms while designing applications (Actionforms , MVC type 2 , Use if httpsession) </li></ul>
  10. 10. Now the cool part - GWT <ul><li>What is GWT? </li></ul><ul><ul><li>GWT is Java Web development, literally. </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li>helloButton.addClickListener(new ClickListener() { </li></ul></ul><ul><ul><li>public void onClick(Widget sender) { </li></ul></ul><ul><li> label1.setText(&quot;Hello World!&quot;); </li></ul><ul><li>} </li></ul><ul><li>}); </li></ul><ul><li>... </li></ul><ul><li>Your Java code is compiled into AJAX (HTML and JavaScript) Web </li></ul><ul><li>Using well designed AJAX application is a pleasure but coding and maintaining large projects in JavaScript isn’t </li></ul><ul><li>GWT helps to relief some pain out of AJAX application development. </li></ul>
  11. 11. GWT makes AJAX development simpler <ul><li>Develop with java which is compiled to JavaScript </li></ul><ul><li>Use Rich Java Tool set – Eclipse , Netbeans , Junit , ant , maven </li></ul><ul><li>The Server Side is Servlet technology based – Embedded tomcat in the install </li></ul><ul><li>Easy to Test </li></ul><ul><li>Cross Browser issues are mostly resolved </li></ul><ul><li>You can still use your existing JavaScript codes – JSNI </li></ul><ul><li>Developer momentum – GXT , GWT EXT </li></ul><ul><li>IE / FireFox / Mozilla / Safari / Opera </li></ul>
  12. 12. GWT Programming Model <ul><li>Exposes several Java packages including </li></ul><ul><ul><li>java.util.* </li></ul></ul><ul><ul><li>Java.lang.* </li></ul></ul><ul><li>Use MVC design pattern at the client side </li></ul><ul><li>Swing Like Programming Model </li></ul><ul><li>Ability to have listeners and Observer / Observables </li></ul><ul><li>Generally no html ( just 1 html page) </li></ul>
  13. 14. Javascript to Java compiler <ul><li>GWT compiler converts Java code into JavaScript code, in much the same way the Java compiler compiles Java code into bytecode. </li></ul><ul><li>Compilation is done by running the Java program com.google.gwt.dev.GWTCompiler , passing it the location of the module definition file along with some other parameters. </li></ul><ul><li>GWT obfuscates the compiled output so that everything is compressed and impossible to decipher. Other (‘pretty/detailed’) options are also available for development purpose. </li></ul><ul><li>Java code which has to be > JDK1.4 </li></ul><ul><li>JDK 1.5 features (Generics etc) currently not supported on the client side , but will shortly be supported </li></ul>
  14. 15. Getting Started with GWT <ul><li>Where do we start? </li></ul><ul><ul><li>1) Install the Java SDK </li></ul></ul><ul><ul><li>2) Download GWT </li></ul></ul><ul><li>http://code.google.com/webtoolkit/download.html </li></ul><ul><ul><li>3) Unzip the Package </li></ul></ul><ul><ul><li>4) Create Your Application </li></ul></ul>
  15. 16. Lets Write Some Code <ul><li>Coding By Convention </li></ul><ul><li>Your Package Structure </li></ul><ul><li>com/mysite/myapp/ </li></ul><ul><li>Project root containing module XML files. </li></ul><ul><li>com/mysite/myapp/client/ </li></ul><ul><li>Client-side source files and sub-packages. Compiled into JavaScript. </li></ul><ul><li>com/mysite/myapp/server/ </li></ul><ul><li>Server-side code and sub-packages. Compiled to Java. (Servlets, Data Access Objects) </li></ul><ul><li>com/mysite/myapp/public/ </li></ul><ul><li>Static resources that can be served publicly. (HTML, CSS, Images) </li></ul>
  16. 17. Package Structure
  17. 18. Lets Write Some Code <ul><li>1) projectCreator </li></ul><ul><ul><li>Used to make an Eclipse project for one of the samples that comes with GWT </li></ul></ul><ul><li>projectCreator </li></ul><ul><ul><li>[-ant projectName] – Ant build file to compile source. </li></ul></ul><ul><ul><li>[-eclipse projectName] – Generate an Eclipse project. </li></ul></ul><ul><ul><li>[-out dir] – Directory to write output files. </li></ul></ul><ul><ul><li>[-overwrite] – Overwrite any existing files. </li></ul></ul><ul><ul><li>[-ignore] – Ignore existing files, do not overwrite. </li></ul></ul><ul><li>2) applicationCreator </li></ul><ul><ul><li>Generates a starter application and scripts for launching hosted mode and </li></ul></ul><ul><li>compiling to JavaScript </li></ul><ul><li>applicationCreator </li></ul><ul><ul><li>[-eclipse projectName] – Debug launch configurations for Eclipse project. </li></ul></ul><ul><ul><li>[-out dir] – Directory to write output files. </li></ul></ul><ul><ul><li>[-overwrite] – Overwrite any existing files. </li></ul></ul><ul><ul><li>[-ignore] – Ignore existing files, do not overwrite. </li></ul></ul><ul><ul><li>className – Fully-qualified name of the application class to write. </li></ul></ul>
  18. 19. The User Interface Think HTML in terms of Swing and SWT... ...this is where GWT uses Widgets and Panels to dynamically create HTML... ...Widgets and Panels can be found in the GWT user-interface library...more information can be found on the GWT site...these images are there too!
  19. 20. GWT events and Listeners
  20. 21. GWT Events and Listeners
  21. 22. Running your Application
  22. 23. GWT – RPC
  23. 24. GWT - RPC
  24. 25. GWT - RPC