What is a "data container?" (from Meteor React tutorial)

tsphillips · September 27, 2017, 6:45pm

In the Meteor React tutorial, there is a comment about "In your data container, you can use Meteor.user() to check if a user is logged in and get information about them."
https://www.meteor.com/tutorials/react/adding-user-accounts

I see client and server starting points, components for rendering, and api code for binding to the Mongo collections, but what exactly is a “data container” in this context?

herteby · September 27, 2017, 7:10pm

I don’t use React, but by the look of it, my guess is that createContainer is Meteor’s way of turning Meteor observables into React observables, since Meteor and React use different reactivity systems. I use meteor-vue, which has a similar thing.

Take a look at the whole example code here. It’s at the bottom.

tsphillips · September 27, 2017, 10:40pm

Isn’t the function returned by createContainer() run on the client? It seems to execute every time there is a property change in the client. I guess I am fuzzy on what terminology discriminates between client data and server data.

I see in the Meteor guide that createContainer() possibly is deprecated, and is replaced by the withTracker() function. withTracker() seems to create a container component, which is React jargon for a wrapper that provides data access for a component. I am unsure whether withTracker() is related to Meteor’s Tracker subsystem.

github.com

meteor/docs/blob/version-NEXT/long-form/tracker-manual.md

# Meteor Tracker

Meteor Tracker (originally "Meteor Deps") is an incredibly tiny (~1k) but incredibly powerful library for **transparent reactive programming** in JavaScript.

## Transparent Reactive Programming

A basic problem when writing software, especially application software, is monitoring some value – like a record in a database, the currently selected item in a table, the width of a window, or the current time – and updating something whenever that value changes.

There are several common patterns for expressing this idea in code, including:

* **Poll and diff.** Periodically (every second, for example), fetch the current value of the thing, see if it's changed, and if so perform the update.

* **Events.** The thing that can change emits an event when it changes. Another part of the program (often called a controller) arranges to listen for this event, and get the current value and perform the update when the event fires.

* **Bindings.** Values are represented by objects that implement some interface, like BindableValue. Then a 'bind' method is used to tie two BindableValues together so that when one value changes, the other is updated automatically. Sometimes as part of setting up the binding, a transformation function can be specified. For example, Foo could be bound to Bar with the transformation function of toUpperCase.

Another pattern, not yet as commonly used but very well suited for complex modern apps, is **reactive programming**. A reactive programming system works like a spreadsheet. The programmer says, "the contents of cell A3 should be equal to the sum of cells B1-B6, multiplied by the value of cell C4", and the spreadsheet is responsible for automatically modeling the flow of data between the cells, so that when cell B2 changes the value of cell A3 will be automatically updated.

So reactive programming is a **declarative** style of programming, in which the programmer says what should happen (A3 should be kept equal to the result of a certain computation over the other cells), not how it should happen, as in imperative programming.

This file has been truncated. show original

herteby · September 27, 2017, 11:27pm

Of course it’s on the client, it interacts with React after all
Yeah, Tracker is Meteor’s reactivity system, which is used everywhere, on Collections, ReactiveVars, etc.
The function you provide to createContainer/withTracker is probably passed to Tracker.Autorun, which listens to changes to any reactive sources you use in the function and updates the data in your React component.

Taking a look at the todo app, api/tasks.js runs on both client and server, and the files in the ui folder obviously run on the client.

Looking at the source (1 real line of code!) withTracker is just a renaming and syntax change of createContainer.

rjdavid · September 28, 2017, 12:59pm

I’ve gone through the same education last month as I started using Meteor and also started using React. Aside from what were mentioned above, here are some summaries of what I learned after 1.5 months tinkering with Meteor and React:

createContainer is a Higher Order Component in React’s parlance
Reactivity happens within createContainer. If a reactive variable is updated, createContainer automatically passes it to the child component (in this case, the component you called with createContainer) through the props variable.
similar with other React component, you can then use those passed props variable in the lifecycle functions of React like componentWillReceiveProps()