1

MEAN full stack

April 3, 2015

scott lee

2

Agenda

1. New way for web application

2. What is MEAN? MongoDB

Express

AngularJS

Node.js

3. Demonstration

3

1970 - 1990

In the beginning, there was darkness and cold. Then, …

Centralized, non-distributed

terminals

mainframe

terminals

4

1990- 2000

In the 90’s, systems should be client-server

5

2000 - 2015

Enterprise applications use the

multi-tier model

6

Three ways for web

application Application server products can be separated into 3

categories:

J2EE-based solutions

Non-J2EE solutions (PHP, ColdFusion, Perl, etc.)

And the Microsoft solution (ASP/COM and now .NET with

ASP.NET, VB.NET, C#, etc.)

7

Web Server and Application

Server

Web Server

(HTTP Server)

App Server 1

App Server 2

Internet Browser

HTTP(S)

8

J2EE Application Scenarios

Multi-tier typical application

Copyrig

ht 2

002 ©

Paulo

Mers

on

9

Web Application Server Model

10

11

Web Development Trends

For 2015 And Beyond

More User Experience

Mobile First Strategy

RESTful API

Single Page Application

MVC pattern on client and server

Cloud

Java and .NET survive on larger enterprise app

Javascript and GO language are next language after

Java

12

New Stack

13

Demonstration - Setup

Install MongoDB

Install Node.js

14

MongoDB - test

Dos> mongod

Dos> mongo

use mean-demo

show collections

db.meetups.insert({ name….

show collections

db.meetups.find()

db.meetups.insert({ name…

15

Node.js

mkdir demo

cd demo

subl package.json

subl server.js

node server

16

Express.js

npm install express –save

subl server.js

mkdir client/views/index.html

node server

open browser

localhost:3000

17

AngularJS

subl index.html

server.js

client/js>subl meetups-

controller.js

node server

open browser

localhost:3000

18

AngularJS 2

List display

Add button

19

20

21

22

Demonstration – DB connection

23

Image from: http://www.creativeworkline.com/2014/05/meanio-vs-meanjs-comparison/

24

2015 - Sr Java Developer

2020 - Sr JavaScript Developer

25

Why MEAN

JavaScript everywhere

One language, no context

change

Consistent best practices

Asynchronous Communication

Scalable

26

Questions

27

Sources & Resources

MEAN.js (http://meanjs.org/)

Write Modern Web Apps with the MEAN Stack

Learning Single-page Web Application Development

Best tutorial for MEAN

https://www.youtube.com/watch?v=AEE7DY2AY

vI

28

Next Seminar?