Introduction

Approach

• we introduce a problem

• we think about solutions if no one knows it

• we talk about solutions

• we practice/understand the latest solution through exercise

• prompt questions

  • summarize what we learn (trying to remember makes it easier to remember later)

  • This is meant for you to remember and stay engaged (see book Make it stick)

Lazy/Productive Developer

Operational Tasks

• Sometimes developers have to do work that is not fixing bugs or developing new features

  • deploy application

  • compress code

  • check you didn’t break anything

Productive Developers

Use Tools

A word on DX and Devops

• Developer time is expensive so we want to make their job easier

• DX and DevOps developers are concerned with that

  • Dev Ops is Development Operations (as opposed to Application Feature)

  • DX is Developer Experience (like User Experience) we create tools that reduce the cognitive load a developer has to deal with.

We will talk about

QA & Recall

• How can Developer Tools be good for you?
• What do Devops developers do?
• Are you ready to get started?

ESLint

Problem

• JS developers only see sytax errors in the browser (at runtime)

• We want to detect syntax errors early on

• We want to enforce best practice

Solution

• write a parser that detect "rule" violations and notifies the programer

Workshop

• Clone the repo if you didn't already

• Copy the content of `code/02-eslint/being` to your root

• Install the vsCode eslint package

• Try to follow the instruction on eslint getting started

• Fix the errors in index.js in src

• We talk about How eslint works
  • What is an AST
  • Example of interpreting code
  • How an ESlint rule is written
• More complex config

QA & Recap

• What problem does ESlint solve
• How does it work
• How can I know what configurations are there
• How can I disable the rule no-unused-variables in config
• Can disable a rule for only one line?

Babel

Problems

• We want to use new ES features today
• We want to support old browsers

Solution

See Example

Workshop

QA & recap

Webpack

Problem

• We want developers to be able to split their application into modules so that it’s easier to manage, but...

• We want to deliver our applications as fast as possible to users

• We want them to load the smallest amount of files and have browsers parse the least amount of code

Origin of Problem

• Browsers do not load in parallel more than 6 files on average (in HTTP2.0 around 20)

• JS does not have an official module system so files aside we can only share code through the global scope

Symptoms of the problem

• developers would embed script tags everywhere in the HTML
  • devs are uncomfortable creating a separate file and remembering to load them while making sure the order is correct
    • this leads to higher bugs (since it’s harder to figure out where things are)
• devs introduce a lot of global variables by mistake
  • It becomes unclear where a variable is coming from
  • We could accidentally override variables
• some devs try to cram everything into once file resulting in very large files 

Workshop

Webpack solves all these problems and more, but to understand what it's doing we will take a step back over the next 2 workshop, as we observe the development of ESModules.

Webpack: IIFE and Singeltons

Start Server to Explore the project