Component-Based UI Architectures for the Web - Andrew Rota - Codemotion Rome 2017

@AndrewRota
Component-Based UI
Architectures for the Web
Andrew Rota | @andrewrota
ROME 24-25 MARCH 2017

@AndrewRota
bit.ly/components_codemotion
Slides online at:

@AndrewRota
UI frameworks today talk a lot
about “components.”

@AndrewRota
What does “component” even mean?

@AndrewRota
What does it mean to think about our user
interfaces in terms of components?

@AndrewRota
Andrew Rota
Boston, MA, USA
Software Architect at Wayfair
wayfair.com | wayfair.co.uk | wayfair.de
@AndrewRota

@AndrewRota
This is a talk about
architectural models.

@AndrewRota
“ All models are wrong, but
some are useful ”
George Box, statistician, Empirical Model-Building and Response Surfaces (1987)

@AndrewRota
New models present
new perspectives.

@AndrewRota
How do you model your web
application UI architecture?

@AndrewRota
Frontend UI
Server MVC

@AndrewRota
Server MVC
View Model Controller

@AndrewRota
Server MVC
Templates
Model Controller

@AndrewRota
Server MVC
Templates
Model Controller
Components

@AndrewRota
Let’s rethink this model.

@AndrewRota
What if UI components were first
class citizens?

@AndrewRota
Data Model
UI
Component
UI
Component
UI
Component

@AndrewRota
Data Model
UI
Component
UI
Component
UI
Component
Server

@AndrewRota
Let’s put aside the client/server split as an
implementation detail.

@AndrewRota
Let’s put aside the client/server split as an
implementation detail.*
* A very very important detail, just not one addressed in this model

@AndrewRota
Components are the defining
feature of user interfaces.

@AndrewRota
UI
Component
UI
Component
UI
Component

@AndrewRota
Let’s put the focus on
components.

@AndrewRota
How do today’s web UI libraries
define components?

@AndrewRota
“A component is a custom HTML tag whose
behavior you implement using JavaScript and
whose appearance you describe using Handlebars
templates. They allow you to create reusable
controls…”
https://guides.emberjs.com/v1.10.0/concepts/core-concepts/#toc_components
This presentation is unaffiliated with the Ember project.
Ember is a trademark of Tilde Inc.

@AndrewRota
“A component controls a patch of screen
called a view.”
https://angular.io/docs/ts/latest/guide/architecture.html#!#components

@AndrewRota
“With Web Components, you can create
reusable custom elements that...break your
app up into right-sized components.”
https://www.polymer-project.org/1.0/

@AndrewRota
“Components let you split the UI into
independent, reusable pieces, and think
about each piece in isolation.”
https://facebook.github.io/react/

@AndrewRota
Let’s look at some <code>

@AndrewRota
<music-playlist>
<music-playlist-item>
<h1>Symphony No. 40</h1>
<h2>Wolfgang Amadeus Mozart</h2>
</music-playlist-item>
</music-playlist>
<music-player track="1" playing />

@AndrewRota
<MusicPlaylist>
<MusicPlaylistItem>
</MusicPlaylistItem>
</MusicPlaylist>
<MusicPlayer track={1} playing />

@AndrewRota
Defining components

@AndrewRota
const List = (props) => {
return (
<ul>
{props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}

@AndrewRota
return (
<ul>
))}
</ul>
);
}
Input

@AndrewRota
return (
<ul>
))}
</ul>
);
}
Output

@AndrewRota
Beyond the code, what are the
qualities of a component?

@AndrewRota
Composable Cohesive
Context
Independent
Colocated

@AndrewRota
Composable
Composable components can be nested within
other components.

@AndrewRota
<app-wrapper>
<app-header>
<app-navigation />
</app-header>
<app-body>
<app-content />
</app-body>
</app-wrapper>

@AndrewRota
Components are composed in a tree structure.

@AndrewRota
<my-nametag><strong>world</strong></my-nametag>
<div>
<h1>Hello, <slot></slot>.</h1>
</div>
<div>
<h1>Hello, <strong>world</strong>.</h1>
</div>

@AndrewRota
How composable are your components?
✅ - Can a component have children?
✅ - Do components define their interfaces?
✅ - ...with types?
✅ - Can you extend by composition?

@AndrewRota
Cohesive
Cohesive components contain the elements
necessary for its purpose.

@AndrewRota
“Cohesion within a module is the degree to
which the module's elements belong together.
In other words, it is a measure of how focused a
module is. The idea is not just to divide software
into arbitrary parts (i.e., modularity), but to keep
related issues in the same part.”
Software Engineering: Modern Approaches, 2nd ed. (pg. 352), Eric J. Braude, Michael E. Bernstein

@AndrewRota
How cohesive are your components?
✅ - Is there little “wiring-up” necessary?
✅ - Does a component have everything it needs?
✅ - If you change a property, how many places
does that change need to be made in?

@AndrewRota
Context-Independent
A context-independent component can be used
in different environments without modification.

@AndrewRota
How context independent are your components?
✅ - Can you “copy/paste” a component?
✅ - Can components define style boundaries?
✅ - ...error boundaries?
✅ - Do components require global state?

@AndrewRota
Colocated
A colocated component places related code in
the same place, regardless of technology.

@AndrewRota
Colocated
https://github.com/ant-design/ant-design/

@AndrewRota
Colocated
Unit Tests

@AndrewRota
Colocated
CSS Styles
(LESS)

@AndrewRota
Colocated
Localization

@AndrewRota
Colocated
Markdown files
with examples

@AndrewRota
How colocated are your components?
✅ - How many files does a component need?
✅ - What does the directory structure look like?
✅ - Can you review a component in once place?

@AndrewRota
So why component architectures?

@AndrewRota
What is software architecture?

@AndrewRota
“...an abstract system specification consisting
primarily of functional components described in
terms of their behaviors and interfaces and
component-component interconnections.”
Hayes-Roth, 1994, written for the ARPA Domain-Specific Software Architecture (DSSA) program

@AndrewRota
“...the organizational structure of a software system
including components, connections, constraints,
and rationale”
Clements, Kogut, 1994, The Software Architecture Renaissance

@AndrewRota
Software architecture ==
components + their connections

@AndrewRota
In a component-based UI architecture we treat UI
components and their connections as part of our
overall software architecture.

@AndrewRota
Components in the UI are no longer implementation
details, they’re a core unit of the overall system.

@AndrewRota
UI
Component
UI
Component
UI
Component
UI
Component
UI
Component

@AndrewRota
UI
Component
UI
Component
UI
Component
UI
Component
UI
Component
+ Client / Server Constraints
+ Platform Differences
+ Performance Considerations
+ Design / UX Concerns

@AndrewRota
Leverage components as the fundamental unit
when reasoning about UI architecture.

@AndrewRota
So why does this make sense for
user interfaces?

@AndrewRota
1. Components are familiar
2. Interfaces benefit from reusability
3. Abstraction can be shared across disciplines

@AndrewRota
Familiarity
<div>
<h1>Hello world</h1>
<img src="foo.jpg" />
</div>
HTML works a lot like components.

@AndrewRota
Familiarity
<div>
<h1>Hello world</h1>
<img src="foo.jpg" />
</div>
HTML works a lot like components.*
*see web components

@AndrewRota
<MusicPlaylist>
<MusicPlaylistItem>
</MusicPlaylistItem>
</MusicPlaylist>
<MusicPlayer track={1} playing />
Familiarity

@AndrewRota
React.createElement(
MusicPlaylist, null, React.createElement(
MusicPlaylistItem, null, React.createElement(
"H1", null, "Symphony No. 40"
), React.createElement(
"H2", null, "Wolfgang Amadeus Mozart"
)
)
),
React.createElement(MusicPlayer,
{ track: 1, playing: true }
);
Familiarity
(there’s a reason JSX is so popular)

@AndrewRota
Reusability
The more components are composable, context-independent,
cohesive, and colocated, the more easily they can be shared.

@AndrewRota
Reusability
https://www.webcomponents.org

@AndrewRota
Reusability
https://react.rocks/?q=calendar

@AndrewRota
Shared Abstraction
UI work touches a lot of teams: design, product, and (often
multiple) engineering teams.

@AndrewRota
Shared Abstraction
Components as a UI concept can be useful across many different
types of teams and disciplines.

@AndrewRota
Shared Abstraction
https://material.io/guidelines/components/buttons.html#buttons-style

@AndrewRota
What are the challenges with a
component-based architecture?

@AndrewRota
1. State
2. Universality

@AndrewRota
State
Components define UI, not necessarily the state associated with
that UI.

@AndrewRota
State
But state is a core feature of software.
Especially UIs where state changes based on user input.

@AndrewRota
Managing state is hard
https://youtu.be/x7cQ3mrcKaY?t=15m55s

@AndrewRota
Start by separating state container components
from presentational components

@AndrewRota
Patterns for dealing with state
Manage state independently, and link up to components.

@AndrewRota
Patterns for dealing with state
Colocate state queries/mutations within components.

@AndrewRota
Universality - across platforms?
Components for…
the web?
iOS apps?
Android apps?
desktop apps?
virtual reality?

@AndrewRota
Universality - across libraries?
Components for…
react?
angular?
ember?
polymer?
plain JavaScript?

@AndrewRota
What if there were a standard? What if all
components were interoperable?

@AndrewRota
I don’t think there’s a simple answer here.

@AndrewRota
Different frameworks have
different strengths and weaknesses.

@AndrewRota
Different platforms have different challenges.

@AndrewRota
I don’t think there’s a simple answer here.
Yet.

@AndrewRota
But maybe that’s ok.

@AndrewRota
Component-based architecture
is useful, independent of the implementation.

@AndrewRota
Is the component model useful
for describing web UIs?

@AndrewRota
Does a component-based UI model impact how
you think about your overall application
architecture?

@AndrewRota
Let’s elevate components to first class citizens
in our application architecture.

@AndrewRota
I think this is only the beginning...

@AndrewRota
User interface architecture is hard,
but components make it easier.

@AndrewRota
Grazie!
@AndrewRota
bit.ly/components_codemotion
Slides online at:

Component-Based UI Architectures for the Web - Andrew Rota - Codemotion Rome 2017

More Related Content

Similar to Component-Based UI Architectures for the Web - Andrew Rota - Codemotion Rome 2017

More from Codemotion

Recently uploaded

Component-Based UI Architectures for the Web - Andrew Rota - Codemotion Rome 2017