Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)

#MDBE17
Andrew Morgan
Developing with the modern App
Stack: MEAN and MERN
@andrewmorgan

#MDBE17
Andrew Morgan
Developing with the modern App
Stack: MEAN and MERN + Stitch
@andrewmorgan

#MDBE17
Agenda
Introducing
MEAN &
MERN
JavaScript+ Application
Backend
Node.JS
MongoDB
Express
REST
Application
Frontend
Angular
React
Other
MongoDB
Stitch
1 2 3 4 5

#MDBE17
Why do we care?
• Time to market
• Iteration
• Talent
• Universal access
• Responsive
• Scalable
• Highly Available
• Loosely coupled REST APIs

#MDBE17
The MEAN Stack (REST API)

#MDBE17
"JavaScript" & JSON {
"firstName": "Ben",
"lastName": "Dixon",
"country": "UK",
"dependents" : [
{
"name" : "Ben",
"birthday" : "12-Apr-1994"
},
{
"name" : "Erik",
"birthday" : "05-Jul-2005"
}
],
"birthday" : "02-Jul-1964",
"salary" : 50000,
"skills" : [
{
"skill" : "MongoDB"
},
{
"skill" : "Node.js"
}
]
}
ES6
classes
modules
promises
iterators
generators
typed arrays
Typescript
static type checking
JSX
Java
Script

#MDBE17
Resources
• Tutorial:
‒ https://www.mongodb.com/blog/post/the-
modern-application-stack-part-1-
introducing-the-mean-stack
• GitHub Repos:
‒ https://github.com/am-
MongoDB/MongoDB-Mongopop
MongoDB/MongoDB-Mongopop-
ReactJS
MongoDB/MongoDB-Alexa

#MDBE17
Node.js
•JavaScript runtime environment
•Runs application backend code (within Express)
•Built-in features such as HTTP
•Asynchronous
‒ Callback functions
‒ Promises
‒ Observables
•npm package installer & package.json
> npm install mongodb

#MDBE17
JBSON & idiomatic drivers

#MDBE17
Express
•Runs backend (JS) application
•Node.js module
•Terms:
‒ route: relative path to a part of the application
‒ view: templates from which HTML pages are rendered
‒ view engine: middleware to render views
•2 Extremes:
‒ Render entire page in Express
‒ Provide nothing but a REST API to access resources

#MDBE17
Express routes
app.js:
var pop = require('./routes/pop');
app.use('/pop', pop);
routes/pop.js
router.get('/ip', function(req, res, next) {
// Sends a response with the IP address of
// the server running this service.
res.json({"ip": publicIP});
});

#MDBE17
Debugging
npm install -g node-inspector
node-debug ./bin/www

#MDBE17
REST API
•REpresentational State Transfer
•It's how clients talk to app backends
•It's how services talk to services
•HTTP(S)
•METHOD conventions:
‒ GET: Fetches data
‒ POST: Adds new data
‒ PUT: Updates data
‒ DELETE: Removes data

#MDBE17
Angular 2(+)
•Reactive application frontend
•Typescript
•Components & Services
•Data flows down; events back up
•Boilerplate files
•Mobile Apps:
‒ NativeScript, Ionic, or Ionic2

#MDBE17
index.html:
<script src="systemjs.config.js"></script>
<body>
<my-app>Loading MongoPop client app</my-app>
</body>
app.component.ts:
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styleUrls: ['stylesheets/style.css']})
onCollection(CollName: string) {
this.MongoDBCollectionName = CollName;}
app.component.html:
<my-add
[dataService]="dataService"
[MongoDBCollectionName]="MongoDBCollectionName"
[MockarooURL]="defaultMockarooURI"
(onCollection)="onCollection($event)">
</my-add>

#MDBE17
add.component.ts:
@Input() dataService: DataService;
@Input() MongoDBCollectionName: string;
@Input() MockarooURL: string;
@Output() onCollection = new
EventEmitter<string>();
// Run when form submitted
this.onCollection.emit(this.MongoDBCollectionName);
add.component.html:
<p>
Collection name:
<input #MongoDBCollName
id="MongoDB-collection-name"
value="{{MongoDBCollectionName}}"/>
</p>

#MDBE17
ReactJS
•Reactive application frontend
•JSX
‒ babel
‒ Build optimized package for production
•Components & Services
•Data flows down & events back up
•Boilerplate files (fewer than Angular)
•Mobile Apps:
‒ React Native

#MDBE17
• Components inherit
data as properties
• Components store own
data to be rendered as
state
‒ setState()
• Handler functions
passed down to signal
changes back to
parent
Component data flow

#MDBE17
Execution flow
index.html:
<div id="root"></div>
index.js:
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root'));

App.js
import { CollectionName } from
'./collection.name.component';
class MongoPopContainer
extends React.Component {
handleCollectionChange(collection) {
this.setState({MongoDBCollectionName:
collection});
}
render() {
return (
<CollectionName
dataService={this.dataService}
onColl={this.handleCollectionChange}
/>
...
)}
}
class App extends Component {
render(){return (
<MongoPopContainer />)}
}
collection.name.component.js:
handleCollectionNameChange(event) {
this.setState({collection:
event.target.value});
this.props.onColl(event.target.value);
}
render() {
return (
<label>
Choose the collection:
<input type="text" size="20"
value={this.state.collection}
onChange={
this.handleCollectionNameChange}
/>
</label>)
}

#MDBE17
Other REST API clients

#MDBE17
• Developers spend less time on
plumbing code
• Developers focus more on high-
value code that differentiates the
experience delivered by their app.

Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)

Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)

More Related Content

What's hot

Viewers also liked

Similar to Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)

More from MongoDB

Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)