Meteor: https://www.meteor.com

Chat app: http://udemy-chat.meteor.com/

Transcription:

Maybe you have some experience with web development, maybe you don't. Meteor is easy to learn for everyone. Because it's JavaScript everywhere. JavaScript on the client and JavaScript on the server. You can even build mobile applications with Meteor. If you know JavaScript, you will learn Meteor easily. Working with Meteor is easy and I bet you will like it. We will build this real-time chat application. You will learn basics of Meteor while building you application. If you have any questions, feel free to write me at tomas@hromnik.com.

So let's create your first Meteor application. Go to docs.meteor.com and click quickstart. You will see how to install Meteor, how to create a project and how to run it. I have Meteor installed so let's create a project. With meteor create projectName you create a project. It will create a new folder. Go to that folder and run meteor command. It takes some time so I have already done it. And once your application is running you will see it at localhost port three thousand. So let's look at it. This is your first Meteor application and how it works we will see in the next few lessons.

http://practical.meteor.com/templates

Transcription:

We have created our first Meteor application. So let's look at the code. Basic Meteor application has one HTML, JavaScript and CSS file. Let's look at HTML. We have head, body and template tags here, but html and doctype are not here. Look at the source code. We can see html and doctype are added by Meteor. There are a lot of JavaScript files which are Meteor packages. We can see our chat.js is the last file. Body tag is empty because everything is generated by JavaScript. Let's look at JavaScript. We have template hello which is this in this in HTML. Template has some helpers and events which we will cover in next chapters. For now, just rename our welcome message - welcome to Meteor chat. And rename our template to chat. Save the file, go to the browser, don't refresh it, Meteor will do it for you. Now the button doesn't work because we forgot to rename template in our JavaScript. So rename it to chat. Save the file. Go to the browser.... I have to wait for a few seconds because I have five years old computer.... and here we go. Yes, so we renamed our template.

http://practical.meteor.com/helpers

Transcription:

Helpers are functions which return data for template. Each template has its own helpers. We have a template with name chat and helper with name counter. We use helper inside template like this: {{counter}}. We can define helper with parameters. I have created a helper with name doubleNumber which takes one parameter (number) and returns its double value. We use it in a template like this: {{doubleNumber counter}}. We can pass as a parameter another helper. or like this: {{doubleNumber 4}}. We pass just a number four.

http://practical.meteor.com/events

Transcription:

We have defined one event in our application. The event is click button. Button is classic CSS selector for all buttons on the page. So if we add another button, both buttons will do the same. We probably don't want this. We usually use class or id selectors. Let's add clickable class for the button. And change the event click button to click .clickable which will trigger every time we click on an element with class clickable. And let's try it. Click on the first button which has clickable class and counter is incremented. Click on the second button which doesn't have clickable class and we can see the counter is not incremented.

For all types of events go to Meteor documentation (docs.dotmeteor.com) and search for "Event maps".

Transcription:

Session is a key-value storage. You can set and get values with methods Session.set('key', 'value') and Session.get('key'). What's special about session is that it's a reactive variable. When session value is used in a template and session value is changed, the template is automatically updated. Let's try it. We have a helper named counter which returns value of session counter. When we change this session value... we can see the value in template is automatically updated. This is called reactivity. When we refresh browser, session losts its value and default value is set in chat.js with Session.setDefault method.

Transcription:

Meteor uses MongoDB as a default database. It's document oriented database. Documents are stored in JSON format. In Meteor, we define collection with new Mongo.Collection('collectionName');. You can directly insert JavaScript object into MongoDB with insert method. Insert method returns ID of created document. We can update document with update method. The first parameter can be ID of document or Mongo selector. It selects which document we want to update. The second parameter is Mongo modifier object. In the first update example we use $set modifier and we set age to twenty six. In the second update example we use increment modifier and we increment age by one. As a third parameter we can provide options object. In this case we want to update multiple documents with name 'Tomas Hromnik'. Multi option is false by default. If we didn't specify it, it would update just the first matching document. If we want to match all documents, we use empty object as a selector.

Persons.findOne() will find and return one document which match given selector. It returns undefined if document is not found. We can pass ID of document or Mongo selector. We can pass options object as a second parameter. With fields option we tell we want to return just name and nick properties. Without age. If we want to return all properties except age, we can specify field age with zero. It's a good practice to use fields option to get just data we need.

Persons.find() will find all persons documents. It returns a Cursor object which takes care of real-time data changes. To get data from a Cursor you need to use Cursor method fetch(), which will return an Array of documents.
Persons.find() with selector will find all persons documents which match given selector. In this case it will find all persons with name 'Tomas Hromnik'.
As a second parameter for find method, we can pass options object and specify options like sort, limit, skip, fields, reactive and transform. In this case we match all persons, sort them by name in ascendant order and return just two documents. To sort them by name in descendant order, specify sort option with minus one value.

Persons.remove() takes Mongo selector as a first parameter and removes matching documents. If we want to remove all documents from Persons collection, we pass an empty object.

Working with collections is one of the basic skills you have to master. You will learn more in Meteor documentation on docs.meteor.com or in MongoDB documentation on docs.mongodb.org.

When we create new Meteor application with "meteor create" command, it will create local MongoDB database in our application folder. We don't need to configure database connection. Meteor works with MongoDB on the server and Minimongo on the client. Minimongo is client-side MongoDB implementation. We can use methods like find, insert, update, remove and basic queries like sort, limit, greater than and so on. If we use find method in Minimongo it finds data on the client, it doesn't talk to the server so there is no request-response time and it's fast. How sending data from MongoDB to Minimongo works, we will see in the lesson publish subscribe.

http://practical.meteor.com/collections

Transcription:

Meteor uses MongoDB as a database by default. To access data in MongoDB we use Mongo collection. We can use Mongo collection on both the server and the client. To do it, let's define it in our chat.js file. We will create a collection called Messages with new Mongo.Collection('messages'); We define Messages variable on the top of the chat.js so we can use it in the whole file. And we define it without var keyword so we can use it in whole application. Especially in developers console. We can see what data are in collection when we type Messages.find().fetch(). The collection is empty so let's insert some data. We can remove all we have in our chat template, except clickable button and we will add text area for writing messages. Rename clickable button from Click Me to Submit. Now in chat.js we will implement submitting, getting and inserting messages. We will get a message on button click from textarea. Meteor uses jQuery by default so we can use jQuery selector to find textarea and get its value. Then we need to empty textarea so we can write another message. Now we have a message from textarea, let's insert it in database with Messages.insert();. Messages.insert() takes an object as a parater and inserts it in MongoDB database. Try to write a message and click submit. When we type in developers console Messages.find().fetch() we can see our message. We will see how to show messages in our template in the next lesson.

Transcription:

Meteor uses Spacebars as a template language inspired by Handlebars. A Spacebars template consists of HTML and template tags, which are delimited by two curly braces. To show a list of data we need a helper which returns the data. In this case we define helper with name messages which returns Messages.find(). In our template we need block template tag {{#each}} which will iterate through our data. As a parameter for each we provide our messages helper. Inside each block we can access to message object properties, in this case we want to show text property. Save the changes and go to the browser. We can see our message. Let's add more messages. We can see messages are automatically shown. It's because our messages helper returns Mongo cursor which is a reactive object. When we insert into messages collection new message object, this change is automatically published to all connected clients and new message is shown in the template. If you open two browsers and add new messages, you can see that messages are shown in both immediatelly. That's it. We have our first real-time Meteor application. But it's not secure. We will see how to secure it in the next lessons.

http://practical.meteor.com/autopublish-and-insecure

Transcription:

We have built our first real-time Meteor application. But it's not secure. Why? We can insert, update and delete messages from developers console. With Messages.find().fetch() we find all messages. We can see each message object. And we can modify it right in console with Messages.update method. As a first parameter we have to specify message id. As a second parameter we define a modifier. We want to set text property to new value. We can also delete it. Why Meteor allows this? It's great for prototyping. When you want to add something, just insert it right in console. When you need to update something, do it in console. You don't need to fill in forms in your application. It's really convenient. Ok, but... what can we do about this security issue? The solution is easy. Just remove insecure package from your application. Go to command line and in your project directory write "meteor remove insecure". This command will remove insecure package from application. Now if we try to insert, update or delete something in developers console, we get access denied. To add insecure package back just write "meteor add insecure". But when you will want to deploy your application to production server, you must not forget to remove insecure package.

Transcription:

In previous lesson, we removed insecure package. It caused that adding messages doesn't work. If we want to insert a message into MongoDB, we need to do it on the server with Meteor method. Meteor.methods defines functions that can be invoked over the network by clients. We will define our method with name addMessage and one parameter text. Copy and paste Messages.insert from our client code to addMessage method. And rename message to text because our function takes parameter with name text. It's common practice that we name our method parameters the same as they are named in MongoDB. On the client, instead of Messages.insert we need to call our addMessage method with Meteor.call('addMessage') and message parameter. In Meteor.call we can define more than one parameter separated by comma, if meteor method takes more than one parameter. But now we need just one. The last parameter for Meteor.call is callback function wich is called asynchronously after the method is complete. The first parameter of this callback is error object, the second parameter is a value which server method returns. Our method doesn't return anything so we just print possible error with console.log. Now save the file, go to the browser and wait for Meteor refresh... Then we can add messages.

Transcription:

We can add as many messages as we want in our chat application. Now imagine we have thounsands of messages in our database and every message is shown in our application. This would be messy. We need to set a limit on how many messages are shown. To do it, we can just limit messages in our helper on the client. For example we add limit 2... Now we can see only two messages. But if we write Messages.find().fetch() in developers console we can still see all messages. It's because the messages are still in Minimongo. If we had thousands of messages, all the messages would be sent from the server to the client. It could take quite a long time. To choose what data we want to send to the client, we need to remove autopublish package and understand publish and subscribe principles. We will learn it in the next lesson.

http://practical.meteor.com/autopublish-and-insecure

http://practical.meteor.com/publish-subscribe

Transcription:

We can add as many messages as we want in our chat application. Now imagine we have thounsands of messages in our database and every message is shown in our application. This would be messy. We need to set a limit on how many messages are shown. To do it, we can just limit messages in our helper on the client. For example we add limit 2... But if we write Messages.find().fetch() in developers console we can still see all messages. Meteor application works on principle publish-subscribe. Publish data on the server and subscribe to them on the client. There is a package called autopublish included in new Meteor application by default. Autopublish sends all data from the server to the client automatically. So we don't need to think about publishing and subscribing to data while prototyping. Once your prototype is done, you should think about what data you want to be sent to the client. In our case we don't want to send thousands of messages to the client. Go to the command line and in your project directory type "meteor remove autopublish". This command will remove autopublish package from our application. When it's done, Meteor application will reload and we can see there are no messages. Type Messages.find().fetch() in console. We get empty array. No we need to define our publish method on the server. Type Meteor.publish messages and function which will return five messages. We need to subscribe to messages in our client code. Type Meteor.subscribe('messages'); in our client block and save the file. Go to the browser and you can see as many messages as we return in our messages helper... In this case just two messages... Type Meteor.find().fetch() in your console and you can see up to five messages which we published with our publish method. It means, maximum five messages was sent to the client. We will play with limit and order of messages in the next lesson.

Transcription:

We limit messages in our helper and in our publish method. We don't need to do it on both places. We usually limit data only in publish method so not all data are sent to the client. We can remove limit from our messages helper. Now let's add another messages... We can see they are not shown because of limit. We have to add timestamp to messages collection when we insert new message. We will do it in addMessage method. Now we need to sort messages by timestamp in descending order in our publish method so we always publish the last five messages... In our messages helper we sort messages by timestamp in ascending order so new message is at the bottom. Save chat.js file and go to the browser. Add new messages and they should appear under other messages. You can play with limit and show as many messages as you want. But I don't recommend publishing too many messages.

http://practical.meteor.com/packages

Packages are usable components or libraries. You can easily add packages with "meteor add packagename" command. And remove it with "meteor remove packagename". To see what packages are in Meteor core, go to docs.meteor.com and click on the bottom of the menu on packages. The most useful Meteor package is accounts-ui. This package provides authentication and registration user interface. We can choose from login providers packages as accounts-password, accounts-facebook, accounts-github and more. For demonstration purpose we choose accounts-password. So let's add accounts-ui package with "meteor add accounts-ui" command. An then add accounts-password package with "meteor add accounts-password". Then simply add the login buttons helper to our template and save the file. Go to the browser and you can see Sign in button on the top of the page. We don't have an account yet, so we have to create it. Insert email... and password.... click on Create account. And we are logged in. This was demonstration of how easy it is to use Meteor packages. There are also packages from Meteor community on atmospherejs.com. You can install them with "meteor add packagename" command as well. You can also create your own package. How to do it, you will learn on atmospherejs.com.

Transcription:

Sharing Meteor application with the world is super easy. You can deploy Meteor application with one command in command line: "meteor deploy applicationname". After successful deploy, you can see the application on applicationname.meteor.com. You can't deploy to URL which already exists and it's not yours. The first time you deploy an application you'll be prompted for an email address — follow the link in your email to finish setting up your account. Once you have your account you can log in and log out from the command line.

I have deployed our chat application with "meteor deploy udemy-chat". Now we can see our chat application on udemy-chat.meteor.com. Meteor provides subdomain hosting for your applications for free.

Note: To deploy your Meteor application on your own server use Meteor up.

Transcription:

I hope you enjoyed this course and I hope you will create amazing applications with Meteor. If you have questions or ideas how to make this course better, feel free to write me at tomas@hromnik.com.
And share your apps with me! I am excited to see what my students build.

Do you want to learn more? I plan to create Advanced Meteor section in this course. You will learn latency compensation, how to structure your application, how to make it more secure and much more. Stay tuned.

You will find resources for learning Meteor on Meteor's web page: https://www.meteor.com/learn-meteor

I recommend:

• Discover Meteor blog: https://www.discovermeteor.com/blog
• Meteor hacks: https://meteorhacks.com/
• EventedMind screencasts: https://www.eventedmind.com/
• My blog about Meteor: http://meteor.hromnik.com/
• Follow @meteorjs on Twitter: https://twitter.com/meteorjs
• Follow @arunoda on Twitter: https://twitter.com/arunoda
• Follow @elfoslav on Twitter: https://twitter.com/elfoslav

So far we have worked in one HTML and JavaScript file. In larger Meteor applications we need to know how to structure application. Meteor project has special directories:

In the client directory, you put your client-side code like templates, helpers, events, CSS, etc. You can't run server-side code in this directory.
In the views directory, we can see we have directories where we have html and JavaScript file. HTML is is template and JavaScript file usually contains template logic such as template helpers, events and hooks like onRendered, onCreated and onDestroyed.

In the server directory, you put your server-side code: publications, methods and sensitive code that you don't want to be served to the client. For simple application, you can have your publications in one file and methods in another file. But once your application is bigger, you should separate publications and methods into directories and multiple files. For example we have books template, so we could have files related to books located inside books directory on the server.

Code in lib directory is loaded first and then code in other directories is loaded. You will learn how Meteor loads application files in another lesson. Lib directory can be inside any directory or in the root of your project. You can have as many lib directories as you need. For example:
lib directory inside client directory - where you can put code that should be loaded first on the client
lib directory in the root of your project - where you can put code that should be loaded first on the client and on the server
lib directory inside server directory - where you can put code that should be loaded first on the server

In public directory, you can put your static files such as images, text files or favicon. You can access these files via URL in browser. For example if we have favicon.png inside public/images directory we can access it via URL images/favicon.png

These directories are the most used directories in Meteor application. Inside these directories, you can create another directories. For example we can create styles and views directories in the client directory. Views directory can contain another directories and so on.

Files in directories are loaded in alphabetical order. We will learn more about ordering files in lesson Order of files.

To learn more about project structure read Meteor documentation, Exponential blog. And look at Meteor boilerplates https://github.com/SachaG/Void, https://github.com/matteodem/meteor-boilerplate, https://github.com/Differential/meteor-boilerplate

It's important to understand how Meteor loads your application files. Go to Meteor documentation and click on "Structuring your app" link... There you can see the section "File load order". In short, if you need to fully control your file load order, you can create a package. In a package, you can specify the file load order.

Files in subdirectories are loaded before files in parent directories, so that files in the deepest subdirectory are loaded first, and files in the root directory are loaded last. - Within a directory, files are loaded in alphabetical order by filename... what does it mean?

I have created a project called "Meteor files order" where you can see how Meteor loads files. We can see that files in folder called "lib" are loaded first. The first lib folder is located in the deepest subdirectory. And the last lib folder is located in the root of our project. That's because files in subdirectories are loaded before files in parent directories.

Next, we can see that script.js in subfolder is loaded. And then the other scripts in the client folder are loaded in alphabetical order.

Script.js in the common folder is loaded after files in the client folder because name "common" is after name "client" in alphabetical order.

According to rules, files starting with "main." are loaded last... main.script.js is loaded first from lib folder, then from subfolder and then from client folder.

The same rules apply to your css files.

You can download this project from my repository meteor-files-order and play with it to better understand how Meteor loads your files. Also, read about File Load Order in Meteor documentation.

Thanks for watching.

Dynamic templates are useful when you need to show templates dynamically, for example, from database. You have stored template names in database and user can choose which template he wants to show. For this case, we have dynamic template in Meteor. It takes one required parameter template which is the name of your dynamic template. The second parameter data is optional. Use it if you want to pass data to the template.

We can dynamically show many templates with foreach loop. We get data from our helper and pass the data in dynamic template. You can see dynamic templates are shown.

We can just store template name and data into session and return the session in a helper. Then we use the helpers as parameters for dynamic template. If we change the session with template name and data, the dynamic template is automatically rendered according to session values. If we set session template to pageC, the template of pageC is rendered.

You can show templates and their data dynamically in easy way.

The repository of this lesson is available on my github - https://github.com/elfoslav/meteor-dynamic-templates

Thanks for watching.