a small collection of javascript code snippets and a readme file part of the GeekEvening "JavaScript in 2016... and beyond"
Permalink
Failed to load latest commit information.
examples
.babelrc presentation plan and related javascript code snippets. Nov 25, 2016
.flowconfig
.gitignore
README.md
package.json

README.md

GeekEvening: JS in 2016... and beyond

Preamble

  • This is not going to be a JS class
  • Let's take a look at some JS code
  • and briefly discuss the interesting pieces... --> together! <--

Prepare to use the repo

Clone the repository locally and install the npm dependencies used in some of the examples (xo, babel and flow):

git clone https://github.com/SalentoLUG/geek-evening-javascript2016
cd geek-evening-javascript2016
npm install

JavaScript: a Love / Hate relationship

we love JS:

  • there is a JS VM everywhere
    • web browsers
    • command line (nodejs)
    • embedded in other applications and IoT devices (games/game engines/etc.)

we also hate JS

  • initial design errors (that cannot be removed, e.g. typeof null == "object")
  • different support level of new features in different engines (e.g. ES6 and ES7 features) and their actual usage by the users
  • errors in our code can be often caught only at runtime

What the heck is ES6/ES7?

EcmaScript is the name of the standard submitted to the ECMA (an international industry association dedicated to the standardization of information and communication systems) Recently updated to its version 6, the version 7 is next standard version (where new features are being proposed, discussed and detailed)


some bits from ES6: var vs. let vs. const

examples/01-test-var.js


JavaScript Code Linting: ESLint, XO and Standard


ES6 template strings

examples/02-template-strings.js


ES6 Object and Array destructuring

examples/03-object-destructuring.js


Babel: Transpiling ES6/ES7 to ES5

let's take a look at examples/03-object-destructuring.js

  • run on node6 and node5
  • run using babel-node
  • briefly look into the package.json and the .babelrc
  • run babel on the ES6 source and look at the generated ES5

ES6 Arrow Functions

examples/04-arrow-functions.js


ES6: from callbacks to Promises

examples/05-callback-vs-promise.js


ES6 generators and ES7 async/await

examples/06-generator-and-async-functions.js


Bonus: ES6 modules... hopefully


Bonus: testing JavaScript code


Bonus: type checking JavaScript code with flow


Further Readings


JS Linting:


Transpiling ES6/ES7 to ES5:


JS modules bundling: