Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
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.