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

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
Made with Slides.com