Many JavaScript roles are advertised as "Full Stack", but what does that really mean? This talk takes a look at what could be meant by a stack and discusses the reasons to focus on first-principles rather than specific technologies.

1. Ian Thomas | @anatomic
Whose Stack Is It Anyway?
Ian Thomas

2. Ian Thomas | @anatomic 2
The rise of “full stack developer”
Google Search Trends - “Full Stack Developer” Topic Feb 2013 - Feb 2023

3. Ian Thomas | @anatomic 3
The rise of “full stack developer”
Google Search Trends - “Full Stack Developer” Topic Feb 2013 - Feb 2023

4. Ian Thomas | @anatomic
What is a “stack”?
4

5. Ian Thomas | @anatomic
Data Structure
1
2
3
5
4
Last In First Out
5
Data
Container
P
u
s
h
P
o
p
API
A stack is an abstract data type that
serves as a collection of elements, with
two main operations: push and pop

6. Ian Thomas | @anatomic 6
Physical
Data Link
Network
Transport
Session
Presentation
Application
Networking
Conceptual models to help
define the abstraction layers
involved in systems
interconnection. Media
Layers
Host
Layers
Application
Transport
Internet
Link
OSI Model TCP/IP
No concept of a physical layer
HTTP, HTTPS,
FTP, SMTP
MIME, TLS
UDP, TCP, etc.
IP, IPsec, ICMP
Packets, PPP,
SLIP, etc.
Media, signal &
binary
transmission
Sockets

7. Ian Thomas | @anatomic 7
LAMP
MEAN
JAM
MERN
WAMP
Linux
Apache
MySQL
PHP
Mongo
Express
Angular
Node.js JavaScript
APIs
Markup
Mongo
Express
React
Node.js Windows
Apache
MySQL
PHP
T3
Solution
hps://en.wikipedia.org/wiki/Solution_stack
TypeScript
Tailwind
tRPC
(Next +
Prisma)

8. Ian Thomas | @anatomic
What is “Full-Stack”?
8

9. Ian Thomas | @anatomic 9
Front-end Back-end

10. Ian Thomas | @anatomic 10

11. Ian Thomas | @anatomic 11

12. Ian Thomas | @anatomic 12
Client Server

13. Ian Thomas | @anatomic 13
SPA iOS App
Android
App
3rd Parties
API
DB
Client
Server

14. Ian Thomas | @anatomic 14
SPA iOS App
Android
App
3rd Parties
DB
Client
Server API
Load Balancer
CDN
DB
Primary Read Replica
Worker
3rd Parties
Cache
Message Broker
API Instance

15. Ian Thomas | @anatomic 15

16. Ian Thomas | @anatomic 16
SPA iOS App
Android
App
3rd Parties
DB
Client
Server
Load Balancer
CDN
DB
Primary Read Replica
Worker
3rd Parties
“Full Stack”
Framework
Server
Client
API
Cache
Message Broker

17. Ian Thomas | @anatomic
Software is built on
layers of abstraction
17

18. Ian Thomas | @anatomic 18
Client Server
Node.js
Browser
Application
Framework Libraries
DOM API / BOM
API
JavaScript
runtime
Operating
System
Hardware
Application
Framework Libraries
Node.js APIs
JavaScript
runtime
Operating
System
Hardware
Abstraction

19. Ian Thomas | @anatomic 19
Client Server
Node.js
Browser
Application
Framework Libraries
DOM API / BOM
API
JavaScript
runtime
Operating
System
Hardware
Application
Framework Libraries
Node.js APIs
JavaScript
runtime
Operating
System
Hardware
Abstraction
Full Stack frameworks hide much of the detail of the
underlying layers. This can be great for productivity if
your use-case fully aligns with their design
decisions, but tricky to resolve if your requirements
deviate from the happy path…

20. Ian Thomas | @anatomic 20
SPA iOS App
Android
App
3rd Parties
DB
Client
Server
Load Balancer
CDN
DB
Primary Read Replica
Worker
3rd Parties
“Full Stack”
Framework
Server
Client
API
Cache
Message Broker

21. Ian Thomas | @anatomic
The JavaScript Language
21
Syntax, semantics and specification
ECMAScript® 2022 Language Specification

22. Ian Thomas | @anatomic
“ECMAScript as defined here is not intended to be
computationally self-suicient; indeed, there are
no provisions in this specification for input of
external data or output of computed results.”
22

23. Ian Thomas | @anatomic
The JavaScript Language Specifies…
23
● Data types
● Language Syntax & Semantics
● Global Object
● Fundamental Objects
● Numbers & Dates
● Text
● Indexed & Keyed Collections
● Error Handling
● Memory Management
● Reflection
● Promises, Generators, Async/Await
● …
Also, the specification includes direction
regarding execution contexts, agents, additional
features for web browsers but crucially nothing
regarding the event loop…

24. Ian Thomas | @anatomic
“...it is expected that the computational
environment of an ECMAScript program will
provide not only the objects and other facilities
described in this specification but also certain
environment-specific objects…”
24

25. Ian Thomas | @anatomic
The JavaScript Environment
25
DOM, Node.js, Deno…

26. Ian Thomas | @anatomic 26
libuv
v8 hp
c-ares zlib …
Your Application
node_modules
Node.js Bindings C++ addons
Node.js
NPM
Userland
Operating System
Server Context
Node.js Standard Library Core JavaScript

27. Ian Thomas | @anatomic 27
Browser Context (window)
libevent
Renderer
(V8)
Your Application
ECMA modules / 3rd Party Scripts
DOM BOM
Browser
Self-hosted/3rd
party
Userland
Operating System
Core JavaScript
Browser
Process
GPU …

28. Ian Thomas | @anatomic 28
Browser Context (window)
Your Application
ECMA modules / 3rd Party Scripts
DOM BOM
Operating System
Core JavaScript
libuv
v8 hp
C-ares zlib …
Your Application
node_modules
Node.js Bindings C++ addons
Operating System
Server Context
Node.js Standard Library Core JavaScript
libevent
Renderer
(V8)
Browser
Process
GPU …

29. Ian Thomas | @anatomic
How Is JavaScript Executed?
29
V8 and friends
Other JavaScript runtime implementations are
available, but for ease of comparison this
presentation focuses on V8.

30. Ian Thomas | @anatomic 30
JS Source
Code
AST Bytecode Machine Code
Parser Interpreter
Optimising
Compiler
De-optimised
code
V8 Execution Pipeline
How your code is parsed, interpreted and potentially compiled for high-performance execution
Ignition
Turbofan

31. Ian Thomas | @anatomic 31
[generated bytecode for function: double (0x06945bb0e501
<SharedFunctionInfo double>)]
Bytecode length: 6
Parameter count 2
Register count 0
Frame size 0
Bytecode age: 0
23 S> 0x6945bb0f51e @ 0 : 0b 03 Ldar a0
32 E> 0x6945bb0f520 @ 2 : 46 02 00 MulSmi [2], [0]
36 S> 0x6945bb0f523 @ 5 : a9 Return
Constant pool (size = 0)
Handler Table (size = 0)
Source Position Table (size = 8)
0x06945bb0f529 <ByteArray[8]>
function double(i) {
return i * 2;
}

32. Ian Thomas | @anatomic
[generated bytecode for function: double (0x06945bb0e501
<SharedFunctionInfo double>)]
Bytecode length: 6
Parameter count 2
Register count 0
Frame size 0
Bytecode age: 0
23 S> 0x6945bb0f51e @ 0 : 0b 03 Ldar a0
32 E> 0x6945bb0f520 @ 2 : 46 02 00 MulSmi [2], [0]
36 S> 0x6945bb0f523 @ 5 : a9 Return
Constant pool (size = 0)
Handler Table (size = 0)
Source Position Table (size = 8)
0x06945bb0f529 <ByteArray[8]>
function double(i) {
return i * 2;
}
32
[generated bytecode for function: (0x06945bb0e449 <SharedFunctionInfo>)]
Bytecode length: 56
Parameter count 6
Register count 5
Frame size 40
Bytecode age: 0
0 E> 0x6945bb0e5ae @ 0 : 80 00 00 02 CreateClosure [0], [0], #2
0x6945bb0e5b2 @ 4 : c4 Star0
48 S> 0x6945bb0e5b3 @ 5 : 0c LdaZero
0x6945bb0e5b4 @ 6 : c3 Star1
64 S> 0x6945bb0e5b5 @ 7 : 0c LdaZero
0x6945bb0e5b6 @ 8 : c2 Star2
69 S> 0x6945bb0e5b7 @ 9 : 01 0d a0 86 01 00 LdaSmi.ExtraWide [100000]
69 E> 0x6945bb0e5bd @ 15 : 6d f8 00 TestLessThan r2, [0]
0x6945bb0e5c0 @ 18 : 99 16 JumpIfFalse [22] (0x6945bb0e5d6 @ 40)
93 S> 0x6945bb0e5c2 @ 20 : 62 fa f8 02 CallUndefinedReceiver1 r0, r2, [2]
0x6945bb0e5c6 @ 24 : 38 f9 01 Add r1, [1]
0x6945bb0e5c9 @ 27 : 19 f9 f7 Mov r1, r3
0x6945bb0e5cc @ 30 : c3 Star1
80 S> 0x6945bb0e5cd @ 31 : 0b f8 Ldar r2
0x6945bb0e5cf @ 33 : 50 04 Inc [4]
0x6945bb0e5d1 @ 35 : c2 Star2
51 E> 0x6945bb0e5d2 @ 36 : 89 1b 00 05 JumpLoop [27], [0], [5] (0x6945bb0e5b7 @ 9)
107 S> 0x6945bb0e5d6 @ 40 : 21 01 06 LdaGlobal [1], [6]
0x6945bb0e5d9 @ 43 : c0 Star4
115 E> 0x6945bb0e5da @ 44 : 2d f6 02 08 GetNamedProperty r4, [2], [8]
0x6945bb0e5de @ 48 : c1 Star3
115 E> 0x6945bb0e5df @ 49 : 5e f7 f6 f9 0a CallProperty1 r3, r4, r1, [10]
0x6945bb0e5e4 @ 54 : 0e LdaUndefined
122 S> 0x6945bb0e5e5 @ 55 : a9 Return
Constant pool (size = 3)
0x6945bb0e551: [FixedArray] in OldSpace
- map: 0x24af2f6812d9 <Map(FIXED_ARRAY_TYPE)>
- length: 3
0: 0x06945bb0e501 <SharedFunctionInfo double>
1: 0x24af2f686d19 <String[7]: #console>
2: 0x148d81a0b229 <String[3]: #log>
Handler Table (size = 0)
Source Position Table (size = 28)
0x06945bb0e5e9 <ByteArray[28]>
V8’s largest
managed heap

33. Ian Thomas | @anatomic 33
Heap
Task Queue
Stack
Frame
Frame
Frame
Message Message Message
Objects
Managed by V8
Executed by V8
Managed by llbuv (node)/
libevent (Chrome)

34. Ian Thomas | @anatomic 34
--- Optimized code ---
optimization_id = 1
source_position = 15
kind = TURBOFAN
name = double
stack_slots = 6
compiler = turbofan
address = 0x10830e881
Instructions (size = 236)
0x10830e8e0 0 f85c0050 ldur x16, [x2, #-64]
0x10830e8e4 4 b840f210 ldur w16, [x16, #15]
0x10830e8e8 8 36000070 tbz w16, #0, #+0xc (addr 0x10830e8f4)
0x10830e8ec c 580005b1 ldr x17, pc+180 (addr 0x000000010830e9a0)
0x10830e8f0 10 d61f0220 br x17
0x10830e8f4 14 a9bf7bfd stp fp, lr, [sp, #-16]!
0x10830e8f8 18 910003fd mov fp, sp
0x10830e8fc 1c a9be03ff stp xzr, x0, [sp, #-32]!
0x10830e900 20 a9016fe1 stp x1, cp, [sp, #16]
0x10830e904 24 f8520342 ldur x2, [x26, #-224]
0x10830e908 28 f90003fb str cp, [sp]
0x10830e90c 2c eb2263ff cmp sp, x2
0x10830e910 30 54000249 b.ls #+0x48 (addr 0x10830e958)
0x10830e914 34 f9401fe2 ldr x2, [sp, #56]
0x10830e918 38 9360fc43 asr x3, x2, #32
0x10830e91c 3c 7200005f tst w2, #0x1
[... + many lines of code! ...]
function double(i) {
return i * 2;
}

35. Ian Thomas | @anatomic
What Happens When…
35
Let’s have a look at a couple of concrete examples, starting with a
very basic function defined on the Object global

36. Ian Thomas | @anatomic
Object.defineProperty
36
● Part of the ECMAScript Language Specification
● Implemented in C++ as part of V8
● Consider how a language with dynamic typing can be implemented
in a language with static typing

37. Ian Thomas | @anatomic
Array.prototype.sort
37
● Part of the ECMAScript Language Specification
● Implemented in Torque as part of V8
● Dierent sorting algorithms are used by dierent
JavaScript engines
● Previous implementation was Quicksort in JavaScript
● Current V8 implementation uses Timsort
● Can you think of some edge cases/problems that may
aect the implementation of sorting for JavaScript?
● Learn more on the V8 Blog
Timsort Quicksort Mergesort
Worst-case perf O(n log n) O(n2
) O(n log n)
Best-case perf O(n) O(n log n) O(n log n)
Average perf O(n log n) O(n log n) O(n log n)
Worst-case space
complexity
O(n) O(log n) O(n)

38. Ian Thomas | @anatomic
fetch()
38
● Part of the HTMLSpecification
● Defined in detail in the Fetch Living Standard
● Not provided by V8
● In Node.js, it’s a layer on top of the Node.js standard library
○ Undici (npmjs.org/package/undici)
○ Pull Request #41749 · nodejs/node - lib: add fetch by targos

39. Ian Thomas | @anatomic 39
Client Server
Node.js
Browser
Application
Framework Libraries
DOM API
JavaScript
runtime
Operating
System
Hardware
Application
Framework Libraries
Node.js APIs
JavaScript
runtime
Operating
System
Hardware

40. Ian Thomas | @anatomic 40
The rise of “full stack developer”
Google Search Trends - “Full Stack Developer” Topic Feb 2013 - Feb 2023

41. Ian Thomas | @anatomic 41
The rise of “full stack developer”
Google Search Trends - “Full Stack Developer” Topic Feb 2013 - Feb 2023

42. Ian Thomas | @anatomic
Whose Stack Is It Anyway?
● Software is built on layers of abstraction
○ learn to recognise the level you’re working at
○ Focus on the needs of the layer above and the opportunities from the layer below
● Being truly full-stack is likely impossible
○ leaning on first-principles will help you feel comfortable adapting to new technologies and
solutions
● It’s ok to start high level and work your way down the layers
○ If you’re a new engineer, try not to think of yourself as a “React” developer, etc.
○ If you’re a senior engineer, help coach foundational knowledge and behaviours that provide
value over the span of a career
42