Primer Review

What is it?

  • a technology stack
  • consisting of lightweight tools
  • built for content heavy web pages

What Primer Isn't

Not built on the
Mobile Web Stack

MWS

  • Sass
  • Gulp
  • Karma
  • Mocha
  • Chai
  • NodeJS

Primer

  • Sass
  • Gulp
  • Karma
  • Mocha
  • Chai
  • NodeJS

Ancillary!

MWS

  • Angular (client side)

Primer

  • Express (server side)
  • Handlebars

These items define the core of a stack

Web Components Is...

  • Industry Standard
    • Custom Elements
    • HTML Imports
    • Templates
    • Shadow Dom
  • Platform Independent
  • Developers extend capability of the platform

Not Web Components

  • Industry Standard
    • Custom Elements
    • HTML Imports
    • Templates
    • Shadow Dom
  • Platform Independent
  • Developers extend capability of the platform

Not Musketeer

  • Musketeer is an architectural design to address a specific set of problems in the content pipeline
  • Primer could be used to implement some pieces of Musketeer
  • Musketeer is not a rebranding of Primer

What makes Primer Primer?

  • very small footprint
    • zero k library code for server-side rendered
    • 18k library code with handlebars & historify
  • modular/component directory structure
  • build code that glues it all together

Domain Models

App Logic

Presentation

Angular

MWS

Client

Server

Handelbars

Node Express

Primer

Handelbars

Client

Server

React

fetch

React

Client

Server

fetch

Redux

Redux

JS Stack

Framework Scope Comparisons

Project Starter

  • starter project template
  • yeoman generator (partially complete)
  • yeoman component generator

primer-starter-kit

Component Discovery

  • handlebars template and helper... 
    • discovery
    • registration
    • exposure to browser

primer-components

Data Builder

  • recursively builds mock data for prototyping

primer-data-builder

  • client code intercepts link clicks
  • requests data via ajax instead of the rendered page
  • builds and uses a cache of data (no aging)
  • renders the template with data
  • updates the URL/history
  • falls back to server-side rendering when
    • the ajax request for data fails (in the next release)
    • javascript isn't enabled

 Pseudo Isomorphic Experience

primer-historify

Architecture

 

Node.js

Primer

 

http://primer

primer-historify

View Layer Bleed

View Data in here!

Plans for Primer

Short Term Plans

  • Provide support to content site creators
    • to Primer users
    • and those not using Primer!
  • Release Primer v4.0 (then feature freeze)
    • code (released)
    • documentation & web site
  • Project Generator
    • project generator
    • unified generator front
  • Maintenance
    • upgrade Handlebars.js
    • upgrade Node.js

Long Term Plans

  • Merge with the JavaScript Stack in 2016

Criteria for Success

Content Site

  • Payload size
  • Browser support
  • Server-side rendered
    • seo
    • accessibility 
  • User experience
  • Performance
  • Development speed
  • Component Reuse

Web App

  • Performance
  • Development speed
  • Component Reuse
  • Consistent experience
  • Payload size
  • Browser support 
  • Server-side rendered
    • seo
    • accessibility

Primer All the Things!

The End

Merge Timing

Front-End Stack

v1

Primer

v2

v3

v2

v1

v4

Now

Later

Other suggestions for review

  • Open Source
  • Support multiple projects per git repository
  • Pass-through data
  • Solve global component caching problem
    • components get lumped into all.js and all.css
  • Support deployment of static-only assets
  • Move docs/sites to Stack CF Space
Made with Slides.com