Slide 1

Slide 1 text

Wir lösen das – persönlich! ROCA im Java-EE-Kontext Endlich webkonforme Anwendungen bauen! ! Holger Kraus Frederik Dohr

Slide 2

Slide 2 text

© 2014 innoQ Deutschland GmbH Java EE - Context

Slide 3

Slide 3 text

© 2014 innoQ Deutschland GmbH Java EE - Context http://www.flickr.com/photos/maha-online/62627811

Slide 4

Slide 4 text

© 2014 innoQ Deutschland GmbH https://twitter.com/jakekorab/status/443701062143188992

Slide 5

Slide 5 text

© 2014 innoQ Deutschland GmbH

Slide 6

Slide 6 text

© 2014 innoQ Deutschland GmbH

Slide 7

Slide 7 text

© 2014 innoQ Deutschland GmbH

Slide 8

Slide 8 text

© 2014 innoQ Deutschland GmbH

Slide 9

Slide 9 text

© 2014 innoQ Deutschland GmbH https://www.flickr.com/photos/meccanohig/9704610999/

Slide 10

Slide 10 text

© 2014 innoQ Deutschland GmbH UI Components Validators Converters Events Managed Beans

Slide 11

Slide 11 text

© 2014 innoQ Deutschland GmbH UIRootView HtmlForm HtmlPanelGrid HtmlOutputLabel HtmlInputText HtmlOutputLabel HtmlInputText HtmlInputSecret HtmlPanelGrid HtmlCommandButton HtmlCommandLink

Slide 12

Slide 12 text

© 2014 innoQ Deutschland GmbH

Slide 13

Slide 13 text

© 2014 innoQ Deutschland GmbH

Slide 14

Slide 14 text

© 2014 innoQ Deutschland GmbH Founding Principles of the Web “By design, the […] Internet and the WWW are non- hierarchical, decentralized and radically open. The web can be made to work with any type of information, on any device, with any software, in any language. You can link to any piece of information. You don’t need to ask for permission.” — Tim Berners Lee

Slide 15

Slide 15 text

© 2014 innoQ Deutschland GmbH Founding Principles of the Web “By design, the […] Internet and the WWW are non- hierarchical, decentralized and radically open. The web can be made to work with any type of information, on any device, with any software, in any language. You can link to any piece of information. You don’t need to ask for permission.” — Tim Berners Lee

Slide 16

Slide 16 text

© 2014 innoQ Deutschland GmbH Founding Principles of the Web “By design, the […] Internet and the WWW are non- hierarchical, decentralized and radically open. The web can be made to work with any type of information, on any device, with any software, in any language. You can link to any piece of information. You don’t need to ask for permission.” — Tim Berners Lee

Slide 17

Slide 17 text

© 2014 innoQ Deutschland GmbH Founding Principles of the Web Simplicity Modularity Transparency Tolerance

Slide 18

Slide 18 text

© 2014 innoQ Deutschland GmbH Rule of Least Power “choosing the least powerful language suitable for a given purpose” “the less powerful the language, the more you can do with the data stored in that language. If you write it in a simple declarative form, anyone can write a program to analyze it in many ways.” — Axioms of Web Architecture

Slide 19

Slide 19 text

© 2014 innoQ Deutschland GmbH Rule of Least Power “I chose HTML not to be a programming language because I wanted different programs to do different things with it: present it differently, extract tables of contents, index it, and so on.” — Tim Berners Lee

Slide 20

Slide 20 text

© 2014 innoQ Deutschland GmbH http://courses.ischool.berkeley.edu/i153/su11/history

Slide 21

Slide 21 text

© 2014 innoQ Deutschland GmbH © 2011 innoQ Deutschland GmbH http://www.flickr.com/photos/psd/2918889380/

Slide 22

Slide 22 text

© 2014 innoQ Deutschland GmbH request response GET /index HTTP/1.1
 Host: example.org ! HTTP/1.1 200 OK
 Content-Type: text/html
 
 …

Slide 23

Slide 23 text

© 2014 innoQ Deutschland GmbH © 2011 innoQ Deutschland GmbH http://commons.wikimedia.org/wiki/File:BXP135677.jpg

Slide 24

Slide 24 text

© 2014 innoQ Deutschland GmbH HTML Images Media content Style Sheets JavaScript Plug-ins

Slide 25

Slide 25 text

© 2014 innoQ Deutschland GmbH

Slide 26

Slide 26 text

© 2014 innoQ Deutschland GmbH Semantic HTML “The main point of semantics was accessibility and search engines.” — @jcroft http://www.flickr.com/photos/saltyscott/212796193/

Slide 27

Slide 27 text

© 2014 innoQ Deutschland GmbH Welcome to my homepage!

* Guns N’ Roses * Bon Jovi * MC Hammer

Slide 28

Slide 28 text

© 2014 innoQ Deutschland GmbH

Hello from Facebook!

  • Justin Bieber
  • Beyoncé
  • Miley Cyrus

Slide 29

Slide 29 text

© 2014 innoQ Deutschland GmbH POSH Plain Old Semantic HTML http://commons.wikimedia.org/wiki/File:Victoria_Beckham_2010.jpg

Slide 30

Slide 30 text

© 2014 innoQ Deutschland GmbH Unobtrusive JavaScript document.write("hello world");

Slide 31

Slide 31 text

© 2014 innoQ Deutschland GmbH Unobtrusive JavaScript

Slide 32

Slide 32 text

© 2014 innoQ Deutschland GmbH Unobtrusive JavaScript

Slide 33

Slide 33 text

© 2014 innoQ Deutschland GmbH Unobtrusive JavaScript

Slide 34

Slide 34 text

© 2014 innoQ Deutschland GmbH Unobtrusive JavaScript $(".interactive").click(function() { doStuff(this.href); }); +

Slide 35

Slide 35 text

© 2014 innoQ Deutschland GmbH Components + jQuery("input[type=date]").datepicker(); … + Sortable.init(".sortable");

Slide 36

Slide 36 text

© 2014 innoQ Deutschland GmbH

lorem ipsum dolor sit amet

jQuery(".tabs").tabs();

Slide 37

Slide 37 text

© 2014 innoQ Deutschland GmbH Autor: Till Schulte-Coerne

Slide 38

Slide 38 text

© 2014 innoQ Deutschland GmbH That was the client side... of what we call ROCA

Slide 39

Slide 39 text

© 2014 innoQ Deutschland GmbH Now let’s talk about the server side

Slide 40

Slide 40 text

© 2014 innoQ Deutschland GmbH REST is more then a RESTful API REST is the Architecture of the Web

Slide 41

Slide 41 text

© 2014 innoQ Deutschland GmbH Avoid session state!

Slide 42

Slide 42 text

© 2014 innoQ Deutschland GmbH Put all application logic on the server!

Slide 43

Slide 43 text

© 2014 innoQ Deutschland GmbH Use URIs to identify a single meaningful concept!

Slide 44

Slide 44 text

© 2014 innoQ Deutschland GmbH A http://.../A

Slide 45

Slide 45 text

© 2014 innoQ Deutschland GmbH A B C http://.../A ?

Slide 46

Slide 46 text

© 2014 innoQ Deutschland GmbH A http://.../A C http://.../C B http://.../B b c + AJAX + CSS

Slide 47

Slide 47 text

© 2014 innoQ Deutschland GmbH A B C http://.../A

Slide 48

Slide 48 text

© 2014 innoQ Deutschland GmbH Alternatives to component based frameworks

Slide 49

Slide 49 text

© 2014 innoQ Deutschland GmbH

Slide 50

Slide 50 text

© 2014 innoQ Deutschland GmbH

Slide 51

Slide 51 text

© 2014 innoQ Deutschland GmbH &

Slide 52

Slide 52 text

© 2014 innoQ Deutschland GmbH Resource A Resource B Resource C Resource D Resource E Service A Service B Service C Service D Service E Dispatcher

Slide 53

Slide 53 text

© 2014 innoQ Deutschland GmbH But how to explain it to my manager? http://commons.wikimedia.org/wiki/File:Clark_Griffith_crop.jpg

Slide 54

Slide 54 text

© 2014 innoQ Deutschland GmbH Let’s talk about macro architecture!

Slide 55

Slide 55 text

© 2014 innoQ Deutschland GmbH UI Logic Persistence

Slide 56

Slide 56 text

© 2014 innoQ Deutschland GmbH

Slide 57

Slide 57 text

© 2014 innoQ Deutschland GmbH Product Admin OrderMgmt Catalog Inventory Mgmt Data Export Billing

Slide 58

Slide 58 text

© 2014 innoQ Deutschland GmbH Data
 Replication Backend
 Integration Frontend
 Integration Integration Options Data Logic UI Data Logic UI

Slide 59

Slide 59 text

© 2014 innoQ Deutschland GmbH Data Logic UI Data Logic UI

Slide 60

Slide 60 text

© 2014 innoQ Deutschland GmbH UI Data Logic Data Logic UI Frontent integration

Slide 61

Slide 61 text

© 2014 innoQ Deutschland GmbH Browser HTML Page Backend 1 UI 1 Frontend
 Server UI 2 Server-side integration Backend 2 Example: Portal Server

Slide 62

Slide 62 text

© 2014 innoQ Deutschland GmbH Browser HTML Page Backend 1 UI 1 UI 2 Client-side integration Backend 2 Examples: AJAX Proprietary Frameworks

Slide 63

Slide 63 text

© 2014 innoQ Deutschland GmbH Browser HTML Page 1 Links Backend 1 Backend 2 HTML Page 2 Asset Server CSS, JS, IMG, ...

Slide 64

Slide 64 text

© 2014 innoQ Deutschland GmbH Summary

Slide 65

Slide 65 text

© 2014 innoQ Deutschland GmbH Appreciate the Web

Slide 66

Slide 66 text

© 2014 innoQ Deutschland GmbH Design for the Web

Slide 67

Slide 67 text

© 2014 innoQ Deutschland GmbH Respect Boundaries

Slide 68

Slide 68 text

© 2014 innoQ Deutschland GmbH Embrace the core technologies of the Web

Slide 69

Slide 69 text

Vielen Dank! Wir lösen das – persönlich! © 2014 innoQ Deutschland GmbH