1 of 14

Building Blocks for the Data Driven Web.

Hans-Dieter Böhlau <hans-dieter.boehlau@incowia.com>

2 of 14

Some Demos

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

[klick to see the examples in action]

integrated usage ...

3 of 14

Take a Look At Cubbles!

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

Software Product Manufacturers

OR Service Provider.

[ ] Integrate Cubbles into your solution.

[ ] Add Cubbles as an add-on; � provided by a partner - but to grade up

your solution.

Your solution provides data via web-interfaces?

Your solutions target group uses other web applications as well?

A simple option to integrate “your” data into other web applications would inspire your (potential) customers?

IT Service Departments �of any Organisation.

[ ] Use Cubbles as an UI Integration Service.

[ ] Provide Cubbles Components

ready-to-use within your existing

web applications.

You manage an internal application landscape?

Your employees use different web applications for their daily business?

A simple way to integrate functionality / information into different web applications would simplify your (and your employees) life?

Talking about Cubbles we should be more precise: Coupled components is the topic, the platform is build around.

> Wikipedia (https://en.wikipedia.org/wiki/Loose_coupling) says:

Coupling refers to the degree of direct knowledge that one component has of another. Loose coupling in computing is interpreted as encapsulation vs. non-encapsulation.

[...]

Components in a loosely coupled system can be replaced with alternative implementations that provide the same services.

Now you might ask ... does Polymer or at least the WebComponents Specification not cover that? No, the don't.

But you have ever build a more complex BACKEND system, the need for LOOSELY COUPLED components is well known. It allows you to develop in distributed teams, test each service independantly and helps you to maintain the overall solution over a long term. And we think - having this approach available on client-side will help to build much more sophisticated and better maintainable solutions.

The Cubbles Platform is designed to do EXACTLY that - it makes this approach available for webbrowsers.

Cubbles Components do NOT have any knowledge about the components they can be connected with. So each one can be developed, tested an maintained independently by people with the appropriated skills.

4 of 14

Cubbles Components - Basics.

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

bar-chart

type

xLabels

data-source

...

dataColumns

xLabels

<html>

…

<body>

…

<bar-chart>..

…

...

This component provides a chart visualisation for incoming data.

dataColumns

5 of 14

Cubbles - The Platform.

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

Cubbles

Base

Developers

create and share components

Users

use components within their webapplications.

DevTools

Developers

create and share components

RTE

* For Coders: A toolset based on node.js

* For Non-Coders: A browser based

development environment.

* A javascript based “RunTime Extension”

* Load it with a simple script- Tag to

enable to use of Cubbles Components.

* A server-side repository for components.�* Available as cloud-service.

* Easy to setup on any host with Docker installed.

6 of 14

Cubbles Components Follow The Web Components Specs.

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

Why Web Components?

Simple to use - Interoperable with the browser’s DOM.

Support provided for IE11+, Edge, Chrome*, Firefox*, Safari 7+*, Chrome Android*, Mobile Safari*.

*Indicates the current version of the browser

WebComponents can be used in combination with an(y) web application framework.

7 of 14

The Architecture Of A Cubbles Component - Black Box View

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

Name

&

Capabilities

bar-chart

type

xLabels

dataColumns

xLabels

dataColumns

This component provides a chart visualisation for incoming data ...

InputSlots

OutputSlots

8 of 14

The Architecture Of A Cubbles Component - White Box View

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

Model

View

(optional)

View

(optional)

Members

Elementaries

Compounds

B

C

A

9 of 14

The (Cubbles) Component Interaction Model

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

demo-employee-search

Search�Connector

query

config

result

result-list

result

If a Slot-Value changes, it’s value is propagated automatically over all outgoing connections.

outgoing connections

incoming connections

Example:

Connection

searchTerm

searchResult

connectorConfig

term

query

search-filter

filter-definition

10 of 14

Use Cubbles Within a Webpage

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

<html>

<head>

</head>

<body>

// some standard-tags here

<div>

<demo-employee-search cubx-webpackage-id=”demo-search@1.0”></demo-employee-search>

</div>

// other tags here

</body>

</html>

include any number of cubbles components

refer to the runtime-extension

11 of 14

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

Current State:

Ready for usage.

12 of 14

Contact. Getting Started.

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

https://cubbles.github.io/

13 of 14

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

Backup.

14 of 14

The Platform In Action.

“Cubbles: Platform Overview” by Hans-Dieter Böhlau

Cubbles

Base

www.myapp.com

(1) request the html

(2) request component

(2) share component

(1) create�component

Developers

build and share components

Users

use components within their webapplications.

<html>

…

<body>

…

<bar-chart/>

…

(3) instantiate

component

Want to see my numbers in a bar-chart.

Customer

data-service

(4) data-service interaction