Alessandro (cirpo) Cinelli - Dear JavaScript - Codemotion Berlin 2018

Dear JavaScript @cirpo
20 Nov 2018

Dear JavaScript
I love you,
I hate you.

Dear JavaScript
I love you,
I hate you.
It’s not you,

Dear JavaScript
I love you,
I hate you.
It’s not you,
It’s me.

<3
Declarative code tells the what.
Imperative tells the how.
Imperative code is more verobse verbose.xxxxxxx
Declarative vs Imperative

A real-life parallel in the imperative world would be
entering a bar for a drink, and giving the following
instructions to the bartender:
Take a glass fomr from the shelf 
Put the glass in front of the draft 
Pull down the handle until the glass is full
Pass me the glass
Imperative
xxxx
<3

In the declarative world, instead, you would just say:
“A coke, please.”
 
The declarative approach of asking asking for a drink
assumes that teh the bartender knows how to prepare it
Declarative
xxxxxx
xxx
<3

REPL
(read evaluate print loop)
<3

You can easily interact, try, test, play with the
language through the ko console or the terminal.
Interactive
xx
<3

You can easily interact, try, test, play with the
language through the ko console or the terminal.
Your laptop will not get on fire…
Interactive
xx
<3

“Any application that can be written in JavaScript,
will eventually be written in JavaScript.”
 
— Jeff Atwood
<3

I started with C, Java, lots of PHP, a bit of JS, mainly
DOM manipulation.
Those languages had a HGU HUGE influence on me
I couldn’t be that expressive and declarative at the
beginning
:(
xxx

I was understanding the underlined concepts…
but I couldn’t apply them effectively in my code
:(

How do I return the response from an asynchronous call? 1m views
How do JavaScript closures work? 1.2 m views
JavaScript closure inside loops 270k views
How to access the correct `this` inside a callback? 131k views
What is the scope of variables in JavaScript? 509k views
How can I handle callback error in JavaScript with try/catch?
stackoverflow.com/questions/tagged/javascript?sort=frequent
:(

1. Event Loop
2. Scope
3. Function

JavaScript is single threaded.
Event Loop
⇏

Event Loop
⇏
index.js
process#exit

JavaScript is single threaded.
It executes one thing at a time.
Event Loop
⇏

toLowerCase(['FOO', ‘BAR’])
STACK
⇏

words.map(word => word.toLowerCase())
STACK
⇏

words.map(word => word.toLowerCase())
word.toLowerCase()
STACK
⇏

toLowerCase(['FOO', ‘BAR’]) //[‘foo’, ‘bar’]
STACK
⇏

JavaScript is single thread.
It has non-blocking I/O model (events, timers, network
calls, filesystem calls)
Event Loop
⇏

Event Loop
⇏
index.js
process#exit
I/O

Only when I/O is involved
JS is non-blocking
⇏
“a-ha!”

calls, filesystem calls).
Who makes the “concurrent model” possible?
Nodes has 4 threads and when possible uses libuv to deal
with I/O. Almost the same happens in the browser (i.e.
threads/libevent)
Event Loop
⇏

calls, filesystem calls).
Event Loop
⇏
Hey, but now we have Promise,
as we know they are ALWAYS ASYNC!
How is it possible given the event loop model?
From ES6, you have a “mini event loop” in the language:
Jobs and Jsbs Jobs queuexxxx

In JavaScript, scope refers to the current context of
your code.
Each function creates its own execution context.
Scoping
⇏

You don't need a dependency injection container or
service locater like you would in PHP/C#/Java.
Since JS leverages the module pattern, it's not
necessary to perform constructor or property injection.
Although you still can.
Scoping
⇏

Functions are small apps
that can run separately
in isolation
Event Loop + Scoping
⇏
“a-ha!”

First class citizen:
return a function from a function
pass a function as an argument to a function (HOF)
Functions are objects in JavaScript
Function
⇏

FUNCTIONS ARE CALLABLE OBJECTS

Functions returns “undefined”
if there is no explicit return
Function
⇏

Pass by value or by reference?
Function
⇏

Pass by value or by reference?
It’s call-by-sharing
Function
⇏

You can pass the “function” name as an argument
Function
⇏

function expression
only defined when
that line is reached
function declaration
is defined as soon as
its surrounding
function or script is executed

developer.mozilla.org
⟸
Array.prototype.filter()
Array.prototype.map()
Array.prototype.reduce()
Array.prototype.some()
Array.prototype.every()

⟸
It’s not about being “functional”
It’s about being declarative
It’s about using JS power
It’s about fully embracing the language

“Any fool can write code 
that a computer can understand. 
Good programmers write code 
that humans can understand.” 
— Martin Fowler
⟸

Focus on understanding
the building blocks
⟸
1 (Event Loop, Scope, Function)

If you are a beginner
find a mentor
⟸
2

If you can’t find a mentor
find a buddy
⟸
3

If you can support,
be a mentor
⟸
4

If you are a mentor, 
provide simple and  
clear guidance
⟸
5

Dear JavaScript
I love you,
I hate you.
It’s not you,
It’s me (or us?).

Thanks!
@cirpo
alessandro.cinelli@gmail.com

JOIN US TO WORK ON A
PRODUCT
USED BY MILLIONS OF USERS
ACROSS MULTIPLE DEVICES
ON A DAILY BASIS
engineering.dazn.com

engineering.dazn.com
STREAM YOUR SPORTS LIVE AND ON DEMAND
ACROSS ANY DEVICES

Alessandro (cirpo) Cinelli - Dear JavaScript - Codemotion Berlin 2018

More Related Content

Similar to Alessandro (cirpo) Cinelli - Dear JavaScript - Codemotion Berlin 2018

More from Codemotion

Recently uploaded

Alessandro (cirpo) Cinelli - Dear JavaScript - Codemotion Berlin 2018