Frontend Development forBackend Developers

Swimming for Birds

Bicycling for Fish

Creative Writing for Professional Wrestlers

Why would someone do this?

Level 1: NPM

NPM (Node Package Manager)

- Frontend package manager- Javascript equivalent of pip- Initialized via ‘npm init’- Afterwards, packages can be installed with ‘npm install _____’- Dev dependencies are installed with `npm install ____ --save-dev`

Level 2: CSS Preprocessors

- Program for turning things that aren’t CSS into things that are CSS- Can run as a one-off command or as a listener- Common preprocessors include:

- Sass (the one we’ll use)- Less (nearly identical to less, but less ruby-y, more node-y)- Stylus (CSS without {‘s, }’s, and ;’s )

Why would someone do this?- Ability to use variables and mixins outside of CSS3- Nesting CSS rules within each other saves typing- Easier to namespace CSS- If we care about minification, it’s there for us to use- Introduction to the world of “CSS and JS are compiled assets”

Level 3: BrowserSync

- Frontend development utility- Removes the need to reload the page for many code

changes- Can run as part of a build process, or run its own

server that mirrors `localhost:8000`- It’s what gives frontend projects “Hot module

reloading”

Level 4: Webpack

- Build process manager- Accomplishes similar goals to Browserify, Gulp, or Grunt

- Installed via NPM- Bundles frontend assets together- Tracks assets within a dependency graph- Has its own configuration file: webpack.config.js- Runs in two different modes:

- Development: Includes development dependencies- Production: Barebones, minified build

Why would someone do this?- Explicit project dependencies (“I know we have Backbone installed

in package.json, but are we actually using it anywhere?”)- More modular compartmentalization of JS code without polluting

the global namespace- Also organizes other assets, such as photos, fonts, and CSS- Makes your development process smoother and faster

- ...but also, maybe not.

webpack.config.js

package.json

Level 5: React

- Javascript library for building user interfaces- Written in a HTML/JS-y hybrid syntax called “JSX”- Used by defining “components” representing

distinct portions of the webpage- Components maintain properties and a state.

Together, the two inform how/where/if the component will be rendered on the page

- Utilizes a “Virtual DOM” to avoid unnecessary re-renderings.

- I prefer: Vue

Why would someone do this?- Convenient way of modularizing your HTML

- Disclaimer: This is already pretty easy within Django Templates or Jinja- State management- Fits nicely into component driven design (and designer tools)- Make mobile apps with React Native

- ...but also, maybe not.