meteor Archives - Page 3 of 4 - Donotsad where can learn any thing work project and make money

Aug 10

Meteor – Best Practices

Meteor – Best Practices ”; Previous Next We already covered some of the best practices of Meteor development in the previous chapters. Following are some of the best practices to be kept in mind while using Meteor. Directory Structure There are no strict rules about the directory structure in Meteor apps. For more info on guidelines, check out Meteor – Structure chapter. Use Methods You should always use Meteor – Methodswhen working with sensitive data instead of calling insert, update, and remove directly from the client. Data Management Protect your data using Publish and Subscribe methods. If you want your data to be available to all clients, you can use null as the publication name instead. Publishing small chunks of data will also improve the performance of the app. Validate Data You should validate all data that will be stored inside collection. One of the best options is collection2 package. This package makes it easy to set the server and client side validation. Minimize Session The session variables are global variables and using globals is against the JavaScript best practices. Router There are two most popular options for Meteor routing. For smaller apps, there is Iron Router. It is automatically rerun once the data changes. For larger apps, there is Flow Router. This router gives you more freedom to optimize re-rendering of the templates at the cost of a little more boilerplate code. Packages Always check if the package is updated regularly before you choose to use it inside your app. Print Page Previous Next Advertisements ”;

Aug 10

Meteor – Session

Meteor – Session ”; Previous Next Sessions are used for saving data while the users are using the app. This data will be deleted when the user leaves the app. In this chapter, we will learn how to set a session object, store some data, and return that data. We will use the basic HTML setup. meteorApp.html <head> <title>meteorApp</title> </head> <body> <div> {{> myTemplate}} </div> </body> <template name = “myTemplate”> </template> Now, we will store myData locally using Session.set() method. Once the method is set, we can return it using Session.get() method. meteorApp.js if (Meteor.isClient) { var myData = { key1: “value1”, key2: “value2″ } Session.set(”mySession”, myData); var sessionDataToLog = Session.get(”mySession”); console.log(sessionDataToLog); } If we check the console, we will see that the stored data is logged. In the next chapter, we will learn how to auto-update templates using the Session variable. Print Page Previous Next Advertisements ”;

Aug 10

Meteor – Tracker

Meteor – Tracker ”; Previous Next Tracker is a small library used for auto updating templates once the Session variable has changed. In this chapter, we will learn how the tracker works. First, we will create a button that will be used for updating the session. meteorApp.html <head> <title>meteorApp</title> </head> <body> <div> {{> myTemplate}} </div> </body> <template name = “myTemplate”> <button id = “myButton”>CLICK ME</button> </template> Next, we will set the starting session value myData and create a mySession object. Tracker.autorun method is used for keeping an eye on mySession. Whenever this object changes, the template will auto-update. To test it, we will set a click event for updating. meteorApp.js if (Meteor.isClient) { var myData = 0 Session.set(”mySession”, myData); Tracker.autorun(function () { var sessionData = Session.get(”mySession”); console.log(sessionData) }); Template.myTemplate.events({ ”click #myButton”: function() { Session.set(”mySession”, myData ++); } }); } If we click the CLICK ME button five times, we will see that the tracker is logging new values every time the session updates. Print Page Previous Next Advertisements ”;

Aug 10

Meteor – Environment Setup

Meteor – Environment Setup ”; Previous Next In this chapter, we will learn how to install Meteor on Windows operating system. Before we start working with Meteor, we will need NodeJS. If you don”t have it installed, you can check the links provided below. Prerequisite NodeJS is the platform needed for Meteor development. If you do not have NodeJS environment setup ready, then you can check out our NodeJS Environment Setup. Install Meteor Download the official meteor installer from this page If any error occurs during the installation, try running the installer as an administrator. Once the installation is complete, you will be asked to create a Meteor account. When you finish installing Meteor installer, you can test if everything is installed correctly by running the following code in the command prompt window. C:Usersusername>meteor Following will be the output − Print Page Previous Next Advertisements ”;

Aug 10

Meteor – Templates

Meteor – Templates ”; Previous Next Meteor templates are using three top level tags. The first two are head and body. These tags perform the same functions as in regular HTML. The third tag is template. This is the place, where we connect HTML to JavaScript. Simple Template Following example shows how this works. We are creating a template with name = “myParagraph” attribute. Our template tag is created below the body element, however, we need to include it before it is rendered on the screen. We can do it by using {{> myParagraph}} syntax. In our template, we are using double curly braces ({{text}}). This is meteor template language called Spacebars. In our JavaScript file, we are setting Template.myParagraph.helpers({}) method that will be our connection to our template. We are only using text helper in this example. meteorApp.html <head> <title>meteorApp</title> </head> <body> <h1>Header</h1> {{> myParagraph}} </body> <template name = “myParagraph”> <p>{{text}}</p> </template> meteorApp.js if (Meteor.isClient) { // This code only runs on the client Template.myParagraph.helpers({ text: ”This is paragraph…” }); } After we save the changes, following will be the output − Block Template In the following example, we are using {{#each paragraphs}} to iterate over the paragraphs array and return template name = “paragraph” for each value. meteorApp.html <head> <title>meteorApp</title> </head> <body> <div> {{#each paragraphs}} {{> paragraph}} {{/each}} </div> </body> <template name = “paragraph”> <p>{{text}}</p> </template> We need to create paragraphs helper. This will be an array with five text values. meteorApp.js if (Meteor.isClient) { // This code only runs on the client Template.body.helpers({ paragraphs: [ { text: “This is paragraph 1…” }, { text: “This is paragraph 2…” }, { text: “This is paragraph 3…” }, { text: “This is paragraph 4…” }, { text: “This is paragraph 5…” } ] }); } Now, we can see five paragraphs on the screen. Print Page Previous Next Advertisements ”;

Aug 10

Meteor – Timers

Meteor – Timers ”; Previous Next Meteor offers its own setTimeout and setInterval methods. These methods are used to make sure that all global variables have correct values. They work like regular JavaScript setTimout and setInterval. Timeout This is Meteor.setTimeout example. Meteor.setTimeout(function() { console.log(“Timeout called after three seconds…”); }, 3000); We can see in the console that the timeout function is called once the app has started. Interval Following example shows how to set and clear an interval. meteorApp.html <head> <title>meteorApp</title> </head> <body> <div> {{> myTemplate}} </div> </body> <template name = “myTemplate”> <button>CLEAR</button> </template> We will set the initial counter variable that will be updated after every interval call. meteorApp.js if (Meteor.isClient) { var counter = 0; var myInterval = Meteor.setInterval(function() { counter ++ console.log(“Interval called ” + counter + ” times…”); }, 3000); Template.myTemplate.events({ ”click button”: function() { Meteor.clearInterval(myInterval); console.log(”Interval cleared…”) } }); } The console will log the updated counter variable every three seconds. We can stop this by clicking the CLEAR button. This will call the clearInterval method. Print Page Previous Next Advertisements ”;

Aug 10

Meteor – Core API

Meteor – Core Api ”; Previous Next If you want to limit the code to run only on the server or the client side, you can use the following code − meteorApp.js if (Meteor.isClient) { // Code running on client… } if (Meteor.isServer) { // Code running on server… } You can limit the code to run only when the app is using Cordova bundling. if (Meteor.isCordova) { // Code running on Cordova… } Some plugins need to wait until the server and DOM are ready. You can use the following code to wait until everything begins. Meteor.startup(function () { // Code running after platform is ready… }); Following table lists some other core API methods. Sr.No. Method & Details 1 Meteor.wrapAsync(function) Used for wrapping asynchronous code and convert it into synchronous. 2 Meteor.absoluteUrl([path], [options]) Used for generating absolute URL pointing to the app. 3 Meteor.settings Used for setting deployment configuration. 4 Meteor.publish(name, function) Used for publishing records to the client. Print Page Previous Next Advertisements ”;

Aug 10

Meteor – Home

Meteor Tutorial PDF Version Quick Guide Resources Job Search Discussion Meteor is a full-stack JavaScript platform for building web and mobile apps. Meteor makes it easier to create real-time apps, since it alone offers a full ecosystem to work with, instead of combining couple of different tools and frameworks to get the same effect. Audience This tutorial will be useful for any JavaScript developer who wants to learn Meteor framework. The tutorial is explained in a crisp manner with simple and easy-to-grasp code samples. Beginners will benefit the most from this tutorial. Readers can also use it as a reference while working with Meteor framework. Prerequisites Meteor is a JavaScript framework, hence readers will need to have basic knowledge of JavaScript and HTML. They will also need to be familiar with NodeJS and MongoDB although it will also be easy to understand everything without previous knowledge. If the readers have never used MongoDB, any knowledge about databases should suffice. Since Meteor is a full-stack framework, any previous experience in creating web or mobile apps will be helpful. Print Page Previous Next Advertisements ”;

Aug 10

Meteor – Structure

Meteor – Structure ”; Previous Next Meteor offers some special folders that can help the developers’ in structuring their apps. client If you create a client folder, everything inside this folder will be run on the client side. This is the folder where you can place your HTML, CSS, and client side JavaScript. You should place Meteor.subscribe functions, templates, helpers, and events inside this folder. Note, you don”t need to run the Meteor.isClient function in the files that are placed inside the client folder. server Files from this folder will only be run on the server side. This is the place where methods, Meteor.Publish() functions, and other sensitive data should be held. All of the authentication data should be held here. You don”t need to use Meteor.isServer() for the files inside this folder. public This is the place where you should place your images, favicons, and all the other data that is served to the client. private Files from this folder can be accessed only from the server. They will be hidden from the client. You can put JSON or EJSON files that only the server will use inside this folder. client/compatibility Some JavaScript libraries export variables as globals. Use this folder for files that need to be executed without being wrapped in a new variable scope. The rest The rest of the folders can be structured the way you want. The code that is placed outside of the folders mentioned above will be executed on the client and the server side. This is a good place where you can define your models. Load Order It is always good to know load order of the files. The following list is taken from the Meteor Official Documentation. HTML template files are always loaded before everything else Files beginning with main. are loaded last Files inside any lib/ directory are loaded next Files with deeper paths are loaded next Files are then loaded in an alphabetical order of the entire path Print Page Previous Next Advertisements ”;

Aug 10

Meteor – Running on mobile

Meteor – Running on Mobile ”; Previous Next In this chapter, we will learn how to run the app on an android device. Meteor just recently added this functionality for windows operating system, so we will need to update our meteor app to 1.3 beta version. Note − By the time of writing this tutorial, the 1.3 version of Meteor is in Beta. We will update this once the production version is released. Since we want to use the newest Meteor version, we can update it by running the following code in the command prompt window. C:UsersusernameDesktopmeteorApp>meteor update –release 1.3-beta.11 Step 1 – Install Android SDK Use the link in the following table to install Android SDK. Sr.No. Software & Description 1 Java Development Kit & Android SDK You will need Android SDK to be able to run Meteor apps on mobile environment. If you don”t have it installed, you can checkout our Android Environment Setup tutorial. Step 2 – Add an Android Platform Now, we need to add an Android platform to our project. C:UsersusernameDesktopmeteorApp>meteor add-platform android Step 3 – Run the App on an Android Emulator To run the app on an Android emulator, we will use the –verbose command at the end of the line to be able to identify the possible errors during the startup process. C:UsersusernameDesktopmeteorApp>meteor run android –verbose Run the App on an Android Device Since Android emulators are slow, it is always a better option to run your app directly on your device. You can do it by connecting the device to your computer, enabling the developers’ mode and USB debugging. This process is different for specific devices. You need to find Build Number in settings/About and tap seven times. You will get a notification that you are the developer and the Developer Options will be unlocked. Search through your settings again and enable USB debugging. You can run Meteor app on your mobile device using the following command in the command prompt. C:UsersusernameDesktopmeteorApp>meteor run android-device Print Page Previous Next Advertisements ”;