MEAN Web Development

About me

Narendra Soni

  • http://github.com/narendrasoni1989
  • narendrasoni2@gmail.com
  • http://webexpressive.com
  • http://stackoverflow.com/users/2161130/narendrasoni
  • https://twitter.com/Narendra_SoniK
  • sg.linkedin.com/in/narendrakumarsoni/en
  • Currently working in Hello Technology Pte. Ltd.
  • NUS-ISS SA 36 Graduate

What are we going to learn today?

  • Talk about some of the coolest tools and technologies
  • Learning modern web development approach
  • Develop MEAN web Application
  • Have fun
  • Deploy and make web application live

Source code can be downloaded from 

https://github.com/narendrasoni1989/mean-workshop

git clone https://github.com/narendrasoni1989/mean-workshop

MEAN

  • MongoDB
  • ExpressJS
  • AngularJS
  • Node.js

Node.js

  •  Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices
  • Write once, run anywhere
  • A platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications

MongoDB

  • Flexible data model
  • Highly Scalable
  • Expressive query language
  • Secondary indexes

ExpressJS

http://expressjs.com

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

AngularJS

It simplifies development and testing by providing a framework for client-side MVC architecture

Fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs

Two-way data binding. The $scope service in Angular detects changes to the model section and modifies HTML expressions in the view via a controller. Likewise, any alterations to the view are reflected in the model

Directives are Angular’s way of bringing additional functionality to HTML

Git

Github

Git is a distributed revision control system with an emphasis on speed, data integrity, and support for distributed, non-linear workflows.

Every Git working directory is a full-fledged repository with complete history and full version-tracking capabilities, independent of network access or a central server.

GitHub is a web-based Git repository hosting service

It provides access control and several collaboration features such as wikis, task management, and bug tracking and feature requests for every project.

https://www.udacity.com/course/ud775

https://www.atlassian.com/git/tutorials/setting-up-a-repository

Other tools and frameworks

  • Twitter Bootstap
  • GruntJS
  • Bower
  • Mocha
  • Browsersync
  • Browserify

Architecture

Why MEAN?

  • A single language (JavaScript) runs on every tier of your application, from client to server to persistence
  • Stand alone web servers not required 
  • Writing RESTful web services is easier than ever
  • Event-driven and asynchronous programming 
  • Testing is much easier
  • No strict rules

NOTE : Every framework has it's good and bad part. Technology selection depends on many factors such as cost, requirement, skill set etc. MEAN stack is not the only option, there are many other matured development stacks available. 

MEAN Seed Projects

MEAN.io

http://mean.io/

MEAN.js

http://meanjs.org

Ultimate Seed

https://github.com/pilwon/ultimate-seed

Getting started

  • Install node.js
  • Install MongoDB
  • Install ExpressJS
npm install express --save
  • Install ExpressJS Generator
npm install express-generator -g

using installer from https://nodejs.org

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80
 --recv 7F0CEB10

echo "deb http://repo.mongodb.org/apt/ubuntu "$(lsb_release -sc)
"/mongodb-org/3.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.0.list


sudo apt-get update
sudo apt-get install -y mongodb-org
sudo service mongos start
sudo service mongod stop
sudo service mongod restart

First Application

express myapp
cd myapp

//update package.json with all the required nom packages.


npm install
node ./bin/www

visit http://localhost:3000

The above set of commands creates and runs express web application

Important concepts to understand

  • Asynchronous programming pattern
  • Event Emitter/Listener pattern
  • Middleware
  • Routers
  • npm
  • Error handling

Asynchronous Pattern

exports.create = function(req,res){
        var user = new User(req.body);
        user.save(function(err,result){
                if(err){
                        res.json({
                                type: false,
                                error: err
                        });
                }
                res.json({
                        type: true,
                        data : result
                });
        });
};

Event emitter pattern

module.exports = function(io){
    var chatNamespace = io.of('/chat').on("connection",function(socket){
        socket.on('disconnect',function(){
            console.log("Application Disconnected with socket id : "+socket.id);
        });

        socket.on('send',function(chatData){
            console.log("New message received :"+chatData);
            socket.broadcast.emit('chatmessage',chatData);
        });

        socket.on('typing',function(chatData){
            console.log("New message received :"+chatData);
            socket.broadcast.emit('typing',chatData);
        });

        socket.on('typing:stopped',function(chatData){
            socket.broadcast.emit('typing:stopped',chatData);
        });
        
    });
}

Middleware

  • An Express application is essentially a series of middleware calls
  • Middleware is a function with access to the request object (req), the response object (res), and the next middleware in line in the request-response cycle of an Express application, commonly denoted by a variable named next.

Middleware can :

1. Execute any code

2. Make changes to the request and the response objects

3. End the request-response cycle

4. Call the next middleware in the stack

Router Level Middleware

Router level middleware are bound to an instance of express.Router() and loaded using router.use()

var app = express();
var router = express.Router();
// a middleware with no mount path, gets executed for every request to the router
router.use(function (req, res, next) {
  next();
});
// a middleware sub-stack shows request info for any type of HTTP request to /user/:id
router.use('/user/:id', function(req, res, next) {
  next();
}, function (req, res, next) {
  next();
});

// a middleware sub-stack which handles GET requests to /user/:id
router.get('/user/:id', function (req, res, next) {
  // if user id is 0, skip to the next router
  if (req.params.id == 0) next('route');
  // else pass the control to the next middleware in this stack
  else next(); // 
}, function (req, res, next) {
  // render a regular page
  res.render('regular');
});

app.use('/', router);

Step 1

Creating ExpressJS Application

Configuring Routes

(http://openmymind.net/2012/2/3/Node-Require-and-Exports/)

require, module.exports

Step 2

Adding database interaction to routes

Connecting to Database

Step 3

Configuring AngularJS

Back end REST API calls

Front end view routing

Step 4

Writing test for server

Play around with source code, create more examples, read official documentation, search for tutorials in web, fork, clone, improve source code, add new feature, send me pull request in github

Questions

Made with Slides.com