SFScon14: write java, run javascript: create enterprise html5 apps without “undefined” bugs

write java, run javascript:
create enterprise html5 apps without "undefined" bugs
by Davide Montesin <d@vide.bz>
(C) 2013-2014 Davide Montesin <d@vide.bz> - License: CC BY NC ND write java, run javascript: create enterprise html5 apps without "undefined" bugs 1 / 63

Who I am
Self employed senior consultant, teacher, programmer in
Bolzano/Bozen, Italy
Java - Android - HTML5/Js/Css3 - XML - JSON - Database
Open source - Linux

Javascript & browsers
Javascript ...

Javascript variable
Declaring a variable
var person = 'davide';
console.log(person);
Output
davide

Javascript dynamic typing :-(
A variable can contain any value type during its life
var person = 'davide'; // String
person = 2; // Number
person = {name: 'davide'} // Object
person = ['davide']; // Array
Output:
davide
2
Object {name: "davide"}
["davide"]

Javascript dynamic typing :-((
A typo
Output:
undefined

Javascript dynamic typing :-((
A typo
"person.name" is an error but javascript does not stop the execution
but declares implicitly a new attribute. A very bad bug!
Webstorm IDE and "use strict" does not help in this case :-(

Javascript dynamic typing :-((((((
Variables can contain any value, IDEs can't be exact with suggestions
In this case the method innerHTML makes no sense for a string

Javascript dynamic typing :-(((((
API: a javascript developer often consults documentation
or copy/paste from examples

Javascript dynamic typing :-(((
function parameters: the number and type of parameters
function sum(a, b) { return a + b }
console.log(sum(1,2));
console.log(sum(1));
console.log(sum("1","2"));
console.log(sum(1,2,3));
console.log(sum({},[]));
Output:
3
NaN
12
3
[object Object]
javascript does not stop the execution :-(
Wrong values are introduced into the execution flow.
The evidence of a problem can occur later in another part of the code

making a typo, using the wrong number/type of parameters
or other errors, can be very frustrating!

to catch a type or parameter error you need to execute
the code step by step with a debugger or with console.log

Problems increase with the line of code

Agile software development
#1 start with a small working software
#2 add new working features using short iteration (weeks)
#3 evaluate results with customer then go to #2

In an iteration API can be changed .i.e add a new required parameter
to a function or rename/refactor the code

If you want rename or change the signature of a function
you must remember/find all the parts where you have used the function
Do you remember? After 6 months? 1 year?

You want rename person's print to printName (but not book.print)

Without var types, Webstorm can't undestand and makes a mistake

If you don't remember where you have used the function ...
... the customer some weeks later ...

after each change you must test the software again
If you don't remember anymore, in the worst case you must test all again!

Or write test cases only to check typo, types and parameters

Java
Java ...

Java variable
Declaring a variable
String person = "davide";
System.out.println(person);
Output
davide
Type of variable is mandatory

Java variable
Do you don't know which type you must use?
<ctrl+1+enter> the IDE thinks for you! WITHOUT errors/mistakes

Java static typing :-)
A variable can contain only a type during its life
During editing (not running) the ide informs of errors

A variable isn't automatically created if it contains a typo

A variable can contain only a type, ide can EXACTLY list the methods

Java
API guides are not required
You can use your second monitor for better things...

Java
Methods: all invalid calls are marked with errors

Java
How to find typo and methods wrong parameters?
Easy: follow the red signs ...

Java
Thanks to types, eclipse can EXACTLY find the methods to rename

Agile
Real case: in SASAbusHTML5 it finds all the screens that call a bus stop detail
After a change in the stop details is enough to check the 5 screens:
BusLinePanel, BusStationInRangeWidget, Favourite, BusStationPopup,
MenuSearch

Agile
If you make an incompatible change to a signature of a method the IDE
can tell you the exact places where you must fix the problem manually

With java
The IDE helps you during editing, before the customer ...

I will convert
GREAT! I will convert my software from javascript to java

When and how convert?
When does it make sense to use java instead javascript?
How? The browser can't understand java ...

GWT Report 2013
http://vaadin.com/gwt/report-2013

Conclusions: When Java, When Javascript
When Java
too much undefined errors with javascript
you are afraid to change your javascript project
your customers are angry
structured (complex) project (> 5k LOC)
intranet / internet web apps
need of easier maintenance over time
android, desktop and server
using java tools: refactor, debug, junit, ...
You can't anyway forget all about html5/css3/javascript

Conclusions: When Java, When Javascript
When Javascript
web sites animations, gallery, widgets
small project, copy&paste of code from internet
not much custom development
full control of javascript code needed: integration
need of dinamic features that java does not support
SEO not required

How
Google Web Toolkit (GWT) (production)
Micro Javascript Jvm (DMJsJvm) (experimental)

GWT - http://www.gwtproject.org

How does GWT works?
GWT translates Java SOURCE code into the equivalent Javascript code

GWT: client, server, shared and serialization
In a GWT project Java objects can run
server only: this code will run only the server side: i.e. servlets
client only: this code will run only the client side: i.e. Window,
Location
shared: this code can run both server or client side
this data objects can be serialized and transmitted over the
network from one side to the other (i.e. bus stops)

Should I learn new API?
Should I learn new API?

Yes/No
Yes, if you use gwt widgets

Yes/No
GWT visual designer

Yes/No
No, if you prefer you can mimic html5/javascript api (with java)

Yes/No
With gwt you are open to use any existing javascript and css framework
It is very easy to mix javascript and java
There exist already a lot of wrapper projects

Yes/No
With gwt you can use any css framework by simply setting the right class
element.setClassName("btn btn-default");
Bootstrap, flat-ui, ecc ...

My GWT projects
Projects I made with GWT

SASAbus HTML5
HTML5 web app

SASAbus HTML5

The power of UI inherintance and composition
Java UI components/object in the SASAbus HTML5 app

SASAbus Android
Hybrid native + html5 (java + java)

SASAsightsee
Which POI do you want to see? I give you the bus route!

DMJsJvm
DMJsJvm: micro javascript jvm
The easiest way to convert java to javascript

DMJsJvm
Very small project: about 5k line of code
Good to learn how a jvm works i.e. students
Partial support for java 8 lambda

DMJsJvm
DMJsJvm translates bytecode instead of java source code

DMJsJvm
Why DMJsJvm is so small?
Because the jvm is a very simple machine based on only a stack and 256
instructions
The bigger part are the system libraries ... I have replaced them with the
equivalent calls to javascript
DMJsJvm intentionally support only a part of jre

Java and the javascript bytecode

DMJsJvm

Thanks
Thank you!

SFScon14: write java, run javascript: create enterprise html5 apps without “undefined” bugs

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie SFScon14: write java, run javascript: create enterprise html5 apps without “undefined” bugs

Ähnlich wie SFScon14: write java, run javascript: create enterprise html5 apps without “undefined” bugs (20)

Mehr von South Tyrol Free Software Conference

Mehr von South Tyrol Free Software Conference (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

SFScon14: write java, run javascript: create enterprise html5 apps without “undefined” bugs