222 lines
5 KiB
Text
222 lines
5 KiB
Text
#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?
|
|
]
|