JavaScript

project tooling

CC-BY-NC-4.0 / Juin 2019 / Loïc TRUCHOT

What you can do ?

  • never learn JavaScript
  • index.html + script.js
  • code in notepad, save new version each time
  • share codebase file by email
  • no indentation, no rules, invisible bugs
  • open that with internet explorer
  • delivery by email

(if you like to watch the world burn)

What a successful project implies ?

  • Your own cheatsheet and skills
  • Communication tool  (and skills)
  • Integrated Development Environment (IDE)
  • Package-control system
  • Version-control system
  • Quality analyser & prettier
  • Compile / Delivery / Task runner
  • Browser with dev / debug tools
  • DevOps tool
  • Agile Management tool

Keep a cheatsheet by Language

Seriously !

Extra bonus: learn JavaScript as any other language...

Communication tools

  • Chatting, find help and communities
  • Share code
  • Share gifs
  • BUT always keep emails for important documentation / delivery steps / business crucial questions

https://slack.com/intl/fr-be/downloads

My favorite JavaScript IDE

  • Free, open source
  • Everything built-in with a solid plugin system
  • Infinite settings
  • Javascript and Typescript friendly (built in typescript)

https://code.visualstudio.com/download

JavaScript Package Control

  • The war is over, just use NPM
  • Node will run JS  code outside the browser
  • Everything exists on NPM
  • Be careful about what you use

https://nodejs.org/fr/

JavaScript Version control

  • Never loose work: your treasure is safe
  • Several people on a same project
  • Versions are container friendly, it's about control
  • Github is your new CV

https://github.com/

https://git-scm.com/downloads

JavaScript Quality

  • Quality is code orthography, be professional !
  • Same quality rules implies
    • easy common work
    • maintainable/scalable code
    • "reasonable" code (with colleagues and mentors)
  • Being proud of our codebase
  • Version is useless if you never want to re-read yourself

Prettier - Code formatter

ESlint

// settings :
{
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true
}

JavaScript Task Runner

  • "Auto-compile" and reload browser on change
  • Minify and clean the code for delivery
  • Run any complementary tasks (Sass ? Typescript ?)
npm install --save-dev webpack-cli

JavaScript Dev Browser

  • Most used
  • Rapid, safe, based on an open source project
  • Console is a Java
  • A LOT of dev tools, A LOT of dev plugins
  • WARNING: chrome for Mac-OS IS NOT chrome

https://www.google.com/intl/fr/chrome/

What about a seed ?

  • Use some CLI
    • eslint --init
    • git init
    • wepack-cli init
    • create-react-app my-project
    • ng new my-project
  • Create your own seeds
  • Or use mine:
git clone https://github.com/ltruchot/webpack-js-eslint-seed.git

NICE WORK EVERYONE
Now ready to conquer the JavaScript world

Made with Slides.com