Overview

What is the underlying technology?

The Web Components

Shadow DOM

In example

In example

App A

App B

Apps A x B

Benefits?

Individual app

Echosystem

• ...
• Change the layout without touching funtional elements
• Reuse layouts provided by app dev
• Easy as moving lego blocks
• Flexible as writing custom HTML page from top to bottom
• Layouts are managable as any other data in

How we can do that?

Default compositions

Migrate old-school code

identify functional elements

move the rest into composition

• Same results as in writing monolithic front are available

Specific ones

• Also HTML code
• comes as data in JSON view-model
• With same constrains freedom of HTML doc.
  DocumentFragment with any HTML+CSS structure and <slot>s
• could be migrated between instances w/ tools
• Could be changed by server-side code

Rule them all!

Merged partial

SELECT * FROM HTMLComposition
WHERE Key = "/People/Person.html&/Images/Concept.html"

What if there is none?

• Use defaults
• Magic is planned
• You have many ways to provide those, anyway

What we can do with compositions for merged partials?

• Whatever Web allows
  • Reorder inbetween between aps
  • hide
  • resize
  • ...
  • Apply any CSS rules
  • Build any HTML structure
  • Even add scripts if you're brave enough
• Just use

  <slot name="App/el">

  to distribute an element

Code Defaults

• Way to provide defaults
• Styling standalone
• Provided by app devs

Populate Stacounter.HTMLComposition

• (Usefull for) automated deployments and migrations
• (should be delivered with) applications suites and mappers
• Used for programmatically created Compositions (out of scope of this presentation)

• curl
• INSERT INTO ...
• new Starcounter.HTMLComposition
• ...

Editors

for humans

• heavy-coders
• any-coders
• no-coders
• designers
• ... anyone who knows how to use a web browser

Live editor

• Run Launcher / Layout App
• Open the editor
• Pick a partial to edit
• Changes with live-preview

Live editor for coders

• code editor
• type any HTML needed
• clear & save with single click
• slot elements created automatically
• Integration with browser's dev tools
• Changes with live-preview

Live editor for non-coders

• WYSIWYG editor
• simple lego-blocks
• move up-down
• resize
• group
• hide
• Inter-operates with advanced layouts
• Changes with live-preview

AI generated layouts

(developement planned for Jan/Feb 2017)

• Proposes composition
• Re-generates & learns on demand
• Takes many factors
  • Mapped and bound concepts
  • HTML semantincs
  • slot names
• base the knowledge on entire echosystem
• profiles to your needs

Guidelines

• #UseThePlatform
• Leave functional elements on root level
• Put layouts into shadow
• Keep them as plain and vanilla as possible
• Do not expose TextNodes on root level (use <span>)
• Prefix classnames, ids, slot names w/ App name
• explicit slot names
• do not use default slot in default compositions

Browser support

Shadow DOM v1 vs v0

<content select='[slot="App/name"]'>

<slot name="App/name">

Shadow DOM v1

Polyfill	✓	by Google team, supports V0, V1 in development. Supports all browsers below
Chrome	✓	V0 & V1
Opera	✓	V0 & V1
Firefox	•	⚑ behind the flag dom.webcomponents.enabled
Safari	✓	V1 (Safari 10)
IE/Edge	•	"Priority: High — We intend to begin development soon."

Starcounter versions

2.2.1.3234

(Sep 2016)

Editors