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!
KeystoneJS-NOVA
By mgan
KeystoneJS-NOVA
KeystoneJS Presentation for NOVA Meetup [November 2014]
- 4,150