Componentize your development!

By Gion Kunz

Systems, of systems, of systems, of systems...

 Gion Kunz

 Front End Developer

@GionKunz

gion.kunz@oddeven.ch

https://oddeven.ch

Let's take
a look

at nature

Universe

Galaxy

Solar System

PLANET

Vegetation

ORGANISM

CELL

Molecule

Atom

Hierarchic Systems

The Holarchy

Arthur Koestler, The Ghost in the Machine (1967)

Holon

The parable of the two watchmakers

Herbert A. Simon, The Sciences of the Artificial (1969)

Hora

Tempus

Once upon a time, there were two watchmakers, named Hora and Tempus, who manufactured very fine watches...

Hora's Shop

Tempus' Shop

They both received a lot of orders and made lots of money...

Hora's Shop

Tempus' Shop

However, Hora prospered while Tempus went broke and lost his shop...

Why did Hora SUCCEED?

Watch manufacturing process

Tempus' Manufacture

  • Consists of ~1000 parts

  • Assembled of individual parts in one go

  • Fell apart completely, if he needed to answer calls

Hora's Manufacture

  • Consists of ~1000 parts

  • Assembled of intermediate stable components

  • Fell apart into components only

commonalities

Artificial

Nature

Microcosm

Macrocosm

Fundamental

Significant

EVOLUTION

Some Rules of Evolution

  • Environmental destructive stress

  • Competition

  • Change

  • Survival of the fittest

Conclusion

...complex systems evolve from simple systems much more rapidly when there are stable intermediate forms...

 

Herbert A. Simon

Developing User INterfaceS

Xerox Alto 1973

Are User Interfaces Holarchic Systems?

Holon

Holon

We Tend to Develop on Two Levels only

Pages

UI Elements

That seems to be the right approach!

Tempus

Hora

Well... not really...

Intermediate stable FORMS 

We need to build user interfaces like this...

...not like that

Evolution in Web Applications

  • Business needs

  • Continuous feedback

  • Constant change

Web Project Complexity

Time

Complexity

Cost of Change

There's no such system where you can expect to do more complex things, without making the system more complex.

Complex but not necessarily Complicated

Complex and Complicated

Conclusion

We need to start thinking holistically about developing user interfaces.

  • Application fitness (evolution)

  • Simplification (Complex but not Complicated)

  • Composability

Components

The Holons of Web Development

Input

Output

Composition

Properties of Components

  • Live in the DOM hierarchy

  • Mostly reflect visual hierarchy

  • Communicate in component tree

  • Compose intrinsic and extrinsic

  • Can hold state

<!DOCTYPE html>
<html>
  <head>
    <link rel="import" href="user-profile.html">
  </head>
  <body>
    <user-profile name="Hora"></user-profile>
    <user-profile name="Tempus"></user-profile>
  </body>
</html>

Simple self-contained Web Component

<template id="user-profile-template">
  <p class="name"></p>
</template>

<script>
class UserProfile extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    const instance = document.currentScript.ownerDocument
      .querySelector('#user-profile-template')
      .content.cloneNode(true);
    shadowRoot.appendChild(instance);
    shadowRoot.querySelector('.name')
      .textContent = this.getAttribute('name');
  }
}

customElements.define('user-profile', UserProfile);
</script>

Separation of Concerns

@Component({
  selector: 'user-profile',
  template: `
    <p class="name">{{name}}</p>
  `
})
class UserProfile {
  constructor() {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then((response) => response.json())
      .then((user) => this.name = user.name);
  }
}

Angular 2 Component with mixed concerns

@Component({
  selector: 'user-profile',
  template: `
    <p class="name">{{name}}</p>
  `
})
class UserProfile {
  @Input() name;
}
//-------------------------------------------------------
@Component({
  selector: 'user-profile-container',
  template: `
    <user-profile [name]="user.name"></user-profile>
  `
})
class UserProfileContainer {
  constructor() {
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then((response) => response.json())
      .then((user) => this.user = user);
  }
}

Separate using Container Components

<application>
  <navigation>
    <user-profile></user-profile>
    <navigation-group></navigation-group>
    <navigation-group></navigation-group>
    <navigation-group></navigation-group>
  </navigation>
  <main-content></main-content>
</application>

Components vs. Semantics

Semantic Boundaries

Application

Navigation

User Profile

User Image

Hard Boundary

Soft
Boundary

Soft semantic boundaries tend to increase / decrease scope depth.

Hard semantic boundaries tend to require different scope.

Application

Navigation

User Profile

User Image

Sharing experiences

Collaboratively discover Components with UX- and Visual-Designers.

Use existing frameworks for communication (BEM, Atomic Design).

Keep components as concise and small as possible, use composition to introduce complexity.

KEEP
CALM

CREATE
COMPONENTS

AND

Thank You!

 Gion Kunz

 Front End Developer

@GionKunz

gion.kunz@oddeven.ch

https://oddeven.ch

FEC16 attendees get 25% discount on the e-book

Credits Images

https://commons.wikimedia.org/wiki/File:Lego_dublo_arto_alanenpaa_5.JPG
https://commons.wikimedia.org/wiki/File:Xerox_Alto_mit_Rechner.JPG
https://en.wikipedia.org/wiki/File:Alto_Neptune_Filemanager.gif
http://www.nasa.gov/content/most-colorful-view-of-universe-captured-by-hubble-space-telescope
https://commons.wikimedia.org/wiki/File:Wide_Field_Imager_view_of_a_Milky_Way_look-alike_NGC_6744.jpg
https://www.flickr.com/photos/mazzastick/11060555386
https://www.pexels.com/search/earth/ (cc0)
https://commons.wikimedia.org/wiki/File:Onion_Cells.jpg
https://commons.wikimedia.org/wiki/File:Pocketwatch_cutaway_drawing.jpg
https://commons.wikimedia.org/wiki/File:Vienna_-_Vintage_Franz_Zajizek_Astronomical_Clock_machinery_-_0518.jpg
http://www.publicdomainpictures.net/view-image.php?image=54539&picture=human-evolution
http://www.publicdomainpictures.net/view-image.php?image=50324
https://www.reddit.com/r/ImageStabilization/comments/270gxb/request_could_someone_stabilize_this_to_the_ball/

References

Herbert A. Simon, The Sciences of the Artificial, 1969

Arthur Koestler, The Ghost in the Machine, 1967

Ludwig Von Bertalanffy, General System Theory, 1968

Componentize Your Development!

By oddEVEN

Componentize Your Development!

Components have become a core asset of most modern frameworks like React or Angular. Even the web standard is evolving into a component based direction with the Web Components proposals. What’s behind this movement in user interface development? In this framework agnostic talk, Gion will outline some of the main principles behind component based UI development. Learn how to benefit from well designed components and start writing composable and highly re-usable web applications.

  • 2,441