So far in this series we have looked at Bower, AngularJS, GruntJS, and PhoneGap JavaScript technologies. Today for my 30 day challenge, I decided to go back to JavaScript and learn a framework called Meteor. Although Meteor has a very good documentation, but it misses a beginner tutorial. I learn better from tutorials as they help me get started with a technology quickly. In this blog, we will learn how to build an epoll application using Meteor framework.
What is Meteor?
Meteor is a next generation open source platform for building real-time web apps in minimum time. It has a very different philosophy compared to other existing JavaScript frameworks like AngularJS, BackboneJS, etc. Normally, when we work with backbone or angular, the client side(Angular or Backbone) talks with a REST backend. We can write REST backend in any technology like Java, NodeJS, PHP,etc.
In Meteor, DDP(Distributed Data Protocol) protocol is used to transfer the data between client and server. DDP is a standard way to solve the biggest problem facing client-side JavaScript developers: querying a server-side database, sending the results down to the client, and then pushing changes to the client whenever anything changes in the database.
The server side of a Meteor application works on top of Node and MongoDB. We write both the client and server side of the application using Meteor APIs. In future developers will have the choice to use any other database apart from MongoDB.
Why Meteor?
If you want to convince yourself why you should learn Meteor then read these seven core principles of Meteor.
Application Usecase
In this blog, we will develop an epoll application which allows users to post and vote on questions. The application can do the following :
When a user goes to '/' url of the application, then he will see a list of questions. User will have to sign in using Twitter to post a new question or vote on an existing question. In the image shown below, we can see that yes and no buttons are disabled as the user is not logged in.
When a user clicks on Sign in with Twitter, then he has to authorize the epoll app to use his account. After successful authorization, user can view the page where he can post a new poll question or vote on an existing question.
Finally, a user can post a new question or vote on an existing question.
Github Repository
The code for today's demo application is available on github: day15-epoll-meteor-demo.
Installing Meteor
It is very easy to get started with Meteor. If you’re using Mac or Linux, then open a Terminal and type the command shown below.
For windows user, please refer to the documentation.
Create a Meteor Application
Creating a Meteor app is very easy. Once we have installed Meteor, all we need to do is run the meteor create command.
It will create a directory named epoll on the file system and put some template files in it. The project structure is shown below.
Let us look at each of these one by one:
The .meteor folder is for storing meteor specific files. It includes a .gitignore file to ignore local folder. The local folder stores the MongoDB database files and application build. The packages file inside .meteor specifies all the packages this application is using. You can think of them like npm packages. Meteor provides functionalities as packages. We will be using few packages later in the post. The release file mentions the meteor version. In this blog, we are using the latest version of meteor i.e. 0.6.6.3.
The epoll.css is used to specify the application CSS styles.
The epoll.html is the application HTML markup. The meteor framework currently uses handlebars as the default template engine. In the future Meteor might support other template engine as well. As per the Meteor documentation,
Today, the only templating system that has been packaged for Meteor is Handlebars.
The epoll.js is the heart of meteor application. The epoll.js Javascript file is deployed on both the server and the client. This allows developers to write a function once and use it on both the server and the client sides. The template epoll.js created by meteor is shown below.
In the code shown above, Meteor.isServer and Meteor.isClient flags are used to separate the server code from the client code.
To run the application, change the directory to epoll and then type meteor command.
The application will be running at http://localhost:3000. On button click, we will see a message in chrome developer tools You pressed the button.
In the epoll.js, change the greeting to as shown below.
The change will be automatically applied and page will be reloaded.
Where is MongoDB?
As mentioned before, Meteor uses MongoDB to store the data. When we install the meteor package, it also download the latest version of the MongoDB. We can see the MongoDB installation in the
/.meteor directory. It took me sometime to figure out where MongoDB is running. I used ps -ef command to find the location of MongoDB installation.
On my machine, MongoDB is running on port 3002. This avoids existing MongoDB installation which by default runs on 27017 port. The database directory points to the .meteor folder in the application directory.
Meteor Smart Packages
As mentioned before Meteor implements functionality as packages. These packages ork both in the browser and on the server. To view the list of all packages supported by Meteor run the command shown below.
To add a new package use meteor add command and to remove a package use meteor remove command.
Add Twitter Bootstrap Package
We will use Twitter Bootstrap to style the UI. To add Bootstrap, type the following command.
The only caveat with Twitter Bootstrap package is that it is not the latest verion of Bootstrap. The version of Twitter Bootstrap supported by Meteor package is 2.3.2.
Add Twitter Authentication Package
In the epoll application we will use Twitter Authentication to secure the functionality. A user has to first authenticate with Twitter and then he can either vote on a question or add a new question.
Meteor provides accounts-ui package to add login widgets to an app. To add the accounts-ui package, run the following command.
Now we will add authentication provider to the application. In this application, we are using Twitter but it can be facebook, github, google, weibo, or meetup as well
After adding the package, we have to update the epoll.html to show Twitter signin button. Update the epoll.html with the one shown below.
Also add following style to epoll.css.
The application will automatically update and you will see the page as shown below.
Now click on Configure Twitter Login and we will be asked to enter the consumer key and consumer secret of the twitter application.
To get the configuration information, we have to create a new twitter application and then save the configuration. After saving the configuration, we will be able to sign in using twitter.
After authorizing the app to use our account, we will be logged into the application. We can sign out when we are done with the application.
A new user will be created in the users collection in MongoDB. To view the user, we will connect to the MongoDB database server using the mongo client.
Define Application Layout
The template application created by Meteor does not follow the best practices defined for Meteor application layout. The epoll.js file is shared by both client and server. Anybody can view the epoll.js using browser developer tools.
There are times where we don’t want to share everything between the client and the server. If we have some server specific code, we would not like Meteor to be sending that down to the client. In Meteor, we can use client and server directories to segregate code between the client and server. Create the client and server directories inside epoll folder.
Now create epollclient.js under client folder and epollserver.js file under server folder.
Move the client code from epoll.js to client/epollclient.js as shown below.
Similarly, move the epoll.js server side code to server/epollserver.js.
Now delete the epoll.js file.
Remove insecure package
Every Meteor application has a special package called insecure installed. This package gives the client the ability to perform all the operations on the database. This should be removed from the application. The Meteor documentation also recommends removing it.
By default, a new Meteor app includes the autopublish and insecure packages, which together mimic the effect of each client having full read/write access to the server's database. These are useful prototyping tools, but typically not appropriate for production applications.
To remove the insecure package, type the command shown below.
Ability to Add Questions
Now we will add the functionality which allows logged in users to submit new questions.
The above shown html will render addQuestion template only when user is logged in the application. If you sign out from the application, you will not see the textarea to add new question.
We have to update both the client and server side code to implement the functionality.
In the client/epollclient.js, add the following code.
In the code shown above
We first bind to the click event on input type with 'add-question' class.
Then we prevent the default click event and get the question text from the dom.
Next we call the Meteor server method addQuestion. The server should be responsible for doing any risky stuff with the data like inserting, updating, or deleting. The client never sees the implementation and doesn’t personally modify the data. The server does all the work.
Now we will add the code to server/epollserver.js. We will first define a new collection called Questions. Then we will operate on this collection. Meteor uses minimongo as the API interface. To view all the operations supported by minimongo, please refer to the Meteor.Collection documentation.
Now go to the application user interface and submit a new question.
We can also view the data in MongoDB.
List All Questions
The next functionality we are going to implement is listing all the questions. A user should be able to view all the questions even without log in.
Add the following to main div
Next, add the questions template to epoll.html.
The above HTML code should be self explanatory. The only thing worth mentioning is the use of unless control structure in the question template. The unless control structure makes sure that if user is not logged in then the disabled css is used.
To get all the questions, we will use the Questions collection on the client side to fetch all the documents. In the client/epollclient.js add the following code.
Implement Voting
The last functionality that we have to implement in this application is to allow logged in users to vote. This does not require any change in the html file as we have already added all the templates.
Add the code shown below to client/epollclient.js
The code shown above does the following :
It binds to click event on the question template. Whenever we click any question, it will set the questionId in the session. Session provides a global object on the client that you can use to store an arbitrary set of key-value pairs.
When user clicks on"Yes" anchor tag, then we will get the selected questionId from the session, and then call the incrementYesVotes method on the server. We also check that user should be logged in before he can cast his vote using Meteor.userId() function.
When a user clicks on "No" anchor tag, we call the incrementNoVotes function the server.
Finally, we add incrementYesVotes and incrementNoVotes in the server/epollserver.js. It uses Meteor's collection update functionality to increment the counter.
So each time user clicks on yes or no, the count will get updated. You can play with the application by going to http://localhost:3000.
Deploy Meteor Applications
There are couple of alternatives to deploy Meteor applications. We can deploy the Meteor applications on the test servers provided by Meteor or we can deploy the application on OpenShift. To deploy the Meteor application on OpenShift, please refer to this blog by Ryan.
To deploy on Meteor test server, run the command shown below.
The app is running at http://epoll.meteor.com/
That's it for today. Keep giving feedback.
What's Next
Sign up for OpenShift Online
Get your own private Platform As a Service (PaaS) by evaluating OpenShift Enterprise
Need Help? Ask the OpenShift Community your questions in the forums
Showcase your awesome app in the OpenShift Developer Spotlight. Get in the OpenShift Application Gallery today.