The MEAN stack allows you to build fast, responsive, and maintainable full-stack websites using JavaScript. The stack uses four innovative frameworks: MongoDB for rapid data access, Express for simplified web development, Angular for componentized and fluid UI, and Node for speed.
Not sure if the MEAN stack is for you? Then come to this free warm-up session. We give you a quick tour of all of the pieces of the stack. How to get you machine ready. And show you what it is like to build a site using it.
This session is for both front and backend developers. We'll show you how JavaScript, the world's most ubiquitous language, can help you to master the web.
2. Troy Miles
• Troy Miles aka the RocknCoder
• Over 37 years of programming
experience
• Speaker and author
• bit.ly/rc-jquerybook
• rockncoder@gmail.com
• @therockncoder
• Now a lynda.com Author!
3. Build Mobile Apps!
• Develop mobile apps with
Ionic and AngularJS
• Learn the Ionic CLI
• Fetch data via ajax
• Deploy your app to Android &
iOS
• bit.ly/ionicvideo
4. Affordable JavaScript Weekend
Workshops @PeopleSpace
• MEAN Stack / Jan 28 + 29
Create Full Stack Web Apps in JavaScript
• Intro to React / Feb 18 + 19
Deep dive into the Super Popular Library for Build
UIs
• Angular 2 / Mar 11 + 12
A Deep Dive into the Latest Version of the Popular
Front End Framework by Google
5. 20% off 24 Hours Only
code: ROCKNCODER20
Expires 11/30/2016
meanstackweekend.eventbrite.com
6. Tonight’s Agenda
• What is the MEAN Stack?
• Heroku
• MongoDB
• NodeJS + Express
• Angular 2
• Some code
7. What is the MEAN Stack?
• MEAN is a free and open-source JavaScript
software stack for building dynamic web sites and
web applications.
• Term coined by Valeri Karpov
8. MongoDB
• MongoDB is an open-source, document database
designed for ease of development and scaling.
• v3.2
• Initial release - 2009
• https://www.mongodb.org/
11. NodeJS
• Node.js® is a platform built on Chrome's V8
JavaScript runtime for easily building fast, scalable
network applications.
• v7.2.0
• https://nodejs.org/
12. Git + GitHub
• Free and open source distributed version control
system
• v2.8
• https://git-scm.com/
• https://github.com/
13. Benefits of the MEAN Stack
• Isomorphic JavaScript
• Open Source / Community Driven
• Performance
• Low Cost
14. Isomorphic JavaScript
• One language all the way thru
• Client/Server JavaScript
• JSON as the data transport format
• BSON as the data storage format
• JavaScript to control Mongo DB
15. Why is JavaScript Beautiful?
• It is a Functional Language - Closer to Lisp and
Scheme than Java or C
• First Class Functions
• Dynamic Objects
• Loose Typing
• and more...
17. How to use ES6 today?
• Use only the latest browsers
• Use a transpiler: Babel, Traceur, Closure,
TypeScript
• Use Node.js
• https://kangax.github.io/compat-table/es6/
22. Top DB Engines
1. Oracle
2. MySQL
3. MS SQL Server
4. MongoDB
5. PostgreSQL
6. DB2
7. MS Access
8. Cassandra
9. Redis
10.SQLite
23. Who Uses It?
• Craigslist
• eBay
• Foursquare
• SourceForge
• Viacom
• Expedia
• LinkedIn
• Medtronic
• eHarmony
• CERN
• and more
24. When to Use Mongo?
• Document Database
• High Performance
• High Availability
• Easy Scalability
• Geospatial Data
25. What is a Document?
• An ordered set of keys and values
• Like JavaScript objects
• No duplicate keys allowed
• Type and case sensitive
• Field order is not important nor guaranteed
34. Angular 2 main concepts
• Component
• Data binding
• Service
• Directive
• Dependency injection
• Module
35. Metadata
• Metadata is extra information which gives angular
more info
• @Component tells angular the class is a
component
• @Directive tells angular the class is a directive
36. Component
• A class with component metadata
• Responsible for a piece of the screen referred to as
view.
• Template is a form HTML that tells angular how to
render the component.
• Metadata tells Angular how to process a class
38. Template/View
• Is a way to describe a view using HTML
• Templates can be included with the component
• Or as a URL link to an HTML file
• Best practice is to use an HTML file
39. Data Binding
C/D Attribute Binding type
—> {{ value }} one-way
—> [property] = “value” property
<— (event) = “handler” event
<—> [(ng-model)] = “property” two-way
40. Service
• “Substitutable objects that are wired together using
dependency injection (DI)”
• Used to share code across an app
• Lazily instantiated
• Angular has no “Service” defined type
41. Directive
• A class with directive metadata
• Two kinds: attribute & structural
• Attribute directives alter the look or behavior of an
existing element
• Structural directives alter the layout by adding,
removing, and replacing elements in the DOM
• A component is a directive with a view
44. Dependency Injection
• A way to supply a new instance of a class with the
fully-formed dependencies it needs
• Most dependencies are services
• Angular know which services a components by
looking at the types of its constructor parameters
• Services are injected by an Injector which uses a
Provider to create the service
45. Module
• Modules are optional but a best practice
• export tells TypeScript that the resource is a
module available for other modules
• import tells TypeScript the resource in a module
• Angular ships a collection library modules