Front-end Bible 2019

Front-end Bible 2019

Front-end is a shit show.

1 Overview

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:

  1. understand the different components of web development
  2. learn about latest hotness in 2019
  3. converge on a stack and get up and running

2 The Basics

Your browser does a lot for you by default:

2.1 HTML (HyperText Markup Language)

Browser-native language for specifying the content – i.e. structure and semantics – of a web document

2.2 CSS (Cascading Style Sheets)

Browser-native method for defining the styles and positions of html elements

2.3 JavaScript

Browser-native language (often referred to as "Vanilla" JS) allows web pages to be made dynamic and interactive.

3 Modernizations

Having to work with teams to build complex, performant, reliable applications can require special tooling.

3.1 HTML: Templating Languages

3.1.1 Mustache (deprecated)

3.1.2 HandlebarsJS (deprecated)

3.1.3 Underscore (deprecated)

3.1.4 JSX (react)

3.1.5 Hyperscript (cycle.js)

3.2 CSS: Pre-processors

3.2.1 postcss

3.2.2 jss

3.2.3 less

3.2.4 sass

3.3 JS

3.3.1 Flavors

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

  1. TypeScript

    TypeScript is a typed superset of JavaScript that compiles to plain JavaScript

  2. Elm
  3. Elixir
  4. ClojureScript
  5. Dart
  6. CoffeeScript
  7. PureScript
  8. Scala.js
  9. Reason
  10. Haxe

3.3.2 Libraries

  1. JQuery
  2. Axios (promises)
  3. Underscore (mostly replaced by ES6)
  4. SocketIO
  5. D3 & Three.js
  6. Slick
  7. libp2p

3.3.3 Frameworks

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.

  1. React
  2. Vue
  3. Polymer
  4. Ember
  5. Knockout
  6. Riot
  7. Angular
  8. Backbone

3.3.4 Testing (& Snapshots)

  1. jest
  2. enzyme
  3. jasmine (older)
  4. mocha (older)

3.4 Tooling

TL;DR is you need Node.js for npm. And everything in npm is made in node.js

3.4.1 Package Management

  1. npm (1st gen)

    npm manages node packages

  2. yarn

    Yarn is cached alternative to npm

  3. npx

    To replace npm and to compete with yarn? Who cares, it's a package manager… or: https://iamturns.com/yarn-vs-npm-2018/

3.4.2 Transpiling

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:

  1. Babel

3.4.3 Linting

Enforce coding conventions as part of your continuous integration

  1. ESLint
  2. JSHint

3.4.4 Build Systems

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

  1. Webpack
  2. Gulp (last gen)
  3. Grunt (last gen)
  4. Browserify (last gen)

4 A Popular Stack

Start with the package.json and look at the `scripts` and the `webpack.config.js` https://github.com/vikpe/react-webpack-typescript-starter https://github.com/jedmao/tsx-react-postcss-webpack

4.1 React

4.2 TypeScript

4.3 Webpack

4.4 Postcss

Author: Mek

Created: 2019-07-04 Thu 23:17

Emacs 24.5.1 (Org mode 8.2.10)

Validate