How to Survive the Zombie Apocalypse: Software Engineering for Web Startups

[Lecture slides. Work in progress…]

What the WWW was/is/will be all about, software engineering principles pertinent to web development (web=app=mobile), current failures and implications for startups, and maybe attempted forecasts?

A serial CTO's perspective on what makes the world (of PWA startups particularly) tick.

Narrative

Much of my startups experience involved web app development to some extent, so I'm sensitive to this specific industry's slide along some curve, or pendulum swing, or however you might explain this "zombie apocalypse" phenomenon that elders have been moaning about recently.

WWW is the best thing that happened in this (last) generation — and it is worth protecting.

  1. WWW: the web of everything
  2. Software engineering: goals and principles relevant to startups, web
  3. Zombies: recent trends
  4. Fail fast
  5. Prophecies

Word-Wide Web

There's a URI scheme for everything…

  1. Evolution
  2. Superpowers
  3. Hyper{text/media}
  4. Weaknesses
  5. ad absurdum
  6. Bleeding edge

Evolution

דע מאין באת

  1. "Rodent oriented": long and messy re/evolution
  2. Transport protocol…
  3. … "misused as application container"
  4. Zen garden
  5. Rounded corners…
  6. Web 2.0
  7. User generated content (UGC)
  8. Rails… Meteor, Hoodie
  9. Web scale

"Rodent oriented"

(Credit to Sir TBL, and so many/few giants' shoulders, aside) the Web/Internet are a long sequence of many small technological revolutions.

  1. 70s: explosive growth
  2. BBS, CompuServe: network effect, social
  3. 80s: too much information, new tools needed
  4. "Lost in hyperspace"
  5. Precursors: Usenet (NNTP), Gopher, WAIS, VERONICA, IRC…
  6. Protocols (app layer): many before, and many since

Transport protocol…

90s: birth of WWW.

  1. HTML, HTTP
  2. URI/L, method, variants, content negotiation…

… "misused as application container"

Y2K: unresolved/able tension.

  1. Hypermedia future [Halasz]: didn't happen
  2. SSI, CGI, RIA, LAMP
  3. DHTML, AJAX, SPA
  4. Semantic Web, Linked Data [TBL]: also didn't happen? Yet?

… DOM API standard, SEO, bookmarklet, intranet, canvas, MathML (etc), WebRTC, REST, WebGL, iPhone(?), mobile, long tail, What the Stack?! (draft), Continuous(?), deferred script loading, HTTP/2, Devtools (Firebug, Weinre)…

Zen garden… dowebsitesneedto

Evolution (code).

  1. "Web isn't a poster": table-based layouts… raster→vector, 960 pixels, RWD, Flexbox, Grid
  2. Content/styling/behavior: separation of concerns (informal).
  3. (Inwards) Hacks, polyfills, jQuery, Houdini
  4. (Outwards) Unhosted, serverless, Bespin, Electron

Rounded corners…

Evolution (design).

  1. (Upwards) Dao of Web Design [LMGTFY?]
  2. Styleguide, Material Design, design system…

Web 2.0

… Web 2.0

User generated content (UGC)

(NB: how radically different the WWW is — from non-networked, GUI, media…)

  1. Karma… WikiWikiWeb: crowdsourcing, Cunningham's Law
  2. Folksonomies… Wisdom of the crowd
  3. Mashups, syndication, hackability
  4. Changed business models, YouTubers…

Rails… Meteor, Hoodie

How that evolution manifested in implementations. "The nice thing about standards is that you have so many to choose from."*

  1. Preprocessing (SSI), asset pipelining… DSLs (HAML, Sass, CoffeeScript)
  2. Middleware, micro-libraries, micro-frameworks
  3. "Explicit is better" — or is it?
    1. Scaffolding: convention
  4. No HTTP (→WebSockets), no HTML (on wire) (→JSON), no CSS (→Stylus)
  5. Ecosystem: package/dependencies management

Web scale

  1. CDN

Superpowers

To summarize: WWW (tech stack, aka platform) > GUI (desktop, native).

  1. Inherently, or historically positioned to, better handle diversity
    1. i18n/L10n
    2. Devices, form factor
      1. RWD (eg smartwatch, Google Glass)
      2. A11y (eg touch)
    3. Personalization, branding, etc (contrast with GUI rooted in uniformity)
  2. Native proprietary stacks suck!
    1. CDN > Rollout
    2. Already penetrated/won market: hybrid (WebView)
  3. Web 2.0, UGC, karma, SEO (see semantic), hypermedia (see),
    1. Social: FOAF, long tail, Webmentions…
  4. RWD, Mobile Web, PWA

… Incommensurable??

Hyper{text/media/space}

  1. Memex??… NoteCards
  2. [Halasz]
  1. Rabbit holes: Tools for Thought / Howard Rheingold: "an exercise in retrospective futurism"

Weaknesses

…?

Zombies

Weaknesses??

  1. Dear Developer, The Web Isn't About You
  2. Bloatware: average site heavier than Doom

"Is it web scale?"

  1. Long tail
  2. Cal Henderson, Dunning-Kruger

Front-end… backstab

  1. Django (et al) is broken
  2. Conway's Law

"Native"

  1. iPhone
  2. Marketing
    1. Look & feel
    2. App Store
  3. Rollout
  4. Evil Corp vetting
  5. Branding and modern UI

GUI stacks

  1. WIMP to CUA, Alto to WorkplaceOS
  2. MVC (Smalltalk), CDE, Taligent, DCOM/CORBA

Whatever happened to?

  1. Web components
  2. Google Wave
  3. Dart (Swing…?)
  4. Crockford's Seif

ad absurdum

  1. $#@! website and sequels
  2. Make Frontend Shit Again

Bleeding edge: state of the art

Where are we today? Best practices?

  1. PWA
  2. 12 Factor App Manifesto, Dao of Web Design
  3. Continuous
  4. Progressive enhancement: vs graceful degradation, in HTML, CSS, JS, feature detection, micro-experiences instead of "apps", inclusiveness/empathy…

PWA

  1. Designing Progressive Web Apps by Jason Grigsby

12 Factor App Manifesto

  1. Codebase: One codebase tracked in revision control, many deploys
  2. Dependencies: Explicitly declare and isolate dependencies
  3. Config: Store config in the environment
  4. Backing services: Treat backing services as attached resources
  5. Build, release, run: Strictly separate build and run stages
  6. Processes: Execute the app as one or more stateless processes
  7. Port binding: Export services via port binding
  8. Concurrency: Scale out via the process model
  9. Disposability: Maximize robustness with fast startup and graceful shutdown
  10. Dev/prod parity: Keep development, staging, and production as similar as possible
  11. Logs: Treat logs as event streams
  12. Admin processes: Run admin/management tasks as one-off processes

…

Software engineering

Eclectic reminders of concepts relevant to startups, web.

Discipline

Neglected, rare. Daoism?

  1. People-centered (cf Agile Manifesto)
  2. Limitations-centered: cognitive complexity, adaptive complexity (vs time-space)

No silver bullet

Origins.

  1. Software Crisis, 1968
  2. Criteria [for modularization], 1974
    1. OOA/D vs OOP
    2. Liskov substitution principle, type theory, correctness
  3. Process, Principles, and Goals, 1975

Life cycle methodologies

Meta of programming.

  1. SDLC. ALU.
  2. Waterfall
  3. Extreme Programmers (XP), "release early and often", Continuous
  4. … Agile Manifesto

Chief cause of problems is solutions

  1. Solution space; Whorf-Sapir?
  2. Analysis
  3. Specifications (formal)
  4. DSLs

NoSQL, no types, no OOP, no patterns

  1. Schemaless, no migrations
    1. Type theory/systems: weak, strong, static→dynamic
  2. Sharding — naturally

Zombies: where do they come from?

Contagion

  1. Social phenomena
    1. Women invent programming, then displaced when commercialized during 70s; again, in recent apocalypse: feminization of workforce/poverty
  2. Seniority distribution [Uncle Bob]

Can't go into zeitgeist/Trump — post-truth, idiocracy, propaganda, fake…

Underlying causes

… except a few mentions?

  1. Python paradox [Paul Graham]
  2. Law of the hammer
  3. Stupid tech = stupid people

… Dunning-Kruger? (Maybe not dyslexia, attention deficit, smartphones)

You've ruined JS

We're doomed.

  1. "… not knowing how miserable they are" [Crockford]
  2. Programmer (language) evolution
  3. Crockford's Seif?
  4. Desert generation [Bible]

Hype driven

Etiology.

  1. JS fatigue
  2. It's the future!

EvilMVC: post-truth

Prognosis.

  1. "The DOM isn't slow, you are."
  2. Solutions to problems you don't have

Conway's Law

כל התורה על רגל אחת.

  1. Paraphrased: org chart (eg Dilbert)
  2. Back stab, front stack, full end
  3. Why do cops walk in pairs?

…

Your language sucks

Linguistic turn.

  1. Design patterns vs language features [eg, Java vs LISP]
  2. Whorf-Sapir

…

Critical theory: is hard

… "Ontology engineer" (problem/solution space), epistemology, anti-positivism, poetic, deconstruction, incommensurability, "indistinguishable from magic", "not evenly distributed", adoption curve/hype cycle, spiral dynamics (everybody's right), stages of simulacrum, worse is better, Dunning-Kruger, thermodynamics?

Fail fast

Evidence: you (>99%) will fail!

  1. "הון סיכון", Gaussian distribution, herd mentality, bubbles, adoption curve/hype cycle
  2. Embrace failure: learn, from experience, takes time
  3. Fail better: differentiation, competitive, innovate
  4. Fail faster: TTM, engineering

Technophobia

  1. Priority: time to market (because it must be a competition)
  2. You're doing it wrong: over-schedule/budget
  3. It's the tech (methodology), dummy!

SE for startups

Engineering: quality of service (ie orthogonal to features).

  1. YAGNI
  2. Plan to throw one away

…

  1. Due diligence
  2. Unicorns

Disclaimers

  1. "Everything takes longer and costs more."
  2. "There is always one more bug." [First law of cybernetic entomology]

Prophecies

(Given to fools?)

  1. Luke's notes from JK's lecture The Way of the Web

--
The real world is a special case