Building Modern Web Apps with MEAN Stack

  • View

  • Download

Embed Size (px)


Building Modern Web Apps with MEAN StackBy Suresh Patidar




Who am I?{ "name":"Suresh Patidar", "before":"Worked with ClearTrail Technologies and L&T", "today":"UI Architect @ Calsoft", "Geek":[ "Writes code for Frontend and Backend", "Works on UI/UX aspect", "Create Application Architecture and Design" ], "languages-and-frameworks":[ "JavaScript, NodeJS, AngularJS, Backbone, JQuery", "HTML, CSS, SASS, LESS, Bootstrap etc.", "Java, .NET (C#), Spring MVC", "Oracle, MySql, MongoDB" ], "specialized-in":[ "Application Architecture & Design", "MEAN Stack/Full Stack Application Development", "Web development/Architecture", "Mobile Development" ]}

#AgendaStructure of web applicationThe requirements for a Modern Web AppWhat is MEAN stack?Who uses MEAN stack?How it is different from LAMP stack?The MEAN Stack Architecture and ComponentsSo why Go MEAN?Value of the MEAN stackMEAN SecurityWhats bad about MEAN approach?Future of MEAN stackAny Questions?

#Structure of Web Application

#Web Application

#Frontend vs. Backend

#Requirements for a modern web appCustomers want fast web sites/fast response timeNo page reloadsEnterprises want to go virtualOne box + Several Virtual Images = Shared HardwareSystems with minimal memory footprint/overhead neededAs many concurrent requests as possibleOnly load resources when needed (conditional loading)Most of the data must come from a slim REST-APIMobile friendly/Responsive UIsAutomated build for backend AND frontendIncluding check for coding conventions, testing,Integration in companys continuous integration platform

#Front end vs. Back end

Introduction to theMEAN Stack

#What is MEAN stack?MEAN is a fullstack JavaScript platform for modern web applications

#Who uses MEAN stack?

and many more

#How it is different from LAMP stack?Building web application with a LAMP approachServer-side language: PHP, Perl, JSP, ASP Server-side container: Tomcat, Jboss, Jetty, Apache, Server-side templating: HAML, Moustache, Server-side MVC framework: Spring, Struts, Client-side JavaScript: jQuery, AngularJS, BackboneJS> 5 different technologies/languages Building web applications with a MEAN approachJavaScript and JSONThats it!

#The MEAN architecture

#AngularJSOur apps entire frontend

Open source, maintained by GoogleClient Side MVC (MVVM) frameworkExcellent data bindingsVery modular and extensibleGreat browser support (> IE8)Well documentedEasy to test

#Node.jsLightweight web server framework

Released in 2009 by Ryan DahiWritten in C/C++Built on Google Chromes V8 JavaScript engineExtremely lightweight and efficientWhat JavaScript has done for the web browser, Node.js is doing for backend serverDoes module loading and Asynchronous IOSingle threaded, One node process per CPUEasily scalable (just create a cluster)Great community and well maintained

#ExpressCreate our routes and our API

A simple, minimal, robust and flexible web application framework for Node.js Gives everything we would expect to build a modern web serverAbstracts away a lot of low level logic (e.g. for HTTP requests, SSL etc.)Helps organize your Node app into an MVC structureEasy to implement REST API and session managementMiddleware, routing, templating, static-files, cookies, mime-types and much much more

#MongoDBOur data store

A simple and scalable document based top NoSQL DatabaseOpen Source, maintained by MongoDBJSON like syntax and model persistenceKey-value storesReplication and High-AvailabilityFlexible Schemas, Full Index support, Query Selectors, Sharding and much much more

#MEAN Stack Language and Format Usage

#MEAN Stack Concepts

#Advantages of MEAN Stack over conventional Technology Stack

#MEAN Stack (Full Stack) Development Team

#So why Go MEAN?It is 100% free, Open Source and Web StandardsJavaScript all the way downConsistent models across stack (backend to frontend and back)Consistent best practices across stackUse a uniform language throughout your stackJavaScript (the language of the web)JSON (the data format of the web)No conversion needed for the databaseVery low memory footprint/overheadLeverage JavaScripts popularityHuge community

#Value of MEAN stackUniversal end-to-end workflow

Focus on speed of development

Flexible pieces

#MEAN SecurityIts as insecure as you code it Its JavaScript so you have to be carefulAlways use strict modeAlways declare variablesAlways throw all errorsAlways handle all callbacks (e.g. Success AND Error)Use patterns for visibility (e.g. Module pattern)Do static code analysis (JSHint/JSLint)Always encode untrusted dataUse Angular sanitizer ($sanitize) to sanitize an HTML string by stripping all potentially dangerous tokensAnd of course never run any application as root! Test, Test and Test

#Whats bad about this MEAN approachFor those who dont like JavaScript Its going to be killing you There is still no general JS coding guidelinesSPA need a new way of thinkingThe browser is your platformMongoDB is not as robust as an SQL Server isThis security is what they sacrifice to gain speedWe need to take care of rollbacks our self (2-Phase-Commit)ACID -> Possible but part of the driver/client applicationIts hard to find specialists that are no hipstersHave the big picture/architecture for enterprise in mindIt make sense to also have a look at Grunt, Yeoman and Bower in order to create good developer experienceOnce you have created the first application with this technology, its hard to go back to the old approach

#Future of MEAN Stack

#Future of MEAN Stack

Checkout for latest survey results