the fastest way to build web apps6.148.scripts.mit.edu/2017/pages/lectures/webday4_meteor.pdfthe...
TRANSCRIPT
The Fastest Way to Build Web Apps
Danielle Man Core Dev, Meteor Development Group
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
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
What is Meteor?
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
Why would I use Meteor?
Building a Frontend
5+ years ago
Today
3-4 years ago
1-2 year ago
?
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
How do I use Meteor?
meteor create demo-chat
https://github.com/daniman/simple-chat http://simple-chat.meteorapp.com
demo-chat/.meteor/.gitignorepackage.jsonclient/main.jsmain.htmlmain.css
server/main.js
follow along at: https://github.com/daniman/simple-chat
cd demo-chatmeteor npm installmeteor
http://localhost:3000/ in your browser
follow along at: https://github.com/daniman/simple-chat
<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
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
<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
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() {}); */
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
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
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
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
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’;
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
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
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
<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)
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
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
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!
Try Meteor! www.meteor.com/learn
[email protected] danimman
daniman
Looking for an internship? meteor.github.com/interns