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

MWS

• Angular (client side)

Primer

• Express (server side)
• Handlebars

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

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

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

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