How to survive the Front End

(front) end (of the) world

Jason Brown

Front End @

Co-Organizer of this thing

The front end moves very fast.

Categories

Package Managers
JS Processors
Templating
Application Frameworks
CSS Pre Processors
CSS Post Processors
CSS Frameworks / Grids
App Build Systems
Boilerplate Generators
Testing Frameworks
BDD/TDD
Data Flow libraries
Routing
Visualization Libraries
DOM
Animations
C# / SQL / NoSQL / Java /Python / PHP / WordPress/ Drupal / ASP / Docker

All the things you should know if you want to get an entry level/junior development position.

aka

Bower
NPM

Babel
ClojureScript
Bublé

jQuery
BackBone
Angular 1.X
Angular 2.X
Ember
React
Vue
Riot
Meteor
Knockout

React Native
React Art

React Test Utils

Enzyme
ReactCSSTransition

SASS
Compass
LESS
Stylus
PreCSS
PostCSS
CSS Modules
CSSNext
CSSnano
AutoPrefixr
RuckSack
Inline Styles

Bootstrap
Foundation

Grunt
Gulp
Brunch
Brocolli
Webpack
Browserify
SystemJS
Gobble
JSPM
RequireJS

Yeoman

QUnit
Karma
Mocha
Jest
AVA
Tap

TypeScript
Flow

rx.js
underscore
lodash

Flux

Redux
Redux Saga
Cycle.JS
Observables
Event Emitters

D3
Victory

Pixi.js

redux-form

Server Rendering

NPM
React

React-Router

Redux
PostCSS - CSS Modules

WebPack

Anything That Tests (check out AVA)

Lodash/FP

Babel ( I just mean ES6/ES2015, mostly just arrow functions () => and using const everywhere )

The less overwhelming list

Dependecies
Dev Dependencies
Peer Dependencies ( NPM V2 vs V3 )
How to use scripts
How to use pre/post script hooks
How to run private npm repos (sinopia/nexus)

Basic

Create a component
Understand props vs state (when to use what)
Smart vs Presentational components
How to cause a re-render with setState

Mid

Create a component w/ ES6 class
Create a functional component
Understand tradeoffs between all 3
When to use lifecycle methods
When to use a ref
Understanding `children` prop
What PropTypes are used for
When to use React.cloneElement

shouldComponentUpdate strategies not just comparing data
Using context
Use key outside of array
3rd party library integration
Integrate React partially into existing app
When to use setState in componentWillReceiveProps. (doesn't cause additional render)
Debugging perf with React Perf Tools
When to write HOC vs Function Child
Portals

Advaced

Setup simple router
Setup nested routes
Setup nested named routes
push/pop/replace inside components
push/pop/replace outside components
Integrate with react component lifecycle
Integrate authentication
Add in navigation confirmations
Integrate react-router into existing app w/ partial react rendering
Setup async routes (code splitting)
Server Rendering

Setup basic project
Understand connect
Add multiple reducers
Add middleware
Integrate dev middleware w/ correct dev/prod builds
Write store enhancer
Write custom middleware

PostCSS

(CSSModules)

Setting up PostCSS
Add a plugin (like CSSModules)
Understand integrating global CSS + scoped CSS
Organize CSS for reuse/composition w/ React
Write a plugin (need to understand AST)

Webpack

Webpack config to bundle JS
Understand the different devtool settings
Webpack config to integrate CSS
Webpack config to chunk CSS
Webpack config for images/CSS chunking + CDN
Understand basic loader options
Understand basic plugins
Create a loader
Create a plugin
Write a dev server with middleware tools
Realize you'll never understand Webpack give up and copy a boilerplate that exists, figure out how to modify it to meet your needs and call it a god damn day.

Testing

Setup test framework with NPM
Setup JSDOM if needed for testing
Understand enzyme static/full DOM/static rendering and when to use which
Figure out selenium integration with your test framework
Setup code coverage collection

Just pick one

Mocha
Karma
Jasmine
Tape
AVA
Jest

Functional Programming

Immutability - Don't mutate data, return new structure
Stateless - Basically perform things in a vacuum without knowing what happened before
Tail call optimization
When to derive values in render vs store them