GWT 2.8.x - 3.0.x provides a Java alternative to JavaScript for building web applications. It has evolved over time from addressing issues with early JavaScript and browsers to embracing modern JavaScript. GWT 3.0 will focus on the JavaScript ecosystem through a new compiler called J2CL that transpiles Java to JavaScript for better integration. This positions GWT to remain relevant for building frontend applications by leveraging the large Java and modern JavaScript ecosystems.
Turducken - Divide and Conquer large GWT apps with multiple teamsRobert Keane
Complex GWT apps can involve multiple teams with different release cycles. Compile times can quickly become prohibitive when your codebase grows into millions of lines. “Turducken” is a technique to combine multiple GWT apps that can be built and released by separate teams while providing a seamless, snappy user experience.
Location:
Progressive Web App Dev Summit, GDG Madrid 21-Jul-2016
Abstract:
Progressive Web Apps (PWA) have responsive layout, works offline, and can be on the home screen.
WebComponents allows build all those missing HTML pieces.
Polymer is a library for manipulating Web Components.
This presentation joins all those new technologies for creating the Future Apps.
Building complex browser-based applications in Java 8 (GWT in 2016?)
The presentation contains a lot of references (link icons) but unfortunatelly, SlideShare imported the presentation in 90% correct. For the fully working presentation please consider using the link below: https://docs.google.com/presentation/d/1sDoNivyEb2lR6GMrmXsepO6fOR0QsYua7m-R8RR4DC4/edit?usp=sharing
The Google Drive presentation is also the most current one (occasionally updated).
Turducken - Divide and Conquer large GWT apps with multiple teamsRobert Keane
Complex GWT apps can involve multiple teams with different release cycles. Compile times can quickly become prohibitive when your codebase grows into millions of lines. “Turducken” is a technique to combine multiple GWT apps that can be built and released by separate teams while providing a seamless, snappy user experience.
Location:
Progressive Web App Dev Summit, GDG Madrid 21-Jul-2016
Abstract:
Progressive Web Apps (PWA) have responsive layout, works offline, and can be on the home screen.
WebComponents allows build all those missing HTML pieces.
Polymer is a library for manipulating Web Components.
This presentation joins all those new technologies for creating the Future Apps.
Building complex browser-based applications in Java 8 (GWT in 2016?)
The presentation contains a lot of references (link icons) but unfortunatelly, SlideShare imported the presentation in 90% correct. For the fully working presentation please consider using the link below: https://docs.google.com/presentation/d/1sDoNivyEb2lR6GMrmXsepO6fOR0QsYua7m-R8RR4DC4/edit?usp=sharing
The Google Drive presentation is also the most current one (occasionally updated).
Madrid JUG Conferences, Apr 2013.
Development of mobile applications has became complex, and Companies need teams with specialists in very different platforms. With GWT + Apache Cordova, you can develop reliable applications using a unique code base written in java.
REST seven’s rule was “Code on Demand,” meaning the ability for the server to deliver code able to run on the client, and the recommended language was JavaScript. Some, to use the same code everywhere, tried to do it with Java, or .NET (ActiveX). None of them had long life success in browsers. HTML5 and offline support contributed in the creation of a bunch of APIs which only made sense on server-side in first place: File/FileSystem, Workers, Sockets, Storage/Session, Blob, ImageData. Almost all those APIs, including the not that young XMLHttpRequest, have been designed to be usable via either synchronous or asynchronous APIs. We have today the opportunity to write code really able to either on the server and on the client and then have consistent behaviors and security rules. We can expect interoperable code/libraries/modules, save a lot of developing and debugging time, get more people involved in code we need. Discover already existing opportunities, see some of them working, and envision what the future can come with.
These are the presentation slides demonstratingseven versions of the UI of same HTML5 application using various libraries and frameworks. This application is described in detail in the O'Reilly book "Enterprise Web Development"
Web components are coming! This presentation gives you a solid intro on web components and why they are the future of the web. After an introduction to the tools and concepts you will see hands-on how easy it is to develop modular web apps with Polymer and Vaadin Components.
The new polymer ecosystem makes really easy to share UI components between developers. Let's GWT take advantage of the JS ecosystem to create amazing UIs.
GWTcon Florence 2015
GwtQuery is a rewrite of the jQuery popular library with has brought to the GWT world its sexy API and its simplicity for doing complex things.
In this session Manuel will provide an overview of the fundamentals of gQuery, how to setup and use it, and how to write code which being laborious in GWT can be simplified using gQuery.
Productive UI development in Java with Vaadin
Codemotion 2014 (Madrid)
Vaadin is a popular web framework that combines web and Java platforms in an unique way. Writing an application that lazily loads large amounts of data from the server, includes drag-and-drop, keyboard navigation and compelling visualizations should not require writing any HTML, JavaScript or designing a REST API. All you need to do is write a component based UI in Java or any other JVM based language.
The presentation gives an overview to Vaadin and explains how it works. We'll also discuss on what are the latest new features of Vaadin and how the roadmap looks. The session should give you everything you need to get started building your own apps with the free Apache-licensed Vaadin.
Furthermore, we explore the ways of combining the server- and client-side development models. The goal is to be able to use the best of the both models and provide a flexible basis for building high quality user interfaces for enterprise applications.
During the GWT.create 2013 conferences in San Francisco and Frankfurt, Manuel Carrasco and Julien Dramaix were introducing new features coming with gQuery 1.4.0: Custom events, promises, jsni utilities, jsquery and much more.
This is the static version of our slides, but you can run a html5 version and code examples at: http://slides.gquery.org/gwtcreate
Collapsing Narratives: Exploring Non-Linearity • a micro report by Rosie WellsRosie Wells
Insight: In a landscape where traditional narrative structures are giving way to fragmented and non-linear forms of storytelling, there lies immense potential for creativity and exploration.
'Collapsing Narratives: Exploring Non-Linearity' is a micro report from Rosie Wells.
Rosie Wells is an Arts & Cultural Strategist uniquely positioned at the intersection of grassroots and mainstream storytelling.
Their work is focused on developing meaningful and lasting connections that can drive social change.
Please download this presentation to enjoy the hyperlinks!
This presentation, created by Syed Faiz ul Hassan, explores the profound influence of media on public perception and behavior. It delves into the evolution of media from oral traditions to modern digital and social media platforms. Key topics include the role of media in information propagation, socialization, crisis awareness, globalization, and education. The presentation also examines media influence through agenda setting, propaganda, and manipulative techniques used by advertisers and marketers. Furthermore, it highlights the impact of surveillance enabled by media technologies on personal behavior and preferences. Through this comprehensive overview, the presentation aims to shed light on how media shapes collective consciousness and public opinion.
3. Agenda
● A little bit of context of Vaadin
● Spooky JS
● History of GWT
● Present of GWT
○ LTM projects
○ Modern web
● Is GWT dead
○ State of the Frontend
○ J2CL the future
5. - Vaadin is a development platform for web
applications that prioritizes ease of development
and uncompromised end user experience.
- The Vaadin platform consists of a comprehensive
set of web components, a Java web framework,
configurable themes, tools and a set of app
templates.
Vaadin
14. GWT's mission is to radically improve the web experience
for users by enabling developers to use existing Java tools
to build no-compromise AJAX for any modern browser.
GWT Mision
A high-level language allows the Developer not to miss out
on low-level details and reuse existing ecosystem
GWT Productivity 2006
15. 2006 Context
- Browsers
- No Debug tools
- IE6, FF 1.5, Safari 2, Opera 9, No Chrome
- Incipient CSS (No animations, No rounded …)
- No RIA, No SPI
- No Smartphones
- Low performance PCs (256Mb, Single Core ...)
- JavaScript
- ES-3, No Standard XHR, No DOM traversing
- No IDE. No Refactoring, No Tests, No Libraries, No packaging ...
- No Runtime (V8)
- Java 1.4, no generics, no annotations
16. 2006 Context
- Compiling to JavaScript was not a thing
- GWT pioneered the idea.
- Then came: CoffeeScript, Dart, TypeScript, …
17. Advantages of a Compiler
Separate the maintainability of the code from the
effectiveness of the executable.
- The handwritten JS was verbose and slow
- The solution is not to look for conventions in the javascript code
written by hand, it is to create a level of separation so that both are
not compromised (maintainability, effectiveness).
Remove the bad parts while keeping the good stuff
18. Advantages in Compile Time
- Common errors are correctable at compile time and
not in execution time.
- Functionalities can be injected.
- Peculiarities / Hacks for each browser
- Assets bundling and compression
- Code Splitting and async loading
- Conversion and obfuscation server objects ↔ client
- Versioning, Minimisation
19. The basis of GWT
- The heart of GWT is the compiler, Java -> JavaScript
- Only supports a subset of the Java language
- The resulting code is JavaScript, single-threaded code.
- Creates a separated, obfuscated and optimised
JavaScript implementation for each supported browser.
- Takes into account browser specific features, bugs, issues and
performance optimizations
- But the toolkit has plenty of tools (dev, build, test, libs)
37. @JsType(isNative = true)
public abstract class JQuery {
@JsMethod(namespace=GLOBAL)
public native static JQuery $(String selector);
public native JQuery css(String prop, String val);
public native JQuery attr(String name, String val);
}
import static jquery.JQuery.$;
// ...
$("ul > li").css("color", "red").attr("data-level", "first");
Java
Java
Use native JsType to use any
existing JavaScript library.
Use it like JavaScript
JsInterop Consume
38. package foo;
@JsType
public class Bar {
public boolean bool = true;
public Bar() {}
public String foo() { return "Hello GWTCon!";}
}
var bar = new foo.Bar();
if (bar.bool) {
alert(bar.foo());
}
JavaScript
Expose your Object to
JavaScript world.
JavaScript can use your public
API of exposed Java objects.
Java
JsInterop Export
39. Elemental2 - new Browser API
public class SimpleApp {
public static void main(String[] args) {
window.addEventListener("load", evt -> install());
}
private static void install() {
final HTMLButtonElement button = (HTMLButtonElement) document.createElement("button");
button.textContent = "Click me";
button.addEventListener("click", evt1 -> {
button.parentNode.removeChild(button);
console.log("Button has been removed.");
});
document.body.appendChild(button);
}
}
40. Status of the current GWT
GWT 2.8.x
- Big Java artifacts (no split in modules)
- Stable & Long Term API Support
- No new Features planned
- Prepared for JS
- JsInterop
- Elemental2
- Large ecosystem
- 2.8 is stable and available for foreseeable future
43. - Avoid legacy modules
- Most Widgets, RPC, RF, etc
- Design with UIBinder and CSS3
- Use J8 syntax, collapse browser permutations.
- Select good 3rd party libs
- Gwt-material, Gwt-bootstrap, Gwt-query
- Use JsInterop for json data or Resty-GWT
Good Practices for LTS apps in 2.8.x
53. - Re-use UI Componens: JsInterop
- Easier development and sharing
- Lazy load components when needed
- Cache components for ever
- Use the platform: Elemental 2.0
- Thanks to JsInterop, to interact with platform is easy
- Use Elements instead of Widgets
- Not need of gwt wrap libraries
Recipe 2 - Fast loading
54. - Add a static Web App manifest
- Generate service-worker
- Disable old browsers:
<set-property name="user.agent" value="safari,gecko1_8" />
- Don’t use permutations:
<collapse-all-properties value="true" />
- Avoid random JS names
<add-linker name="sso" />
- Use the sw-precache CLI
Recipe 3 - Offline first
58. The Near future of GWT
GWT 2.9.x
- Modular (split in small artifacts)
- Parts might be transferred to, or taken by the community
- Expect changes and new Features in API
- Removing browsers, jsni, moving namespaces, etc
- Replacing generators with Annotation Processors
- But maintaining backwards compatibility
- Prepared for the JavaScript wild
- Expect tools for sharing with GWT 3.0
60. - Use min set of modules, start with Core.gwt.xml
- Forget Classic Widgets and Element
- Replace classic DOM with Elemental2
- #useThePlatform as much as possible
- Check 3rd party modules not to import User.gwt.xml
- Design the UI using Js reusable widgets
- Web components (gwt-polymer)
- Html templates (elemento or polymer)
- Decouple business logic from UI
Best practices for the Transition
70. GWT reasons, not valid anymore
- For the Browser (2006)
- Huge diffs between vendors (IE6)
- memory limitations (256Kb RAM PCs)
- Related with JavaScript (2006)
- No way to debug JS
- No tooling for JS optimisation and obfuscation
- No way of modularising / managing dependencies
- No IDE. No Testing tools. Slow runtime.
- Java Specific (2006)
- Same language client/server
- More developers than JavaScript
71. - The Java Language is the strong Key of using GWT
GWT reasons nowadays
73. GWT 3.0 is for the frontend chaos
- New compiler and tooling
- J2CL
- Runtime JVM, Node or both?
- Build system bazel, maven, npm ?
- Big changes in API and emulated JRE
- Prepared for the platform
- JsInterop
- Elemental2
- Comes with a different DX paradigm
75. J2CL
Source to source transpiler
- Takes Java 8 code as input and outputs readable ES6 with JsDoc
Closure style annotations
Transpiles one Java class at a time
Optimizations happen in Closure compiler
Code generation happen in Java annotation processors
Targeting modern Js features, blazing fast
76. Transpiler
@JsType
public class Hello {
public String message() {
return "GWTCon!";
}
public static String getMessage() {
return "Hello " + new Hello().message();
}
}
class Hello extends java_lang_Object {
/**
* @public
*/
constructor() {
super();
}
/**
* @return {?string}
* @public
*/
message() {
return "GWTCon!";
}
/**
* @return {?string}
* @public
*/
static getMessage() {
return "Hello " + new Hello().message();
}
};
79. Two possible paths for J2CL
➔ Classic Java Development flow
◆ Java IDE
◆ Java dependency artifacts (.jar)
◆ Java Build tools mvn, gradle, j2cl, closure, linker
◆ JVM for server side and testing tools
➔ Just a transpiler to JavaScript
◆ Java IDE
◆ JS dependencies (.js)
◆ JS Build tools npm, closure-compiler-js
◆ node-js for server side
◆ JS testing tools
80. A java transpiler in the JS world
NODE
ECOSYSTE
M
npm,gulp,*.js
,
Java IDE
mvn, jar,
Java IDE
JVMJAVA NODE
npm, gulp,
*.js,
Java IDE
JAVA