Meteor Tutorial for Web and Mobile App Development – Part 2

Let’s continue exploring more in this series of Meteor Tutorial about Web and Mobile App Development. Part 1 of this series covers basics about Meteor including:

  • Installing and Configuring Meteor Development Environment
  • How to use ECMAScript Package, EsLint in Meteor App?
  • Collections in Meteor as well as different types of MongoDB Collections available in Meteor.
  • Define/Update Schema for Collection.
  • Read/Write to Collection.
  • How to connect to MongoDB Client?
  • View Rendering in Meteor App

Meteor Mobile App Development

Continue Understanding Meteor Web and Mobile App Development

What are Assets? How to use assets in Meteor?

Assets are normal resources on server. Assets API allow meteor application to access different resource in server side.

JSON File:

For example, if a Json file need to be used as a resource, that could be done as following:

Txt File:

Similarly, we can access any text file as following:

It is also possible to get the absolute file path of a static asset on server as following:

  • Each app has its own Assets object.
  • Currently, it is not possible to import Assets as an ES6 module.
  • Assets are accessible or called directly in any Meteor server code.
  • Assets are static server assets, located in the private sub directory of an application’s folder tree.
  • Assets are not application source file.
  • Assets usually copied to the app bundle.

Back to top

Making External HTTP request in Meteor

For example if we want to get data from the api called http://api.randomuser.me

  • Add  HTTP in order to make HTTP call
  • Add Method in server
    We need to add the following method in server/methods file as following:
  • Call getFriends method from the cardlist template as following:
  • Add cardlist Template as following:

Back to top

Communicating between Nested Templates

Take a look at the cardlist Template as following:

Here cardlist component has rendered card component in a loop and for each item in the loop it pass the friend variable as a parameter to card component/template.

As session is not been added the package so we need to add session to the app using following command:

Back to top

What is Atmosphere Package? How to use atmosphere package?

What is Atmosphere Package?

Atmosphere packages are developed specifically for Meteor and have several advantages over npwhen used with Meteor. From meteor 1.3, it has complete support for npm and the future plan is to move all dependency packages to NPM. However, currently both of the system are supported.  Although Atmosphere packages have certain advantages over NPM , such as:

  • Depends on core Meteor packages, such as ddp and blaze
  • Gives more control over assets management. It is possible to include non-javascript files including CSS, Less, Sass, Stylus and static assets separately.
  • Can help to structure code for both client and server, which make easier to deal with different behaviour in either server or client context
  • Get direct access to Meteor’s package namespacing
  • Supports package global exports without using ES2015 import
  • Can leverage the advantages of original Meteor’s constraint resolver
  • Directly access Meteor’s build system
  • Helps to use pre-built binary code for different OS, such as Linux or Windows

Source : https://guide.meteor.com/atmosphere-vs-npm.html

How to Write an atmosphere package and publish it?

  • Create Package
    The following command will create a new package with given name. Replace <package-name> with appropriate name. If the developer has a meteor developer username, <package-name> would be replaced with <username>:<package-name>
    Create Package in Meteor
    The above command will create a folder called ‘package’ inside the app’s packages directory, if the command has been executed inside an app. Otherwise, it will create a standalone folder called package. The file structure in the new folder would be as following:JSON Schema Generator
    The package.js file is the main file of each Meteor package. This JavaScript file describes related information about the Meteor package e.g. metadata, files loaded, architectures, npm dependency packages, and Cordova dependency packages. At the beginning the package.js file would be as following:Package JS FileHere api.mainModule(‘jsonschemagenertor.js’); is the main entry point for the package. all related functionality could be defined in  ‘jsonschemagenertor.js’ javascript file.  It is also possible to declare 2 entry point for server and client as following:
    Similarly, it is also possible to add other assets, such as CSS or SASS as a file, fonts as assents:
  • Export Package
    Now from the main Javascript file the package would be exported  as following:Export Package in Meteor
  • Install Package
    To install an Atmosphere package, run meteor add command inside the application:
  • Import Package
    To use an Atmosphere Package that has been created outside or inside the application in the meteor app it needs to be imported as following:
    Here username need to be replaced by the meteor developer username.
  • Publish Package
    From the package folder the following command needs to be executed:
    Here username need to be replaced by the meteor developer username.

Back to top

Writing a NPM Package for Meteor application

From meteor 1.3, it has complete support for npm and the future plan is to move all dependency packages to NPM. Therefore, it is possible to develop a npm package and use it in a meteor app.

Create NPM package

In order to create a npm package the first step is to create the package folder inside the node_modules folder of the project:

Here inside the app folder ‘mylibrary’, there is a node_modules for all npm package.  Now the following command needs to be executed sequentially:

If the package needs to be created outside meteor app as a standalone package, the following command can be executed in any root folder.

Publish NPM package

There are several steps to publish a npm package

  • Creating a npm user using ‘npm adduser’ command
  • Login using ‘npm login’ command
  • Ensure the user credentials are stored using ‘npm config ls’ command.
  • Finally publish the package using ‘npm publish <packagename>’ command

For comprehensive details about NodeJS and NPM, follow here.

Back to top

What is Reactivity? What are the Reactive Data Source? What is a reactive context?

What is Reactivity?

Reactivity is the mechanism of making the application alive. Therefore, in an application if any thing changes, the application executes some notification to let that no that some changes has happened.

For example, if there is a radio switch on the user interface that goes on to off based on the value of another variables saved in database.

Traditionally, if we want to solve this problem, there are several ways. Such as

  • There would be a timeout functionality that would query the value of the variable in the database, and every time there would be any change in the value off the variable, the functional wil turn on and off the radio switch on the user interface.
  • Another approach could be, using callback, therefore, every time there would be a change in the databse, there would be trigger to run the steps in order to get the new value for the variable.
  • In angularjs, there is $watch, which keep listening for the change of any variable and if it can detect any change it takes necessary action.

In all the above-mentioned way, it needs some dependencies or some process to be defined to make the application reactive.

In Meteor, there is a mechanism to provide reactivity in the application. Developer defines the function assuming there is no reactivity in the application, however, tracker take care of all the reactivity behind the scene. Therefore, there is no need for additional implementation for reactivity or change detection.

What are the Reactive Data Source?

There are a number of reactive data sources that could be used for making the application and reactive. Following are some example,

Session: Session is one of the mostly used reactive data source, any variable attached to the session is global variable and can be accessed anywhere in the application through accessing session object. Calling Session.get(<property>) will return the current state of the reactive property.

ReactiveVar: This is another reactive data source, the different between Session and ReactiveVar, is that it can be declared and used locally instead of defining a global variable in the Session. Anotehr difference is, it is a single variable.

ReactiveDict: This is a collection of reactive variable. Therefore, instead of creating a single ReactiveVar variable, ReactiveDict is a set of reactive variables reactive. Its like creating a collection of session global object, or local object, with its own name.

Cursor: In meteor app, Cursor is used for Collections and this is a source of reactive data.

Subscription: Ad meteor app supports Subscription enablement. Therefore, there are switch variable to indicate if the Subscriber can start invoking data. template.subcriptionsReady is a switch that takes the value true or false based on when the subscription becomes ready.

What is a Reactive Context?

In Angular application $watch is a reactive context. The functional of a reactive context is to keep listening for changes and as soon as it detects the change it takes proper action. In Meteor app, the reactivity context are Template helpers and Autorun.

Back to top

What is Reactive Programming? What are the differences between reactive programming and event based programming? How tracker enable reactivity for Meteor application?

What is a Reactive Programming?

On in any data driven web page , reactive programming is very important. It is necessary to track the changes in any data stream and update the page accordingly.

For example , if on a web page of shopping cart, it is necessary to show the summation of the product’s price, every time the customer add or remove a product to or from the shopping cart, the total price need to be changed accordingly.

In such use case, reactive programming is very useful.

The basic idea of reactive programming is to create a data stream from anything, the trigger point for a data stream generation could be a click event or even a hover event. The reason for creating a stream is stream can be of anything, e.g inputs, events, variable, collection etc. This data stream is same as the twitter tweet streams, any function can keep listening to it and can react accordingly.

Event based Programming Vs Reactive Programming:

The traditional java script application afe written using event based programming. For example, in case of an angular application,

Here shoppingcart is an object and there are a number of event handlers are registered with this shoppingcart object, every time the _totalPrice is set to a new value using setTotalPrice method it called changed() method and all the event handlers registered with this object are executed and their corresponding value of _totalPrice is updated. This is an event based approach.

However, in the following example, shoppingcart object does not have any method for changed or onchange. However, this shoppingcart object uses a new type of object which is Tracker.Dependency. This Tracker is updated any function that is referenced by it.

Therefore, the main difference between reactive programming and event based programming is that with reactive programming detecting change sin data is as same as subscribing to change notifications for the data without explicitly declaring any function which need to be returned every time the data is changed in case of event based programming.

What is a Tracker?

Tracker is just a small program (~1k) but it is very powerful library for transparent reactive programming in JavaScript. Tracker is a small program which acts as a simple dependency tracking system for meteor application which can rerun templates and other computations results whenever any of the Session variables, database queries, and other data sources changes. But the magic it it does not need to declare any additional onchange, changed or watch method as like traditional javascript platform.

Reactivity in Meteor is mainly performed using Meteor Tracker. Tracker is a core package which enables developer to use the concept from Functional reactive programming using some tracker-aware library e.g. Session/ReactiveVar/ReactiveDict.

For example, in the above shoppingcart example, if Tracker is used the autorun method which accepts a function that is reruned whenever any dependencies referenced by the function changes. Here in this example the shoppingcart.getTotalPrice() method includes a dependency defined by this._ totalPrice Depend.depend(); .

When the shoppingcart.setTotalPrice () method is called, the changed() of the Depedency is also called which ultimately call Tracker.autorun() to be retuned. Tracker.autorun() method is always listening to the changes to the data, therefore, it need not to be triggered additionally, it is automatically triggered whevenr any changes occur to the data.  In summary , Tracker.autorun()  method run a function passed as argument now and rerun it later whenever its dependencies change. Tracker.autorun()  method  returns a Computation object or result that can be used to stop or observe the rerunning.

How to use Tracker in an Application?

  • Add meteor library using the following meteor command

  • Make sure the library has been added to the application successfully. Open console from browser and test the following lines, if the changes are followed correctly, the library installation is successful.

  • In More details , tracker has been implemented using the Observer pattern. For exmaple,

Back to top

Best designed course online for iOS & Swift by Mark Price who is an experience Mobile App Developer, developed many Mobile Apps for iOS and Android platform. He has also developed many Unity 3D games including Call of Duty Ghosts mobile.

Before going into details, let’s highlight few key points about this Course:

  • Declared Best Seller Online Course at udemy.com
  • 48,130++ students enrolled
  • 8,745 Review available
  • 71.5 Hours on-demand videos
  • 14 Articles
  • 59 Supplemental Resource
  • Access on Mobile and TV
  • Assignments
  • Certificate of Completion
  • Lifetime Access
  • 30 days Money back guarantee
  • You can get the course at Discounted Price here.

Most attractive feature is 30 days Money Back Guarantee means there is NO RISK. If you didn’t like this iOS 10 and Swift 3 Online Course, you can refund your money back within 30 days of purchase.

More details…

How to enable login using twitter, facebook, google, or email in meteor application?

The steps in order to enable login from other application in meteor application are as following, for example, here we would use twitter login:

  • Set up the corresponding app library  by running the following command:
    • Facebook
      accounts-facebook package enables user account authentication using Facebook account.
    • github
      accounts-github package enables user account authentication using GitHub account.
    • google
      accounts-google package enables user account authentication using Google account.
    • twitter
      accounts-twitter package enables user account authentication using Twitter account.
  • Next step is to add service configuration
    service-configuration package is used to configure connection to the various third-party services e.g facebook, twitter etc.
  • Add email packange to enable sending email from the server using the nifty Email.send method.
  • Create settings.json file in the root directory. In order to enable different deployment environment, it is recommended to create two files such as settings-development.json and settings-production.jsonCreate Settings JSONSettings.json file will list all the secret token for differnet registered application on third party application, e.g. facebook, twitter etc. This secret key would be available if the application is registered.
  • On starting the application run the following command:
  • Add the following code to server/index.jsMeteor Startup Configuration
  • Create class to call Meteor method to login with twitter

Back to top

More Mobile App Development and Related Articles: