Embed Size (px)
Citation preview
@AndrewRota
Component-Based UI Architectures for the Web
Andrew Rota | @andrewrota
ROME 24-25 MARCH 2017
@AndrewRota
bit.ly/components_codemotionSlides online at:
@AndrewRota
UI frameworks today talk a lot about “components.”
@AndrewRota
@AndrewRota
@AndrewRota
@AndrewRota
What does “component” even mean?
@AndrewRota
What does it mean to think about our user interfaces in terms of components?
@AndrewRota
Andrew RotaBoston, MA, USA
Software Architect at Wayfair
wayfair.com | wayfair.co.uk | wayfair.de
@AndrewRota
@AndrewRota
This is a talk aboutarchitectural models.
@AndrewRota
“ All models are wrong, but some are useful ”
George Box, statistician, Empirical Model-Building and Response Surfaces (1987)
@AndrewRota
New models presentnew 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
TemplatesModel Controller
@AndrewRota
Server MVC
Templates
Model Controller
Com
ponents
@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
Ser
ver
@AndrewRota
Data Model
UI Component
UI Component
UI Component
Ser
ver
@AndrewRota
Data Model
UI Component
UI Component
UI Component
Ser
ver
@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
Data Model
UI Component
UI Component
UI Component
@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
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>
<h1>Symphony No. 40</h1>
<h2>Wolfgang Amadeus Mozart</h2>
</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
const List = (props) => {
return (
<ul>
{props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
Input
@AndrewRota
const List = (props) => {
return (
<ul>
{props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
Output
@AndrewRota
Beyond the code, what are thequalities of a component?
@AndrewRota
Composable Cohesive
ContextIndependent 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
https://github.com/ant-design/ant-design/
Unit Tests
@AndrewRota
Colocated
https://github.com/ant-design/ant-design/
CSS Styles (LESS)
@AndrewRota
Colocated
https://github.com/ant-design/ant-design/
Localization
@AndrewRota
Colocated
https://github.com/ant-design/ant-design/
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
@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 foruser interfaces?
@AndrewRota
1. Components are familiar2. Interfaces benefit from reusability3. 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>
<h1>Symphony No. 40</h1>
<h2>Wolfgang Amadeus Mozart</h2>
</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
ReusabilityThe 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 AbstractionUI work touches a lot of teams: design, product, and (often
multiple) engineering teams.
@AndrewRota
Shared AbstractionComponents 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
Shared Abstraction
https://material.io/guidelines/components/buttons.html#buttons-style
@AndrewRota
What are the challenges with a component-based architecture?
@AndrewRota
1. State2. Universality
@AndrewRota
StateComponents define UI, not necessarily the state associated with
that UI.
@AndrewRota
StateBut 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 stateManage state independently, and link up to components.
@AndrewRota
Patterns for dealing with stateManage state independently, and link up to components.
@AndrewRota
Patterns for dealing with stateColocate state queries/mutations within components.
@AndrewRota
Patterns for dealing with stateColocate state queries/mutations within components.
@AndrewRota
Universality
@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.
@AndrewRota
I don’t think there’s a simple answer here.
Yet.
@AndrewRota
But maybe that’s ok.
@AndrewRota
Component-based architectureis useful, independent of the implementation.
@AndrewRota
“ All models are wrong, but some are useful ”
George Box, statistician, Empirical Model-Building and Response Surfaces (1987)
@AndrewRota
Is the component model usefulfor 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_codemotionSlides online at:
