1. Introduction to MEAN (JavaScript Full Stack Development)
Tom Perkins
APPDEV SIG
NTPCUG

3. Manning Books online …
express-angular-and-node
Good JavaScript overview (Appendix D) – free download

4. MEAN stack components Node.js – web server/platform
Web server – don’t need IIS or Apache
Runs JavaScript on your computer
Supported on many host environments (Heroku used in book)
Also Azure, GoDaddy, Nodejitsu, OpenShift
Express.js – web application framework
Listens to incoming requests and returns relevant responses
Sets up directory structure with scaffolding
Routing – directs incoming URL to certain piece of code
Several templating engines to help build Views
Uses sessions to identify individual users through multiple requests and pages

5. MEAN stack components MongoDB – the database
Document database, not relational
Has rows, not columns
Row is a document; it defines and contains the data itself
Stores documents as BSON (Binary JSON)
See Appendix D for JSON topic
Provides indexing and querying capabilities
Mongoose – provides data structuring, connections, and validation capabilities
AngularJS: Front-end framework
Moves some or all processing logic from the server to the browser

6. Supporting Cast … Bootstrap – user interface GIT – for source control
Heroku – hosting
Sublime Text – editing tool
VSCode
NotePad++

8. Example application (Loc8r)
List nearby places with WIFI where people can work
Display
Facilities
Opening times
Rating
Location map
Users can
Login
Submit ratings and reviews

10. Step 1: Build a static site

11. Step 1: Build a static site
Consists of a number of hard-coded HTML screens
Objectives:
Figure out the layouts
Try out the user flow to see if it makes sense
We shoot for a working mockup of the main screens

12. This presentation’s objectives …
The package.json file
.json files overview
npm tutorial -- package-manager/
using npm
Versions
Installing Node dependencies
Adding packages
Updating packages to a later version
Installing Node
Create a project folder
Create an Express project

13. package.json file
package.json file is required in the root folder for all node apps
Identifies packages your project depends on (dependencies)
You can specify versions of a package that you want
Also can handle other metadata:
Project description
Version of the project
License information
Configuration data

14. .json files JSON: JavaScript Object Notation
Used to store and exchange data
Alternative to XML (easier to use)
Text-only format
JavaScript functions can convert JSON data into native JavaScript objects
JSON syntax is derived from JavaScript object notation syntax:
Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays
JSON file example
{"employees":[     {"firstName":"John", "lastName":"Doe"},     {"firstName":"Anna", "lastName":"Smith"},     {"firstName":"Peter", "lastName":"Jones"} ]}

15. Sample package.json file{
"name": "exp2014",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www" },
"dependencies": {
"body-parser": "~1.15.1",
"cookie-parser": "~1.4.3",
"debug": "~2.2.0",
"express": "~4.13.4",
"jade": "~1.11.0",
"morgan": "~1.7.0",
"serve-favicon": "~2.3.0" }
Package metadata
Package dependencies

16. Dependency file version syntax
"express": "~4.13.4",
Major version (4)
Minor verson (13)
Patch version (4)
~ use the latest patch version available
Patches – minor fixes that won’t have any impact on the application

17. Updating with npm
Run from the command prompt, in the project folder ($ == >)
$ npm install
Install all dependencies listed in the package.json file
Packages are placed in a special folder, node_packages
Each package has its own subfolder
$ npm install – save package-name
To add a package to an exisiting project
Package will be added to list of dependencies in the package.json file

18. Node.js

19. Simple Answer JavaScript normally runs on your browser
It can only access your webpage
Node.js allows JavaScript to run on your computer
Uses Google Chrome V8 (?) engine
Runs on your machine
You can access files on your computer
Can’t normally do this with JavaScript
Listen to network traffic on your computer
Access databases directly

20. Two categories of what people are doing with Node
Building utilities for use on your machine
Grunt, Gulp, Yoeman, etc.
Listen for file system changes, does a file reload
Build a web server, a web application with Node
Instead of PHP, Ruby on Rails, Python, etc
Use Express framework for Node.js

21. Modules How you load one file into another in module 1
Var m2 = require(‘./module2’);
Looking for a file in the same directory
Assumes .js is added
Module 2 must export anything that is passed to module1
In module2:
Var a = 1;
module.exports.a = a; (will be exported to module1)

22. Node Package Manager (npm)
Comes with node
npm install underscore
Creates a node_modules/ folder,
Installs underscore package in it
In module1, you can say
var _ = require(‘underscore’);
In module1, console.log(_); will display the whole “underscore” library
NPM is an easy way of installing things

23. NPM – saving things in a package
Save 20 dependencies you have
npm init (creates a package.json file)
Name , version, description, dependencies, etc
npm install backbone –s will save the backbone dependency in the package.json file
npm install will now load all the dependencies listed in the project.json file
Thousands of packages available

24. Web server
http package comes built into node, doesn’t need to be installed
In module1
Var http = require(‘http’);
var server = http.createServer(function(request,response){
console.log(‘got a request!’);
response.write(‘hi’);
response.end();
}; returns a server
server.listen(3000);
Run: node module1
sends hi back every time

25. Create a folder on your machine for the project
My folder: C:\

26. Installing Node.js nodejs.org This will automatically install npm.
Verify installation by checking version:
$ node –version
$ npm --version

27. Installing Express.js (Express generator)
$ npm install –g express-generator
Verify installation:
$ express –version

28. Create the Express project
Navigate to your folder (cd c:\LearnExpress\loc8r)
$ express (create the new project)
$ npm install (install the dependencies)
$ npm start
(browse to localhost:3000)

29. C:\LearnExpress\loc8r>express
create : .
create : ./package.json
create : ./app.js
create : ./public/javascripts
create : ./public
create : ./public/stylesheets
create : ./public/stylesheets/style.css
create : ./public/images
create : ./routes
create : ./routes/index.js
create : ./routes/users.js
create : ./views
create : ./views/index.jade
create : ./views/layout.jade
create : ./views/error.jade
create : ./bin
create : ./bin/www
install dependencies:
> cd . && npm install
run the app:
> SET DEBUG=loc8r:* & npm start

30. The root directory: C:\LearnExpress\loc8r>dir
Volume in drive C is Windows
Volume Serial Number is 22BE-CA9F
Directory of C:\LearnExpress\loc8r
08/18/ :33 PM <DIR>
08/18/ :33 PM <DIR>
08/18/ :32 PM ,442 app.js
08/18/ :32 PM <DIR> bin
08/18/ :33 PM <DIR> node_modules
08/18/ :32 PM package.json
08/18/ :32 PM <DIR> public
08/18/ :32 PM <DIR> routes
08/18/ :32 PM <DIR> views
2 File(s) ,767 bytes
7 Dir(s) 406,719,074,304 bytes free

31. The app.js module Demo – Sublime Text view of app.js Middleware
Lines that start with app.use
all requests go through these lines, one at a time
At end, app logic returns a response
Middleware operations are handled asynchronously
Example: app.use(express.cookieParser)
Parses out cookie information
Attaches cookie data to request so that it is easily referenced in the controller code

32. Restarting the application
Since a Node app compiler before running, you must stop and restart it if you make changes.
Manual restart
Ctrl-C
Then npm start
Automatic services – restart when changes are detected
$ npm install –g nodemon
Start app with $ nodemon