SlideShare a Scribd company logo
The Google Web Toolkit (GWT)
Overview & Getting Started
buithaibinh@gmail.com
2014/5
1
Topics in This Section
๏ What GWT is all about
• Why(Love Story :D)
• Advantages
• Disadvantages
๏ Installing GWT
• Core GWT
• Eclipse plugin
• Browser plugin
๏ Making a project
• Using Eclipse plugin
๏ Testing process
2
Why(Love Story :D)
3
Why Web Apps(MVC)?
• Downsides to browser-based apps
• GUI is poor
• HTML is OK for static documents, but lousy for programs
• Communication is inefficient
• HTTP is poor protocol for the way we now use Web apps
4
Why Web Apps(MVC)? (Continued)
• So why does everyone want Web apps?
• Universal access
• Everyone already has a browser installed
• Any computer on the network can access content
• Automatic “updates” (MVC)
• Content comes from server, so is never out of date
5
Why Ajax?
• Solve three key problems of Web apps
• Coarse-grained updates
• Synchronous: you are frozen while waiting for result
• Extremely limited options for widgets (GUI elements)
• Still browser based
• Ajax is about “what is the best you can do with what everyone already has in their browser?”
• “Real” browser-based active content
• Failed: Java Applets
• Not universally supported; can’t interact with the HTML
• Serious alternative: Flash/Flex
• Not preinstalled on all PCs; not available for iPhone/iPad
• Less proven
• Microsoft Silverlight
• JavaFX
6
Ajax Problems
• At least two languages are required
• JavaScript on the client
• Java or another language on the server
• Invoking server is cumbersome
• Even with JSON-RPC, DWR, or jQuery support
• Want more powerful RPC mechanism
• JavaScript scales poorly to large projects
• No strong typing
• Weak object hierarchies
• Many run-time errors instead of compile-time errors
• Incompatibility across platforms
• Can’t use preexisting Java libraries or utilities
7
Overview of the
Google Web Toolkit (GWT)
• Big Idea
• You write both client-side and server-side code in Java
• Client-side code
• Uses an API similar to Swing
• Most basic JDK 1.6 constructs and classes supported
• Gets compiled into JavaScript that runs in your browser
• Server-side code
• Client uses a callback API and specifies data source URL
• Once you define callback, you are mostly using regular Java method calls with complex arguments and return values
• Server extends special class and defines regular methods
• These are not servlet-style doBlah methods linked to HTTP
• Arguments and return values can b
• » Primitives, strings, arrays, a few java.util collections, Serializable custom classes
8
Sites that Use GWT
• Google Sites
• Apache Wave, Google Base,
• Google Checkout,
• Google Moderator
• Google Web
• Google AdSense
• Outside Sites
• phuongbook.com :D
9
Advantages of GWT
• No JavaScript syntax errors
• Use a reliable, strongly-typed language (Java) for development and debugging
• No JavaScript programming at all!
• Can use complex Java on the client
• Turned into JavaScript, but you still use String, array, Math class, ArrayList, HashMap,
custom classes, etc.
• Full IDE-based Java support for development and debugging
• Your client-side code can share data structures with your server-side code
10
Advantages of GWT (Continued)
• Can send complex Java types to/from the server
• Real Java objects gets serialized across network.
• More powerful and convenient approach than JSON-RPC
• Standalone test environment
• Can test within Eclipse without installing a new server
• Support by a major company
• Supported by the company that popularized Ajax in the first place
• Support won’t go away like perhaps with AjaxTags
11
Advantages of GWT (Continued)
• Faster Apps
• GWT uses deferred binding
• Sends exactly the right code for the user’s circumstances
• User agent
• Locale
• Debug vs. production
• Network characteristics
• Java is not compiled “blindly” into JavaScript
• Many advanced compiler design techniques are used to make everything faster
12
Disadvantages of GWT
• Nonstandard approach to HTML & JavaScript
• Programmatic creation of HTML can make use of standard HTML and
CSS tools more difficult.
• You never explicitly put JavaScript in your HTML.
• Very powerful in the long run; hard to get used to at first.
• Not search engine friendly
• Google and others won’t index the dynamic content
13
Disadvantages of GWT
(Continued)
• Only for Java developers
• Most Ajax environments do JavaScript on the client and have a choice for the server. GWT is
based entirely around Java.
• GWT does support “normal” Ajax requests, but if you didn’t plan to mostly use Java on server,
would you choose GWT in the first place?
• Can’t(hard) make use of the good features of JavaScript
• Fast prototyping, functional programming, easy DOM querying and manipulation (e.g., with
jQuery)
• Unusual approach
• Fundamentally different strategy than all other Ajax tools makes evaluation and management buyoff
harder
14
Installation and Setup
15
Installation: Overview
• Install Eclipse Plugin
• https://developers.google.com/eclipse/docs/getting_started
• Choose to install the GWT SDK at the same time
• Install Browser Plugin
• The first time you run in a browser in development mode, it will prompt you to install browser plugin.
• See details in section on running in Production Mode
• (Optional) Install GWT SDK
• https://developers.google.com/web-toolkit/download
• Download ZIP file and unzip into folder of your choice
• Optional because you can get it bundled with Eclipse plugin
• (Optional) Install Speed Tracer
• Performance profiler. See top-level download page from first bullet. Not discussed here.
16
Making a project - Demo
17
Testing Projects
18
Testing the Project in Development Mode
19
Testing Project in Production Mode
20
Deploying the Project to Normal Java App Server
21
Questions?
22

More Related Content

PPT
Spring Boot. Boot up your development. JEEConf 2015
PDF
Micronaut Deep Dive - Devoxx Belgium 2019
PDF
Introduction to Micronaut at Oracle CodeOne 2018
PPTX
Agile sites @ telmore
PDF
The Dark Side of Single Page Applications
PPTX
Agile sites2
PDF
Micronaut Deep Dive - Codeone 2019
PDF
Micronaut: Evolving Java for the Microservices and Serverless Era
Spring Boot. Boot up your development. JEEConf 2015
Micronaut Deep Dive - Devoxx Belgium 2019
Introduction to Micronaut at Oracle CodeOne 2018
Agile sites @ telmore
The Dark Side of Single Page Applications
Agile sites2
Micronaut Deep Dive - Codeone 2019
Micronaut: Evolving Java for the Microservices and Serverless Era

What's hot (20)

PDF
ITT Flisol 2013
PDF
Modern javascript
PPTX
Web application I have always dreamt of
ODP
Kickstart Jpa
PPTX
Saving Time By Testing With Jest
PPTX
Integration Testing with Selenium
PPTX
How NOT to get lost in the current JavaScript landscape
PPTX
Сергей Моренец: "Gradle. Write once, build everywhere"
PDF
Agile sites311training
PPT
Jasmine - A BDD test framework for JavaScript
PPTX
CQ5 Development Setup, Maven Build and Deployment
PDF
Micronaut Deep Dive - Devnexus 2019
PDF
Engage 2019: Modernising Your Domino and XPages Applications
PDF
End to-end W3C - JS.everywhere(2012) Europe
PPTX
Microservices: Yes or not?
PPTX
Asp.net mvc 5 course module 1 overview
PPT
Full stack JavaScript - the folly of choice
PPTX
Performance testing with VSTs on- and off-premises
PDF
ActiveMQ Performance Tuning
PPTX
La vita nella corsia di sorpasso; A tutta velocità, XPages!
ITT Flisol 2013
Modern javascript
Web application I have always dreamt of
Kickstart Jpa
Saving Time By Testing With Jest
Integration Testing with Selenium
How NOT to get lost in the current JavaScript landscape
Сергей Моренец: "Gradle. Write once, build everywhere"
Agile sites311training
Jasmine - A BDD test framework for JavaScript
CQ5 Development Setup, Maven Build and Deployment
Micronaut Deep Dive - Devnexus 2019
Engage 2019: Modernising Your Domino and XPages Applications
End to-end W3C - JS.everywhere(2012) Europe
Microservices: Yes or not?
Asp.net mvc 5 course module 1 overview
Full stack JavaScript - the folly of choice
Performance testing with VSTs on- and off-premises
ActiveMQ Performance Tuning
La vita nella corsia di sorpasso; A tutta velocità, XPages!
Ad

Viewers also liked (13)

PDF
Building a Progressive Web App
PDF
Progressive Web Apps
PPTX
GDG Ibadan #pwa
PPTX
Introduction to Progressive Web App
PDF
Offline-First Progressive Web Apps
PDF
Progressive Web Apps / GDG DevFest - Season 2016
PDF
Progressive Web Applications
PDF
Progressive Web Apps For Startups
PDF
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
PDF
Introduction to Progressive web app (PWA)
PDF
Progressive Web Apps: o melhor da Web appficada
PPTX
Why Progressive Web App is what you need for your Business
KEY
Developing a Progressive Mobile Strategy
Building a Progressive Web App
Progressive Web Apps
GDG Ibadan #pwa
Introduction to Progressive Web App
Offline-First Progressive Web Apps
Progressive Web Apps / GDG DevFest - Season 2016
Progressive Web Applications
Progressive Web Apps For Startups
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive web app (PWA)
Progressive Web Apps: o melhor da Web appficada
Why Progressive Web App is what you need for your Business
Developing a Progressive Mobile Strategy
Ad

Similar to Gwt overview & getting started (20)

PDF
GWT-Basics
PDF
GWT-Basics
PDF
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
PPTX
Swagger - Making REST APIs friendlier
PPTX
GWT HJUG Presentation
KEY
SSJS, NoSQL, GAE and AppengineJS
PDF
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
PPTX
JavaScript in Universal Windows Platform apps
PPTX
Java script nirvana in netbeans [con5679]
PPT
State of jQuery - AspDotNetStorefront Conference
PDF
Polygot Java EE on the GraalVM
PPT
Top 10 web application development frameworks 2016
PDF
Dropwizard and Groovy
PPT
Gwt Presentation1
PPTX
5 Treding Java Frameworks Offshore Developers Should About
PPTX
Comparison of-angular-8 vs react-js
PPT
01 java intro
KEY
Benefits of an Open environment with Wakanda
PDF
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
PPTX
JavaFX Versus HTML5 - JavaOne 2014
GWT-Basics
GWT-Basics
Web Component Development Using Servlet & JSP Technologies (EE6) - Chapter 1...
Swagger - Making REST APIs friendlier
GWT HJUG Presentation
SSJS, NoSQL, GAE and AppengineJS
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
JavaScript in Universal Windows Platform apps
Java script nirvana in netbeans [con5679]
State of jQuery - AspDotNetStorefront Conference
Polygot Java EE on the GraalVM
Top 10 web application development frameworks 2016
Dropwizard and Groovy
Gwt Presentation1
5 Treding Java Frameworks Offshore Developers Should About
Comparison of-angular-8 vs react-js
01 java intro
Benefits of an Open environment with Wakanda
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
JavaFX Versus HTML5 - JavaOne 2014

Recently uploaded (20)

PDF
Classroom Observation Tools for Teachers
PDF
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
PDF
A systematic review of self-coping strategies used by university students to ...
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PPTX
Lesson notes of climatology university.
PPTX
Cell Types and Its function , kingdom of life
PPTX
master seminar digital applications in india
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PPTX
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PPTX
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
PDF
OBE - B.A.(HON'S) IN INTERIOR ARCHITECTURE -Ar.MOHIUDDIN.pdf
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PDF
GENETICS IN BIOLOGY IN SECONDARY LEVEL FORM 3
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
PDF
01-Introduction-to-Information-Management.pdf
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
Classroom Observation Tools for Teachers
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
A systematic review of self-coping strategies used by university students to ...
Supply Chain Operations Speaking Notes -ICLT Program
Abdominal Access Techniques with Prof. Dr. R K Mishra
human mycosis Human fungal infections are called human mycosis..pptx
Lesson notes of climatology university.
Cell Types and Its function , kingdom of life
master seminar digital applications in india
Microbial diseases, their pathogenesis and prophylaxis
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PPT- ENG7_QUARTER1_LESSON1_WEEK1. IMAGERY -DESCRIPTIONS pptx.pptx
OBE - B.A.(HON'S) IN INTERIOR ARCHITECTURE -Ar.MOHIUDDIN.pdf
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
GENETICS IN BIOLOGY IN SECONDARY LEVEL FORM 3
Module 4: Burden of Disease Tutorial Slides S2 2025
01-Introduction-to-Information-Management.pdf
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf

Gwt overview & getting started

  • 1. The Google Web Toolkit (GWT) Overview & Getting Started buithaibinh@gmail.com 2014/5 1
  • 2. Topics in This Section ๏ What GWT is all about • Why(Love Story :D) • Advantages • Disadvantages ๏ Installing GWT • Core GWT • Eclipse plugin • Browser plugin ๏ Making a project • Using Eclipse plugin ๏ Testing process 2
  • 4. Why Web Apps(MVC)? • Downsides to browser-based apps • GUI is poor • HTML is OK for static documents, but lousy for programs • Communication is inefficient • HTTP is poor protocol for the way we now use Web apps 4
  • 5. Why Web Apps(MVC)? (Continued) • So why does everyone want Web apps? • Universal access • Everyone already has a browser installed • Any computer on the network can access content • Automatic “updates” (MVC) • Content comes from server, so is never out of date 5
  • 6. Why Ajax? • Solve three key problems of Web apps • Coarse-grained updates • Synchronous: you are frozen while waiting for result • Extremely limited options for widgets (GUI elements) • Still browser based • Ajax is about “what is the best you can do with what everyone already has in their browser?” • “Real” browser-based active content • Failed: Java Applets • Not universally supported; can’t interact with the HTML • Serious alternative: Flash/Flex • Not preinstalled on all PCs; not available for iPhone/iPad • Less proven • Microsoft Silverlight • JavaFX 6
  • 7. Ajax Problems • At least two languages are required • JavaScript on the client • Java or another language on the server • Invoking server is cumbersome • Even with JSON-RPC, DWR, or jQuery support • Want more powerful RPC mechanism • JavaScript scales poorly to large projects • No strong typing • Weak object hierarchies • Many run-time errors instead of compile-time errors • Incompatibility across platforms • Can’t use preexisting Java libraries or utilities 7
  • 8. Overview of the Google Web Toolkit (GWT) • Big Idea • You write both client-side and server-side code in Java • Client-side code • Uses an API similar to Swing • Most basic JDK 1.6 constructs and classes supported • Gets compiled into JavaScript that runs in your browser • Server-side code • Client uses a callback API and specifies data source URL • Once you define callback, you are mostly using regular Java method calls with complex arguments and return values • Server extends special class and defines regular methods • These are not servlet-style doBlah methods linked to HTTP • Arguments and return values can b • » Primitives, strings, arrays, a few java.util collections, Serializable custom classes 8
  • 9. Sites that Use GWT • Google Sites • Apache Wave, Google Base, • Google Checkout, • Google Moderator • Google Web • Google AdSense • Outside Sites • phuongbook.com :D 9
  • 10. Advantages of GWT • No JavaScript syntax errors • Use a reliable, strongly-typed language (Java) for development and debugging • No JavaScript programming at all! • Can use complex Java on the client • Turned into JavaScript, but you still use String, array, Math class, ArrayList, HashMap, custom classes, etc. • Full IDE-based Java support for development and debugging • Your client-side code can share data structures with your server-side code 10
  • 11. Advantages of GWT (Continued) • Can send complex Java types to/from the server • Real Java objects gets serialized across network. • More powerful and convenient approach than JSON-RPC • Standalone test environment • Can test within Eclipse without installing a new server • Support by a major company • Supported by the company that popularized Ajax in the first place • Support won’t go away like perhaps with AjaxTags 11
  • 12. Advantages of GWT (Continued) • Faster Apps • GWT uses deferred binding • Sends exactly the right code for the user’s circumstances • User agent • Locale • Debug vs. production • Network characteristics • Java is not compiled “blindly” into JavaScript • Many advanced compiler design techniques are used to make everything faster 12
  • 13. Disadvantages of GWT • Nonstandard approach to HTML & JavaScript • Programmatic creation of HTML can make use of standard HTML and CSS tools more difficult. • You never explicitly put JavaScript in your HTML. • Very powerful in the long run; hard to get used to at first. • Not search engine friendly • Google and others won’t index the dynamic content 13
  • 14. Disadvantages of GWT (Continued) • Only for Java developers • Most Ajax environments do JavaScript on the client and have a choice for the server. GWT is based entirely around Java. • GWT does support “normal” Ajax requests, but if you didn’t plan to mostly use Java on server, would you choose GWT in the first place? • Can’t(hard) make use of the good features of JavaScript • Fast prototyping, functional programming, easy DOM querying and manipulation (e.g., with jQuery) • Unusual approach • Fundamentally different strategy than all other Ajax tools makes evaluation and management buyoff harder 14
  • 16. Installation: Overview • Install Eclipse Plugin • https://developers.google.com/eclipse/docs/getting_started • Choose to install the GWT SDK at the same time • Install Browser Plugin • The first time you run in a browser in development mode, it will prompt you to install browser plugin. • See details in section on running in Production Mode • (Optional) Install GWT SDK • https://developers.google.com/web-toolkit/download • Download ZIP file and unzip into folder of your choice • Optional because you can get it bundled with Eclipse plugin • (Optional) Install Speed Tracer • Performance profiler. See top-level download page from first bullet. Not discussed here. 16
  • 17. Making a project - Demo 17
  • 19. Testing the Project in Development Mode 19
  • 20. Testing Project in Production Mode 20
  • 21. Deploying the Project to Normal Java App Server 21