25. @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
31. @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.
32. @AndrewRota
“A component controls a patch of screen
called a view.”
https://angular.io/docs/ts/latest/guide/architecture.html#!#components
33. @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/
34. @AndrewRota
“Components let you split the UI into
independent, reusable pieces, and think
about each piece in isolation.”
https://facebook.github.io/react/
49. @AndrewRota
How composable are your components?
✅ - Can a component have children?
✅ - Do components define their interfaces?
✅ - ...with types?
✅ - Can you extend by composition?
51. @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
52. @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?
54. @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?
61. @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?
64. @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
65. @AndrewRota
“...the organizational structure of a software system
including components, connections, constraints,
and rationale”
Clements, Kogut, 1994, The Software Architecture Renaissance