MEAN Stack – Mongo DB, Express JS, Vue JS and Node JS

Duration

MEAN Stack – Mongo DB, Express JS, Vue JS and Node JS

5 days

Overview

MEAN is a full-stack JavaScript solution that helps build fast, robust, and maintainable production web applications using MongoDB, Express, Vue.js, and Node.js. MEAN helps to getting started and avoid useless grunt work and common pitfalls, while keeping the application organized. MongoDB is the leading NoSQL database, empowering businesses to be more agile and scalable. 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 web applications. Vue.js lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.

When the MEAN Stack was first announced, JavaScript developers could not understand it in detail. MEAN is an acronym for MongoDB, Express.js and Vue.js, all which function upon Node.js. This is a platform that allows one to build applications using code as little as possible while taking a solid view of all the components that comprises it. Moreover, writing the complete code from client to server using only JavaScript is like a dream come true for beginners who want working apps in a short period of time.

Prerequisites

Before attending this course, students should have general programming experience and knowledge of HTML, CSS and JavaScript.

Course Topics

Introduction

• Overview of ES5
• Installing Node and NPM
• JavaScript Basic Syntax
• Detailing on ES5 problems
• JavaScript project creation using NPM
• Introduction to TypeScript
• TypeScript Environment Setup
• Basic Syntax
• Types, Variables and Operators
• Decision Making and Loops
• JavaScript Functions
• Lambda Expressions
• Introduction to TYPESCRIPT

Overview

• Environment Setup
• Basic Syntax
• Types, Variables and Operators
• Decision Making and Loops
• Functions
• Lambda Expressions
• Generics
• Enums, Number and Strings
• Arrays, Tuples & Union
• Interface, Classes and Objects
• Namespaces
• Modules
• Ambients, Decorators & Mixins
• Introduction to Vue.js
• What is Vue.js?
• Why use Vue.js?
• Vue.js compared to other frameworks (React, Angular)
• Installing Node.js and npm
• Setting up a Vue.js project using Vue CLI
• Project structure and organization
• Understanding the Vue instance
• Creating a Vue instance
• The `el` property and mounting a Vue Instance
• Data binding with `data` property
• Interpolation and expressions in templates
• Vue Templates
• Vue template syntax overview
• Introduction to Directives
• v-bind for attribute binding
• v-model for two-way binding
• v-if, v-else, v-show for conditional rendering
• v-for for rendering lists
• v-bind:class for binding classes dynamically
• v-bind:style for conditional styling
• Best practices for clean and maintainable templates
• Template comments and whitespace control

Day 2

• Handling User Input
• Event handling in Vue
• v-on for event handling
• v-model for form input binding
• Modifiers for event handling
• Computed Properties and Watchers
• Creating computed properties
• Benefits of computed properties over methods
• Watching for changes with watchers
• Vue methods and Lifecycle Hooks
• Defining methods in Vue
• Lifecycle hooks and their execution order
• Common use cases for lifecycle hooks
• Handling Forms and Form Validation
• Form submission in Vue.js
• Form validation techniques
• Using third party libraries for form validation
• Vue Components
• Introduction to components
• Creating and registering components
• Component communication with props
• Emitting custom events from components
• Understanding scoped CSS
• Styling Vue components with scoped CSS
• Styling child components without leakage
• Dynamic components
• Switching between components dynamically
• Dynamic component loading
• Navigation in Vue Router
• Using <router-link> for navigation
• Programmatic navigation with $router
• Navigation options and route objects
• Creating nested routes
• Setting up layouts for nested views
• Nested route components and navigation
• Dynamic route parameters
• Working with query parameters
• beforeEach guard for global navigation control
• Summary
• RxJS and Observables
• What is an Observable?
• Observable Operators
• Creating Observables Using Static Operators
• What is an Observer?
• Observer Example
• Subject
• Subject Example
• EventEmitter or Observable
• HTTP Client
• The HTTP Client
• Service Using Http Client
• Service Imports
• The Observable object type
• Making a Basic HTTP GET Call
• Using the Service in a Component
• Importing Observable Methods
• Enhancing the Service with .map() and .catch()
• Using toPromise()
• GET Request with Options
• POST Request
• Reading HTTP Response Headers
• Summary

Introduction

• Foundation
• The Node.js framework
• Advantages of Node JS
• Installing Node.js
• Using Node.js to execute scripts
• Traditional Web Server Model
• Node.js Process Model
• Node Projects
• The Node Package Manager
• Creating a project
• The package.json configuration file
• Installing Packages Global
• Installing Packages Locally
• Adding dependency in package.json
• Installing packages globally
• Updating packages
• Scripting through package.json
• Automating tasks with Gulp
• HTTP
• The HTTP protocol
• Creating web server
• Handling http requests
• Sending requests
• Building an HTTP server
• Rendering a response
• Processing query strings
• Using Representational State Transfer
• Node JS Console
• Configuring TLS
• File System
• Synchronous vs. asynchronous I/O
• Path and directory operations
• __dirname and __filename
• Synchronous file reads
• Synchronous file writes
• Asynchronous file reads
• Asynchronous file writes
• Buffers, Streams, and Events
• Using buffers for binary data
• Flowing vs. non-flowing streams
• Streaming I/O from files and other sources
• Processing streams asynchronously
• Configuring event handlers
• Modules and Unit Testing
• Modularization
• The CommonJS and RequireJS specifications
• Defining modules with exports
• Modules are singletons
• Creating a package
• Module scope and construction
• Unit testing frameworks
• What to test and how to test it
• Building unit tests with Mocha

Day 4

• Events
• When to use Event Emitters
• Binding Functions to Events
• Event Requests
• Event Listening
• What are callbacks
• Callback-last
• Error-first
• Callbacks: Error-first
• Errors in Event Emitters
• Uncaught Exceptions
• Using Domains
• Express
• The model-view-controller pattern
• Defining Jade and Handlebars templates
• Building a front-end controller
• Defining routes
• Creating actions
• Configuring Express to use Handlebars
• Using REST
• Reading POST data
• Building Handlebars helpers
• Adding middleware
• Data Sources
• How Node.js connects to databases
• Configuration and platform setup
• RDBMS databases and NoSQL databases
• Connecting to RDBMS
• Connecting to NoSQL databases
• Performing CRUD operations
• Building client requests to web services

Day 5

• Introduction to MongoDB
• Overview of MongoDB
• MongoDB fundamentals
• Architecture of MongoDB
• Database
• Collection
• Document
• Advantages of MongoDB
• Why use MongoDB
• When to use MongoDB
• Install MongoDB
• Data Modelling
• Create Database
• Drop Database
• Create Collection
• Drop Collection
• Data Types
• Insert Document
• Query Document
• Update Document
• Delete Document
• Queries
• Field equality tests
• Operators available
• Projections
• Limiting Records
• Paging
• Sorting Records
• Simple Updates and Deletes
• Field updates
• Field insertions and removal
• Document deletion
• Existential field values
• Indexing and query optimization
• Indexing theory
• Indexing in practice
• Query optimization
• More Complex Types of Queries
• Existential field values
• Aggregations and groups
• Aggregations and groups in hierarchical data

Programme scope, delivery arrangements and suitability are confirmed during enquiry.