michael/web-dev-presentation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

g

Browse source
This commit is contained in:
Michael Zhang 2023-11-07 21:25:24 -06:00
commit eecc704fee
8 changed files with 354 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
/dist
*.pdf
*.pdfpc

5
index.html Normal file
View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<html>
<div id="app"></div>
<script src="./index.jsx" type="module"></script>
</html>

21
index.jsx Normal file
View file

@ -0,0 +1,21 @@
import React, { renderDom, useState } from "./react";
/** @jsx React.createElement */
function App() {
const [value, setValue] = useState();
return (
<>
<p>Counter value: {value}</p>
<button onClick={() => setValue((i) => i + 1)}>Increment</button>
</>
);
}
renderDom(
document.getElementById("app"),
<>
<App />
<App />
</>
);

117
notes.md Normal file
View file

@ -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

51
presentation.typ Normal file
View file

@ -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[
]

102
presentation2.typ Normal file
View file

@ -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?
]

46
react.js vendored Normal file
View file

@ -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 };

9
vite.config.ts Normal file
View file

@ -0,0 +1,9 @@
import { defineConfig } from "vite";
export default defineConfig({
build: {
modulePreload: {
polyfill: false,
},
},
});