Mean PPT
Download as PPTX, PDF•0 likes•976 views
The document discusses the MEAN stack, which is a full-stack JavaScript solution for building web applications using MongoDB, Express, AngularJS, and Node.js. It describes each component, why the MEAN stack is useful, and key concepts like non-blocking I/O, MVC architecture, and Angular directives. Tools like Yeoman, Grunt, and Bower that are often used with MEAN projects are also covered, as well as deployment.
![MongoDB Strategic Advantage
Horizontally Scalable
-Sharding
Agile
Flexible
High Performance &
Strong Consistency
Application
Highly
Available
-Replica Sets
{ author: “eliot”,
date: new Date(),
text: “MongoDB”,
tags: [“database”,
“flexible”, “JSON”]}](https://image.slidesharecdn.com/ef8f182b-29bf-4659-998a-30a6fc3a7ddb-150830162732-lva1-app6891/85/Mean-PPT-19-320.jpg)
![Do More With Your Data
Rich
Queries
Find course
Find courses in basic category
Geospatial Use for Geo Location
Text Search
Find all the course having title
‘Test’
Aggregation Calculate the Course Rating
Map Reduce Calculate Content Likes
{
"_id": "55e009cefff4c4be328f555d",
"category": {
"_id": "3”,
"title": "Basics"
},
"contents": [
{
"title": "Content 1",
"_id": "55e009d9d1720d762cf2f343",
"questions": [
{
"description": "If you are happy and you know it",
"type": "single”,
"tips": "",
"_id": "55e00a2dfff4c4be328f555e",
"choices": [
{
"description": "Hand",
"isAnswer": false,
"_id": "55e00a2dfff4c4be328f5561"
}
]
}
],
"likes": 0,
}
],
"isPublished": true,
"description": "If you are happy and you know it",
"title": "Test Course"
}](https://image.slidesharecdn.com/ef8f182b-29bf-4659-998a-30a6fc3a7ddb-150830162732-lva1-app6891/85/Mean-PPT-20-320.jpg)
![How to make angular
routes?
Include angular-route.js library
Inject ‘ngRoute’ to app module
Inject ‘$routeProvider’ to your app as a config
define your routes!
app.config(['$routeProvider',
function( $routeProvider ) {
$routeProvider.when('/', {
templateUrl: 'homepage.html',
controller: 'HomeController’
});
} ]);](https://image.slidesharecdn.com/ef8f182b-29bf-4659-998a-30a6fc3a7ddb-150830162732-lva1-app6891/85/Mean-PPT-32-320.jpg)
Mean PPT
- 1. MEAN Harendra Singh Bisht mean stack Developer
- 2. Agenda What is MEAN Stack Why MEAN MEAN Architecture Node Express MongoDB Angular Yeoman How we are using Deploy
- 3. What’s MEAN Stack? MEAN Stack is a full-stack JavaScript solution that helps you build fast, robust and maintainable production web applications using MongoDB, Express, AngularJS, and Node.js.
- 4. What’s a Dev Stack? LAMP - Linux, Apache MySQL, PHP .net - Windows, IIS, C#, MSSQL Server Java - Tomcat, Java, JSP, Oracle
- 5. MongoDB is a NoSQL document-store database framework built on Node.js which comes with a set of features for building single-page, multi-page, and hybrid web apps. JavaScript (MV*) Framework maintained by Google. Executed by the V8- a JavaScript engine developed by Google which is used in Chrome
- 6. Why MEAN Stack? All of these components use JavaScript / JSON. One language, same context Consistent Scalability Asynchronous
- 7. Who is using MEAN?
- 8. Mean ReCAP
- 10. Package Management Node.js module package manager (NPM) There’s a module for almost anything you can imagine Simple to use >npm init >npm install –g module-name >npm install module-name >npm install
- 12. Event Loop in Node JavaScript runtime contains a message queue which stores a list of messages to be processed and their associated callback functions. These messages are queued in response to external events (such as a mouse being clicked or receiving the response to an HTTP request) given a callback function has been provided. If, for example a user were to click a button and no callback function was provided – no message would have been enqueued...
- 13. Sync vs. Async
- 14. Hello World! var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello Worldn'); }).listen(8000, '127.0.0.1'); console.log('Server running at http://127.0.0.1:8000/'); >node app
- 15. Let’s talk about express! >npm install express --save Web application framework (like Ruby on Rails, asp.net, Sinatra, django, and etc.)
- 16. Why use express.js? Ability to use CSS Preprocessors like Sass/Less/Stylus Light weight/Fast Better Code Structure with Model View Controller (MVC) Routing Template flexibility (hogan, ejs, jade)
- 18. Let’s talk about MongoDB!
- 19. MongoDB Strategic Advantage Horizontally Scalable -Sharding Agile Flexible High Performance & Strong Consistency Application Highly Available -Replica Sets { author: “eliot”, date: new Date(), text: “MongoDB”, tags: [“database”, “flexible”, “JSON”]}
- 20. Do More With Your Data Rich Queries Find course Find courses in basic category Geospatial Use for Geo Location Text Search Find all the course having title ‘Test’ Aggregation Calculate the Course Rating Map Reduce Calculate Content Likes { "_id": "55e009cefff4c4be328f555d", "category": { "_id": "3”, "title": "Basics" }, "contents": [ { "title": "Content 1", "_id": "55e009d9d1720d762cf2f343", "questions": [ { "description": "If you are happy and you know it", "type": "single”, "tips": "", "_id": "55e00a2dfff4c4be328f555e", "choices": [ { "description": "Hand", "isAnswer": false, "_id": "55e00a2dfff4c4be328f5561" } ] } ], "likes": 0, } ], "isPublished": true, "description": "If you are happy and you know it", "title": "Test Course" }
- 21. MongoDB Pros Schema-less Flexible BSON Sharding & Scaling Map/Reduce
- 22. MongoDB Cons Data size Less Flexible Transactions
- 23. MongoDB Terms
- 24. Mongoose Object Modeling for MongoDB http://mongoosejs.com/ var mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/test'); var Cat = mongoose.model('Cat', { name: String }); var kitty = new Cat({ name: 'Zildjian' }); kitty.save(function (err) { if (err) // ... console.log('meow'); });
- 25. Why is AngularJS? Javascript Framework maintained by Google. Model-View-Controller (MV*) Makes development and testing easier Teaches HTML new tricks!
- 26. How can Angular help? Integrate in parts of your existing website Single Page Applications (SPA)
- 27. Two Way Data-binding When the model gets updated, the UI (View) gets updated When UI gets updated, the changes are reflected back to the model
- 28. Deep Linking Deep linking allows AngularJS to get back to the state it was depending on the URL Using the “back” button is okay! Hyperlinks won’t break things
- 29. Angular Terms - $scope The scope is responsible for detecting changes to the model and provides the execution for expressions. Also represents the application model.
- 30. Angular Terms - Directives A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute, element name, or class name. ng-app ng-bind ng-model ng-class ng-if ng-show/ng-hide ng-style ng-view ng-switch ng-repeat ng-init ng-*
- 31. Angular Terms - Filters Format and transform data. example: make text uppercase
- 32. How to make angular routes? Include angular-route.js library Inject ‘ngRoute’ to app module Inject ‘$routeProvider’ to your app as a config define your routes! app.config(['$routeProvider', function( $routeProvider ) { $routeProvider.when('/', { templateUrl: 'homepage.html', controller: 'HomeController’ }); } ]);
- 33. Yeoman Generator for Yeoman to quickly create MEAN applications Comes with Grunt, Bower.
- 34. What’s Grunt? A JavaScript-based task runner to perform repetitive tasks. Grunt helps us run the web server and compile CSS/JS. Unit testing JS linting Concatenating/minifying Image optimization Replace scripts in html files SASS
- 35. What’s Bower? Package manager for anything you need to build your frontend Bower install <package> -- save Bower manages front-end packages and tracks them in bower.js file
- 37. Deploy
Editor's Notes
- #12: How it works under-the-hood is pretty interesting. Compared to traditional web-serving techniques where each connection (request) spawns a new thread, taking up system RAM and eventually maxing-out at the amount of RAM available, Node.js operates on a single-thread, using non-blocking I/O calls, allowing it to support tens of thousands of concurrent connections There is, of course, the question of sharing a single thread between all clients requests, and it is a potential pitfall of writing Node.js applications. Firstly, heavy computation could choke up Node’s single thread and cause problems for all clients (more on this later) as incoming requests would be blocked until said computation was completed. Secondly, developers need to be really careful not to allow an exception bubbling up to the core (topmost) Node.js event loop, which will cause the Node.js instance to terminate (effectively crashing the program).
- #15: var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(8000, '127.0.0.1'); console.log('Server running at http://127.0.0.1:8000/');
- #16: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
- #17: var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('hello world'); }); app.listen(8001); console.info("Server started at 8001 port");
- #22: BSON is a binary representation of JSON documents. JSON everywhere! Sharding is the process of storing data records across multiple machines and approach to meeting the demands of data growth Processing and generating large data sets with a parallel, distributed algorithm on a cluster.
- #23: Typically higher data size because of the repeated field names stored Less flexibility for querying (no joins!!) No support for transactions. Some atomic operations are supported.
- #25: Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.