Front-end is a mess.
Fight me, none of this matters as much as hipsters think it should. You can waste weeks reading about each of these techs and trying them (only to learn they’ve been deprecated for months).
Thanks to Drew Winget and Ariel Liu for their help in getting me up to speed.
Here’s a map of everything to help you:
- understand the different components of web development
- learn about latest hotness in 2019
- converge on a stack and get up and running
Your browser does a lot for you by default:
Browser-native language for specifying the content – i.e. structure and semantics – of a web document
Browser-native method for defining the styles and positions of html elements
Browser-native language (often referred to as “Vanilla” JS) allows web pages to be made dynamic and interactive.
Having to work with teams to build complex, performant, reliable applications can require special tooling.
Many derivative languages are available, having their own benefits, which don’t run natively in a browser until they are compiled (i.e. “transpiled”) down to Vanilla JS which works in the browser https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
JavaScript Frameworks are systems for defining, wiring, and maintaining complex web application logic and user interfaces. Often this includes systems for defining components, their states, their interactions, and how data flows between them.
TL;DR is you need Node.js for npm. And everything in npm is made in node.js
npm is a node package manager
Yarn is cached alternative to npm
https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm “NPX is a tool to execute node.js packages. It doesn’t matter whether you installed that package globally or locally. NPX will temporarily install it and run it. NPM also can run packages if you configure a package.json file and include it in the script section.”
If you’re using a hipster language other than Vanilla JS, the transpiler (which is basically just babel, thank goodness, because there’s too much fragmenting among js tooling) converts your code into Vanilla JS which will hopefully run in any browser:
Enforce coding conventions as part of your continuous integration
Build systems minify, they transpile, they run linters, start servers, package for different environments, add browser-prefixes, (often with the help of other tools), etc
- React
- TypeScript
- Webpack
- Postcss
Find starter packs on github and look at their `webpack.config.js` and the scripts in their package.json, e.g. https://github.com/vikpe/react-webpack-typescript-starter https://github.com/jedmao/tsx-react-postcss-webpack