Download - AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2
![Page 1: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/1.jpg)
GRITS 5/14/09 Roby -
GRITS
AJAX & GWT
Trey Roby
1
1
![Page 2: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/2.jpg)
GRITS 5/14/09 Roby -
GRITS Change
The Web is Changing
2
Things we never imagined Central to people’s lives Great Opportunity
2
![Page 3: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/3.jpg)
GRITS 5/14/09 Roby -
GRITS
A Very Brief History of
Computing
3
3
![Page 4: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/4.jpg)
GRITS 5/14/09 Roby -
GRITS Microsoft
Entered the Main Frame world Everything batch Introduced interactive programming to business
4
How did Microsoft make it big?
4
![Page 5: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/5.jpg)
GRITS 5/14/09 Roby -
GRITS Classic Web BrowserApplication
Batch processing front end1. Fill out form2. Server processes3. Get results
5
5
![Page 6: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/6.jpg)
Spitzer Heritage Archive Design Review IPAC 7/08/08 Roby -
1984 Ad
6
6
![Page 7: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/7.jpg)
GRITS 5/14/09 Roby -
GRITS Google
Google Maps - Feb 8, 2005 Started it all - 4 1/2 years ago Millions of people wanted to use it
Changed the way we think about web-development
7
7
![Page 8: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/8.jpg)
GRITS 5/14/09 Roby -
GRITS Everywhere
Google– Calendar – Word processor– Gmail - fastest growing
Yahoo has revamped website– Finance, Mail
News websites YouTube, NetFlix, Hulu, Facebook Slashdot.org Specialty sites
– doodle.com, rememberthemilk.com Adobe Photoshop coming to web Apple announced new web-development environment
– http://280slides.com/ Microsoft will rewrite website
8
8
![Page 9: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/9.jpg)
GRITS 5/14/09 Roby -
GRITS
Technologies Behind The Revolution
9
9
![Page 10: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/10.jpg)
GRITS 5/14/09 Roby -
GRITS AJAX
Asynchronous JavaScript and XML
Nothing new
Technologies– JavaScript– Dynamic HTML– CSS– DOM– XML
Emphasis on JavaScript speed
10
10
![Page 11: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/11.jpg)
GRITS 5/14/09 Roby -
GRITS Dynamic HTML
Web Page can change without reload
HTML document– viewed as a tree– Each tag is a node
Scripts can change any part of tree
Any change immediately shows up on page
DOM - Document Object Model
11
11
![Page 12: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/12.jpg)
GRITS 5/14/09 Roby -
GRITS DOM
12
12
![Page 13: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/13.jpg)
GRITS 5/14/09 Roby -
GRITS JavaScript
Powerful scripting language Very flexible Runs in browser C like Easy to get started Event driven
– onclick– onfocus– onresize– onkeydown– onmousemove
DOM– access DOM– change DOM
13
13
![Page 14: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/14.jpg)
GRITS 5/14/09 Roby -
GRITS Asynchronous Calls
JavaScript can make Asynchronous HTTP calls
Synchronous Call?– call made – results return immediately– typical program function call
Asynchronous Call to Server?– function call is made– results return later– a method (function) is called upon completion– results can be used to change DOM
14
14
![Page 15: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/15.jpg)
GRITS 5/14/09 Roby -
GRITS Classic Web Application
1. Send Form Request
Server
Browser
BrowserBrowserBrowserBrowserBrowserBrowser
Form Request
HTMLPage
2. Server 1) retrieves data2) builds UI 3) generates HTML
3. Server returns HTML Page
4. Browser shows HTML page
Browser
Server
15
15
![Page 16: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/16.jpg)
GRITS 5/14/09 Roby -
GRITS JavaScript/Ajax Based Web Application
1. Compiled JavaScript client runs on browser
Server
Browser(JavaScript)
BrowserBrowserBrowserBrowserBrowserBrowser
Data
DataResults
2. Sends data request
3. Server returns data
4. Client manages & presents data
Browser(JavaScript)
16
5. Happens again & again on same page
16
![Page 17: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/17.jpg)
GRITS 5/14/09 Roby -
GRITS Browser becomes Application Environment
Application code runs on browser
Return of interactive programming
Heavy client
17
17
![Page 18: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/18.jpg)
GRITS 5/14/09 Roby -
GRITS Heavy Client
Uses available client computing power
Takes advantage of the browser
Pushes more processing to client
Faster
Better user experience
18
18
![Page 19: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/19.jpg)
GRITS 5/14/09 Roby -
GRITS User Experience
Very Important
First-Five-Minute Rule
Does it feel easy to use?– Only novices care if it is easy to use– The first few tasks must be easy to do
Popularity– Funding
19
19
![Page 20: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/20.jpg)
GRITS 5/14/09 Roby -
GRITS More
More– Like a Desktop Application– Interactive– Speed– Immediate Error Checking– Analysis
Less– Reloads– Waiting– Static Presentations– Guessing– Batch
20
20
![Page 21: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/21.jpg)
GRITS 5/14/09 Roby -
GRITS
Challenges
21
21
![Page 22: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/22.jpg)
GRITS 5/14/09 Roby -
GRITS AJAX Challenges
Browsers work differently
Browser API can be slightly different
Requires constant checking of browser type
Many, many browser subtleties
22
22
![Page 23: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/23.jpg)
GRITS 5/14/09 Roby -
GRITS JavaScript Weaknesses
Not strongly typed– Scripting language
Weak debugger support
No compilation– syntax errors caught at runtime– Can’t optimize
Does not work well with large applications
23
23
![Page 24: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/24.jpg)
GRITS 5/14/09 Roby -
GRITS
Solutions
GWT
24
24
![Page 25: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/25.jpg)
GRITS 5/14/09 Roby -
GRITS GWT
Google Web Toolkit
One approach to AJAX
Well Supported
Java instead of JavaScript
Attempts to fix the AJAX challenges
Free
25
25
![Page 26: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/26.jpg)
GRITS 5/14/09 Roby -
GRITS Benefits of GWT
Handles cross browser issues Benefits of compilation More optimal Java better for large applications Great debugging support Java code reuse Natively call JavaScript No plugins
26
26
![Page 27: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/27.jpg)
GRITS 5/14/09 Roby -
GRITS How it works
Compiles Java into JavaScript Creates one JavaScript file per browser type Only builds what you use Provides UI support Comes with a development browser for debugging Provides an RPC environment for server calls Allows for anything JavaScript can do
27
27
![Page 28: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/28.jpg)
GRITS 5/14/09 Roby -
GRITS How to develop with GWT
28
WriteCodein Java
Debugger
TestBrowser
Compile into JavaScript
IE
Firefox
Safari
Chrome
Deploy toWeb Server
Web Server
28
![Page 29: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/29.jpg)
GRITS 5/14/09 Roby -
GRITS Spitzer Heritage Archive
Name resolution on the browser Input field validation Coordinate conversion Tabular displays without page reload
– sort– page– update– row clicking
True FITS Visualization– zooming– changing color– crop– Ra, Dec, Flux readout
29
29
![Page 30: AJAX & GWT · AJAX & GWT Trey Roby 1 1. GRITS 5/14/09 Roby - GRITS Change The Web is Changing 2](https://reader030.vdocuments.net/reader030/viewer/2022041015/5ec672b4823f17702b7b78db/html5/thumbnails/30.jpg)
GRITS 5/14/09 Roby -
GRITS
30
30