Rapid and Reliable Developing with HTML5 & GWT.

Manuel Carrasco Moñinomanolo@apache.orghttp://twitter.com/dodotisMadrid Java User Group 4th Apr 2013

About me

● Apache James Project Member Committee● HUPA

● GWT● Gquery & Gquery-plugins

● GwtExporter

● GwtUpload

● Chronoscope

● Jenkins● Performance plugin

● Emma plugin

● Linux● LXP a light and visual window manager based on icewm

Proposal I

Move apps from Desktop to Browser:

HTML5 + JS

RIA → Rich Internet App.

Better User Experience:Simple Page Interface.

History

1998 - 2002

2002 - 2004

2004 - 2008

2009 - 2012

Some technology demonstrations: desktop.com. There are not commercial products

First products developed by pioneers: Backbase, GI, JackBe, Laszlo Systems and Macromedia

Boon of AJAX technologies. 2007: Adobe Flex becomes the dominant player in the RIA landscape

Companies have a strategic commitment towards RIA and AJAX technologies.

Ria Options

Browser Player Native

XULXformsGWT

XUL, Flash, WCFOpenLaszlo

Java/SwingXcode/C##

Reduced maintenance, any location.

Combined benefitsof thin and rich client

Intuitive UIInmediate response

ThinClient

RichClient

HTMLWindows,

Mac,Android,

iOSWebRailsPhp

RIA: Classic Approach

Proposal II

HTML5: Desktop, mobile, tablets.

Art Status

HTML5 & JavaScript is everywhere

Mobiles have fast and modern Browser run-times

HTML5 / JS

Develop Html5/Javascript Run Anywhere

RIA: Pure HTML5/JS

- JavaScript- Canvas, SVG- Multimedia- Storage: (LocalStorage, IdexedDb, WebSQL) - Local File Access- Ajax, Web Sockets- Mobile in mind

Develop local apps: games, contacts, etc

What is there in HTML-5?

Proposal III

Use HTML5 in your mobile native apps:

Apache cordova (a.k.a. Phonegap)

Apache Cordova (Phonegap)

●A framework for mobile applications that allows developers to implement their projects using standard web technologies: HTML5, CSS3 and Javascript

● It converts them into native applications for different mobile platforms with access to much of the native API.

PhoneGap targetsUnique Code Base

Multiple Targets

Architecture

Project Structure: Android

My Application

Phonegap Native Engine

Phonegap Javascript Engine

Eclipse, Java(Lnx, Win, Mac)

Project Structure: IOS

My Application

Phonegap Native Engine

Phonegap Javascript Engine

Xcode: Objetive C(Mac)

Project Structure: IOS

My Application

Phonegap Native Engine

Phonegap Javascript Engine

Xcode: Objetive C(Mac)

Proposal IV

Use a high level language Java:

GWT (Google Web Toolkit)

Develop in a High Level Language Compile to Javascript

Google Web Toolkit

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

What is GWT?

Is a full SDK. Not a Js FrameworkNot a Js LibraryNot a new languageNot a Web Framework

Java to Javascript Compiler, Linker, Optimizer and Obfuscator

Produces one 'js' per browser (like c++ one 'exec' per processor)

Why Java?● A high level language allows that the developer doesn't get lost with low

level details: DOM, Ajax, Cross-domain, Compression, Obfuscation, Dependencies, Browser tweaks, etc.

● Huge Java ecosystem: IDE, Re-factoring, Debug, Code assist, Maven.

● Metrics, TDD, CI, Reusing (libraries)

● Patterns, Builders …

● Type safe, syntax checking, reduce errors.

● Separate code maintenance from the effectiveness of the executable.

● Normally, the compiler would produce better js code than the code we could write by hand (less code, compressed, obfuscated, remove dead code, etc).

● Developers know java

Java Server Side

Java Client Side

Java Code (IDE)

GWT server libs RPC/RF

GWT development Debug/Hosted/Test

GWT Compiler JRE Emulation

Browser libsWidgets

Test Runner FF/IE/Ch-Plugin

Java HTTP Server

J-Byte Code

3ª Party Server libs

Browser

Any HTTP Server(php, ruby, ...)

JavaScript.Bundles (css, sprite).

3ª Party Client libs

Toolkit (SDK)

JSON/XML/HTML/TXT RPC/RF

JSON/XML/HTML/TXT

GWT Eclipse Plugin

Mobile

New with 2.5.0

● SuperDev Mode● Source Maps● Elemental● Size & Split optimitations● Closure compiler

How looks the code like ?

public class Tw implements EntryPoint { public void onModuleLoad() { Label label = new Label("Hello world"); Button button = new Button("Click"); button.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Hello world"); } }); RootPanel.get().add(label); RootPanel.get().add(button); }

}

Project Structure

Browser: Java → JS

Both: Java → [JS or BitCode]

Server: Java → BitCode

Assets: html, images, css

Performance

Generates less code.

It analyzes the code and includes only necessary for each browser.

Implements own managers to prevent 'leaks'.

Applications faster and with less tricks HTTP.

Eliminates the use wrappers for native functionality of each browser version.

Saving the time spent on debugging for each browser, you can spend more time on the application functionality.

The development efficiency is the main advantage of GWT.

JAVASCRIPT USER DEVELOPER

Summary

• GWT does not do anything that can be done otherwise, but it makes the action much more productive.

• GWT does not attempt to exhibit the virtues of Java, but recognize the pragmatism of existing tools

• GWT does not want to forget about DOM, CSS, browser, etc, but abstractions allow writing more productive code than hand writing JS code.

• Perhaps someday GWT could compile other languages(Xtend, Scala), or even process annotated JS.

• GWT makes possible development of large scale web sites and it opens the possibility of creating new generation of applications reliably.

Proposal V:

Bring GWT to Mobile

GWT

Libraries

● GWT: Core, Compiler, tools, layout, MVP● GWT-Phonegap: Access mobile HW from

your code. ● MGWT: Widgets, Animations, Themes● GQUERY: fast CSS and DOM tweaks

Make your app look native

Advantages: Java + Gwt + Cordova

● Maintain just one code base.● Use one language for all.● Reuse libraries written in java instead of rewrite

them in JS.● Develop using a browser instead of an emulator.● Realtime debug.● Unit testing.● Everything is open sourced

Proposal VI

Use a common framework to create visual apps:

PlayN

Angry Birds

Game problem

PlayN

Cross-platform game abstraction library for writing games that compile to:

- Desktop Java- HTML5 Browsers- Android- iOS- Flash- More?

API

GAME: Java Code

Why Java

- Java ecosystem- Familiar Tools and Libraries- Desktop has Java- Android is Java- GWT is Java

HW acceleration

The same code for all platforms

Proposal VII

NoSQL Databases

What is NoSQL?

● not built primarily on tables● do not use SQL for data manipulation● optimized for retrieval operations● reduced run-time flexibility● no relationships between elements● cannot necessarily give full ACID (Atomicity,

Consistency, Isolation, Durability) guarantees● Optimized to scale horizontally

NoSQL Types

● Document: key-document (couchdb, mongodb, jackrabbit)

● Graph: elements interconnected (DB2)● KeyValue: not fixed datamodel (Cassandra,

Dynamo, BigTable)● Others: actually each product has its own

features (nosql is not a standard).

Solutions

● BigTable: Google App Engine● Proprietary Query Language● MySQL like layer ● Map-reduce

● Document based: CouchDb● Ajax Service● Map-reduce

● KeyValue: Cassandra● Map-reduce● API

Map-Reduce

Parallelism: allows data distribution, increases performance, recovering from partial failures

1- The master divide a complex problem in small problems.2- Gives them to workers which resolve them in parallel. 3- Finally all responses are reduced to generate the solution.

GAE

● Google's cloud solution.● Runs its own runtime (Java or Python): so consider

GAE restrictions and API.● Integration with Eclipse: really easy to start and deploy

a project.● Free until your app starts consuming a lot of

resources.● Easy to administrate (console)● 100% scalable.● Suitable for RIA (Ajax, GWT, PlayN ...)

CouchDB

● Light weight database. Developed by Apache in Erlang.

● Json oriented: documents are json, dialog is json.

● Js map-reduce

● HTTP service (not any proprietary protocol)

● Replica/Cluster out-of-the-box

● High performance and scalability

● Web administration Panel

● Ideal for Ajax apps

● Java Api to access it in a JPA like way

● Push to client mechanism

Real Case: Talkwheel

Talkwheel

● Talkwheel provides social engagement across mobile and desktop for any brand or personality.

● Its goal is to offer a easy and visual tool for conversations

● About 3 million users using our products

● A San Francisco based startup of 6 people.

SW Architecture

CouchDB

HTTP Ajax

Java → JS

HTML5

One CodeBase → Multiple Targets

Desktop

Embedded

Tablets

Mobile

Real project size

SLOC Directory SLOC­by­Language (Sorted)18067   tw­model        java=17871,xml=128,perl=6814541   tw­gwt          java=12254,xml=2173,sh=1143126    tw­playn­core   java=3121,xml=512266   tw­admin        java=10274,xml=19923731    tw­ios          objc=37312708    tw­droid        java=2708

Totals grouped by language (dominant language first):java:         46228 (84.92%)xml:           4298 (7.90%)objc:          3731 (6.85%)sh:             114 (0.21%)perl:            68 (0.12%)

Total Physical Source Lines of Code (SLOC)                = 54,439Development Effort Estimate, Person­Years (Person­Months) = 2.77 (33.24) (effort model Person­Months = 0.5 * (KSLOC**1.05))Schedule Estimate, Years (Months)                         = 0.92 (10.98) (schedule model Months = 2.9 * (person­months**0.38))Estimated Average Number of Developers (Effort/Schedule)  = 3.03Total Estimated Cost to Develop                           = $ 374,202 (average salary = $56,286/year, overhead = 2.40).

Off topic: Contributing the Open Source

Become an opensource contributor

● Checkout the code.

● Play with it, test it, find bugs.

● Open tickets reporting problems, asking for improvements.

● Attach patches which fix bugs, add new features, improve performance, contribute to readability, etc. Don't forget unit Tests.

● Subscribe to mailing lists, and participate asking and answering questions.

● Committers will appreciate your work and will propose you to be part of the team.

● Other way you can utilize is to propose new projects: Apache incubator, labs, GSOC, etc. Find a mentor or use mailing-lists for that.