the fastest way to build web apps6.148.scripts.mit.edu/2017/pages/lectures/webday4_meteor.pdfthe...
TRANSCRIPT
![Page 1: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/1.jpg)
The Fastest Way to Build Web Apps
Danielle Man Core Dev, Meteor Development Group
![Page 2: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/2.jpg)
Core Dev at the Meteor Development Group
Frontend Web Developer (JavaScript + CSS + HTML)
2016 MIT Alum: Course 6-3
Former 6.831 TA: User Interface and Design
Who am I?
First web project was in this class! Inspired by friends who won the previous year
![Page 3: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/3.jpg)
What is Meteor?
Why would I use Meteor?
How do I use Meteor? demo
What will I talk about?
demo requires Meteor: install from www.meteor.com
![Page 4: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/4.jpg)
What is Meteor?
![Page 5: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/5.jpg)
Full-stack web development framework
Everything you need to build a web app, using only JavaScript!
Deeply integrated system
Built to make web dev easier
![Page 6: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/6.jpg)
Why would I use Meteor?
![Page 7: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/7.jpg)
![Page 8: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/8.jpg)
Building a Frontend
5+ years ago
Today
3-4 years ago
1-2 year ago
![Page 9: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/9.jpg)
?
![Page 10: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/10.jpg)
DatabaseClient Server
I N C E P T I O N D E P L O Y M E N T
Just JavaScript
Real-time by default
Super fast development
Healthy, modern ecosystem
![Page 11: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/11.jpg)
How do I use Meteor?
![Page 12: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/12.jpg)
meteor create demo-chat
https://github.com/daniman/simple-chat http://simple-chat.meteorapp.com
![Page 13: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/13.jpg)
demo-chat/.meteor/.gitignorepackage.jsonclient/main.jsmain.htmlmain.css
server/main.js
follow along at: https://github.com/daniman/simple-chat
![Page 14: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/14.jpg)
cd demo-chatmeteor npm installmeteor
http://localhost:3000/ in your browser
follow along at: https://github.com/daniman/simple-chat
![Page 15: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/15.jpg)
<body>{{> messageBoard}}</body>
<template name="messageBoard"> <div> {{#each messages}} <div> <div>{{user}}:</div> <div>{{content}}</div> </div> {{/each}} </div></template>
follow along at: https://github.com/daniman/simple-chat
Templates/client/main.html define a template for the message board
![Page 16: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/16.jpg)
Template.messageBoard.helpers({ messages() { return [{ user: 'daniman', content: 'hello world', }, { user: 'daniman', content: 'hello mit', }]; }});
follow along at: https://github.com/daniman/simple-chat
Templates/client/main.js create a list of messages for the template
![Page 17: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/17.jpg)
<template name=“messageBoard"> <div> <input type="text" placeholder="Type your message here..." /> <button>Send</button> </div>
...</template>
follow along at: https://github.com/daniman/simple-chat
Templates/client/main.html add message input fields to the template
![Page 18: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/18.jpg)
follow along at: https://github.com/daniman/simple-chat
TemplatesJavaScript API
import { Template } from 'meteor/templating';
/** * Template.name.helpers({}); * Template.name.events({}); * Template.name.onCreated(function() {}); * Template.name.onRendered(function() {}); * Template.name.onDestroyed(function() {}); */
![Page 19: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/19.jpg)
Template.messageBoard.onCreated(function() { this.messages = new ReactiveVar([{ user: 'daniman', content: 'hello world', }, { user: 'daniman', content: 'hello mit', }]);});
follow along at: https://github.com/daniman/simple-chat
Templates/client/main.js assign a “messages” variable to the template
![Page 20: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/20.jpg)
Template.messageBoard.helpers({ messages() { return Template.instance().messages.get(); }});
follow along at: https://github.com/daniman/simple-chat
Templates/client/main.js update the messages helper to return our new variable
![Page 21: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/21.jpg)
Template.messageBoard.events({ 'click button'(event, instance) { var messages = instance.messages.get(); messages.push({ user: 'daniman', content: $('input').val(), }); instance.messages.set(messages);
$(‘input').val(''); }});
follow along at: https://github.com/daniman/simple-chat
Templates/client/main.js update the messages helper to return our new variable
![Page 22: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/22.jpg)
follow along at: https://github.com/daniman/simple-chat
Collectionsdemo-chat/ add a message to the database
cd demo-chat
meteor mongo>> use meteor>> db.messages.insert({ user: ‘daniman’, content: ‘hello mongo’ })>> db.messages.find({}){ “_id”: 123, “user”: “daniman”, “content”: “hello mongo” }>> exit
![Page 23: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/23.jpg)
follow along at: https://github.com/daniman/simple-chat
Collectionscreate a file to store your API in your app
/api.js create a MongoDB collection in the app
import { Mongo } from 'meteor/mongo';const Messages = new Mongo.Collection(‘messages');export { Messages };
/server/main.js create a MongoDB collection in the app
import ‘../api’;
![Page 24: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/24.jpg)
import { Messages } from '../api';
Template.messageBoard.helpers({ messages() { return Messages.find({}).fetch(); }});
follow along at: https://github.com/daniman/simple-chat
Collections/client/main.js read messages from the “messages” collection
![Page 25: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/25.jpg)
Template.messageBoard.events({ 'click button'(event, instance) { Messages.insert({ user: 'daniman', content: $('input').val(), }); $('input').val(''); }});
follow along at: https://github.com/daniman/simple-chat
Collections/client/main.js write new messages to the “messages” collection
![Page 26: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/26.jpg)
follow along at: https://github.com/daniman/simple-chat
Accountsdemo-chat/ add accounts packages to the app
cd demo-chatmeteor add accounts-uimeteor add accounts-password
![Page 27: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/27.jpg)
<body> {{> loginButtons}}
{{#if currentUser}} {{> messageBoard}} {{else}} <div>You're not logged in!</div> {{/if}}</body>
follow along at: https://github.com/daniman/simple-chat
Accounts/client/main.html add login buttons using Meteor magic (global templates)
![Page 28: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/28.jpg)
Template.messageBoard.events({ 'click button'(event, instance) { Messages.insert({ user: Meteor.user().emails[0].address, content: $('input').val(), }); $('input').val(''); }});
follow along at: https://github.com/daniman/simple-chat
Accounts/client/main.js submit new messages with the user’s email address
![Page 29: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/29.jpg)
follow along at: https://github.com/daniman/simple-chat
Hostingmake your app available to everyone on your wifi network
You: http://localhost.com:3000
http://18.111.3.249:3000on the MIT wifi network
![Page 30: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/30.jpg)
follow along at: https://github.com/daniman/simple-chat
Hostingmake your app available to everyone in the public!
Meteor Galaxy
Digital Ocean
Heroku
Modulus
Amazon Web Services
… and more!
![Page 31: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/31.jpg)
![Page 32: The Fastest Way to Build Web Apps6.148.scripts.mit.edu/2017/pages/lectures/WEBday4_meteor.pdfThe Fastest Way to Build Web Apps Danielle Man Core Dev, Meteor Development Group](https://reader033.vdocuments.site/reader033/viewer/2022042100/5e7c563efde7da6c9a0a95c6/html5/thumbnails/32.jpg)
Try Meteor! www.meteor.com/learn
[email protected] danimman
daniman
Looking for an internship? meteor.github.com/interns