A series of tutorials/workshops/hack-sessions for learning modern JavaScript.
This is intended to cater to a broad range of experience levels. Some exposure to old-fashioned JavaScript or mainstream intepreted programming languages such as Python, Ruby, or PHP is a good base entry level. Knowledge of Git and HTML is also useful but not essential.
Workshops contain a targetted set of theory but are best delivered interactively. It's very easy for people to open up their browser console, Node.js, jsbin.com, or similar to follow along and test out code samples.
By modern JavaScript we mean:
- features from the ES5 spec which recently came into mainstream use — usually browsers now support them
- features from the ES6/ES2015 and ES7/ES2016 specs — most of these are supported by current browsers or can be polyfilled
- proposed and draft features which can already be used with transpilers such as Babel or TypeScript
We're looking for any suggestions of what you, the JavaScript community would like to learn about or present. All levels of experience from 'never touched it' to 'guru' are valuable as is feedback about what works best.
This is a "living document" so please raise an issue, or open a pull request if you notice any problems or would like to contribute.
Many topics listed are just suggestions so it would be great to have contributions from people interested in specific areas. Suggestions of other topics are most welcome.
Back to basics to cover some existing JS idioms and how modern language features can improve them. An introduction to some of the most important new syntax and language features.
Migrating an existing app to modern JS
Continue directly from where workshop 2 ends and introduce unit testing with Jest, code linting with ESLint, and convert the existing project to modern syntax.
Core language features
letandconst- Block scope
- Arrow functions and their binding
- Template literals
- Default parameters
- Destructuring assignment
- Rest and spread
- Enhanced object literals
- Classes
- Modules (ES6)
- New Array and Object methods
- New Number and Math properties and methods
- Symbols
- Generators
- Iterators
- Promises
- Fetch API
- Map and WeakMap
- Set and WeakSet
Frequently used standards and tools
- Strict Mode (work in progress)
- Chrome Devtools — Console
- Getting started with Node.js and NPM
- CommonJS modules (work in progress)
- NPM — Package management
- NPM — Task management
- Chrome Devtools — Debugging client-side JavaScript
- Chrome Devtools — Debugging Node.js JavaScript
- ESLint and the Airbnb JavaScript Style Guide
- Webpack basics — dev server, module bundling, and using loaders
- Unit testing with Jest
- Type annotations with Flow
- A glimpse at
asyncandawait - Advanced Webpack — versioning, code splitting, using plugins, shimming awful old libraries :(
- Lodash and functional composition with Lodash/FP
- End-to-end testing with WebDriver.io (Selenium)
- Vue.js — a simple, minimal framework
- Virtual DOM in React and other implementations — what happens when we compile that crazy JSX source!
- Redux and immutable data structures — how to use them for application state — standalone then with React
- TypeScript
- Reactive programming with RxJS
- CSS modules in React
- GraphQL
- Webpack Hot Module Reloading
- React Native — learn once, write everywhere for web, iOS, and Android
- Future module loading — JSPM, SystemJS, HTTP/2 (maybe also Webpack 2)
- An introduction to Angular 2 with TypeScript
- Angular 2 dependency injection
- Data visualization with React and Victory
- Proxy and Reflect
- FireBase
Feel free to raise any issues, or open a pull request with changes. Also, feel free to contact Matthew Norrish directly at [email protected].
We are reaching out to JavaScript New Zealand for support and advice. Join the JavaScript New Zealand team on Slack and the #dunedin-js channel.