Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)
5 likes2,889 views
The document discusses the MEAN and MERN application stacks. MEAN uses MongoDB, Express, AngularJS, and Node.js while MERN uses MongoDB, Express, React, and Node.js. It describes the components of each stack including MongoDB for data storage, Node.js for the application backend, and either AngularJS or React for the frontend. It also discusses how these stacks enable building applications with universal JavaScript and REST APIs for rapid development and scalability.
![#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](https://image.slidesharecdn.com/07-andrew-morgan-mongodb-eur-3639c792-a794-41c2-8f6b-35842ccc43ba-194500826-171116223453/85/Developing-with-the-Modern-App-Stack-MEAN-and-MERN-with-Angular2-and-ReactJS-12-320.jpg)
![#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>](https://image.slidesharecdn.com/07-andrew-morgan-mongodb-eur-3639c792-a794-41c2-8f6b-35842ccc43ba-194500826-171116223453/85/Developing-with-the-Modern-App-Stack-MEAN-and-MERN-with-Angular2-and-ReactJS-32-320.jpg)
Developing with the Modern App Stack: MEAN and MERN (with Angular2 and ReactJS)
- 1. #MDBE17 Andrew Morgan Developing with the modern App Stack: MEAN and MERN @andrewmorgan
- 2. #MDBE17 Andrew Morgan Developing with the modern App Stack: MEAN and MERN + Stitch @andrewmorgan
- 4. #MDBE17 Why do we care? • Time to market • Iteration • Talent • Universal access • Responsive • Scalable • Highly Available • Loosely coupled REST APIs
- 9. #MDBE17 The MEAN Stack (REST API)
- 12. #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
- 13. #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 ‒ https://github.com/am- MongoDB/MongoDB-Mongopop- ReactJS ‒ https://github.com/am- MongoDB/MongoDB-Alexa
- 16. #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
- 17. #MDBE17
- 19. #MDBE17 JBSON & idiomatic drivers
- 21. #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
- 22. #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}); });
- 23. #MDBE17 Debugging npm install -g node-inspector node-debug ./bin/www
- 24. #MDBE17 The MEAN Stack (REST API)
- 25. #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
- 30. #MDBE17 Angular 2(+) •Reactive application frontend •Typescript •Components & Services •Data flows down; events back up •Boilerplate files •Mobile Apps: ‒ NativeScript, Ionic, or Ionic2
- 32. #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>
- 33. #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>
- 36. #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
- 37. #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
- 38. #MDBE17 Execution flow index.html: <div id="root"></div> index.js: import App from './App'; ReactDOM.render( <App />, document.getElementById('root'));
- 39. 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>) }
- 40. #MDBE17 Angular 2 vs. ReactJS
- 41. #MDBE17 Other REST API clients
- 47. #MDBE17
- 49. #MDBE17 • Developers spend less time on plumbing code • Developers focus more on high- value code that differentiates the experience delivered by their app.
- 50. #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 ‒ https://github.com/am- MongoDB/MongoDB-Mongopop- ReactJS ‒ https://github.com/am- MongoDB/MongoDB-Alexa