Tutorial: Create a Twitter app with Vue.js, Framework7 and PhoneGap

In my last post I showed you how to kick-off a new project with Framework7, VueJS and Webpack. So, I thought in the next video I could show you a real-world example on how to create an app based on these technologies.

In this screencast we will create a Twitter client for iOS and Android that will let you search for tweets through the official Twitter REST API.

Keep in mind that this is the first episode of a series since we won’t be able to create a full Twitter app in only one episode. Instead, we will cover one topic in each video. The series topics will probably look something like this:

  1. Setup project + Call Twitter search API methods (This video)
  2. Authenticate users using oauth + Render personal timeline
  3. Post tweets, retweet and replies
  4. Deploy as native app using Phonegap/Cordova

Enjoy the video series! :-)

Source code

Why I am still in love with Framework7

Disclaimler: First of all, let me state clear that I am not involved into the Framework7 project. I am not getting paid for this post. This is just my honest, personal opinion as a mobile developer.

Early steps

The first framework I used when I started mobile development was jQueryMobile. I was used to jQuery coming from Desktop programming so I thought: “Hey, it says jQuery, so I guess it must be good”. It sucked balls, just like any other Framework I tried like KendoUI or SenchaTouch. They either sucked regarding performance, sucked about look & feel or simply sucked monkey ass ballz! Excuse me for my language but for years I couldn’t believe that it was true that there is no HTML5-framework that can deliver anything close to a native app, so I always believed that it simply wasn’t possible.

And then I discovered Framework7

Oh, boy was I blown away when I saw the first demos for iOS on their website. This was just what I was looking for. The way these apps looked, feeled and performed was 99.9% accurate to what I am used from native apps. I couldn’t believe it and so I tipped my first steps in. I quickly found out that Framework7 was not only easy to use, it just worked™. You create a few lines of HTML markup and boom, that’s it. Framework7 will take care of the rest. The looks, the page transitions all works out of the box. I couldn’t believe it and why hadn’t I heard about it before? I don’t know but since they also released a new Material Design option for Android I am absolutely convinced: This is it. The best framework you could possibly use for mobile app development with HTML5, CSS3 and JavaScript. Throw that all into a PhoneGap/Cordova container and you should be fine.

Screenshot

framework7 demo screenshot

Demos

For iPhone open this.
On Android open this.

The future

The biggest problem I see with Framework7 is that it doesn’t get enough attention. For years I didn’t hear anything about it and when I talk to other devs they never saw it before until I show em and they’re all completely blown away.

Also, if you search for “best html5 mobile framework” on Google you will get shitloads of so called comparison websites like “Top 10 mobile frameworks” and barely I see F7 mentioned or even find their main website in the search results. So, if you like F7 and you’d like to support, go tweet about it right now!

I just hope that developers haven’t given up on HTML5 for apps yet. Since the hype of Facebook’s React framework many people seem to transition there.

Oh, boy I need to go back coding. This is so much fun <3

Framework7 template with TypeScript and AngularJS

Important: Read this first!
This article covers a template for Framework7 apps built on TypeScript, SASS, Grunt and AngularJS. From my experience so far I discovered that TypeScript is really complicated and not much fun to use with F7 and Angular. Also, some people seem to struggle with the grunt compile process. So, I created a new, easier template without any fancy stuff, just plain HTML, CSS and JavaScript which I can recommend to get started before diving into the funky stuff: https://github.com/valnub/Framework7-Pure-Angular-Template (There is also a video screencast tutorial available)


Framework7

I am a big fanboy of Framework7, strict typing and MVC, so I tried to combine Framework7 with TypeScript and Angular with a flavor of SASS boiled on top of Grunt. The result is this ready-to-use template: Check on Github

How to build the Framework7 template

  1. No complicated bower or yeoman stuff. Just get from Github.
  2. Then, do npm install and then grunt compile to compile and copy everything from /src to /build. Default task for grunt is “watch” which you can use for auto-compile and -reload in the browser when you do changes in /src.

Example app

If you need an example check out this demo app that I created on top of this template. It simply lists current and upcoming movies from rottentomatoes by getting the data via Ajax using Angular’s $http service as well as its integrated data binding technique to render the view.

Framework7 with Angular movie list demo

Let me know if you have any feature requests for the template.