Building hybrid apps with Meteor + Framework 7 Getting started

Image source : http://vivivi.co.uk/wp-content/uploads/2014/11/metor_logo_dark.jpg

Meteor js is a full stack framework that not only have the ability to create real-time application with ease but also have the power to generate mobile apps (IOS & android) that is written using just web front-end or to be precise Hybrid apps. We got the tools needed to generate our hybrid app with just one command line but what we lack is to decide which mobile looking front-end framework to use. So why Framework 7 compare to other popular framework out there like ionic, react-native. What makes Framwork 7 stand-out is it’s learning curve that you don’t have to know Angular or React js to be able to use Framework 7, all what you need are basic knowledge of CSS framework like bootstrap and then you’re good to go. What makes Framework 7 even cooler is that it is now support vue js and react, so as you get more comfortable you can still migrate to components based approach easily in the future. In this tutorial I will show you how to integrate Framework 7 into Meteor js javaScript ecosystem.

I assume you have Meteor js installed if not you can follow the instruction here. So let’s create a Meteor project called framework7-example

meteor create framework7-example

let’t add the framework 7 package into our Meteor project

cd framework7-example
meteor add keanghok:framework7

This package was fork from nobutakaoshiro:meteor-framework7-ios-material to make it compatible with the latest version of framework 7. It was suppose to act as pulling request but since the original dev is not responded yet so I have to create my own package in the at atmospherejs as a temporary solution to add it to the project.

Now let’s go to our client folder and delete everything there and then add head.html

Let’s connect framework 7 css in to our project.

What we do here is that we just add our CSS from the packages to our applications. There are two themes. One is Material design from android another one is IOS theme. You can also import two themes at the same time but only the later will be used.

Currently the new Meteor file ways is to put everything in imports folder but for simplicity we will just put everything in client. But you should follow the Meteor ways if your project is big, it makes you able to control which file should be sent to client.

Let’s add route to our application

meteor add kadira:flow-router
meteor add kadira:blaze-layout

We also add blaze layout to render our blaze template according to our route. (we can also use framwork7-build in router but it is more of written the application in framework 7 ways)

Framework 7 also provides it’s own router which using Ajax to handle routing. You can also use it instead of flow-router and blaze-layout, which also comes with it’s own default transition. but the way it implement page is different. So in order to simplify it into Meteor way which is nearly the same as what Meteor users use with blaze that’s why we choose flow router instead in this tutorial.

Because we are using flow router we will lost the native transition from framework 7 router. That’s why in order to compensate for this we will be usingmcissel:flow-transition, we will be implement our own transition instead. So let add the package to our project

meteor add mcissel:flow-transition

let’s create a ‘templates’ folder and inside the folder we will add 3 more sub folders including ‘component’, ‘layout’ and ‘page’.

So right now we would have a folders structure like this:

— templates
— — — — layout
— — — — component
— — — — page

Let’s create our layout so we going to use it in flow router. inside our template/layout folder we create main_layout.html and main_layout.js.

In main_layout.html we just add the layout straight out from the Framework 7 website example, but inside we put the toolbar code in another template and we call it back using blaze(handle bar) by using {{> Template name}} which we going to implement the toolbar template later. We use the section template provided byflow-transition to put our dynamic page which we can insert transition there later.

In main_layout.js we initialize our Framework 7 with oncreated with new Framework() inside the constructor parameter we also specify router: false to tell Framework7 to disable it build in router. Framework7 doesn’t use any third party library, even for DOM manipulation. It has its own custom DOM7 — DOM library that utilizes most edge and high-performance methods for DOM manipulation. The Dom7 object is very similar to JQuery syntax.

Now that we have our layout file, let’s create the toolbar component. Inside component folder let’s add toolbar.html

inside our client/templates/component/toolbar.html:

In toolbar.html we just wrote a simple html with class used to style in Framework 7 and two navigation links to navigate between page 1 and page 2 which we going to implement later.

Now let’s create our simple pages. inside templates/page let create 2 html file in the folder. page1.html and page2.html:

What we do here just add two pages which use class that provided by framework7 to create a simple page with mobile UI.

Now that we have layout and our page ready let connect them and display using route. in client folder let create another file called client/route.js

Let’s break the code down a little bit so first we must set root to either framework7 or blaze layout to point to the same elements because framework 7 only applies to the body where blaze layout create another div with blaze-root id which can make code render inside those div not displaying. You can either set blaze root by BlazeLayout.setRoot(‘body’)or in Framework 7 constructor root:element, but due to the flow transistor doesn’t allow to set root instead we have to manually called our main_layout template instead. So let’s add it inside our head.html and we insert it below </head> tag

<body>
{{> MainLayout}}
</body>

Since we also don’t use blaze layout and I used it as example if you don’t need the transition and want to use blaze layout with other transition package (you can replace it by replacing every flow in the route with blaze layout, uncomment the blazeSetRoot and use Yield instead of section). Now let’s remove it by

meteor remove kadira:blaze-layout

For the rest of the code we just use flow router to caught the url and using flow transition to render our page to the layout and then display to user. The lower part 2 function it is just telling flow transistor how to animate our page.

Let’s test our app to run on web you can use:

meteor

to run it on android emulator

meteor add-platform android
meteor run android

If you have mac you can also run it in IOS emulator by

meteor add-platform ios
meteor run ios

If you want to test it on the real device just connect to the same wifi and then put -device at the end for example:

meteor run PLATEFORM-device

Running on IOS emulator

Voila and now you can build your app using just html and still have those ready to use component at your assert. If you know Vue js or React js you can also integrate that within Meteor and turn all those ugly divs into component based since framework 7 also provide component based for Vue js and React js.

You can check the example project at: https://github.com/lastday4you/meteor-framework7-example

If you like to contribute and make this example project even cooler please feel free to submit a pull request :)

Contributor: Sothearin Ren