commit eecc704fee631b6fccddaaddc2290c9661a03605 Author: Michael Zhang Date: Tue Nov 7 21:25:24 2023 -0600 g diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..df6cfd5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/dist +*.pdf +*.pdfpc \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..82fd2a5 --- /dev/null +++ b/index.html @@ -0,0 +1,5 @@ + + +
+ + diff --git a/index.jsx b/index.jsx new file mode 100644 index 0000000..f14a26b --- /dev/null +++ b/index.jsx @@ -0,0 +1,21 @@ +import React, { renderDom, useState } from "./react"; + +/** @jsx React.createElement */ +function App() { + const [value, setValue] = useState(); + + return ( + <> +

Counter value: {value}

+ + + ); +} + +renderDom( + document.getElementById("app"), + <> + + + +); diff --git a/notes.md b/notes.md new file mode 100644 index 0000000..4d9ee06 --- /dev/null +++ b/notes.md @@ -0,0 +1,117 @@ +# WWW + +- Didn't really have much put together but still wanted to do a talk, so here we are. + +# Who am I + +- Former webmaster + - I made the current ACM website! + - Discuss Drupal? +- Programming languages + - Hate every language +- 4 years industry +- 10+ years complaining + - Javascript was my first language, so soft spot in my heart + - I have seen many things come and go (lead into next 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" + +- HTML + - I mean, this is the platform, so I have to put this here + - Styling done via attributes + - Frames / tables for layout +- Javascript + - Rather unglamorous +- CSS + - Don't know much, let's gloss over it +- Flash + - Super easy to make and publish things +- jQuery + - One of the longest lasting web frameworks +- Coffeescript + - Introduced a lot of funny little syntax + - Transpiling wasn't new, but warmed a lot of people up to the idea of transpiling + - Used by a lot of big projects and companies + - Benefits not really helpful anymore since they got added to ES6 +- Angular +- ES6 + - fetch + - spread operator + - arrow functions + +This is where my list ends, but still lots of new and interesting Javascript projects today. + +# Things we fixed + +- Scoping + - Var/Let +- Arrow functions + - Eliminated `this` +- Modules + - Massively improved analyzability + tree-shaking +- STDLIB + - Map/Set/Symbol/etc + - toSorted/map/filter/reduce + - Observers + - bigints + +# Good things + +- Bundling + - This is basically just preprocessors + - Other languages should have this +- HMR + - Incredibly useful and versatile + - `watchexec` +- SSR + - Solved the problem of not being able to render immediately + - Good for static site generators like Astro +- X-plat UI + - Electron/Tauri + - Lot of people could develop really fast + - Compare to Qt + - Don't play the "familiarity" card + +# Reactivity + +- Flux + - Single point of update + - Redux + - +- Signals + - Enables better reactivity + - 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 controversial take: + +# Web is a solid choice + +- "Small" software as we know it today pretty much doesn't really exist, given the complexity of hardware and needs of users +- We have optimized for "having nice things" a lot, and there's no point in taking it + +# Bad + +- Equality + - Truthy /falsy + - `==` still in the language, typescript doesn't really fix this + - Macros + - JS was supposed to be a Lisp + - No nice features from homoiconicity +- Runtime + - Privacy discussion +- Ecosystem + - 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 + +# What's next? + +- HTMX +- CCSS +- Declarative web framework diff --git a/presentation.typ b/presentation.typ new file mode 100644 index 0000000..dbf076c --- /dev/null +++ b/presentation.typ @@ -0,0 +1,51 @@ +#import "@preview/polylux:0.3.1": * + +#set page(paper: "presentation-16-9") +#set text(size: 25pt) + +#polylux-slide[ + #align(horizon + center)[ + = Compile-Time Programming + + Michael Zhang + + #datetime.today().display("[month repr:long] [day], [year]") + ] +] + +#polylux-slide[ + == What is compile time? + + #table( + columns: (auto, auto), + stroke: none, + gutter: 35pt, + + ```c + int doTheFunny(int n) { + int result = 0; + for (int i = 0; i < n; i++) { + result += i; + } + return result; + } + + int main() { + return doTheFunny(21); + } + ```, + + [ + #pause + ``` + main: + mov eax, 210 + ret + ``` + ] + ) +] + +#polylux-slide[ + +] \ No newline at end of file diff --git a/presentation2.typ b/presentation2.typ new file mode 100644 index 0000000..484606f --- /dev/null +++ b/presentation2.typ @@ -0,0 +1,102 @@ +#import "@preview/polylux:0.3.1": * +#import themes.simple: * +#show: simple-theme + +#title-slide[ + = WWW + + Compendium of interesting web dev + Javascript factoids + + Michael Zhang +] + +#slide[ + == Who am I #pause + + - Former webmaster + - Programming languages + - 4 years of industry experience + - 10+ years of experience complaining about Javascript +] + +#slide[ + == History + + #columns(2)[ + - HTML (1991) + - Javascript (1995) + - CSS (1996) + - Flash (1995) + - JSON (2001) + - jQuery (2006) + - HTML 5 (2008) + - Node.js (2009) + - CoffeeScript (2009) + - Angular (2010) + - Typescript (2012) + - asm.js (2013) + - Webpack (2014) + - Babel (2014) + - Atom Shell (Electron) (2015) + - ECMAScript 6 (2015) + - React (2015) + ] +] + +#slide[ + == Things we fixed + + #columns(2)[ + - JS features + - Scoping + - Arrow functions + - Modules + - Standard library + - Layout + - Flex + - Selectors + ] +] + +#slide[ + == Good things + + - Bundling + - HMR + - SSR + Hydration + - Cross-platform UI + - Reactivity... +] + +#slide[ + == Let's talk about reactivity + + - Flux architecture vs. MVC vs. FRP + - Signal-based state management +] + +#focus-slide[ + == Web is a solid choice for UI +] + +#slide[ + == Bad + + - JS Language + - Equality still sucks + - Prototypes still suck + - No macros + - Runtime + - Fingerprinting + - Ecosystem + - Bloat + - Lack of competition in browsers +] + +#slide[ + == What's next? + + - HTMX? + - CCSS? + - Fully declarative web framework? +] diff --git a/react.js b/react.js new file mode 100644 index 0000000..c79a25f --- /dev/null +++ b/react.js @@ -0,0 +1,46 @@ +let id = 1; +function createElement(type, props, ...children) { + const struct = { + id, + type, + props, + children: children.map((child) => + typeof child === "object" ? child : { type: TEXT_NODE } + ), + }; + id += 1; + return struct; +} + +function intoDom(virtEl) { + if (!virtEl) return null; + if (typeof virtEl === "string") return document.createTextNode(virtEl); + + console.log("vi", virtEl); + if (typeof virtEl.type === "function") { + return intoDom(virtEl.type()); + } + + const el = virtEl.type + ? document.createElement(virtEl.type) + : document.createDocumentFragment(); + for (const c of virtEl.children ?? []) { + const domC = intoDom(c); + if (domC) el.appendChild(domC); + } + return el; +} + +export function renderDom(domEl, virtEl) { + domEl.appendChild(intoDom(virtEl)); +} + +export function useState() { + let value; + const setter = (newValue) => { + value = newValue; + }; + return [value, setter]; +} + +export default { createElement }; diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..f3681ef --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,9 @@ +import { defineConfig } from "vite"; + +export default defineConfig({ + build: { + modulePreload: { + polyfill: false, + }, + }, +});