Upgrade to Pro — share decks privately, control downloads, hide ads and more …

meteor_is

Avatar for Tin Aung Lin Tin Aung Lin
February 19, 2015

 meteor_is

What is meteor and what are the good things about it ?

Avatar for Tin Aung Lin

Tin Aung Lin

February 19, 2015
Tweet

More Decks by Tin Aung Lin

Other Decks in Technology

Transcript

  1. What are the good things about meteor ? > Quick

    Development Time > Accomplish in 10 lines what would otherwise take 1000, thanks to a reactive programming model that extends all the way from the database to the user's screen. > One language everywhere > Isomorphic APIs mean that the same code, written in the same language, can run on both client and server. > Live updates > Data updates live on the screen as it changes. Users can collaborate seamlessly. > Hot deploys > Type one command to push your app into production and update all connected browsers and devices. No need to go through the App Store.
  2. First things to do > Install meteor on your development

    machine curl https://install.meteor.com/ | sh
  3. $ meteor > Now you get the meteor command line

    tool $ meteor $ meteor create my_app $ cd my_app $ meteor
  4. Agenda > List things in a role > Create/Remove them

    > Make them done/undone We will create a web application with the following factors.
  5. *template <head> <title>ToDo List</title> </head> <body> <h1>Welcome to My ToDo

    List. You are about to do a load of things</h1> <div class="container"> <ul> {{#each tasks}} {{> task}} {{/each}} </ul> </div> </body> <template name="task"> <li>{{text}}</li> </template> HTML if (Meteor.isClient) { Template.body.helpers({ tasks: [ { text: “First Task” }, { text: “Second Thing” }, { text: “Third Thing”} ] }); } JS body { font-family: sans-serif; background-color: #315481; background-image: linear-gradient(to bottom, #315481, #918e82 100%); background-attachment: fixed; position: absolute; …………….. CSS
  6. *collection Tasks = new Mongo.Collection(“tasks"); // Query the database if

    (Meteor.isClient) { // This code only runs on the client Template.body.helpers({ tasks: function () { return Tasks.find({}); // select all the tasks from database } }); } JS $ meteor mongo MongoDB shell version: 2.4.9 connecting to: 127.0.0.1:3001/meteor meteor:PRIMARY> db.tasks.insert({ text: "Hello Mandalay!", createdAt: new Date() });
  7. *form <form class="new-task"> <input type="text" name="text" placeholder="Type to add new

    tasks" /> </form> HTML Template.body.events({ "submit .new-task": function (event) { // This function is called when the new task form is submitted var text = event.target.text.value; Tasks.insert({ text: text, createdAt: new Date() // current time }); // Clear form event.target.text.value = ""; // Prevent default form submit return false; } }); JS
  8. *Update and Delete <template name="task"> <li class="{{#if checked}}checked{{/if}}"> <button class="delete">&times;</button>

    <input type="checkbox" checked="{{checked}}" class="toggle-checked" /> <span class="text">{{text}}</span> </li> </template> HTML Template.task.events({ "click .toggle-checked": function () { // Set the checked property to the opposite of its current value Tasks.update(this._id, {$set: {checked: ! this.checked}}); }, "click .delete": function () { Tasks.remove(this._id); } }); JS
  9. *Account System $ meteor add accounts-ui accounts-password // Add Login/SignUp

    buttons {{> loginButtons}} /// modify form {{#if currentUser}} <form class="new-task"> <input type="text" name="text" placeholder="Type to add new tasks" /> </form> {{/if}} // Modify how the task listed <span class="text"><strong>{{username}}</strong> - {{text}}</span> HTML // Instead of email use USERNAME Accounts.ui.config({ passwordSignupFields: "USERNAME_ONLY" }); // Added the creator of the task Tasks.insert({ text: text, createdAt: new Date(), // current time owner: Meteor.userId(), // _id of logged in user username: Meteor.user().username // username of logged in user }); JS