web$technologies.for.the.desktop....

Web-‐Technologies for the desktop with chameRIA Daniel Bremer-‐Tonn akquinet AG

About me

¡  Senior So=ware Engineer at akquinet tech@spree, Berlin –  Member of the Innova;on Competence Center

¡  Points of interests : –  JEE based Enterprise-‐Applica;ons –  Advanced Build process with Maven –  Web technologies such as HTML5/JS

2

About me

¡  Senior So=ware Engineer at akquinet tech@spree, Berlin –  Member of the Innova;on Competence Center

¡  Points of interests : –  JEE based Enterprise-‐Applica;ons –  Advanced Build process with Maven –  Web technologies such as HTML5/JS

3

Java / JEE

ConsulIng

Development

IntegraIon

JBoss

OSGi UI Design

Web Portals Modular Systems

Trainings

Mobile Systems

Android

Open Source

User Experience

Who are we?

Java / JEE

ConsulIng

Development

IntegraIon

JBoss

OSGi UI Design

Web Portals Modular Systems

Trainings

Mobile Systems

Android

Open Source

User Experience

Who are we?

hRp://blog.akquinet.de

Roadmap for today ...

6 08.04.11 Copyright © 2011 – akquinet AG

§  From Desktop to Web

§  All the hype about HTML(5)

§  From Web to Desktop back again

... with chameRIA

From Desktop to Web


NaIve applicaIons on the desktop ...

Every applica;on on the same OS “Looks & Feels“ the same

... at least they should

From Desktop to Web


NaIve applicaIons on the desktop ... §  are wriZen in naIve code, depending on the underlying OS

§  are hard to migrate to a different OS §  have different Look & Feel on different OS pla]orms

From Desktop to Web


Cross pla\orm applicaIons ... §  Java (AWT, Swing, SWT) §  QT §  GTK+

From Desktop to Web


NaIve or cross pla\orm … §  The App has to be installed on every desktop computer

§  Hard to deploy to a large cluster §  Hard to maintain and update

From Desktop to Web


Web ApplicaIons … §  Only one App to be installed … The Browser §  Rollout, Maintenance and Upda;ng is centralized §  Server based architecture

… Real pla\orm independency, only a Browser is required

From Desktop to Web


Web ApplicaIons … §  At the beginning HTML was quite limited §  Web 2.0 introduced “desktop like feeling” (Javascript, Ajax …)

§  HTML5 introduced new hype about the web

All the hype about HTML5


CSS3 JS <HTML> HTML5

HTML -‐ Features


MulImedia 3D, Graphics & Effects

Offline & Storage

Connec;vity

Performance & Integra;on

CSS3

Seman;cs

Device Access

HTML -‐ MulImedia


... <video> <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> </video> ...

HTML -‐ Canvas


<canvas id="myCanvas"></canvas> ... var cvs = document.getElementById('myCanvas'); Var context = b_canvas.getContext("2d"); context.fillRect(50, 25, 150, 100);

h,p://benfirshman.com/projects/jsnes/ h,p://www.zynaps.com/jslab.xml?id=envmap

HTML -‐ WebGL


§  Based on OpenGL ES 2 §  Low Level 3D Graphics API §  Accessible via <canvas> and

Javascript

<canvas id="myCanvas"></canvas> ... var cvs = document.getElementById('myCanvas'); Var gl = b_canvas.getContext(“webgl");

h,p://bodybrowser.googlelabs.com

HTML – Offline & Storage


§  Applica;on Cache §  Online / Offline Events §  Local Storage §  Web SQL und Indexed Database §  File API

HTML – ConnecIvity & RealIme


Half-‐Duplex CommunikaIon (HTTP) §  Request/Response PaZern

Full-‐Duplex CommunicaIon (Workarounds) §  Polling / Push Technologies

Real Bi-‐direc;onal communica;on with WebSockets §  Socket-‐Connec;on between Browser and Server §  Low Latency (Mul;player Games, Chats, Ticker, Social Networks ...)

But requires : §  Client-‐Implementa;on (Browser) §  Server-‐Implemen;erung (JeZy, Socket.IO -‐ Java Servlet Implemen;ons, ...)

Javascript – Performance & IntegraIon


Background tasks §  Javascript in the browser is single threaded §  Geqng asynchronous

§  setTimeout(), setInterval(), XMLHttpRequest (Ajax)

Real concurrency with Web Workers

CSS – CSS3 Styling


§  TransiIons und Transforms /** Transitions */ #content { -webkit-transition: margin-left 1s ease-in-out; -moz-transition: margin-left 1s ease-in-out; -o-transition: margin-left 1s ease-in-out; } /** Transforms */ .rotate-45 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); }

CSS – CSS3 Styling


§  AnimaIons @-webkit-keyframes pulse { from { opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; } } div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate; }

HTML – Device Access


Direct access to different hardware-‐features §  Geoloca;on §  Hardware sensors

// GeoLocation var handler = function (position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // Opening the coordinates in GoogleMaps .... ... }; navigator.geolocation.getCurrentPosition(handler);

HTML5 – Today ?


Webkit

§  Different browsers §  Different support of features

§  Webkit familiy highly advanced §  ... and available on all pla]orms

HTML – Webkit-‐Browser ... an applicaIon pla\orm


§  UI Toolkit (<tags>) §  Styling (CSS3) §  Threads §  Storage (DB, File System ...) §  Remo;ng (HTTP, WebSockets) §  Device Access

From Web to Desktop back again


§  Bring back all the goodies from the web to the desktop §  Apps based on HTML5, JS und CSS3 §  Using exis;ng skills in web technologies §  No knowledge of targeted pla]orm APIs required (MFC, Cocoa, Android SDK) §  One codebase for all pla]orms

Webkit included into the system Webkit embedded into the applicaBon

From Web to Desktop back again


Appcelerator Titanium

ChameRIA

§  Specialized in mobile pla]orms §  Access to na;ve APIs via Javascript

§  Mobile and Desktop §  Access to na;ve APIs via Javascript

§  Build desktop applica;ons (Windows, MacOSX, Linux)

§  Frontend using HTML5 §  Backend completely based on Java §  Allows embedding of na;ve components

ChameRIA


Why we are switched to a web based UI ?

“Crea;ng advanced and customized UIs is easy in HTML …”

“Implementa;on of specific designs (exact layouts) is much easier”

“Doing the same stuff with tradiIonal technologies might be hard …”

“… but hard to find!”

“… needs people with advanced skills in Swing or SWT”

“A lot more skilled people in HTML/CSS/JS around …”

ChameRIA


ChameRIA

Main Features: §  Develop your desktop applica;on using HTML5 §  Cross-‐pla]orm support §  Support advanced system integra;on (device, file associa;on...) §  Provide a clear separa;on between frontend and backend

§  HTML, CSS, Javascript and Java §  Enforce modularity on both frontend and backend §  Easy integra;on of backend services into the frontend

ChameRIA


2-‐Tier Architecture

ChameRIA


2-‐Tier Architecture … distributed

ChameRIA


ChameRIA


OSGi service exposed to the web view via JSON-‐RPC

ChameRIA


ModularizaIon for the … Backend §  Completely based on OSGi §  Using service components based on iPOJO §  … so modularizaIon is well supported, but you have to embrace it! Frontend §  How to modularize Javascript ?

ChameRIA


ModularizaIon of Javascript §  Libraries like jQuery helping to ...

§  automate things §  simplify code

… But do not help to architecture your code !

ChameRIA


ModularizaIon of Javascript §  ChameRIA relies on H-‐UBU

§  A simple component framework for javascript §  Defines lifecycle for components §  Contract-‐based interac;ons §  (A)Synchron communica;ons via method calls or events §  Cluster your javascript code in

§  Frontend (manipula;ng the UI) §  Backend (compu;ng and communica;on with the java backend)

§  hRp://akquinet.github.com/hubu

ChameRIA


… already proven in real projects: Desktop version of an E-‐Book Reader

§  Very customized UI design §  no standard widgets §  Anima;ons

§  Heavy synchroniza;on tasks in the backend

§  Integra;on of na;ve components (Adobe DRM Library)

§  File associa;ons §  Modular feature configura;on for

different product lines

ChameRIA


First steps with chameRIA §  Visit: hRp://edge.spree.de/chameria/ §  Get the code from GitHub

§  Build process is based completely on Maven

§  Running chameRIA examples

§  Go to the folder corresponding to your opera;ng system and launch

git clone git://github.com/akquinet/chameRIA.git

mvn clean install

cd distributions/chameria-with-example-distribution/target

cd mac ./launch-mac.sh

ChameRIA


First steps with chameRIA

ChameRIA


Thank you and have Fun with chameRIA !

ChameRIA

hRp://edge.spree.de/chameria

web$technologies.for.the.desktop....

Documents