Zero to Hipster with the M.I.K.E. StackJen Looper and Charlie Key

Jen LooperDeveloper Advocate, Telerik@jenlooper

Charlie KeyCo-Founder, Modulus@Zwigby

Signs of hipsterismFixed-Gear Bicycles

Signs of hipsterismMason Jar Lunches

Signs of hipsterismUrban Beekeeping

Signs of hipsterismUsing a Cool-Sounding JavaScript-Based Framework

I’m totally a hipster.

“If you call yourself a hipster, you’re so not one.”Mom, srsly!”

You know you’re a hipster when…You create your own darn web stack*Presenting…the M.I.K.E. Stack*with thanks also to Carl Bergenhem** and Burke Holland**Carl looks kind of like Mike or vice versa

Meet M.I.K.E. for your SPA!MIKEMongoDB - DatabaseIo.js - Backend ServerKendo UI – Presentation & SPA routingExpress.js - Web Server & API}

Meet M.I.K.E.MMongoDB – a noSQL databaseMongo – scalable, for ‘humongous’ amounts of dataNot a relational databaseUses JSON-based querying languageFlexible data modelSQL: select * from tblInventoryMongo: db.inventory.find({})

Meet M.I.K.E.IIo.js– (a fork of Node, we’re just going to use Node)Io.js is hipper than Node but I won’t tell if you use NodeNode = server-side JS//this goes in a file called example.jsvar http = require('http');http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');}).listen(1337, '127.0.0.1');console.log('Server running at http://127.0.0.1:1337/');//execute it from the command line% node example.jsServer running at http://127.0.0.1:1337/

Meet M.I.K.E.KKendo UI – Presentation layerjQuery-based widgets to help you make your frontend look stylin’Leverages HTML5 and JavaScriptBecause rolling your own charts and grids = :’-(Using Kendo routing to create SPA (no page refresh)

Meet M.I.K.E.EExpress.js – your webserverBecause Node + Express = <3Facilitates creating API1. add package.json to folder & declare express as dependency{ "name": "Mike", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "description": "Mike", "author": { "name": "Looper", "email": "" }, "dependencies": { "express": "~4.9.0" }}2. npm install to add express to the folder3. Create test.js in folder:var express = require('express')var app = express()app.get('/', function (req, res) { res.send('Hello Express!')})var server = app.listen(3000, function () { var host = server.address().address var port = server.address().port console.log('Example app listening at http://%s:%s', host, port)})4. node test

http://www.mike-stack.comhttps://github.com/jlooper/mike

Let’s get started!Let’s build a SPA-style web site using the M.I.K.E. stack because we canI’m using Visual Studio 2013 on Windows 8.1with Node installed

Install NodeJS Tools for Visual Studio

NodeJS Tools available from Codeplex

Today’s tasks:Scaffold an Express 4 app in VS and clean it up for our purposesSet up an Express RouteAdd Kendo UI and Bootstrap for pretteh + SPA behaviorAll about that database!Craft your API

Create a new Express 4 Project

VS will install dependencies for you

…and scaffold a basic Express app to run on NodeJS

Run the app in Chrome and…

What just happened?A bunch of dependencies were installedPublic folder > images, CSS, JSRoutes > ‘traffic signals’Views > jade templates for each viewapp.js > base filepackage.json > lists dependencies to install

We don’t need a lot of those dependencies. Let’s change it up. Edit package.json and update npm Packages in VS"dependencies": { "express": "~4.9.0", "body-parser": "~1.8.1", "mongoose": "3.8.11", "cookie-parser": "~1.3.3", "morgan": "~1.3.0", "serve-favicon": "~2.1.3", "debug": "~2.0.0", "ejs": "^1.0.0" }

Now we have only packages we need:we got rid of jade* and stylus** *because “ew”**because we don’t really need it now

1. Housekeeping – remove reference to jade and stylus in app.js and delete .jade and .styl filesremove

Set our rendering engine to be html, since we don’t use jade

Replace the .jade templates with some simple html (for now)

2. Routing. Let’s look at routing in ExpressRoutes correspond to web pages and calls:localhost:1337/users

Building our /contact routesDelete all /routes files, replace with contact.js

3. Let’s add Kendo UI !npm install –g bowermake sure you have git installedbower install kendo-uiAdd to /public

Add bootstrap .js, bootstrap styles, and custom styles/public/javascripts/bootstrap.min.js/public/stylesheets/bootstrap.min.css/public/stylesheets/style.css

Build out Kendo templates in index.htmlLink up all the scripts in the headerAdd a blank div Add 3 kendo templates – nav, home-view, contact-view

Add app.js to /bower_components/kendo-ui/kendo/app.js will turn our Express app into a SPA_MIKE.startSPA = function () { _kendoRouter.start(); _baseLayout.render('#main'); }Use Express for managing database calls via Express routesUse Kendo for page routing

Fire it up!In index.html, call startApp:

4. All about that database!Install MongoDB, and start it up with ‘mongod’ and then ‘mongo’

Require mongoose and connect to the local dbIn /app.js:var mongoose = require('mongoose');var connectionString = 'mongodb://127.0.0.1/contacts'mongoose.connect(connectionString);Mongoose provides structure for MongoDB. You can create a model to whip data into shape.Database name

Make a data schema to shape data sent to MongoDBCreate a new file: /models/contact.jsvar mongoose=require('mongoose');var Schema=mongoose.Schema;var contactSchema = new Schema({ fName: String, lName: String, email: String, status: String, schedule: String, message: String});module.exports = mongoose.model('Contact', contactSchema);

Make your data model available to your Express routesIn routes/contact.js, add a line:var Contact = require(‘../models/contact’);

5. Create your APIIn /app.js, add:app.use('/api', contacts);…set up ajax call$.ajax({ url: '/api/contacts', type: 'post', data: serializedDataToPost, contentType: 'application/json' }).done(function (data) { $('.alert-success').toggle(); $(".success-message").html(data.message); }).fail(function (data) { $('.alert-danger').toggle(); $(".fail-message").html(data.message); });

Build a form on the frontend to get contact info

See the pretty widgets! (I spy Kendo UI)

Test the form post db.contacts.find(){ "_id" : ObjectId("551d79a387ff1b140eb4f663"), "lName" : "Looper", "fName" : "Jen", "email" : "jen.looper@telerik.com", "schedule" : "2015-04-03T22:30:00.000Z", "status" : "", "message" : ”dinner time!", "__v" : 0 }>Query mongo to see data

What just happened!?Frontend form gathered dataMade ajax call via Kendo UI frameworkShaped up the data using Mongoose schemaVia Express route, sent data to Mongo, bubbled up message from Express to FrontendScheduled Mike to come to dinnerDropped mic’ and walked away

Trivia question!!!For a prize!What is the name of the company that builds the Node.js add-ons for Visual Studio?

Let’s take Mike to Production!Charlie KeyCo-Founder, Modulus@Zwigby

Thank you!Charlie KeyCo-Founder, Modulus@ZwigbyEvaluation: http://bit.ly/next-looper-2Jen LooperDeveloper Advocate, Telerik@jenlooper