meteor create experiences
cd experiences
meteor add react
Includes everything we need to get started using React in Meteor:
-
The React library itself.
-
Automatic compilation of .jsx files.
-
A ReactMeteorData mixin for loading data.
rm experiences.js
touch experiences.jsx App.jsx Experience.jsx
In the web browser, we will see the UI of our app immediately update to show the new item, it just happens automatically for us.
meteor mongo
db.experiences.insert({ title: "My First Experience", createdAt: new Date() });
db.experiences.insert({ title: "My Second Experience", createdAt: new Date() });
db.experiences.insert({ title: "My Third Experience", createdAt: new Date() });
meteor deploy experiences.meteor.com
meteor install-sdk ios && meteor add-platform ios
meteor run ios
meteor add accounts-ui accounts-password
We can add the accounts-facebook package to enable Facebook login in our app - the Facebook button will automatically appear in the dropdown.
meteor add accounts-facebook
meteor add accounts-twitter
Pre-built forms for common methods like login, signup, password change, and password reset.
It allows us to edit the database from the client. It's useful when prototyping, but now we are taking off the training wheels.
meteor remove insecure
meteor list
When we call a method on the client using Meteor.call, two things happen in parallel:
-
The client sends a request to the server to run the method in a secure environment, just like an AJAX request would work
-
A simulation of the method runs directly on the client to attempt to predict the outcome of the server call using the available information
What this means is that a newly created experience actually appears on the screen before the result comes back from the server.
With Meteor methods and Optimistic UI, we get the best of both worlds — the security of server code and no round-trip delay.
We need a way of controlling which data Meteor sends to the client-side database. Just like with insecure in the last step, all new Meteor apps start with the autopublish package, which automatically synchronizes all of the database contents to the client.
When the app refreshes, the experiences list will be empty. Without the autopublish package, we will have to specify explicitly what the server sends to the client.
meteor remove autopublish
The private experience feature add checks within deleteExperience and setChecked methods to make sure only the experience owner can delete or check off a private experience.
mkdir -p client/compatibility client/helpers client/wrappers server public/img public/js public/css private lib/collections tests
-
client, similar to wrapping your code inif (Meteor.isClient) { ... }. -
server, similar to wrapping your code inif (Meteor.isServer) { ... }. -
public, when referencing these assets, do not include public/ in the URL, for example:<img src='/bg.png' />. This is the best place for favicon.ico, robots.txt, and similar files. -
privateare only accessible fromservercode and can be loaded via the Assets API. This can be used for private data files. -
client/compatibilityis for compatibility JavaScript libraries that rely on variables declared with var at the top level being exported as globals. Files in this directory are executed without being wrapped in a new variable scope. These files are executed before other client-side JavaScript files. -
testsfolder is not loaded anywhere. Used for any local test code. -
node_modulesfor compatibility withnode.jstools used alongside Meteor, any directory named node_modules is not loaded anywhere. node.js packages installed into node_modules directories will not be available to our Meteor code. UseNpm.dependsin your package package.js file for that.
tree -d
├── client
│ ├── compatibility
│ ├── helpers
│ └── wrappers
├── lib
│ └── collections
├── private
├── public
│ ├── css
│ ├── img
│ └── js
├── server
└── tests
tree
├── client Meteor.isClient
│ ├── compatibility
│ ├── config
│ │ └── accounts.ui.js
│ ├── helpers
│ ├── react React Components
│ │ ├── Main.jsx
│ │ ├── components
│ │ │ ├── App.jsx
│ │ │ └── Experience.jsx
│ │ └── wrappers
│ │ └── AccountsUIWrapper.jsx
│ ├── startup.js
│ └── subscriptions.js Subscriptions
├── experiences.css
├── experiences.html
├── lib Meteor.isClient || Meteor.isServer
│ └── collections
│ └── experiences.js
├── private
├── public
│ ├── css
│ ├── img
│ │ ├── experiences-in.png
│ │ └── experiences-out.png
│ └── js
├── readme.md
├── server Meteor.isServer
│ └── publications.js Publications
│ └── startup.js
└── tests
tree -d
├── client
│ ├── compatibility
│ ├── config
│ ├── helpers
│ └── react
│ ├── components
│ └── wrappers
├── lib
│ └── collections
├── private
├── public
│ ├── css
│ ├── img
│ └── js
├── server
└── tests
The Mongo.Collection class is used to declare Mongo collections and to manipulate them. Thanks to minimongo, Meteor's client-side Mongo emulator, Mongo.Collection can be used from both Client and Server code.
meteor mongo
db.experiences.find({}).pretty();
db.experiences.insert({
"title" : "Remember the milk 1",
"createdAt" : new Date(),
"owner" : "WQ73QruW6K4akRxqS",
"username" : "josoroma",
"private" : true,
"checked" : false
});
db.experiences.insert({
"title" : "Remember the milk 2",
"createdAt" : new Date(),
"owner" : "WQ73QruW6K4akRxqS",
"username" : "josoroma",
"private" : true,
"checked" : false
});
db.experiences.insert({
"title" : "Remember the milk 3",
"createdAt" : new Date(),
"owner" : "WQ73QruW6K4akRxqS",
"username" : "josoroma",
"private" : true,
"checked" : false
});
db.experiences.find({}).limit(3).sort({_id:-1}).pretty();
db.experiences.find().forEach(function(doc) {
var doc = db.experiences.findOne();
var title = doc.title;
var id = doc._id;
doc._id = ObjectId();
db.experiences.insert(doc);
db.experiences.remove({_id: id});
})
db.experiences.find({}).limit(3).sort({_id:-1}).pretty();
Experiences = new Meteor.Collection("experiences", {idGeneration : 'MONGO'});
Experiences = new Meteor.Collection("experiences", {idGeneration : ’STRING’});
Meteor embraces the concept of reactive programming. This means that we can write our code in a simple imperative style, and the result will be automatically recalculated whenever data changes that our code depends on.
We use fetch() on the cursor to transform the reactive datasource into an array.
Experiences.find().fetch();
Experiences.insert({
"title" : "Please, remember the milk",
"createdAt" : new Date(),
"owner" : "WQ73QruW6K4akRxqS",
"username" : "josoroma",
"private" : true,
"checked" : false
});
Each document set or collection is defined by a publish function on the server. The publish function runs each time a new client subscribes to a document set. The data in a document set can come from anywhere, but the common case is to publish a database query.
Once subscribed, the client uses its Mongo Cache as a fast local database, dramatically simplifying client code. Reads never require a costly round trip to the server. And they're limited to the contents of the cache: a query for every document in a collection on a client will only return documents the server is publishing to that client.
DDP (Distributed Data Protocol) is the stateful websocket protocol that Meteor uses to communicate between the client and the server. Meteor's latency-compensated distributed data framework:
"DDP has a nice feature: it notifies the caller after all the write operations in the method have been reflected to all the other connected clients."
"This is the core part of the DDP protocol. A client can use it to subscribe into a real-time data source and get notifications. The DDP protocol has three types of notification: added, changed and removed. Since the DDP protocol was inspired by MongoDB, each data notification (a JSON object) is assigned to a collection, which is the place where the data belongs."
npm install -g ddp-analyzer
Flow Router is focused only on routing for client-side apps and does not handle rendering itself.
It exposes a great API for changing the URL and reactively getting data from the URL. However, inside the router, it's not reactive. Most importantly, FlowRouter is designed with performance in mind and it focuses on what it does best: routing.
With React Layout we can easily render react components both alike in client and server.
Worth a read:
meteor add kadira:flow-router
meteor add kadira:react-layout
In Chrome Console run:
FlowRouter.go('/test/1/1/?foo=bar');
params: Object {category: "1", itemId: "1"}
queryParams: Object {foo: "bar"}
chrome http://localhost:3000/test/2/2/?bar=foo
params: Object {category: "2", itemId: "2"}
queryParams: Object {bar: "foo"}
- Refactor.
- Routes & SEO.
- Places relation and Google Maps Integration - Places Screens.