Introducing MeteorisINTRODUCING METEORIS

Why Meteoris?

Meteor is currently top ranked framework at github and it was very promising Realtime Node js Framework. People said that Meteor have many downside like it was just for small apps, no standard structure, etc. Ofc it will be hard if the codebase being larger, and the contributor (programmers) who work on it getting larger too, it will produce a spaghetti code.

Currently I had 2 years experience using Meteor and not all of that are wrong. So I look for solution which is by creating Meteoris to solve some problem that people said.

Introducing Meteoris

Meteoris is a Realtime MVC + Modular Javascript Framework based on Meteor 1.2.0 to Structuring Your Apps & Boost Your Development. This is the latest version of Meteoris out there.

You can find meteoris repo here: https://github.com/meteoris/meteoris

Meteoris using DRY (Don’t Repeat Yourself) paradigm. It give you some module to speed up your development time, such as ACL, Code Generator (Coming Soon), User Management, Oauth Management, Theme, Collection Relationship, Api Generator (Coming Soon), Backup/Restore(Coming Soon), Media Uploader (Coming Soon) and Much More. Some of the module already have a nice GUI so you don’t have to make it manually or type it from command prompt.

Prerequisite

Make sure that You already have basic understanding about Meteor Js it self. If don’t, please follow this tutorial before continue reading https://www.meteor.com/tutorials/blaze/creating-an-app.

Meteoris Quickstart

1. Install Meteor, Create New Project & Download Required Packages

#open terminal and install meteor (only if u haven't installed it)
curl https://install.meteor.com/ | sh
#create new meteor project in your project directory
meteor create my-meteoris-app
#cd to your project folder
cd my-meteoris-app
#add meteoris main module
meteor add meteoris:core
#add another important module
meteor add meteoris:theme-admin
meteor add meteoris:user
meteor add meteoris:role
#remove meteor unused package
meteor remove insecure
meteor remove autopublish
#run meteor
meteor

2. Create hooked Navbar and Sidebar inside your “root/client/hook” folder

create file at root/client/hook/navbar.html
create file at root/client/hook/navbar.js
create file at root/client/hook/sidebar.html

3. Creating Home/Site Page

Meteoris use simple MVC or MVVM + Modular paradigm to structuring app. Please use this standard structure to achieve best result when using meteoris.

3.1. Folder Structure

root/
meteorusernameorgroup:module/
client/ # Client folder
views/ # Views for html/js files
lib/ # Both Access folder
collections/ # Collections folder
controllers/ # Controllers Folder
router.js # Router js file
server/ # Server folder
  anothermeteorusername:module/
client/ # Client folder
views/ # Views for html/js files
lib/ # Both Access folder
collections/ # Collections folder
controllers/ # Controllers Folder
router.js # Router js file
server/ # Server folder

3.2. Router

Meteoris using Kadira Flow Router to linking between pages. Because we are using modular technique, assume that we are using my meteor account called “radiegtya” and using module name called “site”. So we should make folder under root folder called “radiegtya:site”. To use modular router, simply follow this step:

create file at root/radiegtya:site/lib/router.js
  • We are not yet able to use this router, but once you have created the views, you can access this page by calling this route:
localhost:3000/radiegtya/site

3.3. Creating Controller for Site

Controller actually just a method to be called inside your template js, and this will make your code more modular and readable.

create file at root/radiegtya:site/lib/controllers/SiteController.js

3.4. Creating Views Page for Site

create views index file on “root/radiegtya:site/client/views/index.html”. Look at the template naming convention, it use “meteorusername_moduleAction” namespacing, so for this views we are gonna use “radiegtya_siteIndex”. Which is “radiegtya” for meteor username, “site” for the module name, and “Index” in camel case after site as action name.

because we are installing meteoris:theme-admin, you can use adminLTE styling and html inside your views html file. We are using meteor example to make You more familiar with the code.

Don’t forget to add the js file for the index. Create this file on “root/radiegtya:site/client/views/index.js”

Now finally access this route to check your apps.

localhost:3000/radiegtya/site

Awesome! We are successfully creating our simple app in MVC and Modular way with very easy setup. Ofc with amazing template which is reusable. You can also use this code to create a meteor package easily.

Try Meteoris now, and show to the world what You have been achieved. Follow me, Share this article and get more tutorial about Meteoris. Stay Tuned!