Downloaded 11 times
!["0" == 0
"0" === 0
[] == []
[] == ![]
![]
+[]
2 == [2]
+[2]
[2] + ''
+([2] + '')
+[2,3]
+[2,3] + ''
'2' + 1
'2' - 1
'2' - - 1
+true
+false
true + true
parseInt(2)
parseInt('2')
parseInt('aaa')
parseInt(9999999999999999)
typeof NaN
0.1 + 0.2 == 0.3
'I am String' instanceof String
String('I am String') instanceof String
3 > 2
2 > 1
3 > 2 > 1
3 > 2 >= 1
1 < Number.MAX_VALUE
-1 < Number.MAX_VALUE
-1 < Number.MIN_VALUE
Number.MAX_VALUE
Number.MIN_VALUE
Math.max(1,2,3)
Math.min(1,2,3)
Math.max() > Math.min()
Math.max()
Math.min()
String instanceof String
Math instanceof Math
typeof null
null instanceof Object
JS: Crazy type conversion](https://image.slidesharecdn.com/gwt-madrid-171103093314/85/The-Java-alternative-to-Javascript-12-320.jpg)
![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);
}
}](https://image.slidesharecdn.com/gwt-madrid-171103093314/85/The-Java-alternative-to-Javascript-39-320.jpg)
!["0" == 0
"0" === 0
[] == []
[] == ![]
![]
+[]
2 == [2]
+[2]
[2] + ''
+([2] + '')
+[2,3]
+[2,3] + ''
'2' + 1
'2' - 1
'2' - - 1
+true
+false
true + true
parseInt(2)
parseInt('2')
parseInt('aaa')
parseInt(9999999999999999)
typeof NaN
0.1 + 0.2 == 0.3
'I am String' instanceof String
String('I am String') instanceof String
3 > 2
2 > 1
3 > 2 > 1
3 > 2 >= 1
1 < Number.MAX_VALUE
-1 < Number.MAX_VALUE
-1 < Number.MIN_VALUE
Number.MAX_VALUE
Number.MIN_VALUE
Math.max(1,2,3)
Math.min(1,2,3)
Math.max() > Math.min()
Math.max()
Math.min()
String instanceof String
Math instanceof Math
typeof null
null instanceof Object
JS: Crazy type conversion](https://image.slidesharecdn.com/gwt-madrid-171103093314/75/The-Java-alternative-to-Javascript-12-2048.jpg)
![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);
}
}](https://image.slidesharecdn.com/gwt-madrid-171103093314/75/The-Java-alternative-to-Javascript-39-2048.jpg)
Uploaded byManuel Carrasco Moñino
The Java alternative to Javascript
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.
More Related Content
Similar to The Java alternative to Javascript
The Java alternative to Javascript
- 1. GWT 2.8.x -3.0.x The Java alternative to Javascript Manolo Carrasco +ManuelCarrascoMonino @dodotis
- 2.
- 3. Agenda ● A littlebit 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
- 4. FIGHT FOR SIMPLICITYthinkingof U and I
- 5. - Vaadin isa 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
- 6. Architecture Developer Space Provided byVaadin JVM Browser
- 7. Java Lang JVM ecosystem libs,IDEs ... Developer space GWT vs Vaadin Java Lang JVM ecosystem libs, IDEs ... Scala, Groovy...
- 8. MillStone 3.0 IT Mill4.0 IT Mill 5.0 2002 2007 2008 2018 2013 2009 Vaadin 6.0 Vaadin 7.0 2017 Vaadin 8.0 Vaadin 10 Vaadin: a 18y whisky
- 9.
- 10.
- 11. JS: What isthe issue here? idx might be a String
- 12. "0" == 0 "0"=== 0 [] == [] [] == ![] ![] +[] 2 == [2] +[2] [2] + '' +([2] + '') +[2,3] +[2,3] + '' '2' + 1 '2' - 1 '2' - - 1 +true +false true + true parseInt(2) parseInt('2') parseInt('aaa') parseInt(9999999999999999) typeof NaN 0.1 + 0.2 == 0.3 'I am String' instanceof String String('I am String') instanceof String 3 > 2 2 > 1 3 > 2 > 1 3 > 2 >= 1 1 < Number.MAX_VALUE -1 < Number.MAX_VALUE -1 < Number.MIN_VALUE Number.MAX_VALUE Number.MIN_VALUE Math.max(1,2,3) Math.min(1,2,3) Math.max() > Math.min() Math.max() Math.min() String instanceof String Math instanceof Math typeof null null instanceof Object JS: Crazy type conversion
- 14. GWT's mission isto 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 - Compilingto JavaScript was not a thing - GWT pioneered the idea. - Then came: CoffeeScript, Dart, TypeScript, …
- 17. Advantages of aCompiler 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 CompileTime - 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 ofGWT - 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)
- 20. Innuvo 1.0.21 1.3.3 O.S 2005 2006 2007 2018 2010 2009 2.0 UIBOOPHM 2.1 MVP RF 2011 2.2 Designer 3.0 J2CL GWT a 12y whisky 2012 Grid 2.4 2013 2.5 SDM 2017 2.8 J8 JSi E22014 2.6 J7
- 21.
- 22. GWT is Popularin the Java Web 2016 2012
- 23.
- 24.
- 25. Good Tools &Ecosystem
- 26. High Quality andMature
- 27.
- 28. For Big Teams& Big Projects
- 29.
- 30.
- 31.
- 32. Obsolete Stuff ↝ Generators ↝Widgets, Elements, JSO ↝ RPC ↝ RF ↝ AutoBeans ↝ UiBinder ↝ JSNI ↝ Classic DevMode ↝ Ant ↝ Designer
- 33.
- 34. A project withfew Contributors
- 35.
- 36. Hard to Interactwith JS - Not Anymore - JsInterop - Elemental2
- 37. @JsType(isNative = true) publicabstract 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 classBar { 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 - newBrowser 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 thecurrent 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
- 41. Long Term SupportApplications LTS Apps
- 42. 2.8.x is perfectfor Long Term Apps
- 43. - Avoid legacymodules - 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
- 44.
- 45. Decorate the hostpage with CSS3 App Shell
- 46. GWT nature isSPI and RIA App Like Iterations
- 47.
- 48. HTTPS: simply works GWTlinkers: unique random names Secure & Fresh Updates
- 49. Responsive UI - Permutationper device - Responsive UI libs
- 50. - GWT alreadyhave - Code splitting - Code removal - Permutations Fast Loading
- 51. Offline GWT is clientside -> Works Offline
- 52. - Use ResponsiveWidgets Gwt-bootstrap Gwt-material Gwt-polymer-elements Recipe 1 - Responsiveness
- 53. - Re-use UIComponens: 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 astatic 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
- 55. - Use out-of-the-boxsolutions - PouchDB + CouchDB - Gwt-pouchdb - Vaadin-pouchdb (via gwt polymer) - Firebase - Gwt-firebase (xplatform) - Polymerfire (via gwt polymer) Recipe 4 - Data Offline
- 56. - Inbox - GSuite - Google Docs - Google Flights - Closure - Vaadin Flow internals How uses modern GWT
- 57. GWT Transition pathfor the Future
- 58. The Near futureof 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
- 59. 2.9.x might beyour Transition Path
- 60. - Use minset 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
- 61.
- 62. Frontend: State ofthe art
- 63. We are inthe JavaScript Era
- 64. Popularity of WebPlatforms
- 65.
- 66. Good dev toolsin JS
- 67. JS also runseverywhere
- 68. How is GWTin this jungle
- 69. Lot of reactions,Is GWT Dead?
- 70. GWT reasons, notvalid 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 JavaLanguage is the strong Key of using GWT GWT reasons nowadays
- 72.
- 73. GWT 3.0 isfor 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
- 74. J2CL Pronounced “Jackal” Shares featureswith the GWT compiler ● JsInterop ● Java8 ● Java standard library (JRE) ● Elemental2
- 75. J2CL Source to sourcetranspiler - 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(); } };
- 77. J2CL - SharingCode Java JavaScriptJ2CL JavaScriptClosure Optimized JavaScript
- 78. J2CL + Closure→ Optimisation
- 79. Two possible pathsfor 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 transpilerin the JS world NODE ECOSYSTE M npm,gulp,*.js , Java IDE mvn, jar, Java IDE JVMJAVA NODE npm, gulp, *.js, Java IDE JAVA
- 81.