FrontendLab: Meteor js: Быть или не Быть- Александр Биденко

770 views
635 views

Published on

Published in: Technology, Sports
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
770
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
11
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

FrontendLab: Meteor js: Быть или не Быть- Александр Биденко

  1. 1. Meteor.js, быть или не быть ? Биденко Александр
  2. 2. Немного подробнее
  3. 3. Семь китов Meteor ● Чистый JS ● Живые обновления страниц(реактивность) ● Чистая, мощная синхронизация данных ● Компенсация задержки ● Горячая замена кода ● Своя система пакетов ● Простота равна продуктивности
  4. 4. Система пакетов ● Core packages ● Meteor smart packages ● Atmosphere smart packages
  5. 5. Работа с пакетами Meteor
  6. 6. $ meteor add packageName
  7. 7. $ sudo npm install -g meteorite
  8. 8. $ sudo npm install -g meteorite $ mrt add foundation-5
  9. 9. Одним едины
  10. 10. Один код на сервере и клиенте Meteor.isClient Meteor.isServer
  11. 11. Один код на сервере и клиенте if (Meteor.isClient) { //client code } if (Meteor.isServer) { //server code Meteor.startup(function () { // code to run on server at startup }); }
  12. 12. В качестве шаблонизатора Meteor использует Пока нельзя заменить, обещают только в v 1.0
  13. 13. И наш шаблон <head> <title>страничка</title> </head> <body> {{> hello}} </body> <template name="hello"> <h1>Some Text</h1> {{greeting}} <input type="button" value="Click" /> </template>
  14. 14. Поговорим о реактивности .js
  15. 15. Players = new Meteor.Collection("players"); if (Meteor.isClient) { Template.leaderboard.players = function () { return Players.find({}, {sort: {score: -1, name: 1}}); }; Template.leaderboard.selected_name = function () { var player = Players.findOne(Session.get("selected_player")); return player && player.name; }; Template.player.selected = function () { return Session.equals("selected_player", this._id) ? "selected" : ''; }; Template.leaderboard.events({ 'click input.inc1': function () { Players.update(Session.get("selected_player"), {$inc: {score: 5}}); } }); Template.player.vents({ 'click': function () { Session.set("selected_player", this._id); } }); } // On server startup, create some players if the database is empty. if (Meteor.isServer) { Meteor.startup(function () { if (Players.find().count() === 0) { var names = ["Ada Lovelace", "Grace Hopper", "Marie Curie", "Carl Friedrich Gauss", "Nikola Tesla", "Claude Shannon"]; for (var i = 0; i < names.length; i++) Players.insert({name: names[i], score: Math.floor(Random.fraction()*10)*5}); } }); }
  16. 16. <head> <title>Leaderboard</title> </head> <body> <div id="outer"> {{> leaderboard}} </div> </body> <template name="leaderboard"> <div class="leaderboard"> {{#each players}} {{> player}} {{/each}} </div> {{#if selected_name}} <div class="details"> <div class="name">{{selected_name}}</div> <input type="button" class="inc1" value="Give 5 points" /> </div> {{else}} <div class="none">Click a player to select</div> {{/if}} </template> <template name="player"> <div class="player {{selected}}"> <span class="name">{{name}}</span> <span class="score">{{score}}</span> </div> </template>
  17. 17. Всем спасибо ! Дополнительная информация : https://www.meteor.com/ http://meteorhacks.com/

×