Ajax and GWT Niraj Juneja Blog : http://www.gandalf-lab.com
Your speaker <ul><li>{ </li></ul><ul><li>Niraj Juneja </li></ul><ul><li>Principal – Webscale Solutions </li></ul><ul><li>F...
What is AJAX <ul><li>Asynchronous JavaScript + XML  </li></ul><ul><li>XMLHttpRequest Object  </li></ul><ul><li>Rich Intern...
What is AJAX <ul><li>Why is it popular? </li></ul><ul><li>Google helped popularize, and legitimize it in GMail  </li></ul>...
So what is  XMLHttpRequest  ? <ul><li>XMLHttpRequest </li></ul><ul><ul><li>A JavaScript Class that lets you make asynchron...
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...
AJAX Marketplace <ul><li>Javascript based libraries  </li></ul><ul><ul><li>Prototype </li></ul></ul><ul><ul><li>YUI  </li>...
Ajax Decisions  <ul><li>Usage Scenarios </li></ul><ul><ul><li>Ground Up – The Entire Applications driven by Ajax  </li></u...
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 pro...
Now the cool part  - GWT <ul><li>What is GWT? </li></ul><ul><ul><li>GWT is Java Web development, literally. </li></ul></ul...
GWT makes AJAX development simpler <ul><li>Develop with java which is compiled to JavaScript </li></ul><ul><li>Use Rich Ja...
GWT Programming Model <ul><li>Exposes several Java packages including  </li></ul><ul><ul><li>java.util.* </li></ul></ul><u...
 
Javascript to Java compiler <ul><li>GWT compiler converts Java code into JavaScript code, in much the same way the Java co...
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><...
Lets Write Some Code <ul><li>Coding By Convention </li></ul><ul><li>Your Package Structure </li></ul><ul><li>com/mysite/my...
Package Structure
Lets Write Some Code <ul><li>1) projectCreator </li></ul><ul><ul><li>Used to make an Eclipse project for one of the sample...
The User Interface Think HTML in terms of Swing and SWT... ...this is where GWT uses Widgets and Panels to dynamically cre...
GWT events and Listeners
GWT Events and Listeners
Running your Application
GWT – RPC
GWT - RPC
GWT - RPC
Upcoming SlideShare
Loading in...5
×

Ajax and GWT

7,619

Published on

Ajax presentation given for LA JUG

Published in: Technology, News & Politics
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,619
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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

×