Componentize your development!
By Gion Kunz
Systems, of systems, of systems, of systems...
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!
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