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 <[email protected]>

(C) 2013-2014 Davide Montesin <[email protected]> - 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 inBolzano/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'; // Stringconsole.log(person);

person = 2; // Numberconsole.log(person);

person = {name: 'davide'} // Objectconsole.log(person);

person = ['davide']; // Arrayconsole.log(person);

Output:

davide2Object {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:

3NaN123[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(C) 2013-2014 Davide Montesin <[email protected]> - License: CC BY NC ND write java, run javascript: create enterprise html5 apps without "undefined" bugs 10 / 63


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 thenetwork 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 256instructions

The bigger part are the system libraries ... I have replaced them with theequivalent 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

Technology