Architecture
Theory
Tyler Graf
Senior Web Dev
Tree Team
Architectural Myth
Developer
Architect
Architectural Truth
Developer
Architect
Architect
Muscle Mass === Responibility
All Developers are Architects
Component
App
Set of Apps
Website
Real-world Architect ≠ Software Architect
- Design EVERYTHING up front
- Do not construct
- Building lasts a long time without changes
Architect
Gardener
Architect
Town Planner
Architect
What is the Role of an Architect?
(Within your scope)
All Developers are Architects
The single architect is a servant leader, there to make sure all developers are competent architects who understand and consider architectural issues as they work.
Main design responsibility
Assure coherence across the system
The architect is the expert, but also the coordinator, teacher and mentor.
So you want to be an Architect?
A Good Architect:
Skilled Coder
Design Patterns
Conferences
Network w/ Architects
Read Code
Write Code
Communication Skills
Presentation Skills
Look at open source software well enough to understand it's pros and cons architecturally
Hey
OK
Architects know how to ask the right questions
- Talk to developers to understand problems
-
Talk to product managers to understand requirements
- Research public packages and services to see if there's an open source or paid solution
- See how others in the community are solving it
Problem Solver
Build an Architecture System Over and Over
Allen Holub
Gretchen's Cookbook
~600
Recipes
PHP (2008)
PHP (2008)
Linux Server
- server admin
- linux
- php
- mysql
- queries
- url query params
- domain registration
- cname
- html
- css
- jquery
- ux
Rails (2009)
Rails (2009)
Linux Server
- ruby
- rails
- jquery
- social sharing
- pre-pwa
- media queries
- svn
- ssh
Angular (2012)
Angular (2012)
cookbook-api.herokuapp.com
- heroku
- git
- node
- express
- rest
- mongo
- mongoose
- angular 1
- xhr
gretchenscookbook.com
Polymer 1 (2015)
Polymer 1 (2015)
- nosql
- firebase
- pwa
- service worker
- real time db
- polymer 1
- performance
gretchenscookbook.com
Polymer 2 (2017)
PWA, node, mongo
Polymer 2 (2017)
cookbook-api.herokuapp.com
- Polymer 2
- offline
- performance
- ES Modules
- Auth
gretchenscookbook.com
Lit (2019)
React (2021)
Architects make
It's OK to be wrong
It's OK to change your mind
A Good Idea
Tower blocks in Great Britain
Lit
React
Angular
Polymer
Frontier Controls
Sunk Cost Fallacy
Even if we spent 100K on a thing and it's the wrong solution, we shouldn't spend time blaming people, we should just move forward with the right solution.
Agile Manifesto
Responding to change over following a plan
Don't plan out 10 years
2-3 is plenty
Ivory
Tower
Architects should experience the hard parts
Example from Erik Dörnenburg
Frontend
Backend
ESB
id
Example from Erik Dörnenburg
Frontend
Backend
ESB
id
id
id
id
id
data
data
data
data
data
Surreal Architecture
Surreal Architecture
components
App Shell
Service
axios
local cache
Thanks Joey Cozza
"I don't think there's an architect or developer that can claim they intuitively understand the web of dependencies and actually grok them."
-Erik Dörnenburg
Collaboration
Always develop/review your architecture with someone else
Alternate Spouses
zion-user
Reviewing Architecture
-
Use your experience to guide
-
Don't nitpick
-
If you hate 8 things in a PR, pick 1 or 2
import React, { useState, useEffect } from "react";
export default function MyComponent({ value }) {
const [thing1, setThing1] = useState();
const [thing2, setThing2] = useState();
const [thing3, setThing3] = useState();
useEffect(() => {
setThing1(value + 1);
}, [value]);
useEffect(() => {
setThing2(thing1 + 1);
}, [thing1]);
useEffect(() => {
setThing3(thing2 + 1);
}, [thing2]);
return (
<ul>
<li>{thing1}</li>
<li>{thing2}</li>
<li>{thing3}</li>
</ul>
);
}import React from "react";
export default function MyComponent({ value }) {
const thing1 = value + 1;
const thing2 = thing1 + 1;
const thing3 = thing2 + 1;
return (
<ul>
<li>{thing1}</li>
<li>{thing2}</li>
<li>{thing3}</li>
</ul>
);
}
Your architectural decisions will affect others
Your architectural decisions will affect others
Ask for feedback!
Be considerate.
Be teachable.
Study References
Architecture Theory
By Tyler Graf
