Download - After the LAMP, it's time to get MEAN
![Page 1: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/1.jpg)
It’s time to get
After the
![Page 2: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/2.jpg)
About Jeff Fox (@jfox015)Assoc. Dir., Digital Experience Tech LeadStarwood Hotels and Resorts
• Nineteen year web development veteran• (Almost) entirely self-taught in programming, web
and related technologies• Front end specialist with full stack skills/experience,
main core capability used to be Flash • Background in Graphic Design and art, music
production & engineering and “entertainment services”• Experience working for fortune 100 companies down
to creative agencies with as few as 10 people
![Page 3: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/3.jpg)
Agenda
•Quickie LAMP Review• Four Components of the MEAN stack
(and a fifth bonus item too)•Wrap-up (with use cases)•Questions• Shatner
![Page 4: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/4.jpg)
We all know
LAMP is a combination of four of the most popular open source technologies that form one of the most popular and ubiquitous platform stacks used on the web. It’s estimated that 82% of web sites run on some version of PHP [1]
[1] Source: http://www.w3techs.com/technologies/details/pl-php/all/all
![Page 5: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/5.jpg)
LAMP is popularSome popular sites using PHP:
![Page 6: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/6.jpg)
LAMP is popularWordpress hosted blogs and sites alone account for some 4.5% of all web sites [1]
[1] http://www.codeinwp.com/blog/mesmerizing-wordpress-stats/[2] http://expandedramblings.com/index.php/wordpress-statistics/
[3] https://www.hostt.com/wordpress-stats-for-2015/[4] https://managewp.com/14-surprising-statistics-about-wordpress-usage
• 74.6 Million Sites Depend on WordPress [2]
• 22% of New U.S. Registered Domains Run on WordPress [3]
• WordPress.com Gets More Unique US Visitors (126M) per month Than Amazon (96M) [4]
![Page 7: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/7.jpg)
What is M.E.A.N?Mean is a combination of four technologies that also form a single platform stack. The common element between them is JavaScript.
![Page 8: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/8.jpg)
NODE JSAbout…
![Page 9: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/9.jpg)
About NodeJS
“Node's goal is to provide an easy way to build scalable network
programs.”
-- nodejs.org
![Page 10: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/10.jpg)
Components of NodeJs• NodeJs runs on the V-8 Engine. • The V-8 Engine is an open source JavaScript engine created
and developer by Google which also powers the Chrome browser.
• V8 compiles JavaScript to native machine code (IA-32, x86-64, ARM, or MIPS ISAs) before executing it, instead of more traditional techniques such as executing byte code or interpreting it.
• Node uses CommonJS specifications for common modular package management format
• Uses NPM (Node Package Manager) to manage dependencies
![Page 11: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/11.jpg)
How does Node work?• Node.js uses an event-driven, non-blocking I/O model, which
makes it lightweight• It makes use of event-loops via JavaScript’s callback functionality
to implement a non- blocking I/O
• While time consuming file and disk operations block script execution in PHP, Node JS commands execute in parallel, and use callbacks to signal completion or failure)
![Page 12: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/12.jpg)
Event Driven Example
![Page 13: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/13.jpg)
Node in the WildHow is Node being used?
API Servers
Mobile backends and full-stack JavaScript hybrid apps
Internet of things (IoT)
Web – HTTP servers and single page apps
![Page 14: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/14.jpg)
Node Pros and Cons
ProsFast – Execution speedFaster to market –
development speedLess lines of codeGreat communityProven with high volume
systemsMost suited for
networking, I/O intensive applications
ConsWriting a large business
logic centric system is cumbersome
Callback hellException handling is
not straight forwardWriting event driven
code is complex compared to synchronous code
Source: NodeJS - Server Side JS
![Page 15: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/15.jpg)
Node vs Java
• 20+ years development testing making a rock solid foundation
• Not as fast and Node, but absolutely a more trustworthy environment
• Well know coding and debugging support in all major IDEs
• True multi-threaded server support
• No, XML used for Ant and Maven builds for example
MATURITY
SPEED
TOOLS
THREADING
UNIFIED LANGUAGE
• Younger player (launched in 2009) with less real world battle testing
• Blazing fast execution, but sacrifices overall server safety for it
• Modern IDE tools support via add-ons for code-completion and some debugging
• Node simulated multi-threading via an event loop
• Node uses JavaScript in all aspects of the development
Source: Java vs. Node.js: An epic battle for developer mind share
![Page 16: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/16.jpg)
EXPRESSAbout…
![Page 17: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/17.jpg)
About Express
• Popular NodeJS Server framework library• Inspired by the Sinatra framework for Ruby• Minimal and flexible application design• Handles many operations through HTTP helper
utilities and the use of middleware• Easy to set up a working Express server in just
few lines of code• Supports single page, multi-page and hybrid web
applications
![Page 18: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/18.jpg)
A basic Express app
![Page 19: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/19.jpg)
Express MiddlewareMiddleware is any number of functions that are invoked by the Express.js routing layer before the final request handler is called
• Express Middleware is simply a function with three arguments• req – The HTTP Request• res – HTTP Response• next – Another Middleware to forward to after the function
completes
• Middleware is always invoked in the order added.• You can have multiple middleware for the same path.• Middleware has full access to the request and response objects.• Be mindful of middleware overriding fields of other middleware.• Middleware can be skipped by using the next function.
![Page 20: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/20.jpg)
Express Middleware
![Page 21: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/21.jpg)
Components of Express• Runs using NodeJs• App is the web application runtime• Middleware modules handle many routine operations:• Connect is a set of middleware that includes many helper
modules• logger • csrf Cross-site request forgery
protection• compress Gzip compression
basicAuth http authentication• bodyParser extensible request
body parser• json application/json parser• multipart multipart/form-data
parser• timeout request timeouts
• cookieParser cookie parser• session session management support
with bundled MemoryStore• cookieSession cookie-based session
support• methodOverride faux HTTP method
support• favicon efficient favicon server (with
default icon)• query automatic querystring parser,
populating req.query• errorHandler flexible error handler
![Page 22: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/22.jpg)
Express Routing• Handles HTTP and RESTful calls over HTTP• Can direct to Middleware, MVC controllers, use templates or
return files
![Page 23: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/23.jpg)
JADE TEMPLATESAbout…
Soon to be re-released as PUG
![Page 24: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/24.jpg)
About Jade
• High performance template engine heavily influenced by Haml and implemented with JavaScript for Node• No need to worry about closing tags• Significant white space enforces clear coding convention
between team members• Layout Inheritance• Allows for full JavaScript expressions but makes it just
awkward enough to discourage full blown logic in the views• Support for inline Markdown and CoffeeScript
Source: Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More
![Page 25: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/25.jpg)
Jade Example
![Page 26: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/26.jpg)
Jade vs other Node templatesJade Mustache Dust NunJucks EJS
No Closing Tags
Async
Layout Inheritance
Streaming
Custom tags
High Learning Curve
White Space Significance
Easy Includes/ Partials
Source: Comparing JavaScript Templating Engines: Jade, Mustache, Dust and More
![Page 27: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/27.jpg)
MONGODBAbout…
![Page 28: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/28.jpg)
Not that Mongo
![Page 29: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/29.jpg)
About MongoDB
• An open source, cross platform database• Stores data in JSON like documents with dynamic
schemas (called BSON)• Fourth most popular database system worldwide
as of Jan 2016 [1]
• A “no sql” database without relationalconnections, search an API
[1] http://db-engines.com/en/ranking
![Page 30: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/30.jpg)
Data Design Comparison
Traditional Data Design
• Static, uniform, scalar data• Data “looks” like
rectangles• Low level physical
representation
Document Data Design
• Flexible and capable of rich shapes• Based on objects
• High level business representation
![Page 31: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/31.jpg)
Advantages of No-SQL Design• Agility• Start developing without an extremely long ER (entry-
relationship) model design• Flexible for schema changes as you go without penalty• Polymorphic schema models variable structure with ease
• Scalability• Shared-nothing architecture vs centrally controlled system
(eliminates any single point of failure, allows self-healing capabilities and non-disruptive upgrades)
• Scales horizontally, linearly• Sharding and load balancing• Auto-balance ensures a balances cluster
Source: MongoDB and the Internet of Things
![Page 32: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/32.jpg)
Mongo and Relational DB
![Page 33: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/33.jpg)
Major Use Cases…
…and Major Users• Big Data (Github)• Internet of Things (Bosch)• Complex Data Management (Cushman & Wakefield)• Mobile Apps (Twitter, Foursquare)• Customer Data Management (Intuit)• Social Networking and Collaboration (Cisco, Eventbright)• Content Management (New York Times, Adobe AEM,
eBay)• Embedded (Sitecore)
![Page 34: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/34.jpg)
Oracle vs MongoDB
• Oranges• Created in 2009• Document SQL-Less Model• Supports Replication,
Horizontal scale and Sharding
• Queries using JavaScript• MIT License• Free for commercial use• JSON (with BSON)• Supported by multiple
cloud platforms
• Apples• Created in 1936• Relational Model• Supports Replication and
Horizontal scale
• Queries using SQL• Proprietary License• Large Price tag• Multiple data Types• Cloud Ready on Oracle
Cloud Platform
![Page 35: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/35.jpg)
ANGULARJSAbout…
![Page 36: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/36.jpg)
About AngularJS
• “Super heroic” framework created and developed by Google• Highly suited to single page front end web
applications• Version 1.x attempted to solve many web
application shortcomings in HTML 5 and JavaScript• Version 2.x tightly incorporates the latest
improvements in JavaScript and modular front end design methodologies
![Page 37: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/37.jpg)
Anatomy of Angular 1.x
![Page 38: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/38.jpg)
Anatomy of an Angular 1.x App
Indexhtml
App.js
Angular
BootstrapJqueryPlugins
CSSCSS
CSSCSS
HTMLPartial
REST API
HTMLPartial
HTMLPartial
$http
Controller
Routing
Controller Controller
ServicesServicesServices/Providers
Directives
Filters
Angular Module
$rootScopeJquery
![Page 39: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/39.jpg)
About Angular 2• Angular 2 went final on 9/15!• Version 2 sheds the non-standard 1.x conventions and
embraces forward looking web standards like ECMAScript 6, Web Components as well as JS supersets like TypeScript• Component based architectural style • Highly Improved routing• Carries forward the ideology of Angular 1.x though the
code will look very different• Focus on performance, transparency of Angular
“internals” Change Detection and Rendering • Angular 2 has a simplified API for injecting dependencies
into components via ES6 Modules
![Page 40: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/40.jpg)
Anatomy of an Angular 2 App
![Page 41: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/41.jpg)
Angular 1 vs 2 Components
![Page 42: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/42.jpg)
Big Changes in Angular 2
• Embraces ES6 Modules/Component Design• Goodbye $scope (we hardly knew you) and DDO• Ultra-Fast Change detection• Changes in state managed through new Zones concept instead of
“dirty checking”• Uses the new Object.observe property
• Major Routing Improvements• Uni-Directional data flow (Similar to Facebook’s React)• Angular 1.x’s popular 2-way data binding is removed• ng-model replaced by new Form Directives
• Improved Template syntax with Property and Event bindings instead of overuse of directives
![Page 43: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/43.jpg)
$scope no more
![Page 44: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/44.jpg)
One Framework, many langs• Angular 2 supports multiple variants of vanilla JavaScript
Including:• TypeScript• Dart• ES6• ES5
• TypeScript is a strongly typed superset of JavaScript currently in development at Microsoft. Angular 2 uses it after an agreement between Google and Microsoft• Pros
• Strong typed for larger codebases/teams• Cons
• Learning curve over traditional JavaScript• Must be compiled• Complicated to setup (requires definition files)
![Page 45: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/45.jpg)
So can we use it in production yet?• Angular 2 went gold YESTERDAY so yes• Consider, however, that supporting technologies like
ECMAScript 6, TypeScript and Web Components will require compilers and polyfills until native support is universally achieved
![Page 46: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/46.jpg)
WRAP UPTying it all together
![Page 47: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/47.jpg)
Summary
• The MEAN stack is comprised of four JavaScript based technologies
• It can provide a flexible and powerful web development environment to quickly build fast and scalable web apps
• Leverages a single language allowing for development using resources with a similar coding toolset
• Node is a powerful platform for real-time, I/O web applications and APIs
• Express is a flexible server platform capable of complex MVC development
• Mongo is a SQL-less document driven database technology• Angular is a front end framework that allows development of
dynamic single page web application front-ends
![Page 48: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/48.jpg)
MEAN at work• Best case scenarios for using Node:• Backend for RESTful data APIs• Streaming or real time app servers, like chat or
associate communication servers• Apps/sites with small budget and tight timelines• Internal dynamic web based tools (Call Centers,
Employee Support, Knowledge bases, etc.)• Monitoring Dashboards
• Avoid for:• Business logic centric systems (Java outperforms)• Heavy server side computation
![Page 49: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/49.jpg)
Want a more thorough look?• Take a hands on deep dive into the design of a simple
MEAN based CRUD app• Github/jfox015 – Coming soon!
![Page 50: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/50.jpg)
QUESTIONS? Anyone? Bueller?!?
![Page 51: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/51.jpg)
Recommended Resources• NodeJS - Server Side JS• Best practices for Express app structure• Express.js Middleware Demystified• How to test your MongoDB models under Node & Express• Unit Testing Express Middleware• Unit Testing Express Middleware / TDD with Express and
Mocha• Test driven Development of Web Apps in Node.Js• Node.js frameworks• Oracle vs. MongoDB• Angular 2 vs Angular 1
![Page 52: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/52.jpg)
Connect with or stalk me(Entirely up to you)
•Web Site: jfox015.com •Twitter: @jfox015•Github: Github.com/jfox015•Slideshare: Slideshare.net/jfox015•LinkedIn: Linkedin.com/in/jfox015
![Page 53: After the LAMP, it's time to get MEAN](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ee06ac1a28ab7d4a8b459d/html5/thumbnails/53.jpg)
Thank you!