SlideShare a Scribd company logo
1 of 53
It’s time to get
After the
About Jeff Fox (@jfox015)
Assoc.Dir.,DigitalExperienceTechLead
StarwoodHotelsandResorts
• 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
Agenda
•Quickie LAMP Review
•Four Components of the MEAN stack
(and a fifth bonus item too)
•Wrap-up (with use cases)
•Questions
•Shatner
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
LAMP is popular
Some popular sites using PHP:
LAMP is popular
Wordpress 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]
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.
NODE JS
About…
About NodeJS
“Node's goal is to provide an easy
way to build scalable network
programs.”
-- nodejs.org
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
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)
Event Driven Example
Node in the Wild
How 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
Node Pros and Cons
Pros
Fast – Execution speed
Faster to market –
development speed
Less lines of code
Great community
Proven with high volume
systems
Most suited for
networking, I/O
intensive applications
Cons
Writing a large business
logic centric system is
cumbersome
Callback hell
Exception handling is
not straight forward
Writing event driven
code is complex
compared to
synchronous code
Source: NodeJS - Server Side JS
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
EXPRESS
About…
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
A basic Express app
Express Middleware
Middleware 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.
Express Middleware
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
Express Routing
• Handles HTTP and RESTful calls over HTTP
• Can direct to Middleware, MVC controllers, use templates or
return files
JADE TEMPLATES
About…
Soon to be re-
released as PUG
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
Jade Example
Jade vs other Node templates
Jade 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
MONGODB
About…
Not that Mongo
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 relational
connections, search
an API
[1] http://db-engines.com/en/ranking
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
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
Mongo and Relational DB
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)
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
ANGULARJS
About…
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
Anatomy of Angular 1.x
Anatomy of an Angular 1.x App
Index
html
App.js
Angular
BootstrapJquery
Plugins
CSS
CSS
CSS
CSS
HTML
Partial
REST API
HTML
Partial
HTML
Partial
$http
Controller
Routing
Controller Controller
ServicesServicesServices/
Providers
Directives
Filters
Angular Module
$rootScopeJquery
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
Anatomy of an Angular 2 App
Angular 1 vs 2 Components
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
$scope no more
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)
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
WRAP UP
Tying it all together
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
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
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!
QUESTIONS?
Anyone? Bueller?!?
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
Connect with or stalk me
(Entirelyuptoyou)
•Web Site: jfox015.com
•Twitter: @jfox015
•Github: Github.com/jfox015
•Slideshare: Slideshare.net/jfox015
•LinkedIn: Linkedin.com/in/jfox015
Thank you!

More Related Content

What's hot

Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
KMS Technology
 

What's hot (20)

Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?
 
Алексей Волков "Введение в React Native"
Алексей Волков "Введение в React Native"Алексей Волков "Введение в React Native"
Алексей Волков "Введение в React Native"
 
React Native
React NativeReact Native
React Native
 
Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic Framework
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Ionic Framework
Ionic FrameworkIonic Framework
Ionic Framework
 
Building Cross Platform Mobile Apps
Building Cross Platform Mobile AppsBuilding Cross Platform Mobile Apps
Building Cross Platform Mobile Apps
 
React native-meetup-talk
React native-meetup-talkReact native-meetup-talk
React native-meetup-talk
 
Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript Building an Ionic hybrid mobile app with TypeScript
Building an Ionic hybrid mobile app with TypeScript
 
Nativescript
NativescriptNativescript
Nativescript
 
Introduction to React Native
Introduction to React NativeIntroduction to React Native
Introduction to React Native
 
React.js and Flux in details
React.js and Flux in detailsReact.js and Flux in details
React.js and Flux in details
 
Introduction to Ionic framework
Introduction to Ionic frameworkIntroduction to Ionic framework
Introduction to Ionic framework
 
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
 
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
 
Testing Mobile JavaScript (Fall 2010
Testing Mobile JavaScript (Fall 2010Testing Mobile JavaScript (Fall 2010
Testing Mobile JavaScript (Fall 2010
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 
Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
 
React native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile AppsReact native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile Apps
 
A Minimalist’s Attempt at Building a Distributed Application
A Minimalist’s Attempt at Building a Distributed ApplicationA Minimalist’s Attempt at Building a Distributed Application
A Minimalist’s Attempt at Building a Distributed Application
 

Viewers also liked

Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia
 

Viewers also liked (10)

Desbancando mitos sobre PHP e o futuro da linguagem
Desbancando mitos sobre PHP e o futuro da linguagemDesbancando mitos sobre PHP e o futuro da linguagem
Desbancando mitos sobre PHP e o futuro da linguagem
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
 
Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Building an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stackBuilding an E-commerce website in MEAN stack
Building an E-commerce website in MEAN stack
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
Starting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN StackStarting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN Stack
 
Mean full stack development
Mean full stack developmentMean full stack development
Mean full stack development
 
เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น
เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้นเรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น
เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น
 
The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014The MEAN stack - SoCalCodeCamp - june 29th 2014
The MEAN stack - SoCalCodeCamp - june 29th 2014
 

Similar to After the LAMP, it's time to get MEAN

Web technologies lesson 1
Web technologies   lesson 1Web technologies   lesson 1
Web technologies lesson 1
nhepner
 
web development with mern stack in power point
web development with mern stack in power pointweb development with mern stack in power point
web development with mern stack in power point
RAMKUMARRIT20
 
Final year presentation topicssssss in 1
Final year presentation topicssssss in 1Final year presentation topicssssss in 1
Final year presentation topicssssss in 1
RAMKUMARRIT20
 
"Python web development combines the simplicity of the language with powerful...
"Python web development combines the simplicity of the language with powerful..."Python web development combines the simplicity of the language with powerful...
"Python web development combines the simplicity of the language with powerful...
softwaretrainer2elys
 

Similar to After the LAMP, it's time to get MEAN (20)

Be faster then rabbits
Be faster then rabbitsBe faster then rabbits
Be faster then rabbits
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 
Node.js
Node.jsNode.js
Node.js
 
Web Applications Development with MEAN Stack
Web Applications Development with MEAN StackWeb Applications Development with MEAN Stack
Web Applications Development with MEAN Stack
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
 
Web technologies lesson 1
Web technologies   lesson 1Web technologies   lesson 1
Web technologies lesson 1
 
Top 10 frameworks of node js
Top 10 frameworks of node jsTop 10 frameworks of node js
Top 10 frameworks of node js
 
Beginners Node.js
Beginners Node.jsBeginners Node.js
Beginners Node.js
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
 
Introduction to MERN Stack
Introduction to MERN StackIntroduction to MERN Stack
Introduction to MERN Stack
 
web development with mern stack in power point
web development with mern stack in power pointweb development with mern stack in power point
web development with mern stack in power point
 
Final year presentation topicssssss in 1
Final year presentation topicssssss in 1Final year presentation topicssssss in 1
Final year presentation topicssssss in 1
 
"Python web development combines the simplicity of the language with powerful...
"Python web development combines the simplicity of the language with powerful..."Python web development combines the simplicity of the language with powerful...
"Python web development combines the simplicity of the language with powerful...
 
Cloud patterns
Cloud patternsCloud patterns
Cloud patterns
 
Meanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore ChandraMeanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore Chandra
 
Introduction To Web Development & The New Digital Workplace
Introduction To Web Development & The New Digital WorkplaceIntroduction To Web Development & The New Digital Workplace
Introduction To Web Development & The New Digital Workplace
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
 
Node.js In The Enterprise - A Primer
Node.js In The Enterprise - A PrimerNode.js In The Enterprise - A Primer
Node.js In The Enterprise - A Primer
 
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
8 Node.js Frameworks Every Developer Should Know [UPDATED].pptx
 
recenttrendtechnology-2112N18132657.pptx
recenttrendtechnology-2112N18132657.pptxrecenttrendtechnology-2112N18132657.pptx
recenttrendtechnology-2112N18132657.pptx
 

Recently uploaded

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 

Recently uploaded (20)

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 

After the LAMP, it's time to get MEAN

  • 1. It’s time to get After the
  • 2. About Jeff Fox (@jfox015) Assoc.Dir.,DigitalExperienceTechLead StarwoodHotelsandResorts • 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
  • 3. Agenda •Quickie LAMP Review •Four Components of the MEAN stack (and a fifth bonus item too) •Wrap-up (with use cases) •Questions •Shatner
  • 4. 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
  • 5. LAMP is popular Some popular sites using PHP:
  • 6. LAMP is popular Wordpress 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]
  • 7. 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.
  • 9. About NodeJS “Node's goal is to provide an easy way to build scalable network programs.” -- nodejs.org
  • 10. 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
  • 11. 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)
  • 13. Node in the Wild How 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
  • 14. Node Pros and Cons Pros Fast – Execution speed Faster to market – development speed Less lines of code Great community Proven with high volume systems Most suited for networking, I/O intensive applications Cons Writing a large business logic centric system is cumbersome Callback hell Exception handling is not straight forward Writing event driven code is complex compared to synchronous code Source: NodeJS - Server Side JS
  • 15. 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
  • 17. 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
  • 19. Express Middleware Middleware 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.
  • 21. 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
  • 22. Express Routing • Handles HTTP and RESTful calls over HTTP • Can direct to Middleware, MVC controllers, use templates or return files
  • 23. JADE TEMPLATES About… Soon to be re- released as PUG
  • 24. 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
  • 26. Jade vs other Node templates Jade 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
  • 29. 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 relational connections, search an API [1] http://db-engines.com/en/ranking
  • 30. 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
  • 31. 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
  • 33. 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)
  • 34. 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
  • 36. 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
  • 38. Anatomy of an Angular 1.x App Index html App.js Angular BootstrapJquery Plugins CSS CSS CSS CSS HTML Partial REST API HTML Partial HTML Partial $http Controller Routing Controller Controller ServicesServicesServices/ Providers Directives Filters Angular Module $rootScopeJquery
  • 39. 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
  • 40. Anatomy of an Angular 2 App
  • 41. Angular 1 vs 2 Components
  • 42. 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
  • 44. 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)
  • 45. 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
  • 46. WRAP UP Tying it all together
  • 47. 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
  • 48. 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
  • 49. 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!
  • 51. 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
  • 52. Connect with or stalk me (Entirelyuptoyou) •Web Site: jfox015.com •Twitter: @jfox015 •Github: Github.com/jfox015 •Slideshare: Slideshare.net/jfox015 •LinkedIn: Linkedin.com/in/jfox015