A History of Data Management in Meteor

What are subscriptions?

waitOn, subscriptions: Iron Router — The Dark Ages

Router.route('/post/:_id', {
// this template will be rendered until the subscriptions are ready
loadingTemplate: 'loading',

waitOn: function () {
// return one handle, a function, or an array
return Meteor.subscribe('post', this.params._id);
},

action: function () {
this.render('myTemplate');
}
});

Blaze Template Level Subscriptions — The Silver Age

Template.exampleComponentContainer.onCreated(function () {
const template = this;
template.autorun(()=> {
template.subscribe(‘exampleSubscription’);
});
});
Template.exampleComponent.helpers({
exampleData() {
return ExampleData.findOne({_id: ‘1’}, {fields: {‘name’: 1}});
}
});
// HTML// Container Component
<template name=”exampleComponentContainer”>
{{#if Template.subscriptionsReady}}
{{> Template.contentBlock}}
{{else}}
{{> loading }}
{{/if}}
</template>
// Example Component
<template name=”exampleComponent”>
<h1>{{exampleData.name}}</h1>
</template>
// Page Component
<template name=”examplePage”>
{{#exampleComponentContainer}}
{{> exampleComponent}}
{{/exampleComponentContainer}}
</template>

Angular Controllers Subscriptions — The Golden Age

angular.module(‘simple-todos’).controller(‘TodosListCtrl’, [‘$scope’, ‘$meteor’, function ($scope, $meteor) {    $scope.$meteorSubscribe(‘tasks’); 
$scope.tasks = $meteor.collection(function() {
return Tasks.find($scope.getReactively(‘query’), {sort:{createdAt: -1}}) });
$scope.addTask = function (newTask) {
$meteor.call(‘addTask’, newTask);
};
};

React getMeteorData — The Future

// COMPONENT CONTAINERExampleContainer = class ExampleContainer extends React.Component {
constructor() {
super();
this.onBtnClick = this.onBtnClick.bind(this);
}
getMeteorData() {
const handle = Meteor.subscribe('exampleSubscription');
const isReady = handle.ready()
const exampleData = Example.findOne();
return {handle, isReady, exampleData};
}

onBtnClick() {
alert("You clicked me!");
}
render() {
if (!this.data.isReady} {
return <Loading/>;
}
return (
<ExampleComponent
onBtnClick={this.onBtnClick}
item={this.data.exampleData}/>
)
}
}
reactMixin(ExampleContainer.prototype, ReactMeteorData);// STATELESS COMPONENT FUNCTIONExampleComponent = ({name, description, onBtnClick}) => {
return (
<div>
<h1>{name}</h1>
<p>{description}</p>
<button onClick={onBtnClick}>Click Me!</button>
</div>
)
}

Conclusion

--

--

--

Software Engineer at Workpop, Inc.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhi Aiyer

Abhi Aiyer

Software Engineer at Workpop, Inc.

More from Medium

The Good HTML Component

Angular vs. React: Which Would Be a Better Solution in 2022?

[Learn Open Source] Learn install-pkg in 5 minutes

Setting up fool-proof linter rules