web-dev-presentation/presentation2.typ

#import "@preview/polylux:0.3.1": *
#import themes.simple: *
#show: simple-theme

#title-slide[
  = WWW

  Compendium of interesting web dev + Javascript factoids

  Michael Zhang

  // Didn't really have much put together but still wanted to do a talk, so here we are.
]

#slide[
  == Who am I #pause

  - Former webmaster #pause
    // I made the current ACM website!
    // Discuss Drupal?
  - Programming languages grad student #pause
  - 4 years of industry experience #pause
  - 10+ years of experience complaining about Javascript
    // Javascript was my first language, so soft spot in my heart
    // I have seen many things come and go (lead into next slide)
]

#centered-slide[== History]
// Was gonna put subjective history, but all history is subjective
// These are all things that at some point I believe "took the web by storm"

#centered-slide[=== HTML (1991)]
// I mean, this is the platform, so I have to put this here
// Styling done via attributes
// Frames / tables for layout

#centered-slide[=== Javascript (1995)]
// Unglamorous

#centered-slide[=== CSS (1996)]
// Don't know much about this

#centered-slide[=== Flash (1995)]
// First thing I was really introduced to
// Super easy to make and publish animations
// People started developing UI components and making websites

#centered-slide[=== JSON (2001)]
// No need for an explanation
// Simple to implement

#centered-slide[=== jQuery (2006)]
// Longest lasting web framework

#centered-slide[=== HTML 5 (2008)]
// Replaced things like Flash video players
// Some interactive components
// Apple killed Flash

#centered-slide[=== Node.js (2009)]
// the meme itself

#centered-slide[=== CoffeeScript (2009)]
// I think this is what warmed the web up to transpiling
// There were a lot of other transpiling projects but they didn't really take off

#centered-slide[=== Angular (2010)]
// One of the early "easy-to-use" frameworks based on MVC
// Popularized two-way data binding

#centered-slide[=== Typescript (2012)]
// Didn't really take off until later
// 

#centered-slide[=== asm.js (2013)]
// "can js be fast?"
// Gary Bernhardt's Yavascript talk

#centered-slide[=== Webpack (2014)]
// Introduced the concept of "hot module replacement"

#centered-slide[=== Babel (2014)]
// JS was changing fast

#centered-slide[=== Atom Shell (Electron) (2015)]
// Cross-platform easy
// Unfortunate RAM usage problems
// "hey let's just improve performance later"
// Tauri?

#centered-slide[=== ECMAScript 6 (2015)]
// Arrow functions
// fetch
// 

#centered-slide[=== React (2015)]
// Non-MVC based workflow
// React Native 2020

// I think this is the end of what I consider "history"
// Lots of modern projects (Vite, SWC, Deno, etc) but most of the new work has been in backend or development process (packaging, containerization, etc)

#centered-slide[== Things we fixed]

#slide[
  === Scoping

  ```js
  for (var i = 0; i < 10; i++)
    var x = i + 5;

  console.log(x); // 14
  ```
]

#slide[
  === Arrow functions #pause

  ```js
  function f(x) {
    var fThis = this;
    function g(y) {
      // use fThis
    }
  }
  ```
]

#slide[
  === Modules

  ```js
  if (someBizarreComputation()) {
    require("library-with-side-effects");
  }
  ```
]

#centered-slide[=== Standard library]
// Map/Set/Symbol/etc
// toSorted/map/filter/reduce
// Observers
// bigints

#slide[
  === Layout

  - Flex
  - Selectors
]

#slide[
  == Good things

  - Bundling
  // This is basically just preprocessors
  // Other languages should have this

  - HMR
  // Incredibly useful and versatile
  // `watchexec`

  - SSR + Hydration
  // Solved the problem of not being able to render immediately
  // Good for static site generators like Astro

  - Cross-platform UI
  // Electron/Tauri
  // Lot of people could develop really fast
  // Compare to Qt
  // Don't play the "familiarity" card

  - Reactivity...
]

#slide[
  == Let's talk about reactivity

  - Flux architecture vs. MVC vs. FRP
  - Signal-based state management
  // Note on Svelte+friends: they talk about compiling but it seems a lot of their compiled code isn't really that much more concise, large runtime
]

// Which brings me to my hot take of the night:

#focus-slide[
  == Web is a solid choice for UI
]

// "Small" software as we know it today pretty much doesn't really exist outside of scripts and personal automation, given the complexity of software distribution
// We have optimized for "having nice things" a lot

#slide[
  == Bad

  - JS Language
    - Equality still sucks
    // Truthy /falsy
    // `==` still in the language, typescript doesn't really fix this
    - Prototypes still suck
    - No macros
    // JS was supposed to be a Lisp
    // No nice features from homoiconicity
  - Runtime
    - Fingerprinting
  - Ecosystem
    - Bloat
    // NPM sucks
    // Lots of packages for small simple things
    // Supply chain attacks
    // Security of running npm software on ur own computer, possibly an OS problem instead
    - Lack of competition in browsers
    // WEI / FLOC / google mess
]

#slide[
  == What's next?

  - HTMX?
  - CCSS?
  - Fully declarative web framework?
]