1. @stillinbeta // @brooklyn_js July 2019
EZ-rust
Z80 for the web

2. @stillinbeta // @brooklyn_js July 2019

3. @stillinbeta // @brooklyn_js July 2019

4. @stillinbeta // @brooklyn_js July 2019
What’s this Rust thing all about?

5. @stillinbeta // @brooklyn_js July 2019
The Borrow Checker

6. @stillinbeta // @brooklyn_js July 2019
Let’s talk about
Garbage Collection

7. @stillinbeta // @brooklyn_js July 2019
C, C++, etc: #yolo

8. @stillinbeta // @brooklyn_js July 2019
Here’s some memory.
Free it when you’re done
Whatever, MOM

9. @stillinbeta // @brooklyn_js July 2019
Javascript, Go, Python, etc:
are we there yet?

10. @stillinbeta // @brooklyn_js July 2019
You done with that?
No
You done with that?
No

11. @stillinbeta // @brooklyn_js July 2019
Rust: Chain of Custody

12. @stillinbeta // @brooklyn_js July 2019
This memory is yours
K
thnx
All Done

13. @stillinbeta // @brooklyn_js July 2019
Checked at Compile Time!

14. @stillinbeta // @brooklyn_js July 2019
Some other stuff
● Great ecosystem
● Cute mascot
● Really productive or something
● Basically Haskell but practical

15. @stillinbeta // @brooklyn_js July 2019

16. @stillinbeta // @brooklyn_js July 2019
Tell me about the Z80!

17. @stillinbeta // @brooklyn_js July 2019
https://upload.wikimedia.org/wikipedia/commons/1/19/Zilog_Z80.jpg

18. @stillinbeta // @brooklyn_js July 2019
80 Fast 80 Furious
https://upload.wikimedia.org/wikipedia/commons/3/3a/KL_Intel_i8080_Black_Background.jpg

19. @stillinbeta // @brooklyn_js July 2019
https://upload.wikimedia.org/wikipedia/commons/3/33/ZXSpectrum48k.jpg

20. @stillinbeta // @brooklyn_js July 2019
https://commons.wikimedia.org/wiki/File:Ti83-plus-silver.png

21. @stillinbeta // @brooklyn_js July 2019
https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Game-Boy-FL.jpg/800px-Game-Boy-FL.jpg

22. @stillinbeta // @brooklyn_js July 2019
zeerust

23. @stillinbeta // @brooklyn_js July 2019
http://www.imagineeringdisney.com/blog/2009/12/16/horizons-mural-the-prologue-and-the-promise-high-res.html

24. @stillinbeta // @brooklyn_js July 2019
z80 + rust

25. @stillinbeta // @brooklyn_js July 2019

26. @stillinbeta // @brooklyn_js July 2019
Zeerust?
● Z80 Emulator
● Written in Rust
● (Mostly) complete

27. @stillinbeta // @brooklyn_js July 2019
Zeerust demo

28. @stillinbeta // @brooklyn_js July 2019
But what if... internet

29. @stillinbeta // @brooklyn_js July 2019

30. @stillinbeta // @brooklyn_js July 2019
Like assembly, but make it internet

31. @stillinbeta // @brooklyn_js July 2019

32. @stillinbeta // @brooklyn_js July 2019
All major browsers*!.

33. @stillinbeta // @brooklyn_js July 2019

34. @stillinbeta // @brooklyn_js July 2019
cargo install cargo-web

35. @stillinbeta // @brooklyn_js July 2019
cargo web start

36. @stillinbeta // @brooklyn_js July 2019
Z80 Assembly ld B, 9
get_local 1
i32.load8_u offset=0 align=1
tee_local 3
i32.const 1
....
and %r14d,%ecx
mov %rcx,%rsi
shl $0x4,%rsi
lea (%rbx,%rsi,1),%r13
...

37. @stillinbeta // @brooklyn_js July 2019
https://en.wikipedia.org/wiki/Turtles_all_the_way_down#/media/File:River_terrapin.jpg

38. @stillinbeta // @brooklyn_js July 2019
And we’re all done!

39. @stillinbeta // @brooklyn_js July 2019
rust compiles to wasm,
but browsers speak html

40. @stillinbeta // @brooklyn_js July 2019
React
● Very popular
● Lots of support
● Good life skill
● javascript

41. @stillinbeta // @brooklyn_js July 2019
React
● Very popular
● Lots of support
● Good life skill
● javascript
Angular
● Even more popular!
● Backed by Google
● Excellent tooling
● javascript

42. @stillinbeta // @brooklyn_js July 2019
React
● Very popular
● Lots of support
● Good life skill
● Javascript
Angular
● Even more popular!
● Backed by Google
● Excellent tooling
● Javascript
Yew
● Totally unknown
● Maybe abandoned
● No documentation
● Rust

43. @stillinbeta // @brooklyn_js July 2019
guess what I picked

44. @stillinbeta // @brooklyn_js July 2019
So Yew is Cool!

45. @stillinbeta // @brooklyn_js July 2019
html! {
<div class={"register-8"},>
<strong>{ format!("{}:", self.label) }</strong>
<code>{ format!("{:02x}", self.value) }</code>
</div>
}

46. @stillinbeta // @brooklyn_js July 2019
pub enum CPUCommand {
Step,
Run,
Reset,
ShowMemory(bool),
LoadProgram(&'static [u8]),
}

47. @stillinbeta // @brooklyn_js July 2019
html! {
<div id={ "buttons" },>
<button onclick=|_| CPUCommand::Step,> { "Step" } </button>
<button onclick=|_| CPUCommand::Run,> { "Run" } </button>
<button onclick=|_| CPUCommand::Reset,> { "Reset" } </button>
</div>
}

48. @stillinbeta // @brooklyn_js July 2019
fn update(&mut self, msg: Self::Message) -> ShouldRender {
match msg {
CPUCommand::Step => self.machine.z80.step(),
CPUCommand::Run => self.machine.z80.run(),
CPUCommand::ShowMemory(b) => self.show_memory = b,
}
}
}

49. @stillinbeta // @brooklyn_js July 2019
And then... CSS happened

50. @stillinbeta // @brooklyn_js July 2019
CSS Grids
Are harder
than
they
look

51. @stillinbeta // @brooklyn_js July 2019
CSS
is harder
than
it
looks

52. @stillinbeta // @brooklyn_js July 2019
Gra󰈥󰈋󰈎c 󰇷󰇵󰈼ig󰈝 󰈎󰈼 m󰉘 󰈦as󰈻󰈎󰈢󰈞

53. @stillinbeta // @brooklyn_js July 2019
But we got there

54. @stillinbeta // @brooklyn_js July 2019

55. @stillinbeta // @brooklyn_js July 2019
whoops, no javascript ;)

56. @stillinbeta // @brooklyn_js July 2019
zeerust.stillinbeta.com
Thank you!

57. @stillinbeta // @brooklyn_js July 2019