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

Lecture (slides). [Work in progress…]

What the WWW is all about (becoming), SE principles pertinent to mobile Web app development, 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.

Word-Wide Web

TOC

  1. WWW
    1. Evolution
    2. Hyper-*
    3. Strengths
    4. Weaknesses
    5. Bleeding edge
  2. SE
  3. Zombies
  4. Fail fast
  5. Prophecies

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.

70s: Internet growth explosive, network effect. 80s: too much information, “lost in hyperspace”, new tools needed, precursors.

  1. BBS, CompuServe: network effect
  2. Usenet (NNTP), Gopher (WAIS, VERONICA), IRC…
  3. Many protocols before, and many since

Hypertext/media

  1. Memex?… NoteCards
  2. [Halasz]

Rabbit holes:

  1. Tools for Thought / Howard Rheingold: “an exercise in retrospective futurism”

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 (didn’t happen) [Halasz]
  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 gardendowebsitesneedto

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

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” — uh, 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?

Zombies

But, 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

… 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]

EvilMVC: hype driven

Etyology.

  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

Your language sucks

Linguistic turn.

  1. Design patterns vs language features [eg, Java vs LISP]

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

Prophecies

Future?

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


Comments are closed.