420 likes | 462 Views
This course introduces web developers to MEAN.JS, a free, open-source, full-stack solution for MEAN applications.
E N D
Agenda • Introduction • What isLAMP? • Requirements for a modernweb • What is MEAN? • What isMongoDB? • What isExpress? • What is AngularJS? • What isNode.JS? • Disadvantages of MEANSTACK • Conclusion • AnyQuestions?
Introduction • MEANis an opinionated fullstackJavaScript andacceleratesweb framework which simplifies • applicationdevelopment. • MEAN represents a major shift in architecture and mental models — from relational databases to NoSQL and from server-side Model-View-Controller to client-side, single-pageapplications. • MEANis an acronymforMongoDB,Express JS, Angular JSand Node.Js.
What is LAMP? • Linux • Apache • MySQL • PHP • LAMP stack is a popular open source web platformcommonly • used to run dynamic web sites andservers. • It includes Linux, Apache, MySQL, and PHP/Python/Perl andis considered by many the platform of choice for development and deployment of high performance web applications which require a solid and reliablefoundation.
Problems withLAMP? • Apache is not the fastest web serveraround • It’s hard to write good-to-read, reusable and fastPHP code • Frontend works with other languages thanthe backend • Too many conversions (XML to PHP to HTML, model toSQL) • There is no separated server-side and client-side development
Requirementsfora modernweb? • Customers want fast web sites/fast responsetimes • No pagereloads • Enterprises want to govirtual • One box + Several virtual images => SharedHardware • System with minimal memory footprint/overheadneeded • As many concurrent requests aspossible • Only load resources when needed (conditional loading) • Mobile/ResponsiveUIs
What is MEANStack? MEAN Stack is a full-stack JavaScript solution that helps you build fast, robust and maintainable production web applications using MongoDB, Express, AngularJS, andNode.js.
100% free , 100% OpenSource • 100% Java Script (+JSON andHTML) • 100% WebStandards • ConsistentModelsfromthebackendtothefrontendandback • Use a uniform language throughout yourstack • JavaScript (the language of theweb) • JSON (the data format of theweb) • No conversion needed for thedatabase • Use JavaScript with a great framework (compared tojQuery) • Allowstostartwiththecompletefrontenddevelopmentfirst • Very low memoryfootprint/overhead
MongoDB MongoDB is a cross-platform document-oriented database - classified as a NoSQL database which eschews the traditional table-based relationaldatabase structure in favour of JSON-like documents with dynamicschemas.
What isMongoDB • Developed by software company 10gen (now MongoDBInc.) • Fast NoSQL schemaless database written inC++ • Document-OrientedStorage • JSON-style documents with dynamicschemas • Full Index Support • Index on anyattribute • Replication & HighAvailability • Auto-Sharding • Scale horizontally without compromisingfunctionality
Example >db.mycol.insert({ _id: ObjectId(7df78ad8902c), title: 'MongoDB Overview', description: 'MongoDB is no sql database', by: 'tutorials point', url: 'http://www.tutorialspoint. com', tags:['mongodb', 'database', 'NoSQL'], likes: 100})
AdvantagesAnd Disadvantages • Advantages • Lighteningfast. • Autosharding. • Replication is veryeasy. • You can perform rich queries, can create on thefly indexes with a singlecommand. • Disadvantages • Veryunreliable • Indexes take up a lot ofRAM. • oB-tree indexes
ExpressJS Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid webapplications.
What is Express? • Node JS based webframework • Based on connectmiddleware • Makes usage of Node JS eveneasier • Easy to implement RESTAPI • Easy to implement sessionmanagement • Supports several template rendering engines (Jade,EJS) • oSupports partials -> so you can split your HTML in fragments • Asynchronous • Implements MVCpattern
Express – What isit? • Allowstosetupmiddlewarestorespond toHTTP Requests. • Defines a routing table which is used to perform different action based on HTTP Method andURL. • Allows to dynamically render HTML Pages based on passing arguments totemplates.
Example var express = require('express'); var app =express(); app.get('/', function (req,res) { res.send('Hello World!'); }); app.listen(3000, function() { console.log('Example app listening on port3000!'); });
AdvantagesAnd Disadvantages • Advantages • Regardless of complexity, there should be veryfew roadblocks if you know JavaScriptwell. • Supports concurrencywell. • Fast and the performance is comparable withGolang micro frameworks and Elixir'sPhoenix. • Disadvantages • There is no built in error handlingmethods.
What isAngular? • AngularJS is an open-source JavaScript framework, maintained by Google, that assistswith • running single-pageapplications. • Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testingeasier.
AngularJS • JavaScript framework developed byGoogle • Based on Model-View-* Pattern(client-side) • MVC/MVVM • Bi-Directional DataBinding • Declarative Programming (focus on what – not thehow!) • Directives are integrated in HTMLdirectly • DOM Manipulations completelyhidden • Great for Frontenddevelopment • Great for SPA (Single PageApplications) • Great for mobileapps • Very modular andextensible • Makes testing anease • Great Browser support (>IE8) • Welldocumented
AngularJsdirectives • ng-app • Declares an element as a root element of the application allowing behaviour to be modified through customHTML tags. • ng-bind • Automatically changes the text of a HTML element tothe value of a givenexpression. • ng-model • Similar to ng-bind, but allows two-way data bindingbetween the view and thescope. • ng-controller • Specifies a JavaScript controller class that evaluates HTML expressions.
AngularJsdirectives • ng-repeat • Instantiate an element once per item from acollection. • ng-show &ng-hide • Conditionally show or hide an element, depending onthe value of a booleanexpression. • ng-switch • Conditionally instantiate one template from a set ofchoices, depending on the value of a selectionexpression. • ng-view • The base directive responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
Advantagesand Disadvantages • Advantages • Fastdevelopment • Makes developing SPAeasy • Awesomeperformance • Make apps scalable Disadvantages • Good for IO driven apps only (notgames)
NodeJS • Node.js is a platform built on Chrome'sJavaScript runtime for easily building fast, scalable network applications. • Node.js uses an event-driven, non-blocking I/O model that makes it lightweight andefficient, • perfect for data-intensive real-time applicationsthat run across distributeddevices.
What is Node JS? • Written inC/C++ • Can also use Clibraries • Built on top of Chrome’s V8 engine – sopure JavaScript! • Therefore based on latest ECMAScript5 • Framework to build asynchronous I/Oapplications • Single Threaded – no concurrency bugs – no deadlocks! • Notinternallythough–butwe’llgettothat • One node process = one CPUCore
What isNodeJS continue • Can easily handle 10k concurrentconnections • Doesn’t have any problems withconcurrency • Doesn’t create much overhead(CPU/Memory) • Easily scalable (just create acluster) • Very fast (well, it’s mostly Ccode) • Installation and first server start within less than5 minutes • REST-API that replies to GET requests can be implemented in less than 5 minutes aswell! • It’s not a webframework!
Blocking I/Ovs. Non-BlockingI/O
Example var http = require('http'); http.createServer(function (req,res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('HelloWorld\n'); }).listen(80); console.log('Server listening on port80');
Advantageand Disadvantage • Advantages • Node.js is fast • The ever-growingNPM • Real-time webapps • Productivity • Disadvantages • JavaScript's semantics andculture
Disadvantages ofmean Stack • There are still no general JS codingguidelines • MongoDBis not as robust as an SQLserver • oThis security is what they sacrifice to gain speed • Once you’ve created the first site withthis • technology, it’s hard to go back tothe old approach
Conclusion In the end, Mean is a full stack, Javascript, web application framework. If you require a fast, easy, simple way to create a modern, responsive, dynamic web site then MEANwould be a greatsolution. PPT Source : Krishna Prasad
References • http://www.mean.io • https://angularjs.org • http://mongodb.org • https://nodejs.org • http://expressjs.com • http://slideshare.net