Rapid and Reliable Developing with HTML5 & GWT. Manuel Carrasco Moñino [email protected] http://twitter.com/dodotis Madrid 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 XUL Xforms GWT XUL, Flash, WCF OpenLaszlo Java/Swing Xcode/C## Reduced maintenance, any location. Combined benefits of thin and rich client Intuitive UI Inmediate response Thin Client Rich Client HTML Windows, Mac, Android, iOS Web Rails Php 

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 targets Unique 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 Framework Not a Js Library Not a new language Not 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 libs Widgets 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=68 14541 tw­gwt java=12254,xml=2173,sh=114 3126 tw­playn­core java=3121,xml=5 12266 tw­admin java=10274,xml=1992 3731 tw­ios objc=3731 2708 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,439 Development 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.03 Total 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.