Introduction for MEAN full stack development by Scott Lee, 2015

1. 1
MEAN full stack
April 3, 2015
scott lee

2. 2
Agenda
1. New way for web application
2. What is MEAN?
 MongoDB
 Express
 AngularJS
 Node.js
3. Demonstration

3. 3
1970 - 1990
 In the beginning, there was darkness and cold. Then, …
Centralized, non-distributed
terminals
mainframe
terminals

4. 4
1990- 2000
 In the 90’s, systems should be client-server

5. 5
2000 - 2015
 Enterprise applications use the
multi-tier model

6. 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. 7
Web Server and Application
Server
Web Server
(HTTP Server)
App Server 1
App Server 2
Internet Browser
HTTP(S)

8. 8
J2EE Application Scenarios
 Multi-tier typical application
Copyright2002©PauloMerson

9. 9
Web Application Server Model

10. 10

11. 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. 12
New Stack

13. 13
Demonstration - Setup
Install MongoDB
Install Node.js

14. 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. 15
Node.js
mkdir demo
cd demo
subl package.json
subl server.js
node server

16. 16
Express.js
npm install express –save
subl server.js
mkdir client/views/index.html
node server
open browser 
localhost:3000

17. 17
AngularJS
subl index.html
server.js
client/js>subl meetups-
controller.js
node server
open browser 
localhost:3000

18. 18
AngularJS 2
List display
Add button

19. 19

20. 20

21. 21

22. 22
Demonstration – DB connection

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

24. 24
2015 - Sr Java Developer
2020 - Sr JavaScript Developer

25. 25
Why MEAN
 JavaScript everywhere
One language, no context
change
Consistent best practices
 Asynchronous Communication
 Scalable

26. 26
Questions

27. 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. 28
Next Seminar?