MongoDB Revised Sharding Guidelines MongoDB 3.x_Kimberly_Wilkins
MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express
-
Upload
charlie-key -
Category
Technology
-
view
83 -
download
3
Transcript of MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express
![Page 1: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/1.jpg)
Zero to Hipster with the M.I.K.E. StackJen Looper and Charlie Key
![Page 2: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/2.jpg)
Jen LooperDeveloper Advocate, Telerik@jenlooper
![Page 3: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/3.jpg)
Charlie KeyCo-Founder, Modulus@Zwigby
![Page 4: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/4.jpg)
Signs of hipsterism
Fixed-Gear Bicycles
![Page 5: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/5.jpg)
Signs of hipsterism
Mason Jar Lunches
![Page 6: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/6.jpg)
Signs of hipsterism
Urban Beekeeping
![Page 7: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/7.jpg)
Signs of hipsterism
Using a Cool-Sounding JavaScript-Based Framework
![Page 8: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/8.jpg)
I’m totally a hipster.
![Page 9: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/9.jpg)
“If you call yourself a hipster, you’re so not one.”
Mom, srsly!”
![Page 10: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/10.jpg)
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
![Page 11: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/11.jpg)
Meet M.I.K.E. for your SPA!
M
I
K
E
MongoDB - Database
Io.js - Backend Server
Kendo UI – Presentation & SPA routing
Express.js - Web Server & API
}
![Page 12: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/12.jpg)
Meet M.I.K.E.
M MongoDB – a noSQL database
• Mongo – scalable, for ‘humongous’ amounts of data• Not a relational database• Uses JSON-based querying language• Flexible data model
SQL: select * from tblInventory Mongo: db.inventory.find({})
![Page 13: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/13.jpg)
Meet M.I.K.E.
I Io.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 Node• Node = 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/
![Page 14: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/14.jpg)
Meet M.I.K.E.
K Kendo UI – Presentation layer
• jQuery-based widgets to help you make your frontend look stylin’
• Leverages HTML5 and JavaScript
• Because rolling your own charts and grids = :’-(
• Using Kendo routing to create SPA (no page refresh)
![Page 15: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/15.jpg)
Meet M.I.K.E.
E Express.js – your webserver
• Because Node + Express = <3• Facilitates creating API
1. 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 folder
3. 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
![Page 16: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/16.jpg)
http://www.mike-stack.com
https://github.com/jlooper/mike
![Page 17: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/17.jpg)
Let’s get started!
Let’s build a SPA-style web site using the M.I.K.E. stack because we can
I’m using Visual Studio 2013 on Windows 8.1with Node installed
![Page 18: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/18.jpg)
Install NodeJS Tools for Visual Studio
![Page 19: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/19.jpg)
NodeJS Tools available from Codeplex
![Page 20: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/20.jpg)
Today’s tasks:
1.Scaffold an Express 4 app in VS and clean it up for our purposes
2.Set up an Express Route3.Add Kendo UI and Bootstrap for pretteh +
SPA behavior4.All about that database!5.Craft your API
![Page 21: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/21.jpg)
Create a new Express 4 Project
![Page 22: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/22.jpg)
VS will install dependencies for you
![Page 23: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/23.jpg)
…and scaffold a basic Express app to run on NodeJS
![Page 24: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/24.jpg)
Run the app in Chrome and…
![Page 25: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/25.jpg)
What just happened?
A bunch of dependencies were installed
Public folder > images, CSS, JS
Routes > ‘traffic signals’
Views > jade templates for each view
app.js > base file
package.json > lists dependencies to install
![Page 26: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/26.jpg)
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" }
![Page 27: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/27.jpg)
Now we have only packages we need:we got rid of jade* and stylus**
*because “ew”
**because we don’t really need it now
![Page 28: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/28.jpg)
1. Housekeeping – remove reference to jade and stylus in app.js and delete .jade and .styl files
remove
![Page 29: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/29.jpg)
Set our rendering engine to be html, since we don’t use jade
![Page 30: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/30.jpg)
Replace the .jade templates with some simple html (for now)
![Page 31: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/31.jpg)
2. Routing. Let’s look at routing in Express
Routes correspond to web pages and calls:localhost:1337/users
![Page 32: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/32.jpg)
Building our /contact routes
Delete all /routes files, replace with contact.js
![Page 33: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/33.jpg)
3. Let’s add Kendo UI !
npm install –g bower
make sure you have git installed
bower install kendo-uiAdd to /public
![Page 34: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/34.jpg)
Add bootstrap .js, bootstrap styles, and custom styles
/public/javascripts/bootstrap.min.js/public/stylesheets/bootstrap.min.css/public/stylesheets/style.css
![Page 35: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/35.jpg)
Build out Kendo templates in index.html
1. Link up all the scripts in the header2. Add a blank div <div id=“main"></div>3. Add 3 kendo templates – nav, home-view, contact-view
<script type="text/x-kendo-template" id="home-view"> <div class="view-content"> <div class="container content"> <div class="row"> <div class="col-sm-12"> Home </div> </div> </div> </div> </script>
![Page 36: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/36.jpg)
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
![Page 37: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/37.jpg)
Fire it up!
In index.html, call startApp:
<script> (function() { MIKE.startApp(); })();</script>
![Page 38: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/38.jpg)
4. All about that database!
Install MongoDB, and start it up with ‘mongod’ and then ‘mongo’
![Page 39: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/39.jpg)
Require mongoose and connect to the local db
In /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
![Page 40: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/40.jpg)
Make a data schema to shape data sent to MongoDB
Create a new file: /models/contact.js
var 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);
![Page 41: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/41.jpg)
Make your data model available to your Express routes
In routes/contact.js, add a line:
var Contact = require(‘../models/contact’);
![Page 42: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/42.jpg)
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); });
![Page 43: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/43.jpg)
Build a form on the frontend to get contact info
![Page 44: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/44.jpg)
See the pretty widgets! (I spy Kendo UI)
<input id="schedule" name="schedule" data-role="timepicker" data-bind="value: schedule" value="10:00 AM">
![Page 45: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/45.jpg)
Test the form post
db.contacts.find(){ "_id" : ObjectId("551d79a387ff1b140eb4f663"), "lName" : "Looper", "fName" : "Jen", "email" : "[email protected]", "schedule" : "2015-04-03T22:30:00.000Z", "status" : "", "message" : ”dinner time!", "__v" : 0 }>
Query mongo to see data
![Page 46: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/46.jpg)
What just happened!?
1. Frontend form gathered data2. Made ajax call via Kendo UI
framework3. Shaped up the data using
Mongoose schema4. Via Express route, sent data to
Mongo, bubbled up message from Express to Frontend
5. Scheduled Mike to come to dinner
6. Dropped mic’ and walked away
![Page 47: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/47.jpg)
Trivia question!!!
For a prize!
What is the name of the company that builds the Node.js add-ons for Visual Studio?
![Page 48: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/48.jpg)
Let’s take Mike to Production!
Charlie KeyCo-Founder, Modulus@Zwigby
![Page 49: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/49.jpg)
Create Modulus Database
1. Create a New Database2. Name that Database3. Decide on Region4. Enter Default Username5. Enter Default Password6. Create It!
![Page 50: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/50.jpg)
Grab Database Connection String
Connection string is show in Mongo Console command:novus.modulusmongo.net:27017/g7Evopuj
![Page 51: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/51.jpg)
Create Modulus Project
1. Create a New Project2. Name that Project3. Choose Memory Size4. Decide on Region5. Create It!
![Page 52: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/52.jpg)
Set Environment Variable
Need to set MONGO_DB environment variable including user:passmike:[email protected]:27017/g7Evopuj
![Page 53: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/53.jpg)
Use Command Line to Deploy
> npm i -g modulus> modulus login> modulus deploy
![Page 54: MIKE Stack Introduction - MongoDB, io.js, KendoUI, and Express](https://reader035.fdocuments.us/reader035/viewer/2022062514/55b72cd8bb61ebde4f8b471f/html5/thumbnails/54.jpg)
Thank you!
Charlie KeyCo-Founder, Modulus@Zwigby
Jen LooperDeveloper Advocate, Telerik
@jenlooper