 if you have heard about it. So, I mean probably most of you would know, but yeah Meteor is like a new framework, it is pretty new, it is 0.06, it is not even 0.1, 0.0 yet. So, it the where Meteor shines is that you know it makes it really easy for you to create multi user real time applications. So, it abstracts away the configurational details. So, you are just left with the tool set that you need to like rapidly prototype applications. I mean you do not need to set up anything, you do not need to set up your server, you do not need to you know call in, you do not need to figure out your dependencies, you do not need to call in script tags, you do not need to import a CSS files. Just put it where Meteor wants you to put it and then you know just write your business logic as you would. So, what is Meteor? It is built on Node.js, we just talked about Node.js. So, it is built on Node.js. So, it is JavaScript everywhere. On the client you write your apart from HTML and CSS you write everything in JavaScript and on the server anything that you write is put inside a Node.js container. So, on the server it runs Node.js and Meteor just sits in between your database and your UI and just has a job of keeping both of them in sync. At all times the data that is in your database and the data that shown to your users on the UI is kept in sync by Meteor. So, like I said it is a single language use JavaScript on the server, you use JavaScript on the client, it is JavaScript everywhere. It really shines when you are creating real-time applications. We will just see an example but I think you will really like the way it handles conflict resolution and asynchronous updates. So, installing Meteor is pretty easy. So, just run this one command from your terminal. It should be pretty easy. It calls a bunch of files from meteor.com into your bin slash ash. So, this command only works on Linux and if it is pretty small I will just just download the bunch of files into your bin slash ash. But if you are on Windows this won't work. So, for Windows go to win.meteor.com and download the executable that is given here. So, Windows is not supported natively by Meteor but some guys because Meteor is open source some guys have worked on a Windows solution for this. So, just download this EXE and just run it. Are you downloading it? I mean is it running? So, everyone started downloading it. So, we will come to creating your app later. When everyone has Meteor running we will come to creating your app then but right now we will talk about some principles that Meteor is built on top of. So, essentially there are seven principles. One is data on the wire that this essentially means that the server only sends you data not HTML. It is the client's responsibility to use that data and render some HTML. Then the next one is single language. It uses JavaScript everywhere on the client on the server everywhere it is JavaScript. And the thing at the like note here is that you are free to use angular or backbone or jQuery anything on the client and similarly you are free to use NPN modules on the server. It is simply just a wrapper. So, then there is database everywhere. This is pretty new actually. If you are coming from Ruby or Rails or any sort of other background any sort of web application development background this you will be pretty surprised by this database every by concept. We will talk about it in much detail later. Then there is latency compensation. This is also a part of database everywhere. This essentially means that let us say I am on an application and I am updating something right now. So, whatever I update it is shown on my screen instantly. Before it actually gets saved to the database and before the server sends me any sort of response it is immediately updated on my screen. So, it sort of makes the app more responsive and snappy. Then if it checks for the data for the server's response and then it patches up whatever shown on the screen. Then there is full stack reactivity. Full stack reactivity means that everything in Meteor is event driven. So, when the user clicks a button or when the user submits a form that is when things start to happen. Then there is embrace the ecosystem. So, Meteor is open source. It is built on top of open source technologies. It uses Node.js and as for its database it uses MongoDB which is again open source. So, as you know these open source technologies as they evolve. So, Meteor evolves with them. It is pretty new. It is constantly in flux. Lots of people contribute to it. It is still 0.6.x. So, stuff keeps changing and stuff keeps breaking. So, you need to keep updated with it. Simplicity equals productivity. So, what this means is that Meteor gives you a very clean API. It is very well documented. So, the core principle of Meteor is that the client and the server code should act in the same manner. Obviously, you will not be doing any DOM manipulation in the server and you will not be doing any sort of sending emails from the client or any stuff like that. But essentially the API should be in sync at both the client and the server levels. So, data on the wire. So, what this means is that the server only sends you JSON data. It only sends you documents across the wire. It does not send you JavaScript. It does not send you CSS. After the initial page load, when initially, once all your CSS and once all your JavaScript files are loaded, after that, it is not the client's responsibility. It is not the server's responsibility to create HTML for you. Your client has to do that. I mean, your client code has to use whatever data the server sends you and then create HTML and put it up on the screen. Why this is helpful is that this makes your applications much faster. So, you are not sending images. You are not sending hundreds of lines of CSS. So, you are not sending JavaScript again and again. So, you save on a couple of hundred KBs. So, your application is more responsive and faster. So, single language. This we already talked about. It is JavaScript everywhere rejoice. So, then yeah, database everywhere. So, what happens is that at every time, at every time, so your the database, the media uses MongoDB on the back end. We will talk about MongoDB in detail later, but right now just understand that it is some sort of a permanent data storage. So, at every time, media sort of mimics whatever data is in that MongoDB into your client's storage. So, at every time, the data that is in your actual persistent storage is sort of mimicked in your client. So, when the server pushes some sort of change, so the change is patched up into your client's database and when the user updates something, it is instantly transferred to your client's database and then it is sent across the wire and the server actually patches that change into your actual MongoDB. So, it sort of keeps two states. So, one on the server, which is the actual permanent storage and one on the client which is something called mini Mongo, which is sort of a fork of Mongo, but it is not a complete implementation of Mongo, but it is somewhat in sync with your actual MongoDB database. So, your client, so this is sort of the default settings. You do not really, in your production applications, you do not really want your client to have full database access. You do not want your clients to do any sort of stuff with your database. You want your server to do all your permanent data storage and your client should just call functions or whatever to make that happen. So, this is just the default settings. This makes it very easy to prototype actually. These are like prototyping tools. This database everywhere functionality is because of two packages. Think of packages as plugins. So, it is because of two plugins. One is called the auto publish and one is called the insecure. So, it is because of these two plugins that your client or your browser has entire access to your database. But once we remove these two plugins or two packages, so then your client stops having access to your database and then you need to tell your client what access, then you need to specify what access your client has to your actual database. So, these are just prototyping tools. We will see these in action and then you will sort of understand why Meteor has these defaults because it saves a lot of time and it helps you really prototype stuff really fast. Latency compensation. So, what I talked about this before, but what it means is that let us say I am updating a post. I have created a new post. I have hit submit. So, what happens is that my screen is that post is shown on my screen instantly. That is because Mongo maintains a client database. That has immediate access. You do not need to wait for that. You do not need to wait for that record to go into the server, wait a couple of milliseconds for that to process and then wait a couple of milliseconds for that data to come back. Because you have immediate access on the client, immediate access to the post. So, my browser window is updated immediately and then in the background Meteor sends the request back to the server. The server checks if it is allowed and it puts it back into the persistent storage and then it responds back. So, let us say your internet got disconnected somewhere or let us say you were not allowed to put that post in. So, what happens is that your client database is again patched to match your server database and then your UI is also updated automatically. So, that post gets removed. So, then there is full stack reactivity which just means that everything is event driven, the server code, the views changing, everything happens when user does something. And then there is embrace ecosystem. It is open source. It is built on Node and Mongo. So, as these tools improve, so Meteor improves with them. So, like I said, there is one API. There is like a very consistent API on the client and on the server both sides. So, the API is somewhat similar. So, it does not take much time to pick it up. So, actually that is one of the biggest sort of best thing about Mongo, best thing about Meteor. It is that it is very easy to pick up. So, you can just browse through the documentation and then you can actually start building your own applications. It is very simple. It is very consistent. So, it does not take much of a learning curve. So, does everyone have Meteor running? While that installation is happening, let us just talk about some Meteor internals. What make Meteor tick? Then when the download is complete, then we will actually start building an application. So, Meteor essentially is composed of two things. One is called packages and one is the command line tool. So, packages, think of packages. If you are from Ruby, think of packages as Ruby gems. If you are from Node, think of them as NPN modules. If you are not using anything and you have no idea what I am talking about, then think of them as jQuery plugins. So, these are encapsulated bits of JavaScript code. You just put them into your application and you run one or two lines of code and then you get that additional functionality. So, that is what a packages are. So, there are five types of packages in Meteor. We will talk about them in detail. Then there is command line tool. So, command line tool is similar to Ray Kojic. So, what this does is that it lets you interact with your application via the command line. It lets you interact with the MongoDB database that runs for your application. It lets you view your logs, the application logs. It lets you view your application logs. It lets you deploy your application. So, it is a command line tool for that. It is also used for pre-processing. So, let us say you have some coffee script or you have some sass or less files. So, it lets you, this command line tool sort of pre-processes them and converts them into JavaScript or CSS and then put it back into your browser. So, the command line tool, so it does all the background processing. It converts all your coffee and less files into CSS and JavaScript. So, you can actually create your own, you can actually, there is this bundler API that Meteor provides. So, you can actually create your own packages and you can hook into this command line process. Let us say SCSS is not supported. I mean, there is no package for SCSS right now, but let us say you want to build an application with SCSS. So, you can hook into this command line, you can hook into this bundler API that Meteor provides and write your own code to convert that SCSS into CSS and then use it. So, this also lets you deploy your application and view logs. We will be deploying an application. Let us first create an application and run some code and then we will look at deploying and viewing logs. So, now we come to packages. Packages are pretty important. Everything in Meteor sort of happens because of these packages. So, there are five types of packages. One is core package, then there is smart packages, atmosphere packages, NPN modules and local packages. So, core packages are used in every Meteor application. So, think of these as the piece of the piece of code that makes Meteor tick right. So, there are these are packages like web app which do all the HTTP processing. There is a package called templates which does all the handle bar templates. We will get to that later, but think of these as the code that makes your Meteor application tick. So, these are like essential. You can remove them and write your own code instead, but for now we will just use the core packages as it is. So, then there are smart packages. So, Meteor provides around 3740 additional packages. So, these are not used in every application, but you can optionally use them, you can put them into your code and you can put them into your application and start using them. So, these are for stuff like sending emails, using coffee script or using authentication. So, Meteor has a pretty solid user account system. We will be taking a look at that later, but so there is a smart package for user account. You can just drop that in at one line of code and you will have a whole fully functional user accounts system ready. So, then there is an atmosphere packages. So, right now your I cannot contribute to this to the smart packages library because that API is not live yet, but so there is a community supported package library and the repository management system called a Meteorite. So, what Meteorite does is that it lets you create your own packages and put them into this atmosphere package repository. So, if you go to atmosphere.meteor.com, I will just show you. So, this has packages for everything you can think of. I mean there are hundreds and hundreds of packages. So, these are all community supported. You can use this code into your own Meteor application. So, you can find packages for everything that you can think of. If there are no packages here, you can easily create using the API that this provides. So, atmosphere and this Meteorite, this is going to come into Meteor itself in 1.0. So, right now it is 0.06. So, in the roadmap it says that atmosphere is going to be incorporated into Meteor core itself. NPN modules. So, NPN modules do not work out of the box. I mean it is not like you can just drop that NPN module into your Meteor application and just start using it. So, there are some amount of configuration involved. You are not going to be talking about NPN modules here because it is pretty deep and you will probably need to look into the documentation for that, but yeah you can use it. I mean there are couple of great tutorials out there that will help you use NPN modules. Then there are local packages. So, yeah you can create your own packages. I mean if there are no packages in atmosphere, if there are no packages in the smart package library, you can just create your own packages, put them into a folder called packages, use the package API that Meteor has and then just start using your own package. So, these are like local jQuery plugins that you create. No, no you have to install this right now. Then you can strip away the stuff that you do not want, but you have to install it as a whole and then you can strip away the stuff that you do not want, but I do not think you can install it as an NPN module. So, there what you need to do is you need to strip away all the core packages and just maybe let us say you just want, you just want the, you do not want any sort of server running. So, you remove the web app, web app, web app package. If you do not want any sort of reactivity in your application, you remove the live data. If you do not want any sort of CSS processing, you remove something else part. You know you can strip away, you can install the whole thing and then you can strip away the core packages to help you with just what you want. So, yeah you can deploy it as a, I mean you do not need to have to specifically deploy it to Meteor or whatever. You can bundle your application, it bundles everything into a regular Node.js application, then you can push it to Heroku or Node.js to or whatever. Yeah, that is possible. I will just show you when we get to that. So, now is Meteor running everywhere. You can just verify by running Meteor dash dash version and that should give you the version. Show of hands, how many have got this to work? Some people are still left. So, now we are going to create an application. Shall we create? I mean is everything? Yeah, I think it should be okay or you can just to Meteor update. But yeah, I think it should be okay. So, shall we create an application? Yeah. So, just type Meteor. So, just to Meteor create contacts because we are going to be building a contacts manager application. So, just to Meteor create contacts. This will create an application for you. So, how many of you have got this to work? If this shows up, then you know it is running and everything is fine. So, now just CD or move into your contacts, the deposit directly that it just created, just move into that and let us start the server. So, starting the server is pretty easy. Just run Meteor. That is it and it enter. Now, we go to localhost 3000. So, do you have this? Okay, great. So, just stop me if I am going too fast or if you couldn't get this to work. No, no, you can specify the port actually. Let me just show that here. Meteor, I think it is Meteor dash dash port. Remember actually. Yeah, default is 3000. So, now let us look at the code that it created. So, I think you are going to find a few things that are pretty different. So, there is nothing in the CSS file. We can ignore that for now. We are not going to be writing any CSS right now. So, there is this contacts.html file and then there is contacts.js file, which is again kind of funky. So, let us look at the contacts.html file first. So, the first thing that you will notice, I just want you to take a quick note of the things that you find different, things that are not there in a regular application that you write. So, there is no dock type. There is no there is no html, root level html element. So, there are no script tags. There is no CSS import, links to your style sheets. Then there is something, then there is just double curly braces and then there is something inside of that. Then there is a root level tag called template, which has the same name as that we use in body. So, is everyone following? And then inside of that template, you have something inside double curlies again, which probably looks like a variable, but we will get to that. So, this is all there is in the html file. Now, let us go to the JavaScript file. So, there is an if flag called if meteor is client and then there is if meteor is client. So, as you could probably understand, some part code is running inside of the client and some part of it is running inside the server. So, then you know, so here we created something called a template with the name of hello and here we are seeing that template dot hello dot greeting. So, now here we had this variable called hello and then here we are setting that variable called hello to something, which is why we are getting welcome to contacts. Let us just see if this is how it works. Let us just see, let us just changes to something else and then come back to the browser and you know, then it changes. So, now you have a rough idea, how things work. So, there is something called a template. You know, you put there are some variables inside of that then in your JavaScript file, you sort of give those variables whatever values you want. We will talk about templates in much more detail later, but right now just get a feel of how things work in meteor. So, then you know, there is also this events hash will come to that later. So, there is one more thing that I want you to take a look at. So, if you just, just, just yeah, there is something else here. So, there is this thing called, there is an h1 tag called hello world. So, I am just going to change it to meteor. I just want you to also change it to meteor, whatever you want and then go back to your browser, do not refresh it. You know, you will see that it automatically refreshes itself. So, just, just you know, anywhere in this h1 tag, just change it to whatever you want. Save the file and then come back to your browser. You will notice a cool thing, right? You do not have to refresh yourself. You refresh your browser every time it automatically restarts itself. So, now let us move on. So, we have created an application now. I mean, that is all there is to creating an application. We have looked at whatever code that generated. Now, let us start actually using some packages because as I said, right? I mean, in meteor, you cannot get too far without using any sort of package. So, we are going to be using, let us just see what all packages meteor provides us with. I am just going to open up a new tab and I am going to type meteor list. So, now you see a list of packages. So, there is something called accounts base, which is for the user account system. So, then there is amplifier, app cache and emails, which we will be taking a look at later. And there is HTTP and there is backbone also. So, yeah. So, there is one thing that I want to point out right here. So, meteor is not like angular or backbone. It is not a client specific framework. It is a full stack framework. So, you do not need to use Ruby or anything on the server and then use backbone or angular on the client. So, it is a full stack framework. You write everything. You build your whole application. You build everything inside of meteor. So, that is one key difference between other libraries and meteor. So, there is jQuery, which we can use if you want, but we will not be using right now. So, the one we will be using right now is Bootstrap. So, because we will not be writing much CSS, we are going to be using a CSS framework from front end framework from Twitter called Bootstrap. So, the way we add that is very simple. We just do meteor add and then you know you type Bootstrap. Is everyone following along? Have you guys added this? Yeah, you can stop the server, add this. So, has everyone added this Bootstrap? And then when you come back to your browser, you will notice that the fonts have already changed. So, you will need to even refresh. So, once you add a package, it is automatically meteor automatically listens for that and changes whatever. So, the fonts have automatically changed. So, this is how you add packages. We will look at adding more packages. We will look at adding you know some other stuff later, but right now let us just get on with it. So, this is the hot code reload part that I talked about. You noticed how meteor automatically updates itself, right? How it automatically restarts the server. So, this is something called hot code reload. So, what it essentially means is that meteor keeps listening for changes in your HTML, CSS and JavaScript files. Whenever it detects any change, it automatically refreshes, restarts the server and refreshes your browser. So, the other thing is that in hot code reload, it actually preserves your state. So, we have not talked about sessions yet, but I will just remind me to talk about preserving state then. So, what it essentially means that when a user is using an application and then you know you push some changes. So, the user doesn't, user has like the minimum friction. He doesn't have any sort of thing thrown into his face. So, meteor automatically preserves his state and then you know gradually adds more stuff to it. So, the load order. So, you might have noticed, right? I mean there is no script tags. So, how do you maintain them? How do you manage your dependencies, right? I mean in require, if you have used required.js or something like that, you will know that you know that these files should be loaded. Can everyone read this, right? So, you will know that you know some files need to be loaded first, some file needs to be loaded after something. So, you need some sort of dependency management, right? So, here it just loads everything automatically. So, how do you specify which files you want first? Let's say you are using jQuery and you are using some file that depends on jQuery. So, how do you tell meteor to you know load jQuery before loading anything else? So, that's when this load order comes in. So, anything that you put inside a lib directory. So, if you create a lib directory and the files that you put in there, those files get loaded first. So, lib directory is for you know your jQuery or you know whatever, whatever libraries that your other code depends on. So, any file that matches main.something. So, let's say you have a main.js or let's say you have main.html. So, these two files will be loaded last. These two files will be loaded after everything else is loaded. And then there are, then you know whatever files that you have inside of subdirectory, these are loaded before your files in the main directory. Let's say you have a file called lib and then you have a file called maybe jQuery and then you know you have some other file inside of jQuery maybe you know I don't know maybe you have some other file inside of jQuery. The file that is inside of the jQuery folder that will be loaded first it first and then the file in the and the file that is in the shallower's location. So, is everyone clear with this? You can just put them anyway. So, the file which the j query should be in the defect directory. No, j if there is some hard dependency you should put it in the lib directory because it will be loaded first. Inside lib directory also that order will be there. Yeah inside lib directory also that order will be there. So, within a directory files are loaded in the alphabetical order. So, a a 5 a dot jas will be loaded before b dot jas. So, yeah this this this point is very important. So, any file that is in the root directory that is not in client or server directly. So, any file that is in the root directory will be loaded on both the client and the server. So, this is pretty new I mean you know if it is no jas you can write javascript on the server and then you know you can write javascript on the client also right. But the thing is meteor is that you know you can actually share code between the client and the server. Let us say you have got some validations. Let us say you have got some form validations. So, the same form validation rules you can use on the on the actual form on the on the client and you can use the same form validation rules in the in the server when you are actually putting that stuff into your database. So, you can actually share code between your client and the server. So, any file that you put in the root directory will be loaded on the client and the server. So, this is this pretty key. So, we can actually even take a look at this. So, there is this contacts dot jas file right. So, I am just going to go outside and put a console dot log here and then when I come back to my server I will see this logging here right. I mean I just logged it from the from the from this file. So, it is logged into the server and now when I come back to my browser and I check my browser's console yeah I see the logging here again. So, any file that you put in the root directory will be loaded on both the client and the server. So, now you know that you know any file that you put will be loaded both on the client and the server, but you do not want your DOM manipulation to go inside the server and you do not want your server side code to go into a client. So, how do you separate your code? Separate your code you just saw in the in the file that Meteor created for us. So, there were two flags right if Meteor dot is client and if Meteor dot is server. So, this lets you separate out your code, but this is not you know optimum right. I mean in every file you do not want to write if Meteor dot is client and if Meteor dot is server right. You want some sort some some other way to manage your client and server code. So, the way you do that is you create a server and a client like client folder. So, any code that you put inside a folder called server will only be run on the server and any code that you put inside a folder called client will only be run on your browser. So, this is how you separate out your code. So, now we come to templates. So, you might have noticed right the HTML that you write in a regular application and the HTML that is there in a in a in this Meteor app is pretty different right. There is no there is no there are three root level tags actually one is head one is body and then there is this template tag right. So, in any single page application. So, how it usually works is that you know when you are creating an application with Ruby on Rails or if you are creating an application with with PHP right. So, you create some sort of an ERB file you create a template called an ERB template or you create a dot CTP template that the server puts all the data into that template and then you know renders the HTML page to the browser right. But in a single page application the server is only sending you data you are on one single page and the server keeps sending you data for the next page or whatever. So, it is the client's responsibility to change keep changing the views right. So, the way you change the views is with templates. So, let us say you have an about page. So, you create an about template that has the you know everything with your about everything that is you know you want to show on your about page. Then let us say there is a contact us page. So, instead of creating a contact us page you create a template called contact us and you replace everything that is in the about template with with the contact template. So, does that make sense I mean why you want to use templates instead of creating HTML file. So, the way you create templates in Meteor is pretty simple. So, Meteor gives you a root level tag called template. This is not a regular HTML tag. So, this is just something that Meteor gives you and then you know when you are actually running the application Meteor compiles everything that is inside of this template into a JavaScript function. So, you create a template you create a template tag give it a name this name is should be unique. You cannot have two two templates with the name of hello. So, this name is very important. So, give it a unique name and you put whatever HTML you want to put inside of that and then when you want to call that you know then when you want to render that template just use a. So, Meteor uses handle bars if you if you use handle bars before you will be you will be pretty comfortable here. So, just use a double curly braces and then a greater than sign and then follow that with the name of the template that you want to render. So, this whole syntax. So, this is for actually rendering any template. So, this is pretty key. So, this is called the partial syntax we will take a look at that later, but this we will be using this almost everywhere. So, just keep a note of this. So, what this essentially means is that you are telling Meteor to render to replace this line with anything with any template that has a name of hello. So, does that make sense? No you can change your templating library, but handle bars is built in. So, sort of it is the default that comes with it, but you can use you can create your own templates if you want you know you can use jade or whatever you want, but the thing is that you might need to do some sort of processing on the JavaScript end. So, you might need to call a function called meteor dot render and then inside of that render function you might want to specify what all you want to change and then you know you want to put that into your HTML. So, you want to you can change that you can change your templating engine, but you might need to do a bit of processing for that. So, this partial syntax is clear right I mean you can just this replaces anything that is in any template with the name of hello with the actual contents of the template. So, there are three root level tags there is no HTML there is no root level HTML tags. So, there are just three root level tags head body and template. And the other thing is that you know you can have multiple HTML files you don't need to put all your HTML into this one file. So, you can have multiple HTML files then what meteor does is that it can catenage all the head all the head tags into one it can catenage all the body tags into one and then sends it out to your browser. So, templates templates are just regular HTML expressions that you write. So, only thing is that it lets you embed variables or it let let you embed expressions into it. So, without handlebars or without any sort of templates you will probably be doing you know a name plus dot is you know something like that. But with handlebars with any sort of templating library it gets much clearer you know it gets easier to read. So, we just looked at creating a template just created a template tag give it a unique name and just render it wherever you want with the partial syntax. So, there are three templates give you three sort of additional things over HTML over regular HTML tags. So, one is the partial syntax which we just looked at for for calling any for rendering any other template that you've already created then there is expression syntax. So, what this essentially means is that. So, here you see this right double curly braces with greeting inside of this. So, this greeting is a variable. So, this variable gets its value from the JavaScript file but this syntax of having double curly braces with the variable in between actually tells handlebars what else meet your to just replace this with whatever is the value of the variable. Is that okay? Does that make sense? And then you have block block helpers. So, we haven't looked at block helpers anywhere here. So, but what block helpers do is that it lets you change it lets you change the flow of of of commands in inside of your template. So, you can have something like if you know your regular if statement right you know you can you can check if this if the user is logged in then you know you show him this template if the user is not logged in show him you know something like access denied or something. So, you can also iterate over objects. Let's say you have an array you have an array of contacts in our in our application itself we will be having an array of contacts right. So, we want to we want some sort of way to iterate over all the whole array and render render a template for each each of our contact. So, that is that for that you need something like each. So, the syntax is if you haven't used handlebars before the syntax will be pretty new. So, for that everything in handlebars goes inside of this double curly right. So, just keep a mental note of that. So, whenever you see double curly. So, just think of it as handlebars. So, inside of your if you want to do any of if you want to use any of the block helpers. So, where you do that is use a double curly and a pound sign and then if and then you know you give it whatever whatever the condition that you want to check. Let's say I am using current user here. Current user is something that Meteor gives us to check if a user is logged in or not. So, I am checking if a user is logged in I want to show him something something here if he is not I am going to show him that you know access is denied or So, this is how you use a block block helper. Then there is unless which is essentially means if not. So, if not new user then show him this. This is just nicely you can you can also use if here and you know reverse the reverse the conditions. Then there is each we are doing a double curly then a pound each contacts and then we are rendering each contacts. So, this is how you do that. So, we are going to be working a lot with if and each. So, just take a mental note of this right now then we will write the code it will get a lot easier right. So, we took we talked about how we can use variables inside of your handled by templates right. So, but we need to give that variable a value right I mean somewhere where you have to have templates is nothing right templates just take some html it takes some data it matches them together and puts it on the screen that is what a template does right. So, you have your html inside of that template tag. So, to give it some data we need some sort of way to you know sign some data to it. The way you do that is with template help functions. So, what meteor does is that it looks it reads all your code and then it looks for all those template tags and then you know it finds a name along with it right you use template name equal to hello right. So, in what it does is that it it compiles that into a JavaScript function it compiles that it and then gives you a whole of a global object called template. Then you can use dot notation on that template object to access a particular template. Let's say you have a you have created a template with the name of hello right like so. Then the way you access that template from your JavaScript code is with template dot hello. So, is this make sense because this is going to be the key when we work right. So, when you let's say we created a template called header template name equals header then we put a h1 inside of that. So, the way you access that header template from your JavaScript file is with template dot header and then whatever variables you want to assign you assign it to template dot template name. Yeah, you can just let's say you have a template called hello and then you have a template called greeting. So, just do template dot hello dot variable name equal to whatever then template dot greeting dot variable name equal to whatever. You can just share the same options as it. So, for that you will probably be using a collection for that you know if that JSON is coming it probably is coming from your server right. Maybe maybe not if it if it's not maybe you what you can do is you can define a react define that JSON as a reactive data source. We will get to that later, but you can define it as a reactive data source and then you know I can assign it to both the templates. Then when that reactive data source changes these these will be automatically recomputed we will get to that. So, then there is template events. So, I said right I mean meteor is event driven. You want some sort of way to you want some sort of way to listen for click events you know submit events usually what usually what happens in any sort of applications is user summits a form. So, I mean or you know user clicks a button. So, you need some sort of way to hook into that event. So, the way you do that is let's say you have a template called hello right you do template dot hello dot events and then inside of that you provide a hash this is called an event hash. So, how this works is that the as the key you give it a string the first the and then you know inside of that string you separate the event and the target element with the space. So, let's say I want to click on an input element. So, I will do click click input. Let's say I want to submit a form I will do submit form. Does that make sense? Let's say there is a button called by button with an ID of button. So, what I will do is I will do click hash button. You use a regular HTML you know regular CSS identifiers for that target element and then you can listen for click double click double click key press you know that you like your regular jQuery stuff. Does that make sense? And then when this event when you when the way you hook into this event is you give it a function that will that will be executed when that event happens. So, this function gets two arguments. So, one is E which is the event objects I mean the first or the first argument is the event object this is very similar to jQuery. This will have all your current target and your target and know what sort of event it was and the second one is pretty new. So, the second the second argument that this function gets is the template context. So, I mean this is essentially you know what template triggered this event. Let's say I have many list items. So, when you click on the third list item. So, this will have this will have the data for the for the whole template that this event was that this function was listening on. Does that make sense? We will get to that when you see the see some code for it. But right now just just know that inside of an events hash this is how you create event listeners. Yeah, you can use classes and IDs. So, just replace click dot button or dot or hash button or whatever you want. You can use a regular CSS. Yeah, there is dynamic binding. So, it automatically listens to that and there are no zombie views. If you are from backbone you might have heard of zombie views. So, meteor takes care of cleaning itself up after something gets destroyed. So, there are no zombie views. So, reactivity. So, template is like one core part of meteor then the then reactivity is like what makes that template tick. So, what react everyone is anyone familiar with reactive programming? So, what reactive programming means is that let's say you let's say there's a function right I mean that function adds two values. Let's say sum equals a plus b. So, in regular programming what happens is that let's say you've added 7 plus 5 and the sum that some variable stores the value of 12. Then when you then if you change the value of either of those if you change 7 to 10 or if you change 5 to whatever that that some variable still has the value of 12 right that doesn't get changed. But in reactive programming what happens is that let's say there are two that they say you're adding a plus b into some variable called sum. It's a you've changed b to you know 12 or something like that. So, the sum gets automatically recomputed. So, that is what reactive programming means. So, what this essentially means is that you write some code in imperative you know in an imperative way then it is recalculated whenever the data changes that make sense. So, in how meteor this is like one of the key components of meteor. So, how meteor implements this is with two things. So, one is reactive data sources the other is with reactive context. So, what reactive data sources means is that this set of data will emit an event whenever it changes right and then reactive context listens for that change event and then recomputes itself that make sense. So, this is how this is how the whole reactivity you know the whole topic of reactivity is handled in meteor. So, the data sources the reactive data source is something that whenever it changes it sort of emits an event I've changed and then reactive context listens for that change. My data is changed. So, I need to recompute myself. So, it recomputes itself. So, where you be seeing reactivity a lot is when you combine something like collections. So, collections are a way to talk to your MongoDB database. So, the collection is one of your reactive data sources. So, whenever your collection changes you'll notice that your templates get re-rendered automatically. So, this is because of you know this reactivity. So, collection is a reactive data source and template is a reactive context. So, collection just think of collections as you know a JSON document that is coming from your server. So, whenever that JSON document changes. So, this template which is a reactive context will know that my data has changed. I need to recompute myself and I need to re- render myself on the on the on the client. So, then it re-renders itself and then you know you see a live update. Does that make sense? So, that is how reactivity is handled in in Meteor. So, I know this is pretty abstract but we'll take when we when we write some code you know it'll get a lot easier. So, session storage. So, let's say session storage is a key value store. So, think of it as a global communication channel or a global communication bus. Let's say you want to store which page the user is on right now. Let's say you want to store what the ID of the currently clicked item is or whatever. So, that you put it into a session storage. So, session storage is reactive. What this means is that whenever session changes if there's a view attached to that session that all that also changes. Let's say let's say I've set a session variable to page number one and then somehow after some processing that session variable has been updated to session to page number two and let's say I've linked a view to that session variable that what that view will do is that okay the view will listen okay. I was on page number one now the page now my data has changed to page number two okay. So, I need to recompute myself and I need to re-render the document to page number two. Does that make sense? So, that is what that is how that is session storage in in in action for you. So, it's very simple we'll take a look at this we'll be using a lot of session storage. So, it's very simple you know if you just want to store some sort of key and you want to keep track of that keep track of that value let's say whenever that value changes you want to recompute something let's say you want to change the view according to that to whatever stored in that session variable. So, for that you use session storage. So, interacting with session storage is very easy. You can just do session dot set then give it whatever variable name you want and then give it whatever value and then when you want to get that value back you do session dot get and give it that variable name. There is also session dot equals which checks for the equality. So, let's say this what this what this line does is it checks if current task has a value of learn meteor or not it it returns to or true or false. So, now before we get to persistent data storage let's just write some code we've discussed a lot of stuff and lot of it might be pretty abstract, but let's just write some code to see some of it some of it in action. So, everyone is at this stage we've added bootstrap and everyone is at this stage. So, now I'm just going to remove all my contacts or HTML file and then I'm going to add a head. These are just some bootstrap tags that I'm adding if you don't want to add this you know it doesn't make much difference it just makes your page look somewhat better. So, I've created a template called header and then I've rendered that template called header inside of my body. So, now inside of this header I'm going to create a row, I'm going to create a well because I like wells and that's all I'm doing here. So, what I've done here let me just see if it works yeah it works. So, what I've done here is that I've created a template called header and then I've rendered that header here. So, other than that there is an h1 tag called contacts inside of that header template but other than that whatever markup I've used is because of bootstrap it's not something I need to require. It's not something you have to type it out. You can use it very well without adding any of that. Yeah, so right now I'm using bootstrap 2.3. I'm not using bootstrap 3. So, because the smart package that automatically comes in with Meteor hasn't been updated so it still uses bootstrap 2.3 but you can use bootstrap 3 if you want using an atmosphere package I'll show that later. But right now since I'm using bootstrap 2.3 I'm using that fluid tag. So, we'll get to that when we get to atmosphere packages. Yeah, sure. When we get to atmosphere packages we look at how we can use bootstrap 3. So, is everyone with me? Does everyone see this well and h1 tag? So, shall I move forward? So, now what I want to do is I want to show a list of contact. Now what I want to do is I want to show a list of contacts all my contacts right. So, for that I'm going to create a new template. This is going to be pretty you know this is going to be like the one that we just created. I'm going to call it contact list and I'm also going to render it. I'm also going to render it inside of my body. So, inside of this contact list what I'm going to do is I'm going to create a UL element UL an unordered list. Then I'm going to each over something called contacts and then I'm going to inside of that each loop I'm going to create an li element and I'm going to put a variable called name inside of that. So, is this part clear? Should I bump up the font size? So, is this this part is pretty I mean we're going to be using this each a lot. So, just just tell me you know if this is not clear. So, we're going to be iterating over an array. Let's just think of contacts as an array. We'll assign that value later but right now just think of it as an array. So, we're going to be iterating over that array and then we're going to be rendering an li with the inside of which we'll show the we'll show variable called name. You have to put a space after it but not before. Double curly and then a graded array. Yeah, double curly. As everyone written in the code till here. So, now you know you see that you know you're you're iterating over something called contacts right but we don't have we haven't specified what that variable is anywhere. So, we're going to do that inside of our JavaScript file. So, I'm going to just remove everything. Then I'm going to do if meteor.isclient because we're only working on the client side right now. So, I'm going to do I'm going to check I'm going to write whatever code I want inside of a inside of an if statement which checks if the if the environment is currently the client and not the server. So, here I'm going to create a variable called contacts and this is going to be an array and inside of that I will put some objects with the name of let's say you know whatever. So, here's the funky part. So, I know that I have a template called contact list right. So, I want to assign a variable called contacts that is inside of that contacts list. So, the way I access that is by calling template.contact list.contacts then I'm going to return something inside of this. So, does this make sense? You that's all necessary actually but why you want to why you want to do that actually it will also work if you just specify contacts here like so but why we want to do that is because we want that if let's say something inside of that contacts array has changed we want that whole function to re-computed right. So, we want that we want that contacts variable that we were signed to the to the template also to change. So, the way that changes is when that the function linked to that is re-computed when that function is again recalculated. So, for that we just need to return it from a function. So, that the whole function is re-computed again it is going to re-computed the whole function that is linked to it. Now, it will add one more because you're not doing any sort of manipulation of the client right. Now, what you're doing is that you actually essentially you're just changing that variable and you know really starting a server but later we'll see an example let's say we're adding some contact then yeah dynamically yeah. So, now when we come back to the browser you should see that two two items that we just added. Is that okay? I even got this any errors anything? Should I proceed? Yeah. So, now I'm going to do something else here. So, now I've done something else here. So, I've created a session variable. I've created a session variable I've created a session variable called contacts and I've assigned that contacts to the array that we just created and then inside of our function I am doing I'm returning that that session variable by doing return session.get contacts. So, why I'm doing that we'll just take a look at that you know when we start adding something to our array we want some sort of reactivity going on. So, for that I'm just right now just assign just create a session variable and then just put that contacts array into that session variable. We'll be doing this because session is a reactive storage right. So, whenever something inside of that session change session variable changes that template will be automatically recomputed. So, that's why we're doing that. Okay. So, now so now we've been able to show some amount of some contacts here right. So, now what we want is we want to form that that sort of adds contacts to this right. No, you still need to make a function because that function is again recalculated not that they're not that data source. A data source just tells the tells whoever is listening that okay I've changed then the then that context listens for that change and then recomputs this this function that is linked that is the context yeah that that is a reactive context yes. Does everyone still have it working? I mean is there are the two things showing up? Okay. So, now we can actually do something here. So, we've we've we open up this JavaScript console on your browser and just do. So, now we're getting something back on the client also. So, we've just set that so here we've just set a set a session variable called contacts and you know assigned it that array right. So, now when we come back to our browser and when then we do a session dot get contacts from our console we'll see the same to to the two objects shown shown here. So, now we can actually do something else here. We can just do session dot set. I'm going to change that array. See. So, what I've done is I've set that contacts session variable to a different array. So, I've just created an array with just one object called with with a different name and as soon as I hit enter so that the you are the view also changed and you know instead of showing that showing the tool list items it's now showing just one list item with with with this new name. Can everyone see that in action? You just try setting setting a different variable. Yeah. So, this is reactivity right. I mean you didn't you didn't write any sort of listeners. You didn't you didn't bind any sort of event callbacks you know where you where you have to check okay if this is changed okay I need to do this now. So, a meter automatically handle that for you. So, when you say with this when you changed a reactive data source so the view that was linked to it automatically got re-rendered. So, this is going to be the core. So, similar to session so session variable is not permanent right. This is not getting stored into any sort of database or anything. So, if you refresh it will go away. It will come back to the original state. So, this is this is but this is reactivity at its core right. I mean when you change the data the views automatically change and this is how it is going to work with collections also. So, collections are a way to store data permanently into your database. So, when that data that is in your database changes. So, the view also change when a view changes then that then that changes automatically reflected into your database. So, that is how it will work for the permanent data storage also. So, if this is clear then you know we can also move on to persistent data storage not on a hard refresh but if you do a yeah. So, now we talked about session right. So, if you if you do a hot code reload right. If you change something in your in your code and then you know let's say you're running production application. If change something and then you have redeployed it. So, if the users if the users on a session let's say he's on page number one and he has a session of page number one set as you know if he has a session of page number one set to whatever value. That session will be will be sort of carried over when you do a hot code reload. That session will be preserved but not on a hard reload. When you do a hard reload that session will go away. So, does anyone have any questions? Okay, HTML file. The edge capital. Just change it to small data. No, no, no it will automatically. So, you need to do session dot get the contacts. You're actually returning just this variable and not the session variable. So, here we just do session dot get contact. So, what you're doing is you're setting a contact right. You're setting a session variable and then you need to return that session session dot get a backslash here. The way you end backslash. The way you end a tag is with backslash. You have an if tag. Similarly, you'll do a backslash to end it. So, before we look into persistent data storage, let's let's do one thing. Let's have a form here and when we hit submit on that form let's let's add let's update a session variable to actually add that that that element here. Then we know we'll look at how we can store that permanently to our database. So, what we're going to do that is you know you can also do that very easily. So, I'm going to render a new template here called add contact or something. And then I'm going to create a new template. This routine should be pretty familiar now. Then inside of this add contact template, I'm going to add a form. We'll have an input with a type of text. So, here's what I have. I've created a template called add contact template name add underscore contact and then inside of that I have a form and inside of that form there is an input field. And then I've rendered that form here called add with a with a greater than sign and and the name followed by it. We're just going to listen on the submit event. So, probably we should add let's let's just add. So, everyone following along? Is there any problem? Any errors? So, everyone has this form up here. So, what we want is when we click you know when we type something and when then when we hit and enter when we submit, we want that name to show up here. So, that's what we're going to do. So, for that we need to listen to some sort of submit event on this form. So, I just talked about how you can add event listeners. So, I'm just going to do that again here. So, I know that I have a template called add contact. So, I'm going to refer to that template by doing template dot add contact. And then I'm going to add an events hash events mapped. So, this is how I do that. So, here is what I do. I do template dot add contact dot events. So, here I do a submit on a form because I know that there is a form inside of that template. So, I want to listen to submit events on that form. Now, I've just added an error that says I'm submitting something but I'll just replace that with some good code. So, here we get we're listening to that event. So, how we're doing that is here. So, I've just added an events map on add contact and then inside of that I'm listening for submit form. I mean I'm listening for a submit event on that form. And then I'm adding an adding of adding a function that will get executed when that submit event occurs. And inside of that we get two arguments. So, we get two parameters. One is the event object which is the first argument and then second one is the template context. We'll look at template context in a bit but right now we're doing e.prevent default. Is everyone clear with this line? Prevent default. So, what we're doing is that when you submit a form it automatically does a post or get request. I mean it reloads the form that is how the usual that is what the usual flow is. We don't want that. We want it to stay on this page. We just want some other processing to happen. So, we just do a prevent default. You don't want the browsers or you know the default default event to happen. We just want that to stop and we want our code to run. So, for that we just do an e.prevent default. And then we're just doing an alert. Instead of this alert let's just actually console.log whatever there is inside of that t. Let's just actually let's just log out the two parameters so that we know what we're talking about. So, the first one is the event object. This is very similar to what the jQuery event object is and what you get with jQuery. So, the second one is pretty funky. The second one there is something called a data. I mean which is undefined right now but we'll get to data in a bit when we're doing some sort of each loop or something. Then there is a function called find and then there's a function called find all then there's first node and last node. So, the find we're going to be using the find lot. So, think of find as your jQuery find. If you're familiar with that. So, this is just a way to traverse the DOM and look for specific elements. So, let's say you want to find that input element. So, what you will do is you will do t.find. You will call this find function and then you know you will give it input type equal text or whatever you know whatever css selector you want. You just give it inside of the find function and then you know it will find that for you. This will just return one thing. So, if you do find all it will return all instances. So, we're going to be using the find function a lot. So, is that clear everyone? So, let's just take a look at that. So, here's how I've done that right. So, I know that there is an input element inside of this. I've given it a class of full name. So, I know that I can refer to it by calling t.find with the class name of full name. Is that, is this part clear? So, we just talked about the find function and how it can find specific DOM elements for you right. So, I'm just going to find the find an input element with the class of full name and then I'm going to get its value. Is this clear? So, now what we need to do is we need to set this value inside of our session variable. So, here's what I have done. So, I know that I have a session variable called contacts. I know that I need to get its value. So, here's what I'm doing. I'm doing var contacts equal to session dot get contacts. I'm getting that array back. Then I'm pushing that new full name, the new name whatever that I've typed. I'm pushing that object inside of that contacts array as an object and then I'm setting that contacts variable back to this new contacts right. Does this make sense? You can do it on one line actually. I just did it here. So, it's more clear. Everyone get this to work. Can you add a new element? So, I'm just going to try it out for you once. Let's just say change and then that change was added here. So, this is how it is going to work in with our permanent storage also. The flow will be exactly similar. So, instead of session dot get, we'll be actually talking to our permanent storage using something called collections. We'll talk about that in a bit, but is session, is templates, adding events, is all of that clear? Yes, yes, yes. Event map, yes. So, shall we move on to permanent storage? Just stop me if you have any doubts or anything. So, now we come to persistent data storage. In any sort of application, you want some way to store data back into your database and get data from that database. So, the way you do that in Meteor is with MongoDB. So, right now only MongoDB is supported, but in the future, there will be support for other databases. But MongoDB works out of the box with Meteor and you can use it without any sort of problems. So, the thing with Meteor is that the client and the server share the same database API. I've talked about this before, but the client maintains a local cache or an in-cache copy of the actual database. So, whenever you are doing any sort of processing, let's say this was talking to some sort of form. Let's say this was talking to some sort of form and I hit submit. So, what will happen is that this gindog will get added to my local database first and then it will be reflected on my screen and then the process will go on to my actual server. If it was okay, then it'll send me back, it'll patch. If it was not okay, it'll patch my client database with whatever was written. So, this is pretty key. So, the server and the client share the same database API. So, how it works is that the server publishes a set of JSON documents and the client subscribes for that document. So, whenever the document changes, so this client subscription is also changed and the UI is also changed accordingly. So, the only JSON data flows between the server and the client. So, this is key. So, other thing is that the protocol that this uses because this is real time the protocol that this uses is DDP distributed data protocol. But yeah, we'll get to that later. But right now, just think of it as a server sending some, if you're all familiar with JSON, it's a key value stuff. So, the server just sends some sort of JSON data and the client just listens for that. So, how many of you have used MongoDB before? How many of you used know what Mongo is? Okay, great. But I'm just going to do a quick refresher. Mongo is schema less, which means that before that, you know, Mongo is not like your traditional RDBMS, you know, you don't have your tables and stuff. So, here you have something called your collections. Collections are somewhat similar to your tables. Collections can have multiple documents. So, you have collections and collections can have multiple documents. So, each document is like a row. So, and then inside of that document, you have fields, which is like one attribute. So, let's say you want to store user profiles. So, you will have one collection called users. Inside of that, you will have many documents called user1, user2, user3. Then inside of that, you'll have name. You'll have fields like name, age or whatever. So, that is how Mongo works. It is somewhat similar, but it is not exactly, you know, you don't have your tables and your rows and columns and stuff like that. So, it is schema less. So, what this means is that one document does not have to, you know, all the fields of one document does not have to be this, does not have to be present in the fields of the second document. Let's say the first document only has a name and an age, right? In a user's collection, let's say the first document only has a name and an age. The second document can have this whole resume there. You know, it can have his name, first name, last name, his work experience. You know, it can have everything there. So, you don't have to sort of restrict yourself to only having, because the first, because the first document had a name and a last name and nothing else. You don't have to restrict yourself to just that in the second document. So, it is somewhat schema less. So, when you get data from Mongo database, what you get is instead of that whole array of objects, what you get is a cursor. So, cursor gives you, think of it as, you know, a wrapper around that object. So, you can interact with that actual data by calling some functions on that cursor. We will take a look at cursors later. So, MongoDB crash course. So, yeah. So, this is just going to be a very simple, you know, crash course into Mongo, but how we can add, find or, you know, in update fields. So, the way you find, so the way you interact is, you know, you do, you create a collection, just do db.collection name. If I want to create a collection called users, I'll probably just do a db.users.find, or I'll just do a db.users.insert. I don't have to specifically create a collection. You can just start using it and Mongo created on its own if it does not exist. So, the way you do this is, so let's say we have, we have a collection called users and we want to find every user that have a specific age, right? Let's say 21. So, the way we do that is db.users.find and then, you know, inside of that, we'll provide a, we'll provide a hash with a key. Let's say an age and then with the parameter, which will be, which will be let's say 21. So, if we do db.collection.db.users.find and inside of that, we do age, age, golden, 21. Only those records will be returned that have the age of 21 set. So, we can, we can actually interact, I told you, right? You can interact with Mongo's, with Meteor's MongoDB instance by running a command line tool. So, here's how you do. So, open up a new tab and just type Meteor Mongo. So, what this does is, you know, it opens up that MongoDB shell and you can start interacting with it. So, I'm going to do this. So, here's what I've done. This is the first command, right? So, I've done, can everyone read this? So, I've done db.users.insert and then, I've given it a JSON, think of it as a JSON object, right? I've given it an object with a name and with a key and a value, okay? So, now this is, this didn't give me any error. So, I think, you know, it saved, it saved it back into the MongoDB database. So, I can, I can check that by doing, okay? So, when I do, if the way you think of db.users.find as doing a select star in your, select star from users in your, if you're from SQL or, you know, if you are from any RDPMS experience, you will do select star from users, right? So, think of doing selects db.users.find as doing just that, okay? So, this is returned me the object that I just put in. Let's say, I'm adding a new one, right? And then, I do a find, it'll give me two things that I just put in, okay? So, the, let's say, I want to just find where the name is, pardon me. So, the way I do that is, now it just gives me where the name is running. I know this is a very simply example, but I think it should, if you're not clear with any of these command, just let me know, yeah? Yeah? Your application should be running, okay? So, before you run Meteor Mongo, just make sure that your application is running, then open up a new tab and then run Meteor Mongo on that, okay? Instead of button, just save it. Let's see what this value should be outside, actually. Outside of that bracket, just do .value. Where does it show? It should be a JSON object. Now, it should work here. It should be inside of encodes. Now, butchapps also working. E.preventDefault. Let's do an E.preventDefault. Yeah, we did it past just one minute. It's called addContact, right? Yeah. Now, just check if it works. Is everyone clear about how you find and how you insert stuff into your database? Okay? So, now, let's say we want to update something, right? Yeah, you could do that. I think you could do that. I haven't tried doing that, but I think yeah, you can do that. It's just a Mongo shell that is running in the background. You should be able to access it without any, which port you're listening to, right? Yes, we didn't do any. Okay? Yes, I think, yeah. I haven't tried accessing it directly, but yeah, I'll just, you could probably check the docs for that. I think there must be a way for doing that. Okay, so now we come to updating your record. Let's say if there's some record that is already there and we want to update that, right? So, the way you do that is with dv.users.update and then let's say you want to update where the name is. I mean, you want to update the first record and then you want to set, you want to set something, right? Let's say you want to set an age of 21. So, here's how we do that. Here's how we do that, right? So, with update, so with metia, with Mongo, what happens is that when you update something, so it gets, the whole, the whole record gets replaced with whatever you, whatever the new new object that you give it, right? So, we don't necessarily want to replace it. We want to update, I mean, we want to add something to it or, you know, we want to append something to it. The way you do that is with calling this, this dollar set and then giving it that, giving it that object. So, instead of replacing, it'll just add it back in. Does that make sense? So, you also have a few other modifiers that you can use. So, there is one that I like that is called dollar increase, dollar INC and then, you know, you do, you do whatever dot, if you have like some sort of voting going on, right? So, when you click on upvote, it should upvote, it should increment that by one and when you click on downward, it should decrement that by one. So, for that, you can just do dollar increase. Let's say you have some increment function. So, behind, I mean, whenever that increment function is called, what you can do is just do update, give it whatever post you want to update and then, just do dollar increase, votes plus one. If you want to do a downward, just give it votes, dollar increase, votes minus one. Does that make sense? So, I mean, this is just a nicety that, that Mungo provides us, you know, some, it provides a lot of similar modifiers. You can check, take a look at the document, documentation for that. There is dollar increase, dollar set, dollar push. Let's say you're, you're working with an array, right? Let's say you have a tag list and you want to append another item to that, to that array. So, you can do that with dollar push. And removing is also pretty simple. You can just do db.collection, name.remove and then, give it whatever, whatever object you want to remove from that collection and it will remove that for you. So, here's, I mean, when you're using with, when you're using this with meteor and let's say you're removing something. So, meteor will automatically update the view also. So, we'll see, we'll see this in action. I think you'll be pretty surprised by that. But yeah, for, with, with Mungo db. So, to remove, you just, just to, just to db.collection, name.remove and then, give it whatever you want to remove. I'll just show you an example. So, that, I just removed the object that said name, name, with that add a name of Barney and it got removed. And now when I do a db.find, I just get that one, the one remaining document. It automatically installs it for you. When you do, when you did a curl meteor install, it automatically did that for you. Okay. So, collection. Now, we come to collection. So, collection is the meat of all that we've talked about right now, right? So, collections give you the API that, that, that helps. So, collections give you an API to talk to your Mungo db database. So, with, I mean, the collections, the thing is that collections, you can use your collections both on the client and the server. Because you have database access everywhere. So, you probably want to use your collections everywhere. So, collections let you sort of publish some sort of, some on the server what collections does is that it directly talks to your Mungo. Then it lets you publish some sort of, some documents or you know some sort of data. And then on the client, the, the collection subscribes to that data. Think of it as some sort of a channel, right? Some, the server is pushing some data in from that, from that is another server. So, it talks to your Mungo and then pushes some data from that server. And then your client actually subscribes to that data and does whatever processing it wants to do with that, okay? So, that is how collections work. Collections is sort of, sort of that, that thing in the between, the thing between your actual database and your, and what the user sees on the website and then keeps, keeps both the things in sync. Yeah, the collections API actually mimic Mungo's API. So, whatever we did right now, right? We did collection, db, db.collection name.insert.remove.update. So, collections, the collection API sort of mimics everything. So, on the server side, the collections are an interface for talking to Mungo databases. So, here you see like, let's say we've created a collection and we call, we've created a collection called contacts, right? Let's just forget about how we create collections for now and let's just think that we have a collection called contacts. It's sour somewhere. It's, it's, it's a, it's think of it as some sort of a data structure for publishing and subscribing to two records, to JSON documents. So, let's say we have a collection called contacts. So, the way we add or insert or find and remove stuff from that collection is by, is very simple. So, to add, just to contacts.insert to remove, just to contacts.remove to find, just to contacts.find, okay? It was, it is very similar to whatever we did here, right? I mean, to insert a record, we did, we did db.username.insert and then we provided it, it, it, it is an object, right? So, similarly with collections also, you can just do contacts.insert and then give it a name of Barony or whatever, whatever you want to do. So, your collection sort of mimics that, mimics the MungoDB API. So, is everyone clear with this? Because we'll take a look at this in action. So, it should probably be much clearer then. Okay. So, inserting records, contacts.insert the, inserts a record, finding records, contacts.find. So, here, here, the one thing that I want to mention here is that, you know, when you do contacts.find, it gives you a cursor. It doesn't give you that array, it gives you a cursor. But your templates know how to sort of observe on that cursor and, you know, check for, check if anything's been added or anything's been updated or anything's been removed. So, it gives you a cursor. So, if you want to get that array out of that cursor, you do a .fetch on this again. That'll give you that actual, that, that'll give you that actual array. We'll take a look at this, you know, when we get to it. So, then there's also find one which just returns one record instead of returning an array. So, then updating is also pretty similar. We just talked about it, how you can set something or you can increase something or, you know, how you can push something in. Then deleting records is also pretty similar. contacts.remove will remove it from the collection and from your MongoDB database. Before we come to, before we come to, you know, application structure and all, let's, now that we've talked about collections, let's just integrate, you know, a permanent storage into this. So, the way we do that is inside of this score at the top. Outside of this is client. I want my collections to be used on the server and on the client. So, I want to be, I wanted to be used on both the environments. So, I'm not going to add this line of code inside of my sclient flag. I'm going to add it outside so that it's loaded everywhere. Here's what I'm going to do. So, here's what I've done. I've created a new variable called contacts with a capital C just so that, you know, it's clear up. This is a new Meteor collection and then I've given it something called some, then I've given it a name called contacts as an argument. So, what this does is in the, in your database, it actually creates a new collection called contacts. So, if you were to change this to something else, so what we'll do is it will, now it will create a, create a collection called contacts to. But I don't want that I want to be contacts. I'm just going to be, I'm just going to leave it at this. So, I'm creating a new collection. This is how you create a new collection, right? You do a new and then you do Meteor dot collection with contacts, right? You can actually use without, without providing it any sort of argument, you can actually use, use a, use a, or you can actually provide null here or whatever and then use, use this as an only, as a, as a, as a only client side, client side collection, which, which will just act like a session storage on steroids, right? I mean, it'll, it'll, it won't store anything anywhere but it will let you, for that, for that user, it'll let you, you know, save data into this and, you know, get data back from it, okay? Let's, the one use case for this would be to show some sort of error notifications. Let's say a user is submitted in a form, then you want to say that, you know, form was submitted or, you know, there was an error. So you can, you don't want to save those notifications anywhere to your database, right? You just want that to show to the, to be seen by the user, right? So for, for that you can just use a client side collection like this. You can actually even create it inside of your client flag and then, you know, use it as a local only client side collection without storing it to your database, okay? But now we're going to be storing something to our database. So I want to, I wanted to have a name of contacts. So here's what I'm going to do, okay? So now actually you can even start interacting with this. So now I come back to my console. I said, right? I mean the, the same collection API is, is, is on the client and on the server, right? So we can actually start talking, talking to it with our browser console. So if I do, if I do contacts, I get, get back a meteor dot collection, which is what we created right now, right? So to insert something, I would do, like I just showed you, I will do contact dot insert, okay? So now it gave me back this string, which is just the underscore ID. So in Mongo, so there is you don't have your IDs, you have something called an underscore ID, which is actually an object ID. So this is unique. So Mongo automatically created for us. So this is unique. This is, think of it as your normal ID fields in your, in your regular RDVMS, okay? So if, if you get back this string, then you know that, you know, it was, it got saved into your database and there was no problem with it, okay? So how many if you got to this stage? I mean how many if you, any, any errors anywhere? Yeah, we'll talk about the security aspect, right? Okay, so now we've just inserted a record, so we can also write. So if we do a contacts dot find, you'll see that it gets, it gives you back a cursor, right? Like I just told you, right? It gives you back a cursor. The way you get the actual array out of that is by calling fetch. Now it gives you back an array with an, with a name of, with the name of Arnie and an ID that got generated, okay? So is everyone, has everyone got this one? Okay, so now we're actually going to look at how we can put data back into this stored data into our database, okay? So we have this add, so we have this submit event listener, right? So instead of let's just remove all the session variable that we created. So what we want to return here in this list is, is what is stored in our actual collection, okay? So we're going to collection dot find. So here you'll notice that I'm not doing a dot fetch, yeah? Because the template is smart enough to do a dot fetch on itself, on, on its own, okay? So let's see what this gave us, huh? So I'm just going to remove everything. So I, since I'd inserted a record already into my collection, so that collection, that record is being shown here, okay? So the way I, the way I told my template to look for that, look for the records in that, in my collection is by doing this, is by returning contacts.find, okay? Is everyone clear with this? Okay? So now inside of my add contact, I actually want to, instead of, you know, adding it to my session storage, I actually want to add it to my, to my database, right? So the way I do that is, is very simple. I'm going to get the value of that input field and then I'm going to do contacts.insert. So is everyone with me till here? So what I've done here is I, we just talk to, talk to this, this, this, this collection with the console, right? So we're doing the exact same thing here, but what we're doing is, we're getting the, the value from that input field and we are putting it into this, into our collection by doing contacts.insert. Is, is this point clear? Any, any questions? Okay? Has everyone tried this out? Okay? So if you, if you go back and then, you know, you type something here, now it's, now it's, now it's showing up. I mean, this was happening earlier also, right? But now the difference is that this is actually stored into your database. The way you check that is by doing a reload. You know, you'll see that the three things still get, still are being shown here. Okay? So now you're actually, actually saving something to your database right now. Yeah, there it will, there are all these three things. Yeah, because we're saving to a collection called contacts. Okay? So now we've, you know, in this contacts app, we've looked at adding, right? So let's, let's complete this by doing the crud of, you know, update, or let's also do update and delete just so that, you know, we can, after that we'll talk about, if there's time, we'll talk about how we can organize an app in a better way, or I'll just walk you through some, some best practice, okay? But if everyone cleared till this point, is everyone able to add something into their form and, you know, after reloading, it should still show up, right? You got this to work. Okay? So now what I want is that now inside of this, inside of this list item, right? So there is this list item, right? Okay? So inside of this, I want to, I want a button called delete. So what that will do is when I click on that delete button, it should delete that record. Okay? So that is what we're going to implement now. CSS is messed up, but that's okay. So here's what we have. So inside of this each, each, inside of this block where we are iterating over that contacts array and then, you know, we're entering that li element. There I've added a button with a class name of delete. So other, the other classes are just for bootstrap, you don't need to add that, but I've added a button with the class name of delete. So what I want is when I click on that button, that record should be deleted. So the way I do that is everyone, has everyone typed out this, this, this part? Yeah. So the way we do that is we attach an event listener to it, right? Any questions? Actually, let's, let's do one thing. So because we're going to be adding a lot of complexity inside of this li element, let's separate it out into a partial. So this is, this is one pattern that you'll see pretty often, right? You iterate over, over an array and then for each array, you'll render a partial. So let's just see that. I mean, right now we just have one delete button, but later on maybe you'll have, you know, edit button, you know, some other, some other complexity inside of that. So I'm just going to do, so here's what I've done. So inside of that each, inside of that each block, I'm rendering a new, a new template called contact item and then I've created a template called contact item with template name equals contact item and here I've just pasted it in my line. So now let's see if it actually works. Yeah, okay, so we're getting the same three things again. So nothing's broken, so everything's working. So just that we've moved some code around a bit, okay? So this is clear, right? So now what we're going to do is we're going to attach events on this contact item template, okay? So we're going to listen for a click on this delete button which is inside of this contact item template. So the way we do that is very similar to what we did with submit button, with the submit form. So you do template.contactitem.events. So here's what I've done, right? I've done template.contactitem.events and then inside of that I'm doing click on dot delete, I mean click on anything within with a class name of delete. Then I'm going to attach an event listener. Right now I just alert something but here's what, here's, this is the part where we're going to do all the, all our deleting stuff, okay? Okay? So now I, now take a look at what I've done. I'm consoled over logging this. So what, so what happens is that when, when, when we're iterating over something, you know, within, with a, with a hash each. So inside of that loop, so this is set to the currently iterated item. Does that make sense? So let's say we have an array of five items. So this, for each time, this is, this is set to that item. Let's say for the first thing it will be set to item number one, then you know it will be set to item number two. So it's set to the currently iterated item. So now we can come back to the browser and when, when we hit delete, you can see, right? The object, I can see that the object with the name of John Doe and, and this ID got, got logged. Okay? So now we know, now we're getting a fair idea, right? How we want to interact with our database. Now that we have this underscore ID, we can easily just remove this underscore ID from our collection. So that's what we're going to do next. Yeah, so it, that, that is something that handle word automatically does that for you. So inside of this each, so inside of this each, this, this, let's say you have a regular object, right? Regular object and you're iterating over that object. You don't need to, let's say that there are two properties called first name and last name. You don't need to do this dot first name and this dot last name there. You can just do a first name and last name because it automatically maps this to that ID, right? So even, even, even if you're not using collections or anything, it automatically works that way in handlebars itself. So you don't need to do this dot first name or this dot any property. You can just do, just call that property. So because we all know that handlebars will know that it is getting called on this, this current object, okay? So now in our JavaScript file, now that we know we have a way to talk, way to get the ID, we going to delete, we're going to remove that by the ID. So we're going to do contacts.remove. So here's what I've done. It's, it's just one line of course. So it's contacts.remove, this dot underscore ID is that, that's all we're going to do. So what, what this code does that, you know, this dot, this dot underscore ID gives us the ID of the current element. Then we're going to tell our collection to go find that element and just remove it from our, from, remove it from our, from our list. And that's what it does. So I can, I can check it right now also, right? I click on this delete and it's, it's gone and it's gone permanently. So even if I probably need to plug in my, just a second. So yeah, have you all tried this out? I mean, is this working? So give me just a second. I'll just plug in my adapter. I'll just tell you, I'll just look at my, I'll just plug this in and come back. This, this is inside of your HTML file. Actually go to my get, go to the get repository, just so if not get out. So you can just take a look at that. Okay, so the, the lead is now working. Is it, is it working for everybody? Okay, so, so we've got two things to work. So now what we need to work on is this edit button, right? We need to some, we need to have some sort of way to edit it. Okay, so for that what we're going to do, here's what we're going to do. If we're going to take a look at the if, if block helper that we talked, talked about. So here's what I've done. I've added an if statement which says if is editing, is editing is a variable that, that I'll just show you where it comes from but here's what I'm doing. If is editing then I'm going to show an input field and inside of that input field I'm going to have the name as a value. Okay, so if I want to edit, I can just edit, change the value and when I hit submit or something it should, it should update. So if I'm not editing I'm just showing the name as it was earlier. Okay, so now I need to have some sort of way to figure out which item I'm editing, right? If there are four list items I want to have some sort of way like if I've clicked on, click the edit button on the second item. I need to show this form on, on the second item, right? So that is what we're going to do right now. So before that just let me just add. Okay, so here's what I've done. I've, I've, you saw that there was this is editing variable here, right? So I'm doing template.contactItem.isEditting and here I'm returning a session variable called currently editing. I don't, I haven't said this anyway so I'm going to do that right now but just, just you know keep, keep track of what I'm doing you know then when I, when it's complete I'll just walk you through the whole thing. So if I am not editing I'm showing the name and then I'm also showing a button called edit along with it. So what, what should ideally happen is that when I click on this edit button, so that thing should change into that, into that form. Okay, so that is what we're going to work on now. No, it's hash if. Okay, so now it seems to be working. So here's what I've done. Okay, so inside of this, this HTML5 I have if is editing. So it just checks, checks if you know this current, this, this item is currently being edited not. If it is not being edited it will just show a name and a button alongside with it with, with, with a class name of edit. So what should happen is that if I click on this edit button this, this name should be replaced by a, by a form feed. Okay, so here's what, here's the code that does that. So I'm listening for an event on, on the edit button. So I do a click on dot edit. What I, what should be done is that I'm setting a car, setting a session variable called currently editing. And I'm giving it just, just one minute. What we're doing is that we're setting a, setting a session variable of currently editing to this dot, this dot underscore id. We just use this dot underscore id to remove that, right? So this is just that unique string. So we just setting the currently editing session variable to that id. Okay, so then inside of this contact, inside of this is, is editing, you need to check if, if we're iterating or let's say we have five items. We're iterating over five, five things. And we need to check if item number one has that id, show a form instead. If item number two has that id, that is there in currently editing, then show a form instead. Okay, that is what we're going to do. Is this, this part clear? Okay, any question so far? Okay, so now we come to that is editing, right? So, so inside is editing, I need to check if it is equal to, so here's what I've done. Inside of that is editing, I've written, what I'm doing is I'm checking if the, if the session variable called currently editing is equal to the id of the currently iterated item. So imagine this, there are five list items, right? I'm iterating over all of them. Let's say I have, I have a session variable called currently editing which is set to five, set to four. So I have five list items. So the first, I come, I come here and then this is editing, checks the first one. Is the currently editing thing set to one, it's not. So it just shows the name, a name instead. Is it set to two? No, it shows the name and an edit button. Similarly, it checks for three, then it comes to four. Then when it comes to four, what sees is that, okay, the currently editing session variable is set to four. So instead of showing the name, I need to show an input field here. So that's what it does, right? It shows an input field here and then it comes to five and then, you know, again it fails. So it just shows the name instead. So that is what is happening here. Is that part clear? Okay, so let's just add a cancel button here. So I've also added a cancel button here, which does nothing. Actually, it just sets the, it sort of resets the currently editing variable. So let's say the currently editing, you know, that session variable that was called currently editing. Let's say that was set to three and I hit cancel. The button next to that input field and actually cancel. So what it does is that it resets it. It just sets it to false so that, you know, it's not true anywhere else. Okay, so that's what I'm doing here. So what this does is that, you know, this edit button sets that currently editing variable to the current ID and that cancel button just removes that. Okay, is that part clear? So that's what we're doing here. We can see this in action here. So if I click on edit, I see a form and then if I click on cancel, that form goes away. Okay, so now what I want is that when I submit, when I type something here and when I hit enter or when I submit something, it should update, right? So that's what I want. So here's what we're going to do for that. So what I want is when I hit update or when I hit enter, so when I submit this form, the value should get updated. That's what I want. So for that, what I'm going to do is I'm going to listen for an update event. So this is going to be very similar to what we did when we were inserting records, right? We were doing, we were getting that value and then we were setting that inside of, by doing contacts.insert. Now the only difference is that we're going to do contacts.update. So the way you do that is submit. So I'm just going to copy paste it. Now we got this to works. The way this works is it's pretty similar. I mean the code is almost exactly the same. So what we're doing is that we are listening for a submit event on that form. So we have a form here, right? So we have this form here. So we're listening for a submit event on this form and then what we're doing is we're getting the name. I mean there is a, there is a class name or full name on that input element. So we're getting its value by doing t.find full name .value and then we're doing contacts.update. Then the id is this.underscore id. We've used this.underscore id many times. So it should be pretty clear. It's the id of the currently iterated item, right? So is everyone clear with that? So we're doing contact. We want to update that item and we want to set its full name, set the name to full name. Actually what you should ideally do here is, what you ideally should do here is you use a dollar set modifier, dollar set modifier and then we're setting the name to the full name that we just got. Is everyone clear with this? And then finally we're setting the currently editing variable to full. So that you know it wipes whatever there is in that currently editing session variable. Is everyone clear with the update? So now we have the basic crowd implemented. We have this. We can add, we can add delete and update elements. So I mean this is pretty much the core of what you can do with Meteor. I mean you can build like bigger applications on top of this, right? I mean this is sort of the core that powers every sort of application that there is. So here's something that I built actually. This is pretty similar to what we did today. So here's how it works. So I told you, right? Meteor has this account system that you can use. So the way you use that is pretty simple. So you go to the terminal and like you added bootstrap just to Meteor add accounts base. So these are packages that Meteor already provides you. So this accounts package lets you add a full authentication system, you know, sign up login, forgot password, all of that with just one line of code. We're just going to take a quick look at that because we're running out of time. You won't be able to customize this but you can take a look at my code base. There you know, we'll see some sort of customization there. So right now we're just going to add a quick login and sign up functionality. The way you do that is you do Meteor add then you need to add a couple of packages. So one is accounts base then the other one is accounts password. So this is for sign up with password and then the third one is accounts UI. So this gives you a nice UI, you know, the login drop down that I just showed you. This gives you that. So I'm just going to quickly add these three things here. It's sort of the core that powers everything else. Yeah, so this accounts system also lets you do, lets you add a third party authentication. Like there is this package, let's just do Meteor list. You'll see that there is accounts Twitter accounts GitHub. This is for the OAuth. I mean, if you've used that before sign in login with Facebook or login with GitHub, you can just add that, you know, it very easily. Right now we're just going to take a look at the regular login and sign up. The way you add that, so now we've added those packages, right? Yeah, so the way you, the way you actually use that is I want to use that in my header. In the header template, I want that, I want that login button and that login drop down to come here. So the way I use that is with this and we should be it. So there is this one small, one small line of code that you add called login buttons and then what you get instead is this whole sort of create an account and login and, you know, forgot password and everything else. So let's just see if this actually works. I'm going to create an account. No, this does not work. This, this accounts UI does not work. Yeah, you can say that, yeah, directives like the tags that you create, your custom tags that you create here. Yeah, it's almost similar to that, just that instead of creating your custom tags, you just call this one helper function and this adds that into into your application. So I'm just going to create, I'm logged in, right? I'm logged in with my, it shows my, it shows the email that I just logged in with. So the way you, let's see, I mean this, this, if you want to verify that I'm currently logged in, you can just do this from your browser console, it'll give you the details of the currently logged in user. Let's say I log out now. Let's say I sign out and then I try to do this, it'll give me null. So let's say I want to sign back in. I can do that very easily. Now I'm signed back in and I can verify that with by doing this. So this is how you add an entire authentication system with just one line. So now let's say, okay, so now let's say that, you know, what would you essentially want is that before, yeah, before we talk about accounts in detail, let's just talk a bit about application structure, right? You can write your entire application in one file. That's what we've done right now. We've written our entire application in just one .html file and one .js file. That's now the ideal way, which you should probably split your application so that, you know, in a production ready application, you'd probably want to split your application into many, many files so that, you know, it's easier to find and it's easier to work with. So the way you do that is you create a client folder. Inside of that folder, you put all your templates and you put all your JavaScript file. You create a file called server. Inside of that, you put whatever server code that you want to write and you create a file called public. So this public file will have all your images and your robots.txt and all that sort of stuff. Don't put your CSS files in the public directory. This is very important because CSS or, yeah, no, no, no, you can and you should create some sub-directories inside of your client folder. So, the media will automatically read whatever is inside of that. Yeah, yeah, yeah, that's what, that's what, that's how it should be done. So let's say, let's say here, I have a folder called client, right? This is, this is how a usual meteor app looks like. I have a folder called client. Inside of that, there is one file called main.html. I'm calling it main because this will be loaded last. So this is like the, this is the file that will call all the other templates inside of this, okay? Then there's one main.js file, which will again be rendered last. This will, this is where all the subscription will go in. Then there is inside of that client itself, there is one style sheet folder and here I am putting all my CSS file. I want my CSS file here so that, you know, if there is any change meteor automatically picks it up or if I'm using something like less or SAS meteor knows that it needs to be pre-compiled and then converted into SAS. So don't put your CSS files into your public directory. You can do that, but it's generally not advisable. Then you have your views folder inside of client. So here what what you should do is you create a folder for each view. Let's say you have something like you're creating a blogging application. You have a post and you have comments. So create a folder called post inside of that have a template called add post or have an edit post or, you know, post listing or something like that and then similarly for comments create a new folder called comments and inside of that comment listing and add comment and stuff like that. Create a, create one template. This is the key principle here. One template for every one file. So if you have one template put that into a separate file and organize that accordingly. If that template adds a new post create a new folder called post and then add then create a file called add underscore post or something like that and then save it inside of that inside of that file. So you should always try to have one template in one file. This is just the best practice. You're not forced to do it. You can create an entire application in one file, but this is just a general best practice. Then your collections should be outside of your server or your client directory because you want your collections everywhere. You want your collections on the client and on your servers. So you want it to be outside of that. So we just talked about documents. Is everyone clear with the file structure and stuff? You can take a look at the app. I'll just share the link with you. You can take a look at the application that I just built that this pretty much has all the application structure that I just that I just talked about. So then there is accounts. We just talked about accounts. We even added it. So there are a couple of things that you can add here. So the accounts base is the base. And then on top of that, if you want to password base sign up, you use accounts password. If you want to face sign it sign up with Facebook or sign up with GitHub, you can use those use those packages. Let's just go ahead go ahead and add one of those. Meteor add accounts GitHub. So I'm just going to add a GitHub sign in with GitHub button. So this is added. Let's see what this does. So I'm just going to come here. So my file is automatically loaded. I'm just going to yeah. So now you see right. So now there is a button called configure GitHub login. I mean this time I'm being shown this button here because I haven't configured my login. So what I need to do is I need to go to GitHub and go to this URL and create a new application and then allow that application to actually do a login and sign up. Once I do that, I'll do that later. Once I do that, you can have your users sign in with GitHub or sign in with GitHub or with any other service. So this is the workflow for other things also. If you want to do a sign in with Facebook and just do Meteor add accounts Facebook and then it'll start working instantly. So we just take a look at the account. Security. So now there is this cons there is you know we just talked about it right. I mean we even saw it how we updated stuff from our browser console how we deleted stuff from our browser console. So there is I mean this is sort of this misconception that this is not secure and you know you shouldn't use it for production applications. This is just the default. I mean this browser access this whole browser accessing your entire database that is just a default that comes in with Meteor. This is because of two packages called auto publish and insecure. So these two packages are like a prototyping tools. Think of them as prototyping tools. They give you instant access to database on your client. But once you remove that right. Once you remove auto publish and once you remove insecure is running you when you when you run these two lines of command then your client does not have access to your to your database unless and until you specifically you know explicitly give it some sort of access. So what you want to do is instead of what this auto publish let's talk about auto publish or what this auto publish does is that it takes your takes whatever collections that are there in your database and then just pushes it pushes out pushes it out to your client to all subscribe lines. What you want to do instead is that maybe I just want the records for the currently logged in users. I don't let's say there are five users. I don't I don't the user one should not be able to see user number two's record right. So that should how it should work. So what what happens by default is that Meteor pushes everything Meteor sends user one user two user three every every every detail that is there Meteor just sends it out across the server. So what you want is you want to remove that functionality. You do that by doing Meteor remove auto publish. Once you do that then you want to create a sub create a publication. So what publication is is that you know you tell Meteor what you want to publish. I only want to publish the the records for the currently logged in user. So to tell Meteor that from your server side you write this one line of code that says Meteor publish then you give it a publication name. So this contacts that I've written is the name of the publication then you give it some sort of function where you know inside of this function you can do whatever you want right. So here I'm just I'm just finding all the contacts that are that have been created by the currently logged in user. So this dot user ID inside of a publish function gives me the user ID of the currently logged in user. So here I'm just finding all the records that have been created by this currently logged in user and then I'm sending that out via a channel called contacts. Then in my client side code I'm going to subscribe Meteor dot subscribe to that contacts channel. I just created a channel right that just sends the currently logged in users records. I'm going to subscribe to that channel by doing Meteor dot subscribe contacts and that's all. Now user one will not be able to see user tools use user tools records and you know similarly everyone will just have only those access only those records that they themselves have created or they themselves have access to. So this this was about reading restricting your read access to restrict your write access. You can do what you need to do is you need to remove this one package called insecure. So what insecure does is that it mimics your your database and gives you full access on the client. You can do in search you can do updates you can do delete on the client itself. You don't want that. So you just remove Meteor remove insecure you just remove the insecure package and then you allow certain functions to be run by the client. So here I'll just take a look here. So I've created I've created an allow allow hash and then I'm inside of that I'm providing what all functionality can be done from the client. This is sort of a permissions check or a permission system for what the client can do with my database. So if inside of that I have an insert function. So here I'm checking that if a user is not logged in. So this insert gets two arguments. One is a user ID and then the second one is the document that is that the user that the user is trying to insert. And I'm trying to check here is that if the user is not logged in I don't want to insert anything. You need to be logged into insert something. So that is what I'm doing here. Then in the update function I'm checking if there is a current user if somebody is logged in and that user and the document that the user is trying to update is his own. I mean he's the user he's the owner of the document that he's trying trying to update only then allow this update to happen otherwise don't allow it to happen. So that's what I'm doing here and similarly for removal also I'm doing that if the document that the user is trying to delete is the document that he's created himself only then allow this delete to happen otherwise just stop it. So that is what you do in this allow and deny function in this allow and deny methods you this is sort of a permission system only allow this to only allow this sort of functionality to happen on the client deny this sort of functionality on the client so you do that with this is this clear this only restricts on the client side because your server has complete access to your database that happens in the regular applications also. So this permissions check is for whatever updates are coming in from the client side via the browser console or via the the form of a form or anything like that whatever updates are coming in from the from the client for that you have this sort of permissions check yeah you can do validation but for that there is no sort of in in building you need to write your own I mean you just need to check you can use probably you can use all of these validations method you can probably create that in a separate root root directory in your root directory you can create a file called labor something and then use the same records check because because the file is shared right you can use the same validations validation you know same functions here and the client here for this allowed in I and for your server side validation also okay so there is something called methods so what methods does is that these methods are functions that are called from the client and are run on the server so I mean if you let's say you've created a method right and that method is let's say you've created a method and you just and let's say you've created a method and you want that method to be called from the client but you wanted to be executed on the server only. So let's say you're sending emails right you don't want to send emails from your client right you want to send your emails from your server so what you do that is you create a method called send email with this with this you create meet you do meteor dot method and inside of that you create a function called send email and then from your client this goes into your server and then from your client you call you do meteor dot call then then you give it name of the function along with whatever arguments you want to pass it okay is this part clear this is also a way to restrict your client from having full access to your to your database let's say you want to add something let's say instead of let's say you want to you don't want to also spline to be able to add records so what you do what you can do is that you can create a server side method called add one or add post or add comment and then from your client you can do whatever validation check you want inside of that method and then from your client you can do you can call call that one function called add post or add client okay so your client won't have direct access it will have that access via the server okay and then if he knows that function name then if you know if he knows what arguments you need to pass then you can call that but yeah you you should probably have some sort of validation running on the on the server itself yeah so deploying this is my favorite part actually so so the way you publish let's say you've created an app right now and you want to share it with everyone else so usually you know you probably create a Heroku account and then I'll deploy it there so with with Meteor what you can do is you can just do Meteor deploy let's say I do I do Meteor deploy and then I give it a URL so Meteor provides you automatic provides you some sort of some sort of hosting so you can use this for for sharing a smaller apps with with world I mean if you want to get some instant feedback just you can just do that you just do deploy you know whatever name dot meteor com and meteor deployed for you and it'll be available there we can just let it just deploy and then we'll test it out yeah so this is deploying but if you don't want to use Meteor's hosting service which you probably wouldn't for a production ready application you probably want to bundle it into a bundle it into bundle it you know into a tarfall and then when you unzip this tarball you'll get a regular node application that you can run that you can run on any node server you know on your on on Heroku or node just to or wherever wherever that you have node running you can run your you can deploy this application okay so Meteorite yeah so I'm not going to talk about Meteorite much but Meteorite is just a way to add it's it's a package package management and you know repository version management and the package manager so it you can use which Meteor version you want to run or you can know you can use Meteorite to add add additional packages so the way you do that is you install Meteorite first it's it's on the Meteorite website you can just go ahead and install it if you want can install Meteorite and then when you have once once you have Meteorite installed you get a command on the command line called MRT so like you did Meteor add you did Meteor add bootstrap right so the way you add Meteorite your package atmosphere packages is you do MRT add and then whatever package you want from here okay so let's say I know let's say let's say I want to add pdf.js that is here there's an atmosphere package called by the way you can search for all the atmosphere packages at atmosphere.meteor.com okay the search for whatever you want I don't think the internet is working so yeah so here's one I'm going to add a router here actually so let's say so right now we haven't talked about routing right let's say we want some sort of routing where we want to slash contact slash add or slash contact slash edit we haven't talked about that because there is no Meteor package for doing any sort of routing there is an whether it's a very good atmosphere package called router the way you add that is by doing MRT add router and then you get a whole sort of whole set of whole set of whole API for adding routes so I'm not going to talk about how you can add routes but you can go to my GitHub or I'll just share the link you can go there and you know I have created this whole application with routes so you can just take a look at that code and you know it should be pretty easy but just know that this is how you add add packages from the atmosphere library okay atmosphere repository okay some useful meteorite packages router is one that I just talked about then you know you can add SCSS if you don't want to use less you want to use SCSS you can use that then there is bootstrap 3 we've used bootstrap 2 right now but if you want to use if you want to switch to bootstrap 3 you can just do MRT add bootstrap 3 that should add for you yeah and then some learning resources so the documentation are very good meteor is very well documented go to docs.meteor.com and that should tell you probably everything you want to know that's pretty good then there is this YouTube channel got some good videos about meteor you can you can take a look at that and then there is made with meteor actually I'll just show that to you yeah so documentation is here if you can go to madewith.meteor.com this will give you a list of all applications that have been made with meteor so a lot of them will also have a source you can just take a look at the source click on that source and just take a look at that source and you know you can read through that to learn how they've built it but yeah this is a great resource if you're learning you know you can just click on the source and you know just take a look at how it's implemented and there is there are some video tutorials go to eventedmind.com and you'll find a lot of lot of video tutorials so some of the video tutorials are sort of into the meteor internals but you know how it works and you know into the internals so once you're clear with the basics you can take a look at these videos they're pretty good they also talk a lot about nodes so if you're interested in what you can also take a look at this those videos there yeah so that's all I guess that's pretty much it so we've built a crowd application we've deployed it I know I haven't you know talked about talked to talked in much detail about all the sign up and all but yeah you can take a look at the application that I've built so it's the demo is at contactsmanager-demo.meteor.com so if you sign in which I should be able to do no it's not built on meteor it's on ruby yeah I'll just talk about that later right now it's about meteor so yeah so here's the application that I've built so you know this has edit edit delete and send emails so send email just sends an email we haven't talked about that but the way you do that the way you do that is by adding by adding a package called meteor add emails that's it just add that and then you call a function called email.send and we'll send your emails for you yeah you need to give it some sort of right now I'll just console it's it'll just log it to your console but you need to give it some sort of an email server then yeah so this is pretty much it here at the the code base for this is that if you can go to my github it's github.com slash barony91 so here you'll see three applications actually so so the contacts app is the one that is live that I just showed you it is based on what we built today you can just take a look at that you can just clone that if you want then there is contacts app dash router so this is based on the on I mean this this has also implemented the router so if you go to slash contacts it'll show you contact form if you go to slash contacts dash edit it'll edit a contact for you so you can just take a look at that and then there is a sessions dot dash contact which was the first thing that we did right with sessions itself and not storing anything into the database if you want to take a look at that you can go you can look at take a look at that also so my id is github is barony91 so if you go to github.com slash barony91 you will be able to see all the applications and I guess yeah so our application has also been deployed so you can just go to jsu contacts app dot meteor.com and you should be able to view it so if this is real time so yeah I guess you can even use it as a chat application if you want if you can just type something out it'll automatically show show up here so I guess that's all so I guess we've talked about the basics I know there's a lot more that you can you can do with meteor take a look at there is this application called telescope just a bit of googling you'll find this application so it's a very complete production ready application that's been built with meteor so you can take a look at that code that'll give you a lot of insight into how you structure your application and how you write code that is meteoric but if you have any questions stack overflow is the best place and then there's an IRC channel for meteor and then there are many many applications on github just do a search for meteor or you know you check out the mate with meteor site and if you have any questions I'm barring 91 everywhere just ping me whenever you want thanks browser compatibility so it works almost everywhere actually so what it does is that so it's a so this whole polling stuff I mean whatever is happening it happens with websockets so if websockets via something called SOC.js if websoc so the browser compatibility is actually whatever SOC.js or whatever whatever that SOC.js library supports it is that which is IE 5.5 plus and you know it's pretty it's pretty complete so wherever websockets is available it uses that wherever it is not it does something like HACS long polling or something like that to make it work so it's pretty complete I mean you can use it on even 5.5 IE 5.5 plus it should work how performant is it I it might but I haven't tried that out I probably you know need to do a bit more research so I'll probably need to look into the docs first but that because I I haven't thought about you know proxies