Rapid and Reliable Developing with HTML5 & GWT


Published on

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.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Rapid and Reliable Developing with HTML5 & GWT

  1. 1. Rapid and Reliable Developing with HTML5 & GWT. Manuel Carrasco Moñino manolo@apache.org http://twitter.com/dodotisMadrid Java User Group 4th Apr 2013
  2. 2. 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
  3. 3. Proposal I Move apps from Desktop to Browser: HTML5 + JS
  4. 4. RIA → Rich Internet App. Better User Experience: Simple Page Interface.
  5. 5. 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.
  6. 6. 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, iOSWeb Rails Php
  7. 7. RIA: Classic Approach
  8. 8. Proposal II HTML5: Desktop, mobile, tablets.
  9. 9. Art Status
  10. 10. HTML5 & JavaScript is everywhere Mobiles have fast and modern Browser run-times
  11. 11. HTML5 / JS Develop Html5/Javascript Run Anywhere
  12. 12. RIA: Pure HTML5/JS
  13. 13. - 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?
  14. 14. Proposal III Use HTML5 in your mobile native apps: Apache cordova (a.k.a. Phonegap)
  15. 15. 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.
  16. 16. PhoneGap targets Unique Code Base Multiple Targets
  17. 17. Architecture
  18. 18. Project Structure: Android My Application Phonegap Native Engine Phonegap Javascript Engine Eclipse, Java (Lnx, Win, Mac)
  19. 19. Project Structure: IOS My Application Phonegap Native Engine Phonegap Javascript Engine Xcode: Objetive C (Mac)
  20. 20. Project Structure: IOS My Application Phonegap Native Engine Phonegap Javascript Engine Xcode: Objetive C (Mac)
  21. 21. Proposal IV Use a high level language Java: GWT (Google Web Toolkit)
  22. 22. Develop in a High Level Language Compile to Javascript
  23. 23. 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
  24. 24. 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)
  25. 25. 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
  26. 26. 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
  27. 27. New with 2.5.0 ● SuperDev Mode ● Source Maps ● Elemental ● Size & Split optimitations ● Closure compiler
  28. 28. 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); } }
  29. 29. Project Structure Browser: Java → JS Both: Java → [JS or BitCode] Server: Java → BitCode Assets: html, images, css
  30. 30. 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
  31. 31. 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.
  32. 32. Proposal V: Bring GWT to Mobile
  33. 33. GWT
  34. 34. 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
  35. 35. 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
  36. 36. Proposal VI Use a common framework to create visual apps: PlayN
  37. 37. Angry Birds
  38. 38. Game problem
  39. 39. PlayN Cross-platform game abstraction library for writing games that compile to: - Desktop Java - HTML5 Browsers - Android - iOS - Flash - More?
  40. 40. API GAME: Java Code
  41. 41. Why Java - Java ecosystem - Familiar Tools and Libraries - Desktop has Java - Android is Java - GWT is Java
  42. 42. HW acceleration
  43. 43. The same code for all platforms
  44. 44. Proposal VII NoSQL Databases
  45. 45. 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
  46. 46. 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).
  47. 47. 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
  48. 48. 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.
  49. 49. 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 ...)
  50. 50. 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
  51. 51. Real Case: Talkwheel
  52. 52. 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.
  53. 53. SW Architecture CouchDB HTTP Ajax Java → JS HTML5
  54. 54. One CodeBase → Multiple Targets Desktop Embedded Tablets Mobile
  55. 55. 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).
  56. 56. Off topic: Contributing the Open Source
  57. 57. 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.