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
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
I don’t know Framework7 to be honest, but what’s wrong with Ionic? It looks good, performs well, and is easy to use. People love it, generally I hear very few complaints.
What I know about Framework7 (from Googling) is that it’s iOS only (huge downside) and not based on a mainstream framework such as Ionic which is based on AngularJS (also a downside).
I checked some demos for Ionic. They weren’t bad but I am very picky when it comes to look & feel. Ionic is close but not as close to perfection as F7 is. iDangerous’ attention to detail is excellent.
Also, F7 now supports Android Material Design out of the box since a few weeks, so you got covered Android as well.
You can use F7 with Angular if you want, I have some posts about that topic on my blog, for example: http://timo-ernst.net/blog/2015/04/02/a-movie-list-demo-app-built-with-framework7-and-angular/
If you haven’t tried F7 yourself and “just googled” about it so far, I can only recommend to give it a try.
Okay, thanks for the explanation.
I think the point is that I don’t have as much of an iOS background, Android has always been my primary platform.
Interesting that Framework7 can also be used with Angular. I certainly want to have a look at it for future projects.
You’re very welcome :-)
If you want to test Android support, just open this link on your Android Smartphone:
http://www.idangero.us/framework7/kitchen-sink-material/
Well, I laughed a bit about your “sucked monkey ass ballz” remark because (a) it was very funny, (b) I believed it wasn’t true.
But I can tell you, in the meantime I came across some things in Ionic that do indeed “suck money ass ballz”.
Example” the so-called “ion-slide-box” is a half-assed, half finished thing. Out of the box it only works with a toy app, you need to put in a lot of work to make it usable for a real application.
If I knew what I know now I wouldn’t have used it in my app because I wasted way too much time to make it only slightly usable. It’s a toy component, that’s all it is.
And there are a few other such examples of half-baked components so I begin to understand a bit what you mean.
Building a serious and good looking app is still a lot of (too much?) work, you need to invest a lot of time and effort in it up front before you become seriously productive.
Ha, ha, well every framework/lib has its weakness. I wouldn’t say Framework7 is perfect, I’m sure it also has some bad components (although I didn’t encounter any yet :-) )
As a developer one always has to define which requirements we have for a framework (components, performance, look ‘n feel…), then evaluate each and then decide which to choose. Usually prototypes help with such evaluation.
If you need a really good swiping lib I can absolutely recommend slick.js (http://kenwheeler.github.io/slick/) and Swipe (http://www.idangero.us/swiper/#.VdHkZ7T5JoI) which is from the same guys who made Framework7.
Cool, thanks for the tip about the swipe libs.
Now after a few more hours I finally have my Ionic ‘slide box’ working more or less perfectly. And you could say this took too much time, but that’s how it goes, and in the process you learn something.
I’ll keep your links and pointers to Framework7 in my bookmark list and I’m keen to give it a try when I have some time (that is, after my Ionic apps are done).
And keep up the good monkey ass ballz, ehh, I mean keep up the good work. :-)
Sure thing ;-)
Thank you for bringing Framework7 to my knowledge, it seems much easier to start with than Ionic.
Do you have tips to develop both for iOS and Android with the same code base ?
This should get you started, Tomio http://www.idangero.us/framework7/tutorials/maintain-both-ios-and-material-themes-in-single-app.html#.Vb0WT5Ptmko
I too find framework7 is pretty performant comparing to ionic. even the ionic’s feature applications are pretty laggy, but framework7’s showcase apps are much better.
I’ve tested in my android phone, ionic just loose the battle. the only highlight for me is ionic is an Angular lib. but with your integration tutorial, I can start famework7 with angular as well :)
Hey, @Timo, thanks for the article. I really enjoy your posts. I was specially blown away with the integration of F7 within Angular app… that’s simply awesome. I die for having my hands on a real last version of Angular2 and integrate F7 into it, it may be absolutely gorgeous. I also have been working with Ionic and I like it, specially the last version they have released where you can get it to work in web environments (fully web, just for a normal desktop app), they also integrated iDangerous swipper into their components and ditched the old sluggish one they used to have (there is nothing like this swiper, I swear I researched soooo much and nothing in terms of easy-to-use and performace as iDangerous swipper), in addition, Ionic has just released a beta (alpha maybe, not sure) version with Angular2 and material look-and-feel theme (which is quite all-right but not quite there yet).
I believe, as you do, that F7 should have more attention, it deserves it, the biggest issue I see when “fighting” against giants as google or facebook is that these guys (or it is just A guy?) even they are very active, they have no the support, community, services around (Ionic is implementing so many little wonders around that make it very attractive) as the competitors have.
I hope at some point Framework7 gets the attention it deserves and becomes more and more popular for the sake of all of us.
:)
Hey Marcos,
thanks, I’m glad that you liked my tutorial. I didn’t know that Ionic now uses Swiper. It’s kinda amusing since both frameworks should be rivals at some point :)
I haven’t tried Angular2 yet. From what I read is that it’s completely different to 1.x so learning from the ground up seems to be necessary :( Not excited about that tbh. Btw, if you need a really good swiping framework besides Swiper I can also recommend Slick. It does a good job too: http://kenwheeler.github.io/slick/
As you already said, F7 needs more attention, so the best we devs can do is spread the word as good as possible via Twitter, Reddit, blog posts, Facebook, G+ and so on. Also talk to other devs and actually show some apps created with F7. I noticed that many devs are blown away if you show em the good stuff and tell them afterwards that it had been created with HTML5 :)
I don’t think that a good framework needs a big company behind it. If it’s good, it will get attention, just a matter of time :)
Ok Timo, listen.
There are about 20 years i’m programmi web sites and apps in my own and for work. (with Html, Php, Javascript, jQuery, Html5, css, my mother, welders, fire, imprecations and other frameworks)
It was been really boring…EVEN, with semi professional results.
I learn Java too and done some Android Apps loosing a lot of synapses.
I discover F7 only a mounth ago.
I seriously started programming in F7 only 2 weeks ago
In 2 weeks i realized an APP with facebook same navigation experience, with youtube similar video experience, with instagram photo similar experience gallery, with db connection via AJAX, maps, news, phone calls and other unbelievable features.
ONLY 2 WEEKS???
Fuck all the rest
Hi Giorgio, I’m glad you like F7 :-)
Keep on coding!
I have to chime in here. EXCELLENT POST! And great comments. Giorgio Brugnone summed it up perfectly!
After many years of development and so many distractions I have realised there is far too much hype and far too little substance in most of what’s out there. It really is a case of a lot of ‘hot air’ getting loads of attention.
I am returned to programming in Pascal and Basic (modern day implementations of course). With these tools I am easily develop modern desktop, mobile, and web browser based applications with them in record time, with little to no stress. The produced mobile apps are compiled to Java (mobile), and web browser apps to Javascript/CSS3/HTML5.
I have known of Framework7 from its initial release, but am now about to utilize it. There has been so much distraction along the way. iDangero.us has been producing great stuff for years!
Hi Brian, thanks a lot of your comment. Looking forward to what you will create with F7 :-)
Found F7 about 2 months ago as we were looking for a better framework to rewrite our existing app (JQM) with an unreleased version using KendoUI. Neither suited what we needed.
F7 has been a blast so far (only coding with it for about 2 weeks after making the proposal to use it)
Will be using your upscroller plugin too.
On a side note, I am integrating it to a Rhodes app rather than a Cordova / Phonegap one.
@David Hi, I’m glad you also like F7 and the Upscroller plugin. I can feel your pain after using JQM for more than a year. It’s absolutely no match against F7 regarding performance nor UI beauty. Keep on coding! :-)
Hi Timo,
F7 seems nice and easy to use. Everywhere on net I get F7 examples using ios. Can you guide me using with Android(material). A complete guide for F7 usage.
Thanks.
@Ashish Hi, try the Kitchen Sink:
https://framework7.io/kitchen-sink-material/
https://github.com/nolimits4web/Framework7/tree/master/kitchen-sink-material
When you init the page you have to activate material design:
var myApp = new Framework7({
material: true
});
Also, make sure to include the css files for material design (instead of iOS theme):
<link rel="stylesheet" href="path/to/framework7.material.min.css">
<link rel="stylesheet" href="path/to/framework7.material.colors.min.css">
<link rel="stylesheet" href="path/to/my-app.material.css">
Hi Timo and thank you for the fine reading. First I discovered F7 and then you :) I can’t find anywhere a word on integrating “desktop” and “mobile” template — so I was wondering, maybe you can help me with an advice on how to have a destlp CSS/JS and mobile using F7. Is it possible to keep those together in F7, or must one separate styles and detect a device or similar?
Hi Mario, F7 is a framework for mobile (smartphones, tablets), I cannot recommend to use it for desktop applications.
Hello… is good to know that i’m not the only one that think it… I tried a bunch of hybrid frameworks and by far, this was the easiest and better. Since it is developed focusing on mobile apps, the perfomance is a little bad in desktop browser, but nothing that a css can’t take care.
im now trying F7….how can I download the example/Demo kictech sink?
@budy It’s in the Github repo https://github.com/framework7io/Framework7
Totally in love with F7 for mobile and tablet views. But we do need a desktop view as well.
@Timo, I understand F7 doesn’t offer it out of the box but are there any recommendations/pointers on how to achieve this efficiently using F7. Definitely don’t want a separate solution for larger displays.
Anyone here tried doing this. Would appreciate any examples/poc’s.
@Sanjay There is a discussion about this topic here: https://github.com/framework7io/Framework7/issues/926
Thanks @Timo