KeystoneJS

http://slides.com/mgan/keystonejs-nova/live

NOVA MEETUP

Morgan Craft

FullstackJS Engineer

@

Contributor on KeystoneJS

How I got started...

my journey began hacking away on 

It became clear

Ghost is a blogging platform NOT A CMS

then I found Keystone.

What is Keystone?

Awesome

the Keystone way

  • Flexible CMS
  • Decoupled Architecture
  • Nodejs / NPM
  • Generated Admin Interface
  • Great for rapid prototyping
  • Customizable Workflow Tooling
  • Content Mapping through Relations

Flexible CMS

NPM: keystone

NPM: generator-keystone

  • Exposed Public Interface
    • Model / Lists
    • View API
    • Utils
  • Admin App
    • jade templates
    • static assets [css/fonts/js]
  • yeoman generator [generates client site]

Decoupling

is

GREAT

  • MongoDB
  • Express
  • Yeoman 
  • Grunt/Gulp

Node Eco-System

MongoDB

A simple document storage engine provides incredible flexibility.

Mongoose

An excellent ODM for nodejs/mongoDB that exposes a schema interface.


  var blogSchema = new Schema({
    title:  String,
    author: String,
    body:   String,
    comments: [{ body: String, date: Date }],
    date: { type: Date, default: Date.now },
    hidden: Boolean,
    meta: {
      votes: Number,
      favs:  Number
    }
  });

MongoDB // Keystone

Collections

Documents

Lists

Items


var keystone = require('keystone'),
    Types = keystone.Field.Types;

var Post = new keystone.List('Post', {
    autokey: { path: 'slug', from: 'title', unique: true },
    map: { name: 'title' },
    defaultSort: '-createdAt'
});

Post.add({
    title: { type: String, required: true },
    state: { type: Types.Select, options: 'draft, published, archived', default: 'draft' },
    author: { type: Types.Relationship, ref: 'User' },
    createdAt: { type: Date, default: Date.now },
    publishedAt: Date,
    image: { type: Types.CloudinaryImage },
    content: {
        brief: { type: Types.Html, wysiwyg: true, height: 150 },
        extended: { type: Types.Html, wysiwyg: true, height: 400 }
    }
});

Define

Keystone List

  var keystone = require('keystone');

  var q = keystone.list('Post').paginate({
      page: req.query.page || 1,
      perPage: 10,
      maxPages: 10
    })
    .where('state', 'published')
    .sort('-publishedDate')
    .populate('author categories');
		
    q.exec(function(err, results) {
      // locals is the context handed off to
      // the keystone-view (aka handlebars/jade)
      locals.data.posts = results;
      next(err);
    });

Querying

Keystone List

EXPRESS

Everyones favorite web-framework

  • Static File Serving
  • Template Rendering Engines
  • Open PR for express 4.0

EXPRESS

Yeoman

  
  npm install -g generator-keystone
  yo keystone

Generates an entire client application scaffold

Default Client App

  • Users
  • Blog + Categories
  • Galleries
  • Contact Form
├── gulpfile.js
├── keystone.js  //< server-config / boostrap
├── models
│   ├── enquiries.js
│   ├── galleries.js
│   ├── postCategories.js
│   ├── posts.js
│   └── users.js
├── package.json
├── public
│   ├── favicon.ico
│   ├── fonts
│   ├── images
│   ├── js
│   └── styles
├── routes
│   ├── index.js
│   ├── middleware.js
│   └── views
├── templates
    └── views

Templates

The current generator supports Jade, Handlebars, Swig, and Nunchuk.

  // keystone.js

  keystone.init({
	name: 'morgancraft.com',
	static: 'public',
	favicon: 'public/favicon.ico',
	views: 'views',
	'view engine': 'hbs',
	'custom engine': handlebars.create({
		layoutsDir:'views/layouts',
		partialsDir:'views/partials',
		defaultLayout:'default',
		helpers:new require('views/helpers')(),
		extname:'.hbs'
	}).engine

  });

Future support for having Keystone themes

Theme Packs

  • Generator Support 
  • Theme decoupling
    • install via npm
  • Admin Integration for selecting Themes

THE BAD PARTS

Yeoman

  • Run Once
  • Modifications === Complexity
  • NPM Pollution

Back to Admin

just a Simple web-app

Admin

  • Old School Form Generation [jade]
  • Old School jQuery [spaghetti query]

now it is the great Blocker

Admin UI Rewrite

Evaluated Angular, Ember, Polymer, React

Polymer was the favourite - Web Components

React ended up mapping the best

 Not mature enough

Angular tries to do to much

custom form components

Forward to the Future

  • Complete work on Admin [react] as this continues to be a major blocker for all new features.
  • Plugin/App modularization [npm baby]
  • Improved Generator

Call to Action

How and Where to get started?

  • Grab the generator and make something
  • Spread the Word!
  • Plenty of issues on the main KeystoneJS repo
  • Yeoman generator - generator-keystone

Questions?

Thanks!

Twitter:  @mgan

Github:  mgan59

KeystoneJS-NOVA

By mgan

KeystoneJS-NOVA

KeystoneJS Presentation for NOVA Meetup [November 2014]

  • 4,150