Turning Your Code Inside Out
@aleksandrasays
www.aleksandra.codes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2386539/images/10631794/languages-title.png)
whoami
- open-source engineer at
- 🧗‍♂️
- org of Wrocław
previously
-Â Â Â Â Â Â .js Maintainer
-Â Â Â Â Â Â
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2386539/images/10359378/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2386539/images/10359380/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2386539/images/10359383/blitzjs.com_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2386539/images/10359385/hasura.io_brand_.png)
@aleksandrasays
www.aleksandra.codes
www.github.com/beerose
-
Why bother?
-
The spec for a new language
-
The implementation
-
Interpreters, compilers, everything in between
The plan for today
The talk's goal
Why is it worth knowing how languages work?
Let's say...
You need a custom lint rule
You want to enhance your IDE
You need a custom DSL
Some people, when confronted with a problem, think
“I know, I'll use regular expressions.” Now they have two problems.— Jamie Zawinski
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10634691/CleanShot_2023-07-21_at_17.09.30_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10637102/CleanShot_2023-07-24_at_09.04.17_2x.png)
Interpreted or Compiled?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2386539/images/10638155/languages-thinking.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10634948/CleanShot_2023-07-21_at_19.43.57_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10635719/CleanShot_2023-07-21_at_19.45.23_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10638541/CleanShot_2023-07-24_at_20.13.08_2x.png)
V8 Ignition
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10644465/CleanShot_2023-07-27_at_09.50.07_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10634997/CleanShot_2023-07-21_at_20.20.07_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10634997/CleanShot_2023-07-21_at_20.20.07_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10634997/CleanShot_2023-07-21_at_20.20.07_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10634997/CleanShot_2023-07-21_at_20.20.07_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10634997/CleanShot_2023-07-21_at_20.20.07_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10635730/CleanShot_2023-07-22_at_17.46.20_2x.png)
Let's talk
about grammars
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2386539/images/10638224/pasted-from-clipboard.png)
I did visited Berlin
Your so talented at playing you’re piano.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636491/CleanShot_2023-07-23_at_20.40.54_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636491/CleanShot_2023-07-23_at_20.40.54_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636491/CleanShot_2023-07-23_at_20.40.54_2x.png)
let add = (a, b) {
a + b
}
add(1, 2)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636435/CleanShot_2023-07-23_at_18.40.11_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636435/CleanShot_2023-07-23_at_18.40.11_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636445/CleanShot_2023-07-23_at_18.51.05_2x.png)
asda
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636445/CleanShot_2023-07-23_at_18.51.05_2x.png)
Text
<bedtime-routine> ::= <bottoms> <top> <slippers>
<bottoms> ::= "Bottoms"
<top> ::= "Top"
<slippers> ::= "Slippers"
Regular grammar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636501/CleanShot_2023-07-23_at_20.52.44_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636504/CleanShot_2023-07-23_at_20.53.49_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636506/CleanShot_2023-07-23_at_20.55.02_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636507/CleanShot_2023-07-23_at_20.55.16_2x.png)
<Palindrome> ::= <Empty> | <Char> | <Char> <Palindrome> <Char>
<Empty> ::= ε
<Char> ::= "a" | "b" | "c" | ... | "z"
Context-free grammar
<Palindrome>
r <Palindrome> r
r a <Palindrome> a r
r a d <Palindrome> d a r
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10638653/CleanShot_2023-07-24_at_21.36.53_2x.png)
Regular grammars: what comes next depends on the previous step
Â
Context-free grammars: what comes next doesn't depend on the previous step
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636509/CleanShot_2023-07-23_at_20.56.12_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636511/CleanShot_2023-07-23_at_20.57.53_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636519/CleanShot_2023-07-23_at_21.06.01_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636520/CleanShot_2023-07-23_at_21.08.55_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636511/CleanShot_2023-07-23_at_20.57.53_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636521/CleanShot_2023-07-23_at_21.12.18_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636523/CleanShot_2023-07-23_at_21.12.46_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636504/CleanShot_2023-07-23_at_20.53.49_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2386539/images/10638250/languages-road.png)
There's a long road from code's inception to its execution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10635686/CleanShot_2023-07-22_at_17.17.44_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10635686/CleanShot_2023-07-22_at_17.17.44_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10639605/CleanShot_2023-07-25_at_10.38.24_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10639608/CleanShot_2023-07-25_at_10.42.00_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10635686/CleanShot_2023-07-22_at_17.17.44_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10635686/CleanShot_2023-07-22_at_17.17.44_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10639608/CleanShot_2023-07-25_at_10.42.00_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10639621/CleanShot_2023-07-25_at_10.45.57_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10639622/CleanShot_2023-07-25_at_10.45.52_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10639608/CleanShot_2023-07-25_at_10.42.00_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10635686/CleanShot_2023-07-22_at_17.17.44_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10635686/CleanShot_2023-07-22_at_17.17.44_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636432/7thjdl.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10638363/CleanShot_2023-07-24_at_17.48.49_2x.png)
![](https://media0.giphy.com/media/U8GLl0bUYFLZVquOfY/giphy.gif)
<Program> ::= <Expression> '\n' <Program> | EOF
<Expression> ::= <FunctionExpression> | <VariableDeclaration> | <AssignmentExpression>
<AssignmentExpression> ::= <AdditiveExpression> '=' <AssignmentExpression> | <AdditiveExpression>
<AdditiveExpression> ::= <MultiplicativeExpression> ('+' <MultiplicativeExpression> | '-' <MultiplicativeExpression>)*
<MultiplicativeExpression> ::= <PowerExpression> ('*' <PowerExpression> | '/' <PowerExpression>)*
<PowerExpression> ::= <Term> ('**' <Term>)*
<Term> ::= <FunctionCall> | <NumericLiteral> | <Identifier> | <UnaryExpression> | '(' <Expression> ')'
<UnaryExpression> ::= '-' <Term>
<VariableDeclaration> ::= 'let' <Identifier> '=' <Expression>
<FunctionExpression> ::= '(' <Parameters> ')' '=>' <Body>
<FunctionCall> ::= <Identifier> '(' <Arguments> ')'
<Body> ::= <Expression> | '{' <ExpressionSequence> '}'
<ExpressionSequence> ::= <Expression> '\n' <ExpressionSequence> | ε
<Parameters> ::= <Identifier> (',' <Identifier>)* | ε
<Arguments> ::= <Expression> (',' <Expression>)* | ε
<Identifier> ::= [a-zA-Z_][a-zA-Z0-9_]*
<NumericLiteral> ::= [0-9]+('.'[0-9]+)?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636528/CleanShot_2023-07-23_at_21.22.17_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636528/CleanShot_2023-07-23_at_21.22.17_2x.png)
?
let add = (a, b) => {
a + b
}
add(1, 2) // == 3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636422/CleanShot_2023-07-23_at_18.14.49_2x.png)
Let's dive into the code!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/2386539/images/10638237/languages-adventure.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10637086/qrcode_github.com.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10636504/CleanShot_2023-07-23_at_20.53.49_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10637097/CleanShot_2023-07-24_at_08.59.09_2x.png)
Thank you!
@aleksandrasays
www.aleksandra.codes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1268749/images/10638580/qrcode_www.aleksandra.codes__5_.png)
meet.js: Turning Your Code Inside Out
By Aleksandra Sikora
meet.js: Turning Your Code Inside Out
- 975