frontendlab: meteor js: Быть или не Быть- Александр Биденко
TRANSCRIPT
Meteor.js, быть или не быть ?
Биденко Александр
Немного подробнее
Семь китов Meteor
● Чистый JS
● Живые обновления страниц(реактивность)
● Чистая, мощная синхронизация данных
● Компенсация задержки
● Горячая замена кода
● Своя система пакетов
● Простота равна продуктивности
Система пакетов
● Core packages● Meteor smart packages● Atmosphere smart packages
Работа с пакетами Meteor
$ meteor add packageName
$ sudo npm install -g meteorite
$ sudo npm install -g meteorite
$ mrt add foundation-5
Одним
едины
Один код на сервере и клиенте
Meteor.isClient
Meteor.isServer
Один код на сервере и клиенте
if (Meteor.isClient) { //client code}
if (Meteor.isServer) { //server code Meteor.startup(function () { // code to run on server at startup });}
В качестве шаблонизатора Meteor использует
Пока нельзя заменить, обещают только в v 1.0
<head> <title>страничка</title></head>
<body> {{> hello}}</body>
<template name="hello"> <h1>Some Text</h1> {{greeting}} <input type="button" value="Click" /></template>
И наш шаблон
Поговорим о реактивности
.js
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}); } });}
<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>
Всем спасибо !
Дополнительная информация :
https://www.meteor.com/
http://meteorhacks.com/