SlideShare a Scribd company logo
GWT = Easy AJAXConfoo.ca11/3/2010
Who am I?Olivier GérardinTechnical Director, Sfeir Benelux (groupe Sfeir)Java / Web architect13+ years Java3 years GWT
AgendaLittle GWT showcaseWhy GWT?How does it work?Key featuresMyths & misconceptionsPointers, Conclusion, Q&A
GWT ShowcaseSeesmic webGWT Equation editorGWTUMLPiano EtudesClarity AccountingContactOfficeMyERP, CompiereExt-GWT explorerAnd more: Google Wave, Timetonote CRM…
Mandatory and oversimplified history of the dynamic webWhy GWT?
Web 0.0Or “The Link Era”A web page is just a bunch of images and text with linksPages are usually stored (not generated)Links take you to a new pageClick on linkHTTP request is built (from static link URL) and sentWait for server to replyServer replies with HTML page (usually from file)Response received  blank screenWait for entire page to load
Web 1.0Or “The Form Era”In addition to images and text, a web page can contain fields and other widgetsA designated button submits the form Pages are build Fill in formSubmitHTTP request is built (from form parameters and field values) and sentWait for server to replyServer replies with HTML page (usually generated on server)Response received  blank screenWait for entire page to load
Server side processingCGIBasic bridge to OS commandsVery ineffective (1 request = 1 process)Web server / application serverPHP, JSP, ASP, perl, whateverPerformance improvementsOn-demand compilationThread poolingPage is totally reconstructed for every request
1995: here comes JavaScriptClient-side scriptingFirst usage: client-side form validationAvoid server round-trip when invalidInstant feedbackWith DOM: polymorphic client page (DHTML)Menus, animations, etc.Cross-browser (almost)No server interaction without submit/reload 
2000: XHTTPR and AJAXMS introduces Outlook Web AccessWeb “clone” of desktop client (Outlook)Fetches data from server without reloading page!How is that possible?New class: XmlHttpRequestAllows server interaction without page reloadResponse received asynchronouslyInterface updated through DOMAJAX is born!
The first AJAX app: Outlook Web Access
JavaScript frenzyJS becomes hype… Cool-looking, nice to use web UIsEveryone wants to do JavaScriptAny serious web site must have dynamic content, auto-completion or other AJAX goodiesWidget sets / frameworks begin to emergeScriptaculous, YUI, dojo, jScript, …Anything seems possible in JavaScriptJavaScript OS, AjaxSwing (WebCream), …
JavaScript hangoverSerious JavaScript hurts…Cross-browser compatibility nightmareFix in one, break in anotherJavaScript Guru required!Developing/Debugging nightmareWeird runtime errorsNo static typingNo refactoringAnd..Memory leaksHeavy pagesSecurity issues
JavaScript confusionSource: BrowserBook © Visibone
What to do?Option 1: leave the hard work to othersBuild the demo with AJAXWin the contractLeave the team…Option 2: Give up AJAXFor what? Flex? Silverlight? JavaFX?Plugin requiredSEO unfriendlyLearning curveAJAX is too cool!
Google is in the same boatGoogle is a heavy producer of AJAX appsHad to come up with a solution…
GWT solves all your problemsGWT gives you AJAX without the pain of JavaScript developmentTakes care of cross-browser issuesAllows full debugging (breakpoints, step by step, inspecting/watching variables)Strong static typing early error detectionFull refactoring optionsNo browser plugin or mandatory IDEShort learning curveSimple RPC mechanism built inBut can communicate with any server technology
Program in Java…GWT allows developing client-side web apps in full Java (with only a few restrictions)Leverage existing Java tools and skillsUse any IDE (Eclipse, NetBeans, IntelliJ, …)Program like a traditional graphical client (Swing, SWT, …)Widgets, containers, listeners, etc.Use OO patterns (MVC, MVP, observer, composite, etc.)Test like any Java appUse standard Java debuggersTest with JUnit
… deploy in JavaScriptJavaScript is only generated:For deploymentTo test in actual web modeGWT guarantees that the generated JavaScript app behaves exactly like the Java app And it does (most of the time)
How does it work?
4 easy piecesJava-to-JavaScript compilerJRE emulation libraryJava librariesHosted Development mode
GWT compilerGenerates JS code from Java sourcePerforms numerous optimizationsIn most cases better than hand codingCan generate obfuscated (ultra-compact) codeJS plays a role similar to bytecode for compiled Java applicationsShocking!
JRE Emulation libraryProvides a GWT-compatible version of Java core classesMost of java.langMost of java.utilSome classes of java.io and java.sqlFor convenience only! No real I/O or JDBC!Used when running in web modeHosted mode runs in a JVM with standard JRE
GWT Java librariesUtility classesRPC, I18N, …Widget setSimple widgets (Button, TextField, …)Base building blocksIn most cases map to native HTML objectComposites = widgets built from other widgetsPanels = widget containersPanels enforce a layout (vertical, horizontal, grid, …)
GWT widgets: Simple widgets
GWT widgets: Composites
GWT widgets: Panels
Development modeAllows running GWT apps without converting them to JavaScriptCode runs as Java bytecode in a standard JVMDevelopment mode shell emulates JS runtimeActual rendering done by real browserPerforms extensive checks to make sure the code is compilable to JavaScriptBottom line: if a GWT application performs as expected in development mode, it will perform identically in web mode99,9% of the time…
Luxembourg interesting factsCultural break
Luxembourg is very smallFits inside a 82 x 67 km rectanglePopulation < 500k (Montréal: 1.6 m)
Luxembourg City is beautiful
Luxembourg has a lot of castles
Luxembourg TriviaWorld’s only Grand-DuchyMore than 150k cross-border workers50% of the capital city’s population during working hours3 official languages (fr, de, lu)Highest GDP per capitaImportant financial center (funds)Home of Europe’s largest TV/radio company (RTL group)2 hours away from Paris by TGV / international airport
Back to GWT:Key features
Easy developmentDuring development, you are writing and running a classic Java appUse your favorite IDEAll IDE features available (code completion, code analysis, refactoring, links, Javadoc, …)Plugins help GWT-specific taskslaunching development modecompilingrefactoringcreating projects, modules, RPC services, …even design GUI (GWT Designer from Instantiations)
Easy RPC implementationRPC mechanism based on Java servletsEasy as:Define service interfaceintadd (intx, inty);Derive asynchronous interfacevoid add (intx, inty, AsyncCallback<Integer> callback);Implement service interface	publicint add (intx, inty) {		returnx + y;	}
Easy RPC consumptionEasy as:Obtain service proxyAddServiceAsyncaddService = GWT.create(AddService.class);Call methodaddService.add(x, y, newAsyncCallback<Long>() {	publicvoidonFailure(Throwable caught) {		// handle failure	}	publicvoidonSuccess(Integer result) {		// handle success	}});
Easy RPC deploymentRPC services are actually POJS (plain old Java servlets)Can be deployed without changes in any servlet engineIntegrated test server uses standard web.xml format for declaring services
Easy JSON generationEasy as:JSONObjectlivre = newJSONObject();livre.put("Titre", newJSONString("GWT"));livre.put("Pages", new JSONNumber(123));JSONArraychapitres = newJSONArray();chapitres.set(0, newJSONString("Introduction"));
Easy JSON parsingEasy as:JSONObjectlivre = newJSONObject(json);String titre = livre.get("Titre").isString().stringValue();doublepages = livre.get("Pages").isNumber().doubleValue();JSONArraychapitres = livre.isArray();String chap0 = chapitres.get(0).isString().stringValue();
Deferred bindingAppropriate code for user environment (browser, locale) is chosen at application startup time≠ dynamic binding (implementation chosen at runtime)≠ static binding (implementation chosen at compile time)Code for every combination is generated at compile timeAdvantages:Allows app-wide optimizationsCompensates for the lack of dynamic (runtime) loadingDisadvantages:Increases compilation time
Deferred Binding (explicit)Deferred binding can be called explicitly:Foofoo = GWT.create(Foo.class);Implementation is provided by either:Substitution: an existing class is designatedGeneration: class is generated during compilation
Easy native JavaScript integrationImplement a method directly in JavaScript:publicstaticnativevoidalert(Stringmsg) /*-{	$wnd.alert(msg);}-*/;Call back Java methods from JavaScriptPass objects back and forthUseful to Wrap legacy JavaScript librariesAccess browser functionality not exposed by GWTDangerous! Easily breaks cross-browser compatibility
Easy Widget reuseCreate your own widgets:Extend existing widgetWorks but not the most efficientMight expose unwanted methods from superclassExtend CompositeRecommended methodUse JSNITo wrap existing JavaScript widgets
Easy history supportAJAX app = single page“back” button  catastrophe…GWT solution:Encode app state in URL as “fragment”E.g. http://myserver/myGwtApp#x=1;y=2Save state:History.newItem(token);React to state change (“back” button)History.addValueChangeHandler(…);
I18n: constant substitutionDefine interfacepublicinterfaceAppConstantsextends Constants {  String title();}“Implement” interfaceAppConstants.properties: 		title = Hello, WorldAppConstants_fr_CA.properties: 	title = Salut, Monde	…UseAppConstantsappConstants = GWT.create(AppConstants.class);String title = appConstants.title();
I18n: template substitutionDefine interfacepublicinterfaceAppMessagesextends Messages {  String mailStatus(intn, String s);}“Implement” interface (AppMessages.properties)mailStatus = You have {0} messages in folder {1}Use:AppMessagesmsgs = GWT.create(AppMessages.class);String status = msgs.mailStatus(15, “Inbox”);
Easy debuggingIn development mode, application runs as bytecode (just like any old Java app…)So you can debug it just like any classic Java app:Set breakpointsStep through codeInspect variablesChange variables…
Short dev cycleChange client code:press “Reload”.. Done!Change server code:Embedded server: press “Restart”.. Done!External server: hotswap /redeploy if needed
Easy client-server testingIntegrated application server for testing RPC servicesCan be disabled to use external serverJUnit integration to run client-side test cases Hosted mode or web modeFull access to RPC servicesGWTTestCase, GWTTestSuite for automationSelenium for automated GUI testing
Easy scalingAll session data resides on clientSimilar to classic fat clientNo session information on server-sideForget session affinityAdd/remove servers on the flyRestart server without losing clients
“Easy” stylingStyling relies entirely on CSSWidgets have well-known style namesProgrammer can add custom stylesNo shift from traditional HTML stylingHTML/DOM build page “skeleton”Appearance tuned with CSSSeparate UI construction from stylingWith well thought styles, it’s possible to reskin completely an application without changing one line of codeGWT styling has all the benefits of CSS with all problems of CSSBe careful with brower dependencies!
Easy Google AJAX APIsProject gwt-google-apishttp://code.google.com/p/gwt-google-apisLibraries that wrap Google JavaScript APIsMapsGears (storage, obsoleted by HTML5)Gadgets (embedable applets)AJAX search (embedded google search)Visualization (charts)Language (translation, language detection)Standalone libraries (do not require JavaScript libraries)
[new in 2.0] in-browser development modeBefore 2.0: hosted mode uses customized browser engineHeavily customizedOnly one supported browser per platform (IE on Windows, WebKit on Mac, Mozilla on Linux)Difficult to keep up-to-dateIncludes platform-specific code (SWT)Browser and hosted application share the same processMost plugins don’t work (including Google Gears…)
[new in 2.0] in-browser development modenow:Hosted mode shell runs outside browserCommunicates with browser using plugin through TCP
[new in 2.0] in-browser development modeBenefitsUse any (supported) browser/version on any platformBehavior closer to web modeNo interference with browser pluginsNo more platform-specific stuff in GWT (one jar for all!)Network protocol cross-platform possibleDev mode shell on machine X, slave browser on machine YE.g. dev on Linux, test in IE on Windows…
[new in 2.0] speed tracerPerformance analysis toolVisualize where your app spends time:JS executionBrowser renderingCSS handling (style selection/calculation)DOM handling (event processing)Resource loading
[new in 2.0] code splittingBefore: monolithic download can become very bigSlow startup timesAfter: Programmer can insert “split points” in codeHints for the compiler to place everything not required up to split point in separate downloadCompiler divides code in several “chunks”, which are loaded on-demandBenefits:Initial loading time reduced 50% on average with a single split pointAllows on-demand module loading (provider pattern)
[new in 2.0] declarative UIDeclarative construction of GUI using XML grammarAllows automatic binding with Java code (through annotations)Automatically assign references to dynamically created widgets to designated Java fields (@UiField)Automatically attach methods as event handlers (@UiHandler)Benefits:Clearly separate:Static UI construction (XML)Dynamic UI behavior (Java)
[new in 2.0] resource bundleDownload multiple heterogeneous resources from server in a single requestImages (already possible in pre-2.0)CSSTextAny binary resourceBenefits:Fewer round trips to the serverLess overheadMore responsive interface
[new in 2.0] and also…Compiler optimizationsMostly generated JS sizeDraft compile modeFaster buildsNot for deployment!Layout panelsPredictable, consistent layoutConstraint based system built on top of CSSPlays nice with custom CSS stylesHtmlUnitNo native code / browser required
Myths & misconceptions
Myth: GWT is a JS library/framework/widget setGWT is not for JavaScript developersProvides only Java classes
Myth: GWT is a frameworkGWT is a toolkit (set of tools)Frameworks may be built on top of it
Myth: GWT is appletsA GWT application is 100% JavaScriptNo runtime/pluginNo JRE required
Myth: GWT is only for Java programmersYes, GWT uses Java as programming language…BUT you can also see it this way:GWT lets you write/debug/test/refactor AJAX apps with state-of-the-art IDEs and tools using a statically-typed object-oriented languageGWT makes it worth learning Java!
Myth: GWT generates poorly performing JSThe GWT compiler generates highly optimized and compact codeHand written JavaScript might be marginally faster in some cases, but it’s not worth the trouble
Myth: GWT only works with a Java backendGWT includes a simple and efficient RPC mechanism that relies on Java servletsBUT it plays nice with any server-side technology that can handle HTTP requests (even PHP)Includes XML encoding/decoding libraryIncludes JSON encoding/decoding library
Myth: GWT has poor UI componentsYes, GWT’sbuiltin widgets are minimalistic…BUT GWT’s point is not to provide a complete and beautiful widget setGWT provides the basis for rich and good-looking componentsCreate your own or use 3rd partySee Ext-GWT, SmartGWT
Myth: GWT apps have long startup timesNot longer than any JavaScript appObfuscation reduces sizeDeferred binding loads just the necessary code for the platform/languageGWT 2.0’s code splitting can split code in several chunksSmaller initial downloadOn-demand downloading
Myth: GWT doesn’t integrate with existing sitesGWT was designed from the beginning with the goal to integrate well into existing sitesGWT can build the UI from a blank HTML page or alter existing elementsVery easy to add GWT to an existing pageOnly a few lines of HTML to load the moduleCan “hook up” to any DOM element (through its ID)
Myth: GWT has poor skinning possibilitiesGWT uses CSS for stylingCan reskin a whole application without changing a line of code (done that!)Can split work between developer (behavior) and designer (appearance)Caution: CSS can introduce browser dependencies
ConclusionIs GWT the future of web development?GWT has passed reality checkGive it a try!GWT = easy AJAX now !=
PointersGWT home (downloads, docs, FAQs, guides, etc.)http://code.google.com/toolkitGoogle groups “GWT” grouphttp://groups.google.com/group/Google-Web-ToolkitonGWT: fresh news about GWThttp://www.ongwt.comLinkedIn “GWT Users” grouphttp://www.linkedin.com/groups?gid=129889
Shameless self-promotion
Thank youQuestions?gerardin.o@sfeir.lublog.gerardin.info@ogerardin

More Related Content

What's hot

Ajax Security
Ajax SecurityAjax Security
Ajax Security
Joe Walker
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
Julien Lecomte
 
JavaScript and BOM events
JavaScript and BOM eventsJavaScript and BOM events
JavaScript and BOM events
Jussi Pohjolainen
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
jeresig
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
jeresig
 
User Interface Patterns and Nuxeo
User Interface Patterns and NuxeoUser Interface Patterns and Nuxeo
User Interface Patterns and Nuxeo
anicewick
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
James Pearce
 
The DOM is a Mess @ Yahoo
The DOM is a Mess @ YahooThe DOM is a Mess @ Yahoo
The DOM is a Mess @ Yahoo
jeresig
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!
Chris Mills
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Nagaraju Sangam
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
Nicholas Zakas
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!
Doris Chen
 
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar TechnologiesRob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
george.james
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Jeado Ko
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
Doris Chen
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"
Chris Mills
 
jQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & TricksjQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
Addy Osmani
 
Bootstrap과 UI-Bootstrap
Bootstrap과 UI-BootstrapBootstrap과 UI-Bootstrap
Bootstrap과 UI-Bootstrap
WebFrameworks
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
Timothy Fisher
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
Oleksii Prohonnyi
 

What's hot (20)

Ajax Security
Ajax SecurityAjax Security
Ajax Security
 
High Performance Ajax Applications
High Performance Ajax ApplicationsHigh Performance Ajax Applications
High Performance Ajax Applications
 
JavaScript and BOM events
JavaScript and BOM eventsJavaScript and BOM events
JavaScript and BOM events
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
 
User Interface Patterns and Nuxeo
User Interface Patterns and NuxeoUser Interface Patterns and Nuxeo
User Interface Patterns and Nuxeo
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
The DOM is a Mess @ Yahoo
The DOM is a Mess @ YahooThe DOM is a Mess @ Yahoo
The DOM is a Mess @ Yahoo
 
Web versus Native: round 1!
Web versus Native: round 1!Web versus Native: round 1!
Web versus Native: round 1!
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
 
Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!Angular or Backbone: Go Mobile!
Angular or Backbone: Go Mobile!
 
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar TechnologiesRob Tweed :: Ajax and the Impact on Caché and Similar Technologies
Rob Tweed :: Ajax and the Impact on Caché and Similar Technologies
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
 
Building Web Sites that Work Everywhere
Building Web Sites that Work EverywhereBuilding Web Sites that Work Everywhere
Building Web Sites that Work Everywhere
 
Empowering the "mobile web"
Empowering the "mobile web"Empowering the "mobile web"
Empowering the "mobile web"
 
jQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & TricksjQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
 
Bootstrap과 UI-Bootstrap
Bootstrap과 UI-BootstrapBootstrap과 UI-Bootstrap
Bootstrap과 UI-Bootstrap
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
 

Viewers also liked

All about GWT
All about GWTAll about GWT
All about GWT
Ed Bras
 
GWT Training - Session 2/3
GWT Training - Session 2/3GWT Training - Session 2/3
GWT Training - Session 2/3
Faiz Bashir
 
GWT Overview And Feature Preview - SV Web JUG - June 16 2009
GWT Overview And Feature Preview - SV Web JUG -  June 16 2009GWT Overview And Feature Preview - SV Web JUG -  June 16 2009
GWT Overview And Feature Preview - SV Web JUG - June 16 2009
Fred Sauer
 
Secrets of the GWT
Secrets of the GWTSecrets of the GWT
Secrets of the GWT
David Chandler
 
Architecting your GWT applications with GWT-Platform - Lesson 02
Architecting your GWT applications with GWT-Platform - Lesson 02Architecting your GWT applications with GWT-Platform - Lesson 02
Architecting your GWT applications with GWT-Platform - Lesson 02
rhemsolutions
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
cromwellian
 
GWT Training - Session 3/3
GWT Training - Session 3/3GWT Training - Session 3/3
GWT Training - Session 3/3
Faiz Bashir
 
GWT Training - Session 1/3
GWT Training - Session 1/3GWT Training - Session 1/3
GWT Training - Session 1/3
Faiz Bashir
 
Comparing Flex, Grails, GWT, Seam, Struts 2 and Wicket
Comparing Flex, Grails, GWT, Seam, Struts 2 and WicketComparing Flex, Grails, GWT, Seam, Struts 2 and Wicket
Comparing Flex, Grails, GWT, Seam, Struts 2 and Wicket
Matt Raible
 
Web Frameworks of the Future: Flex, GWT, Grails and Rails
Web Frameworks of the Future: Flex, GWT, Grails and RailsWeb Frameworks of the Future: Flex, GWT, Grails and Rails
Web Frameworks of the Future: Flex, GWT, Grails and Rails
Matt Raible
 
Zend_Acl
Zend_AclZend_Acl
Zend_Acl
rhemsolutions
 
BluemixでGWTアプリケーションを動かす
BluemixでGWTアプリケーションを動かすBluemixでGWTアプリケーションを動かす
BluemixでGWTアプリケーションを動かす
Shisei Hanai
 
Introduction maven3 and gwt2.5 rc2 - Lesson 01
Introduction maven3 and gwt2.5 rc2 - Lesson 01Introduction maven3 and gwt2.5 rc2 - Lesson 01
Introduction maven3 and gwt2.5 rc2 - Lesson 01
rhemsolutions
 
Hibernate
HibernateHibernate
Hibernate
rhemsolutions
 
instalar postgresql php
instalar postgresql phpinstalar postgresql php
instalar postgresql php
rhemsolutions
 
Ireport
IreportIreport
Ireport
rhemsolutions
 
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
Fred Sauer
 
GWT + Gears : The browser is the platform
GWT + Gears : The browser is the platformGWT + Gears : The browser is the platform
GWT + Gears : The browser is the platform
Didier Girard
 
GWT Brand Guidelines 1.1
GWT Brand Guidelines 1.1GWT Brand Guidelines 1.1
GWT Brand Guidelines 1.1
Arcbees
 
Develop Gwt application in TDD
Develop Gwt application in TDDDevelop Gwt application in TDD
Develop Gwt application in TDD
Uberto Barbini
 

Viewers also liked (20)

All about GWT
All about GWTAll about GWT
All about GWT
 
GWT Training - Session 2/3
GWT Training - Session 2/3GWT Training - Session 2/3
GWT Training - Session 2/3
 
GWT Overview And Feature Preview - SV Web JUG - June 16 2009
GWT Overview And Feature Preview - SV Web JUG -  June 16 2009GWT Overview And Feature Preview - SV Web JUG -  June 16 2009
GWT Overview And Feature Preview - SV Web JUG - June 16 2009
 
Secrets of the GWT
Secrets of the GWTSecrets of the GWT
Secrets of the GWT
 
Architecting your GWT applications with GWT-Platform - Lesson 02
Architecting your GWT applications with GWT-Platform - Lesson 02Architecting your GWT applications with GWT-Platform - Lesson 02
Architecting your GWT applications with GWT-Platform - Lesson 02
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
 
GWT Training - Session 3/3
GWT Training - Session 3/3GWT Training - Session 3/3
GWT Training - Session 3/3
 
GWT Training - Session 1/3
GWT Training - Session 1/3GWT Training - Session 1/3
GWT Training - Session 1/3
 
Comparing Flex, Grails, GWT, Seam, Struts 2 and Wicket
Comparing Flex, Grails, GWT, Seam, Struts 2 and WicketComparing Flex, Grails, GWT, Seam, Struts 2 and Wicket
Comparing Flex, Grails, GWT, Seam, Struts 2 and Wicket
 
Web Frameworks of the Future: Flex, GWT, Grails and Rails
Web Frameworks of the Future: Flex, GWT, Grails and RailsWeb Frameworks of the Future: Flex, GWT, Grails and Rails
Web Frameworks of the Future: Flex, GWT, Grails and Rails
 
Zend_Acl
Zend_AclZend_Acl
Zend_Acl
 
BluemixでGWTアプリケーションを動かす
BluemixでGWTアプリケーションを動かすBluemixでGWTアプリケーションを動かす
BluemixでGWTアプリケーションを動かす
 
Introduction maven3 and gwt2.5 rc2 - Lesson 01
Introduction maven3 and gwt2.5 rc2 - Lesson 01Introduction maven3 and gwt2.5 rc2 - Lesson 01
Introduction maven3 and gwt2.5 rc2 - Lesson 01
 
Hibernate
HibernateHibernate
Hibernate
 
instalar postgresql php
instalar postgresql phpinstalar postgresql php
instalar postgresql php
 
Ireport
IreportIreport
Ireport
 
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
SF JUG - GWT Can Help You Create Amazing Apps - 2009-10-13
 
GWT + Gears : The browser is the platform
GWT + Gears : The browser is the platformGWT + Gears : The browser is the platform
GWT + Gears : The browser is the platform
 
GWT Brand Guidelines 1.1
GWT Brand Guidelines 1.1GWT Brand Guidelines 1.1
GWT Brand Guidelines 1.1
 
Develop Gwt application in TDD
Develop Gwt application in TDDDevelop Gwt application in TDD
Develop Gwt application in TDD
 

Similar to GWT = easy AJAX

GWT
GWTGWT
Google Dev Day2007
Google Dev Day2007Google Dev Day2007
Google Dev Day2007
lucclaes
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
IMC Institute
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
Software Park Thailand
 
Beyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 AppsBeyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 Apps
Marcos Caceres
 
Proposal
ProposalProposal
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Framework
ecker
 
Ajax: User Experience
Ajax: User ExperienceAjax: User Experience
Ajax: User Experience
petrov
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
Mahmoud Tolba
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
Randy Connolly
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
zonathen
 
Node
NodeNode
Sofea and SOUI - Web future without web frameworks
Sofea and SOUI - Web future without web frameworksSofea and SOUI - Web future without web frameworks
Sofea and SOUI - Web future without web frameworks
André Neubauer
 
WaveMaker tutorial with Flash
WaveMaker tutorial with FlashWaveMaker tutorial with Flash
WaveMaker tutorial with Flash
marina2207
 
WAD - WaveMaker tutorial
WAD - WaveMaker tutorial WAD - WaveMaker tutorial
WAD - WaveMaker tutorial
marina2207
 
Gwt Presentation1
Gwt Presentation1Gwt Presentation1
Gwt Presentation1
rajakumar.tu
 
WaveMaker Presentation
WaveMaker PresentationWaveMaker Presentation
WaveMaker Presentation
Alexandru Chica
 
Client side scripting using Javascript
Client side scripting using JavascriptClient side scripting using Javascript
Client side scripting using Javascript
Bansari Shah
 
T 0230 Google Wave Powered By Gwt
T 0230 Google Wave Powered By GwtT 0230 Google Wave Powered By Gwt
T 0230 Google Wave Powered By Gwt
supertoy2015
 
GWT is Smarter Than You
GWT is Smarter Than YouGWT is Smarter Than You
GWT is Smarter Than You
Robert Cooper
 

Similar to GWT = easy AJAX (20)

GWT
GWTGWT
GWT
 
Google Dev Day2007
Google Dev Day2007Google Dev Day2007
Google Dev Day2007
 
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web ToolkitJava Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Beyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 AppsBeyond HTML: Tools for Building Web 2.0 Apps
Beyond HTML: Tools for Building Web 2.0 Apps
 
Proposal
ProposalProposal
Proposal
 
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Framework
 
Ajax: User Experience
Ajax: User ExperienceAjax: User Experience
Ajax: User Experience
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Node
NodeNode
Node
 
Sofea and SOUI - Web future without web frameworks
Sofea and SOUI - Web future without web frameworksSofea and SOUI - Web future without web frameworks
Sofea and SOUI - Web future without web frameworks
 
WaveMaker tutorial with Flash
WaveMaker tutorial with FlashWaveMaker tutorial with Flash
WaveMaker tutorial with Flash
 
WAD - WaveMaker tutorial
WAD - WaveMaker tutorial WAD - WaveMaker tutorial
WAD - WaveMaker tutorial
 
Gwt Presentation1
Gwt Presentation1Gwt Presentation1
Gwt Presentation1
 
WaveMaker Presentation
WaveMaker PresentationWaveMaker Presentation
WaveMaker Presentation
 
Client side scripting using Javascript
Client side scripting using JavascriptClient side scripting using Javascript
Client side scripting using Javascript
 
T 0230 Google Wave Powered By Gwt
T 0230 Google Wave Powered By GwtT 0230 Google Wave Powered By Gwt
T 0230 Google Wave Powered By Gwt
 
GWT is Smarter Than You
GWT is Smarter Than YouGWT is Smarter Than You
GWT is Smarter Than You
 

Recently uploaded

Finetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and DefendingFinetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and Defending
Priyanka Aash
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
Michael Price
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
FIDO Alliance
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
Tech Guru
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
Alison B. Lowndes
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
alexjohnson7307
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
Bhajan Mehta
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
KIRAN KV
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
DianaGray10
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024
Stephanie Beckett
 
Accelerating Migrations = Recommendations
Accelerating Migrations = RecommendationsAccelerating Migrations = Recommendations
Accelerating Migrations = Recommendations
isBullShit
 

Recently uploaded (20)

Finetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and DefendingFinetuning GenAI For Hacking and Defending
Finetuning GenAI For Hacking and Defending
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
UX Webinar Series: Essentials for Adopting Passkeys as the Foundation of your...
 
Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024
 
Accelerating Migrations = Recommendations
Accelerating Migrations = RecommendationsAccelerating Migrations = Recommendations
Accelerating Migrations = Recommendations
 

GWT = easy AJAX

  • 1. GWT = Easy AJAXConfoo.ca11/3/2010
  • 2. Who am I?Olivier GérardinTechnical Director, Sfeir Benelux (groupe Sfeir)Java / Web architect13+ years Java3 years GWT
  • 3. AgendaLittle GWT showcaseWhy GWT?How does it work?Key featuresMyths & misconceptionsPointers, Conclusion, Q&A
  • 4. GWT ShowcaseSeesmic webGWT Equation editorGWTUMLPiano EtudesClarity AccountingContactOfficeMyERP, CompiereExt-GWT explorerAnd more: Google Wave, Timetonote CRM…
  • 5. Mandatory and oversimplified history of the dynamic webWhy GWT?
  • 6. Web 0.0Or “The Link Era”A web page is just a bunch of images and text with linksPages are usually stored (not generated)Links take you to a new pageClick on linkHTTP request is built (from static link URL) and sentWait for server to replyServer replies with HTML page (usually from file)Response received  blank screenWait for entire page to load
  • 7. Web 1.0Or “The Form Era”In addition to images and text, a web page can contain fields and other widgetsA designated button submits the form Pages are build Fill in formSubmitHTTP request is built (from form parameters and field values) and sentWait for server to replyServer replies with HTML page (usually generated on server)Response received  blank screenWait for entire page to load
  • 8. Server side processingCGIBasic bridge to OS commandsVery ineffective (1 request = 1 process)Web server / application serverPHP, JSP, ASP, perl, whateverPerformance improvementsOn-demand compilationThread poolingPage is totally reconstructed for every request
  • 9. 1995: here comes JavaScriptClient-side scriptingFirst usage: client-side form validationAvoid server round-trip when invalidInstant feedbackWith DOM: polymorphic client page (DHTML)Menus, animations, etc.Cross-browser (almost)No server interaction without submit/reload 
  • 10. 2000: XHTTPR and AJAXMS introduces Outlook Web AccessWeb “clone” of desktop client (Outlook)Fetches data from server without reloading page!How is that possible?New class: XmlHttpRequestAllows server interaction without page reloadResponse received asynchronouslyInterface updated through DOMAJAX is born!
  • 11. The first AJAX app: Outlook Web Access
  • 12. JavaScript frenzyJS becomes hype… Cool-looking, nice to use web UIsEveryone wants to do JavaScriptAny serious web site must have dynamic content, auto-completion or other AJAX goodiesWidget sets / frameworks begin to emergeScriptaculous, YUI, dojo, jScript, …Anything seems possible in JavaScriptJavaScript OS, AjaxSwing (WebCream), …
  • 13. JavaScript hangoverSerious JavaScript hurts…Cross-browser compatibility nightmareFix in one, break in anotherJavaScript Guru required!Developing/Debugging nightmareWeird runtime errorsNo static typingNo refactoringAnd..Memory leaksHeavy pagesSecurity issues
  • 15. What to do?Option 1: leave the hard work to othersBuild the demo with AJAXWin the contractLeave the team…Option 2: Give up AJAXFor what? Flex? Silverlight? JavaFX?Plugin requiredSEO unfriendlyLearning curveAJAX is too cool!
  • 16. Google is in the same boatGoogle is a heavy producer of AJAX appsHad to come up with a solution…
  • 17. GWT solves all your problemsGWT gives you AJAX without the pain of JavaScript developmentTakes care of cross-browser issuesAllows full debugging (breakpoints, step by step, inspecting/watching variables)Strong static typing early error detectionFull refactoring optionsNo browser plugin or mandatory IDEShort learning curveSimple RPC mechanism built inBut can communicate with any server technology
  • 18. Program in Java…GWT allows developing client-side web apps in full Java (with only a few restrictions)Leverage existing Java tools and skillsUse any IDE (Eclipse, NetBeans, IntelliJ, …)Program like a traditional graphical client (Swing, SWT, …)Widgets, containers, listeners, etc.Use OO patterns (MVC, MVP, observer, composite, etc.)Test like any Java appUse standard Java debuggersTest with JUnit
  • 19. … deploy in JavaScriptJavaScript is only generated:For deploymentTo test in actual web modeGWT guarantees that the generated JavaScript app behaves exactly like the Java app And it does (most of the time)
  • 20. How does it work?
  • 21. 4 easy piecesJava-to-JavaScript compilerJRE emulation libraryJava librariesHosted Development mode
  • 22. GWT compilerGenerates JS code from Java sourcePerforms numerous optimizationsIn most cases better than hand codingCan generate obfuscated (ultra-compact) codeJS plays a role similar to bytecode for compiled Java applicationsShocking!
  • 23. JRE Emulation libraryProvides a GWT-compatible version of Java core classesMost of java.langMost of java.utilSome classes of java.io and java.sqlFor convenience only! No real I/O or JDBC!Used when running in web modeHosted mode runs in a JVM with standard JRE
  • 24. GWT Java librariesUtility classesRPC, I18N, …Widget setSimple widgets (Button, TextField, …)Base building blocksIn most cases map to native HTML objectComposites = widgets built from other widgetsPanels = widget containersPanels enforce a layout (vertical, horizontal, grid, …)
  • 28. Development modeAllows running GWT apps without converting them to JavaScriptCode runs as Java bytecode in a standard JVMDevelopment mode shell emulates JS runtimeActual rendering done by real browserPerforms extensive checks to make sure the code is compilable to JavaScriptBottom line: if a GWT application performs as expected in development mode, it will perform identically in web mode99,9% of the time…
  • 30. Luxembourg is very smallFits inside a 82 x 67 km rectanglePopulation < 500k (Montréal: 1.6 m)
  • 31. Luxembourg City is beautiful
  • 32. Luxembourg has a lot of castles
  • 33. Luxembourg TriviaWorld’s only Grand-DuchyMore than 150k cross-border workers50% of the capital city’s population during working hours3 official languages (fr, de, lu)Highest GDP per capitaImportant financial center (funds)Home of Europe’s largest TV/radio company (RTL group)2 hours away from Paris by TGV / international airport
  • 34. Back to GWT:Key features
  • 35. Easy developmentDuring development, you are writing and running a classic Java appUse your favorite IDEAll IDE features available (code completion, code analysis, refactoring, links, Javadoc, …)Plugins help GWT-specific taskslaunching development modecompilingrefactoringcreating projects, modules, RPC services, …even design GUI (GWT Designer from Instantiations)
  • 36. Easy RPC implementationRPC mechanism based on Java servletsEasy as:Define service interfaceintadd (intx, inty);Derive asynchronous interfacevoid add (intx, inty, AsyncCallback<Integer> callback);Implement service interface publicint add (intx, inty) { returnx + y; }
  • 37. Easy RPC consumptionEasy as:Obtain service proxyAddServiceAsyncaddService = GWT.create(AddService.class);Call methodaddService.add(x, y, newAsyncCallback<Long>() { publicvoidonFailure(Throwable caught) { // handle failure } publicvoidonSuccess(Integer result) { // handle success }});
  • 38. Easy RPC deploymentRPC services are actually POJS (plain old Java servlets)Can be deployed without changes in any servlet engineIntegrated test server uses standard web.xml format for declaring services
  • 39. Easy JSON generationEasy as:JSONObjectlivre = newJSONObject();livre.put("Titre", newJSONString("GWT"));livre.put("Pages", new JSONNumber(123));JSONArraychapitres = newJSONArray();chapitres.set(0, newJSONString("Introduction"));
  • 40. Easy JSON parsingEasy as:JSONObjectlivre = newJSONObject(json);String titre = livre.get("Titre").isString().stringValue();doublepages = livre.get("Pages").isNumber().doubleValue();JSONArraychapitres = livre.isArray();String chap0 = chapitres.get(0).isString().stringValue();
  • 41. Deferred bindingAppropriate code for user environment (browser, locale) is chosen at application startup time≠ dynamic binding (implementation chosen at runtime)≠ static binding (implementation chosen at compile time)Code for every combination is generated at compile timeAdvantages:Allows app-wide optimizationsCompensates for the lack of dynamic (runtime) loadingDisadvantages:Increases compilation time
  • 42. Deferred Binding (explicit)Deferred binding can be called explicitly:Foofoo = GWT.create(Foo.class);Implementation is provided by either:Substitution: an existing class is designatedGeneration: class is generated during compilation
  • 43. Easy native JavaScript integrationImplement a method directly in JavaScript:publicstaticnativevoidalert(Stringmsg) /*-{ $wnd.alert(msg);}-*/;Call back Java methods from JavaScriptPass objects back and forthUseful to Wrap legacy JavaScript librariesAccess browser functionality not exposed by GWTDangerous! Easily breaks cross-browser compatibility
  • 44. Easy Widget reuseCreate your own widgets:Extend existing widgetWorks but not the most efficientMight expose unwanted methods from superclassExtend CompositeRecommended methodUse JSNITo wrap existing JavaScript widgets
  • 45. Easy history supportAJAX app = single page“back” button  catastrophe…GWT solution:Encode app state in URL as “fragment”E.g. http://myserver/myGwtApp#x=1;y=2Save state:History.newItem(token);React to state change (“back” button)History.addValueChangeHandler(…);
  • 46. I18n: constant substitutionDefine interfacepublicinterfaceAppConstantsextends Constants { String title();}“Implement” interfaceAppConstants.properties: title = Hello, WorldAppConstants_fr_CA.properties: title = Salut, Monde …UseAppConstantsappConstants = GWT.create(AppConstants.class);String title = appConstants.title();
  • 47. I18n: template substitutionDefine interfacepublicinterfaceAppMessagesextends Messages { String mailStatus(intn, String s);}“Implement” interface (AppMessages.properties)mailStatus = You have {0} messages in folder {1}Use:AppMessagesmsgs = GWT.create(AppMessages.class);String status = msgs.mailStatus(15, “Inbox”);
  • 48. Easy debuggingIn development mode, application runs as bytecode (just like any old Java app…)So you can debug it just like any classic Java app:Set breakpointsStep through codeInspect variablesChange variables…
  • 49. Short dev cycleChange client code:press “Reload”.. Done!Change server code:Embedded server: press “Restart”.. Done!External server: hotswap /redeploy if needed
  • 50. Easy client-server testingIntegrated application server for testing RPC servicesCan be disabled to use external serverJUnit integration to run client-side test cases Hosted mode or web modeFull access to RPC servicesGWTTestCase, GWTTestSuite for automationSelenium for automated GUI testing
  • 51. Easy scalingAll session data resides on clientSimilar to classic fat clientNo session information on server-sideForget session affinityAdd/remove servers on the flyRestart server without losing clients
  • 52. “Easy” stylingStyling relies entirely on CSSWidgets have well-known style namesProgrammer can add custom stylesNo shift from traditional HTML stylingHTML/DOM build page “skeleton”Appearance tuned with CSSSeparate UI construction from stylingWith well thought styles, it’s possible to reskin completely an application without changing one line of codeGWT styling has all the benefits of CSS with all problems of CSSBe careful with brower dependencies!
  • 53. Easy Google AJAX APIsProject gwt-google-apishttp://code.google.com/p/gwt-google-apisLibraries that wrap Google JavaScript APIsMapsGears (storage, obsoleted by HTML5)Gadgets (embedable applets)AJAX search (embedded google search)Visualization (charts)Language (translation, language detection)Standalone libraries (do not require JavaScript libraries)
  • 54. [new in 2.0] in-browser development modeBefore 2.0: hosted mode uses customized browser engineHeavily customizedOnly one supported browser per platform (IE on Windows, WebKit on Mac, Mozilla on Linux)Difficult to keep up-to-dateIncludes platform-specific code (SWT)Browser and hosted application share the same processMost plugins don’t work (including Google Gears…)
  • 55. [new in 2.0] in-browser development modenow:Hosted mode shell runs outside browserCommunicates with browser using plugin through TCP
  • 56. [new in 2.0] in-browser development modeBenefitsUse any (supported) browser/version on any platformBehavior closer to web modeNo interference with browser pluginsNo more platform-specific stuff in GWT (one jar for all!)Network protocol cross-platform possibleDev mode shell on machine X, slave browser on machine YE.g. dev on Linux, test in IE on Windows…
  • 57. [new in 2.0] speed tracerPerformance analysis toolVisualize where your app spends time:JS executionBrowser renderingCSS handling (style selection/calculation)DOM handling (event processing)Resource loading
  • 58. [new in 2.0] code splittingBefore: monolithic download can become very bigSlow startup timesAfter: Programmer can insert “split points” in codeHints for the compiler to place everything not required up to split point in separate downloadCompiler divides code in several “chunks”, which are loaded on-demandBenefits:Initial loading time reduced 50% on average with a single split pointAllows on-demand module loading (provider pattern)
  • 59. [new in 2.0] declarative UIDeclarative construction of GUI using XML grammarAllows automatic binding with Java code (through annotations)Automatically assign references to dynamically created widgets to designated Java fields (@UiField)Automatically attach methods as event handlers (@UiHandler)Benefits:Clearly separate:Static UI construction (XML)Dynamic UI behavior (Java)
  • 60. [new in 2.0] resource bundleDownload multiple heterogeneous resources from server in a single requestImages (already possible in pre-2.0)CSSTextAny binary resourceBenefits:Fewer round trips to the serverLess overheadMore responsive interface
  • 61. [new in 2.0] and also…Compiler optimizationsMostly generated JS sizeDraft compile modeFaster buildsNot for deployment!Layout panelsPredictable, consistent layoutConstraint based system built on top of CSSPlays nice with custom CSS stylesHtmlUnitNo native code / browser required
  • 63. Myth: GWT is a JS library/framework/widget setGWT is not for JavaScript developersProvides only Java classes
  • 64. Myth: GWT is a frameworkGWT is a toolkit (set of tools)Frameworks may be built on top of it
  • 65. Myth: GWT is appletsA GWT application is 100% JavaScriptNo runtime/pluginNo JRE required
  • 66. Myth: GWT is only for Java programmersYes, GWT uses Java as programming language…BUT you can also see it this way:GWT lets you write/debug/test/refactor AJAX apps with state-of-the-art IDEs and tools using a statically-typed object-oriented languageGWT makes it worth learning Java!
  • 67. Myth: GWT generates poorly performing JSThe GWT compiler generates highly optimized and compact codeHand written JavaScript might be marginally faster in some cases, but it’s not worth the trouble
  • 68. Myth: GWT only works with a Java backendGWT includes a simple and efficient RPC mechanism that relies on Java servletsBUT it plays nice with any server-side technology that can handle HTTP requests (even PHP)Includes XML encoding/decoding libraryIncludes JSON encoding/decoding library
  • 69. Myth: GWT has poor UI componentsYes, GWT’sbuiltin widgets are minimalistic…BUT GWT’s point is not to provide a complete and beautiful widget setGWT provides the basis for rich and good-looking componentsCreate your own or use 3rd partySee Ext-GWT, SmartGWT
  • 70. Myth: GWT apps have long startup timesNot longer than any JavaScript appObfuscation reduces sizeDeferred binding loads just the necessary code for the platform/languageGWT 2.0’s code splitting can split code in several chunksSmaller initial downloadOn-demand downloading
  • 71. Myth: GWT doesn’t integrate with existing sitesGWT was designed from the beginning with the goal to integrate well into existing sitesGWT can build the UI from a blank HTML page or alter existing elementsVery easy to add GWT to an existing pageOnly a few lines of HTML to load the moduleCan “hook up” to any DOM element (through its ID)
  • 72. Myth: GWT has poor skinning possibilitiesGWT uses CSS for stylingCan reskin a whole application without changing a line of code (done that!)Can split work between developer (behavior) and designer (appearance)Caution: CSS can introduce browser dependencies
  • 73. ConclusionIs GWT the future of web development?GWT has passed reality checkGive it a try!GWT = easy AJAX now !=
  • 74. PointersGWT home (downloads, docs, FAQs, guides, etc.)http://code.google.com/toolkitGoogle groups “GWT” grouphttp://groups.google.com/group/Google-Web-ToolkitonGWT: fresh news about GWThttp://www.ongwt.comLinkedIn “GWT Users” grouphttp://www.linkedin.com/groups?gid=129889

Editor's Notes

  1. MyERP: Mime_Inc, admin/9p5fJJ_AHCompiere: Server:    http://open.compiere.comUser ID:    Olivier GérardinPassword:    20004098
  2. A améliorer (dessin/anim)Exemple: http://web.archive.org/web/19961223105317/http://www.feedmag.com/
  3. A améliorer (dessin/anim)
  4. Étayer les arguments
  5. Origine du nom JavaScript: accord entre Netscape et Sun pour promouvoir la marque “Java”
  6. BrowserBpook: http://www.visibone.com/products/browserbook.html
  7. Side discussion: high-level languages vs low-level languages. Make the point that although using GWT means giving up some JS idioms, the benefits are elsewhere.
  8. Native HTML widgets use the system’s native look &amp; feel.
  9. Native Javascript (JSNI) works in dev mode too
  10. No constraints on server-side code (plain Java bytecode)
  11. GWT performs “Browser sniffing” (controversy)
  12. Works
  13. DEMO if time allows
  14. DEMO if time allows
  15. Improved with GWT 2.0
  16. Gears phased out fro HTML5