The Front End

By: Matthew Poulson

Oh what a tangled web we weave

Presentation Goals

What are the concerns of the front end?
What building block solve those concerns?
Why did we chose the building blocks in the starter?

The React starter addresses these concerns.

But let's step back from it.

Complexity of the Web as a platform

Public

Content

Public

App

Internal

Content

Internal

App

Diverse Range of Requirements

What are our requirements today?

Server-side Rendering

isomorphic

?

Fast Responsive UI

Reusable

Shareable

Components

Modular

Architecture

Hireability

Long Term

Support

Scalable

Rapid

Development

Team

Development

Fun

We have no control of the client platform

How can we manage these complexities?

Use tools that try to abstract them

Modularize the Problem

Modular

Monolith

Adaptable
Maintainable
Solves a range of problems

Less fatigue
Defined Path
Solves smaller set of problems well

This talk is about the modular approach

Build

Runtime Engine

UI Rendering

Routing

State

Style

Runtime Engine

Build

Runtime Engine

UI Rendering

Routing

State

Style

Server/Browser

Runtime Engine

Build

Runtime Engine

UI Rendering

Routing

State

Style

All web apps require a two headed monster, the client and the server

Runtime Engine

Build

Runtime Engine

UI Rendering

Routing

State

Style

Solve every problem in both spaces
Need Semantic docs for SEO
Routing to Deep links

Problem Space

Runtime Engine

What Solutions are there?

2 copies of the app try to keep them in sync
Write one app that can run in both places
Have the client do everything
Have the server do everything

Build

Runtime Engine

UI Rendering

Routing

State

Style

Node

Why this over other options?

Run the same app both places Isomorphicly

Build

Runtime Engine

UI Rendering

Routing

State

Style

Runtime Engine

UI Rendering

Routeing

State

Style

Build

Node & Browser

UI Rendering

Build

Runtime Engine

UI Rendering

Routing

State

Style

UI Rendering

Problem Space

Building user interface based on state
Rendering it to the DOM
State is constantly changing, UI needs to keep up
2 Headed Monster

Build

Runtime Engine

UI Rendering

Routing

State

Style

UI Rendering

What Solutions are there?

Riot
React
Preact
HandleBars
Internal Frameworks
Vue JS

Build

Runtime Engine

UI Rendering

Routing

State

Style

React

Why this over other options?

Simple mental model
Strong Component/Composition model
Doesn't try to own the whole app
Favors native tools vs it's own implementation
Client/Server Rendering
FUN!!!!!11
etc...

Build

Runtime Engine

UI Rendering

Routing

State

Style

Build

Node & Browser

UI Rendering

Routing

State

Style

React

Routing

Build

Runtime Engine

UI Rendering

Routing

State

Style

Routing

Problem Space

Mapping routes to views and data
Maintaining Browser History
Deep link to a state of the app

Build

Runtime Engine

UI Rendering

Routing

State

Style

Routing

What Solutions are there?

Giant switch statement
Static File directory
React Router
react-router-redux
FlowRouter
Page JS
History JS

Build

Runtime Engine

UI Rendering

Routing

State

Style

React Router

Why this over other options?

Connects to the HTML5 history api
Understandable and transparent api
Great Composition of routes
Isomorphic

Build

Runtime Engine

UI Rendering

Routing

State

Style

Build

Node & Browser

Routing

State

Style

React

React Router

State Managment

Build

Runtime Engine

UI Rendering

Routing

State

Style

(Caching, Storing, and Generating)

State

“state” is an object that determines how a component renders & behaves. In other words, “state” is what allows you to create components that are dynamic and interactive.

State Management

Problem Space

Even basic State management is complex
Direct and Async state change is a recipe for disaster.
How do we keep data synchronized
Caching

Build

Runtime Engine

UI Rendering

Routing

State

Style

State Management

What solution are there?

Flux
Redux
MobX
Relay

Build

Runtime Engine

UI Rendering

Routing

State

Style

Unidirectional data flow

"All data in an application follows the same lifecycle pattern"

Redux

Why this over other options?

Unidirectional dataflow makes state easy to reason about
Immutable state enables time travel
Plays nice with React

Build

Runtime Engine

UI Rendering

Routing

State

Style

Action Orchestration

Build

Runtime Engine

UI Rendering

Routing

State

Style

A series of prescribed state changes

Action Orchestration

Problem Space

Orchestrating state transitions
Orchestrating n number of async actions
Orchestrating data persistence
Callback hell

Build

Runtime Engine

UI Rendering

Routing

State

Style

Action Orchestration

What Solutions are there?

Redux-Thunk
Imperative code
Redux-Saga
Redux Promise

Build

Runtime Engine

UI Rendering

Routing

State

Style

Redux-Thunk

Why this over other options?

Light solution
Without it our action creators would have to have direct access to dispatch.
This breaks separation of concerns.

Build

Runtime Engine

UI Rendering

Routing

State

Style

Managing Data

Build

Runtime Engine

UI Rendering

Routing

State

Style

Requesting and Persisting Data

Managing Data

Problem Space

Getting and Setting remote Data
How do we fetch data
Needs to allow for orchestration
Needs to run server side also

Build

Runtime Engine

UI Rendering

Routing

State

Style

Managing Data

What solutions are there?

Polyfill fetch
axios
superagent
XMLHttpRequest

Build

Runtime Engine

UI Rendering

Routing

State

Style

Fetch

Why this over other options?

New standard
Promise based
Can use it server side with Isomorphic-fetch

Build

Runtime Engine

UI Rendering

Routing

State

Style

Build

Node & Browser

React

React Router

State

Style

Redux

Managing CSS

Build

Runtime Engine

UI Rendering

Routing

State

Style

Managing CSS

Build

Runtime Engine

UI Rendering

Routing

State

Style

Problem Space

The more you scale the harder it gets
Hard to keep it DRY
Hard to know what style belongs to what elements
Hard to organize
Global Scope

Managing CSS

Build

Runtime Engine

UI Rendering

Routing

State

Style

What solutions are there?

Monolithic style sheet
Style tag for each component
Sass
CSSNext
BEM
CSS Modules

CSSNext

Why this over other options?

Align to the standard
Better investment of learning.
More likely to withstand the test of time.

Build

Runtime Engine

UI Rendering

Routing

State

Style

CSS Modules

Why this over other options?

Programmatically makes your classes unique
Get the benefit of BEM with out the problem of naming things
We can write our CSS blissfully
Great way to Scope CSS

Build

Runtime Engine

UI Rendering

Routing

State

Style

Build

Node & Browser

React

React Router

Redux

Style

CSSNext & CSS Modules

Transpile

Build

Runtime Engine

UI Rendering

Routing

State

Style

Transpile

Problem Space

Browser inconsistencies
Browsers don't support all of JS syntax yet
What features can we use

Build

Runtime Engine

UI Rendering

Routing

State

Style

Transpile

What solutions are there?

caniuse.com
Traceur
TypeScript
Babel

Build

Runtime Engine

UI Rendering

Routing

State

Style

Babel

Why this over other options?

Let the computer do the hard work
gets out of the way and gets the job done
We get to write the fun parts

Build

Runtime Engine

UI Rendering

Routing

State

Style

Build

Runtime Engine

UI Rendering

Routing

State

Style

Build

Problem Space

Bundle up all of our assets
Resolve component Dependencies
Hard to know what to build
What do you need to do with each asset type

Build

Runtime Engine

UI Rendering

Routing

State

Style

Build

What solutions are there?

Write one big script file
Have a ton of script tags
Grunt
Gulp
Browserify
Webpack

Build

Runtime Engine

UI Rendering

Routing

State

Style

Module

each of a set of standardized parts or independent units that can be used to construct a more complex structure, such as an item of furniture or a building.

Module

```
Have their own scope and api
```
```
Configurable
```
```
Composable
```

Webpack

Why this over other options?

Webpack is an intelligent bundler.
Webpack programmatically bundles and analyzes our modules and module dependencies
Code Splitting, Load on demand
Tree Shaking (Coming soon)

Build

Runtime Engine

UI Rendering

Routing

State

Style

Build

Node & Browser

React

React Router

Redux

CSSNext & CSS Modules

Webpack

Babel

Summary

The Standard

Babel
CSSNext
React & Redux

Points to the Standard

Why point to the standard?

Tools can be replaced easily in future
Better knowledge investment

#install ldsjs
npm i -g ldsjs --registry=http://icsnpm.ldschurch.org

#create a react starter project
ldsjs react hello-world

Thank You

References

http://jamesknelson.com/routing-with-raw-react/
http://webpack.github.io/docs/
https://github.com/gaearon/redux-thunk
https://github.com/postcss/postcss
https://github.com/reactjs/react-redux
https://github.com/ReactTraining/react-router
https://thinkster.io/understanding-react-state
http://www.pcmag.com/encyclopedia/term/56079/runtime-engine
http://redux.js.org/docs/basics/DataFlow.html