rapid and reliable developing with html5 & gwt
DESCRIPTION
Madrid JUG Conferences, Apr 2013. Development of mobile applications has became complex, and Companies need teams with specialists in very different platforms. With GWT + Apache Cordova, you can develop reliable applications using a unique code base written in java.TRANSCRIPT
Rapid and Reliable Developing with HTML5 & GWT.
Manuel Carrasco Moñ[email protected]://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 SLOCbyLanguage (Sorted)18067 twmodel java=17871,xml=128,perl=6814541 twgwt java=12254,xml=2173,sh=1143126 twplayncore java=3121,xml=512266 twadmin java=10274,xml=19923731 twios objc=37312708 twdroid 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, PersonYears (PersonMonths) = 2.77 (33.24) (effort model PersonMonths = 0.5 * (KSLOC**1.05))Schedule Estimate, Years (Months) = 0.92 (10.98) (schedule model Months = 2.9 * (personmonths**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.