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

Made with Slides.com