Web- Technologies for the desktop with chameria. Daniel Bremer- Tonn akquinet AG

Size: px

Start display at page:

Download "Web- Technologies for the desktop with chameria. Daniel Bremer- Tonn akquinet AG"

Kory Woods
6 years ago
Views:

1 Web- Technologies for the desktop with chameria Daniel Bremer- Tonn akquinet AG

2 About me Senior So=ware Engineer at akquinet 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

3 About me Senior So=ware Engineer at akquinet 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

4 Who are we? UI Design JBoss ConsulIng OSGi Android Development Trainings Java / JEE Modular Systems Web Portals User Experience Open Source Mobile Systems IntegraIon

5 Who are we? UI Design JBoss ConsulIng OSGi Android Development Trainings Java / JEE Modular Systems User Experience hrp://blog.akquinet.de Web Portals Open Source Mobile Systems IntegraIon

6 Roadmap for today... From Desktop to Web All the hype about HTML(5) From Web to Desktop back again... with chameria 6

7 From Desktop to Web NaIve applicaions on the desktop... Every applica;on on the same OS Looks & Feels the same... at least they should 7

8 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 diﬀerent OS have diﬀerent Look & Feel on diﬀerent OS pla]orms Copyright 2011 akquinet AG 8

$pla\orm$

9 From Desktop to Web Cross pla\orm applicaions... Java (AWT, Swing, SWT) QT GTK+ 9

$From Desktop to Web NaIve or cross pla\orm The App has to be installed on every$

10 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 10

11 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 11

12 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 12

13 All the hype about HTML5 HTML5 <HTML> JS CSS3 13

14 HTML - Features 3D, Graphics & Effects Connec;vity Offline & Storage MulImedia CSS3 Performance & Integra;on Device Access Seman;cs 14

15 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>... 15

16 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:// 16

17 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 17

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

19 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,...) 19

20 Javascript Performance & IntegraIon Background tasks Javascript in the browser is single threaded Geqng asynchronous settimeout(), setinterval(), XMLHttpRequest (Ajax) Real concurrency with Web Workers 20

CSS CSS3 Styling TransiIons und Transforms /** Transitions */ #content { } -webkit-transition: margin-left 1s ease-in-out; -moz-transition: margin-left 1s ease-in-out;

21 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); } 21

CSS CSS3 Styling AnimaIons @-webkit-keyframes pulse {

-webkit-animation-iteration-count: infinite;

22 CSS CSS3 Styling 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; } 22

HTML Device Access Direct access to different hardware-

handler = function (position) { var latitude = position.

23 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); 23

24 HTML5 Today? Webkit Different browsers Different support of features Webkit familiy highly advanced... and available on all pla]orms 24

$.. an applicaion pla\orm UI Toolkit (<tags>) Styling (CSS3) Threads Storage (DB,$

25 HTML Webkit- Browser... an applicaion pla\orm UI Toolkit (<tags>) Styling (CSS3) Threads Storage (DB, File System...) Remo;ng (HTTP, WebSockets) Device Access 25

based on HTML5, JS und CSS3 Using exis;ng

26 From Web to Desktop back again Webkit included into the system Webkit embedded into the applicabon 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 26

Appcelerator Titanium ChameRIA Build desktop applica;ons (Windows, MacOSX, Linux)

27 From Web to Desktop back again Specialized in mobile pla]orms Access to na;ve APIs via Javascript Mobile and Desktop Access to na;ve APIs via Javascript Appcelerator Titanium ChameRIA Build desktop applica;ons (Windows, MacOSX, Linux) Frontend using HTML5 Backend completely based on Java Allows embedding of na;ve components 27

28 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 needs people with advanced skills in Swing or SWT but hard to find! A lot more skilled people in HTML/CSS/JS around 28

29 ChameRIA Main Features: ChameRIA 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 29

30 ChameRIA 2- Tier Architecture 30

31 ChameRIA 2- Tier Architecture distributed 31

32 ChameRIA 32

33 ChameRIA OSGi service exposed to the web view via JSON- RPC 33

34 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? 34

.. automate things simplify code But do not

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

36 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 36

37 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 37

ChameRIA First steps with chameria Visit: hrp://edge.spree.

38 ChameRIA First steps with chameria Visit: hrp://edge.spree.de/chameria/ Get the code from GitHub git clone git://github.com/akquinet/chameria.git Build process is based completely on Maven mvn clean install Running chameria examples cd distributions/chameria-with-example-distribution/target Go to the folder corresponding to your opera;ng system and launch cd mac./launch-mac.sh 38

39 ChameRIA First steps with chameria 39

40 ChameRIA Thank you and have Fun with chameria! ChameRIA hrp://edge.spree.de/chameria 40

COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3

COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 MODULE 1: OVERVIEW OF HTML AND CSS This module provides an overview of HTML and CSS, and describes how to use Visual Studio 2012