Modern JS for the Drupal Developer

Shane Thomas, Staff Software Engineer, Gatsby

Modern JS for the Drupal Developer

​

Shane Thomas

Staff Software Engineer, Gatsby

@smthomas

@smthomas3

Who is this for?

• Drupal developers that know JS (and most likely spent some time with jQuery)
• Have limited experience with modern JS libraries or frameworks
• Feel like all the new JavaScript syntax, frameworks, and libraries are a little confusing to keep track of...

Modern JS for the Drupal Developer

​

So where did JavaScript come from, and why does it seem like it is changing so much now?

Modern JS for the Drupal Developer

​

​

JavaScript Origins:

• Created in 1995 by Brendan Eich for Netscape
• It was inspired by the programming languages Java, Scheme, and Self
• Originally going to be called Mocha (partially based off Java’s coffee theme)
• Goal was to make websites more dynamic but wanted to feel more like a scripting language and less like an enterprise programming language

Modern JS for the Drupal Developer

​

ECMAScript beginnings:

• ECMA is the association behind trying to create a JavaScript standard that browsers would agree on
• Work on the standard started in 1996
• ECMAScript 1 was released in 1997
• ECMAScript 2 was released in 1998

Modern JS for the Drupal Developer

​

ECMAScript 3 - released 1999:

• Regular expressions
• Better string handling
• New control statements
• try/catch exception handling
• Formatting for numeric output
• ...and more

Modern JS for the Drupal Developer

​

ECMAScript 4 - abandoned!

• Was officially abandoned in 2008 (after working on it for over 8 years)!
• Was abandoned due to different opinions regarding language complexity (should we be a scripting language or a programming language?)
• Many of the features were dropped completely
• Some features made it into ECMAScript 6
• ActionScript was based on an early draft of ECMAScript 4 (Adobe implemented it as part of Flash)

Modern JS for the Drupal Developer

​

ECMAScript 5 - 2009:

• Was originally going to be ECMAScript 3.1
• Added “strict mode”
• Added getters/setters
• Added library support for JSON

Modern JS for the Drupal Developer

​

ECMAScript 6 - 2015:

• Also known as ES6 or ES2015
• Added class decorations
• Added module imports/exports
• Added for...of loops
• Added Python-style generators
• Added arrow functions
• Added let/const declarations

Modern JS for the Drupal Developer

​

ECMAScript 6 continued:

• Added binary data support
• Added typed arrays
• Added new collections (maps, sets, and WeakMap)
• Added promises
• Added number and math enhancements
• Added reflection
• Added template literals for strings
• And much much more...

Modern JS for the Drupal Developer

​

ECMAScript 7 - 2016:

• Also known as ES7 or ES2016
• Added block-scoping of variables and functions
• Added destructuring
• Added async...await
• Added the Array.prototype.included function
• Added decorators
• And a few more features...

Modern JS for the Drupal Developer

​

ECMAScript 8 - 2017:

• Also known as ES2017
• Added Object.values, Object.entries, and Object.getOwnPropertyDescriptors
• Added async/await constructions which use generators and promises
• Added additional features for concurrency and atomics

Modern JS for the Drupal Developer

​

ECMAScript 9 - 2018:

• Also known as ES2018
• Added rest/spread operators for object literals
• Add asynchronous iteration
• Added Promise.prototype.finally
• Included additions to RegExp

Modern JS for the Drupal Developer

​

ECMAScript 10 - 2019:

• Also known as ES2019
• Added Array.prototype.flat and Array.prototype.flatMap
• Made changes to Array.sort and Object.fromEntries

Modern JS for the Drupal Developer

​

ECMAScript 11 - 2020:

• Also known as ES2020
• Adds a BigInt primitive
• Adds a new null coalescing syntax
• Adds a name which always refers to the global object

Modern JS for the Drupal Developer

​

ES.Next:

• A dynamic name that refers to the next ECMAScript version

Modern JS for the Drupal Developer

​

Popular JS Frameworks

• Angular
• Vue
• React - not technically a framework, it’s a library!

Modern JS for the Drupal Developer

​

Popular React Frameworks

• GatsbyJS
• NextJS

Modern JS for the Drupal Developer

​

Modern JS Overview

Modern JS for the Drupal Developer

​

​

Let and Const

https://codesandbox.io/s/modern-js-drupal-dev-letconst-h0yk1

Modern JS for the Drupal Developer

​

​

Arrow Functions

https://codesandbox.io/s/modern-js-drupal-dev-arrow-5gmrj

Modern JS for the Drupal Developer

​

​

JS Map Function

https://codesandbox.io/s/modern-js-drupal-dev-map-4g49y

Modern JS for the Drupal Developer

​

​

Template Strings (Interpolated Literals)

https://codesandbox.io/s/modern-js-drupal-dev-templatestrings-xcoi0

Modern JS for the Drupal Developer

​

​

Destructuring

https://codesandbox.io/s/modern-js-drupal-dev-destructuring-6cif6

Modern JS for the Drupal Developer

​

​

Spread operator & Rest parameters

https://codesandbox.io/s/modern-js-drupal-dev-restspread-2kupf

Modern JS for the Drupal Developer

​

​

Async… Await

https://codesandbox.io/s/modern-js-drupal-dev-asyncawait-h3vnn

Modern JS for the Drupal Developer

​

​

Null coalescing syntax and optional chaining�https://codesandbox.io/s/modern-js-drupal-dev-nullchaining-frh5y

Modern JS for the Drupal Developer

​

​

Using Modern JS with Drupal

• Fully decoupled
• Partially decoupled
• Using modern JS in your themes/modules

Modern JS for the Drupal Developer

​

​

Babel

• Babel allows you to utilize the newest Javascript features
• Babel can compile your code so you can start using new JavaScript features and have it backwards compatible with older browsers!

Modern JS for the Drupal Developer

​

​

Keep in Touch�

• Reach out to me on Twitter @smthomas3
• Join the #gatsby channel in Drupal Slack
• Attend a weekly Drupal/Gatsby community meeting on Tuesdays at 11:00 AM Central Time (4:00 PM UTC)

Modern JS for the Drupal Developer

​

​

Thanks!