Best frontend stack to use with Meteor


#1

Hey guys, I’m starting to move into more intermediate Meteor projects and I really don’t like CSS or Bootstrap so I was wondering what you use for the frontend of your Meteor apps.

I’ve been thinking about Angular, Foundation, or Famo.us but I know there are probably many more.
I’m not looking for any fancy 3d rendering so is it worth learning Famo.us?
Foundation looks promising but I’m wondering if it plays well with Meteor.
I’ve heard Angular is difficult to pick up but given Codecademy’s new track I might check it out but is it worth the time if I don’t need to do anything too advanced, just a nice looking UI that’s easy to implement?

Suggestions are very welcome, I’m really just looking for opinions/compare and contrast on what to use to get a clean looking and smooth interface. Thanks!

EDIT: Perhaps a better question is: Should I even bother learning any of the above now, or stick with something like this boilerplate to make a nice looking UI?


#2

If you’re really fluid with CSS3, go for it.

If you know “some” CSS, and need a grid system, have a look at http://purecss.io/ .

If you want a easy to use grid system, plus several widgets and visual components prebuilt, go for bootstrap3. It let you hit the ground running and save brain cycles for more important stuff. Plus, you can buy nice custom themes for a few bucks, since bootstrap is “de facto” standard, and people need/buy custom themes (that don’t look like bootstrap).

Zurb Foundation is the “me too” variant of bootstrap, both have their advantages. Up to you which you like more.

These are all CSS-based UI framework solutions, useful if you work with something like the DOM. It’s easy to learn and can achieve nearly everything you want.

Famo.us skips CSS by drawing on a canvas (AFAIK), so you can’t really compare it. If you want to do some SEO for your projects, I recommend against non-HTML solutions. If you don’t care for this: go on. Eventually canvas drawing has a little higher learning curve than HTML5/CSS3 UIs, but can achieve everything you want.


Angular is just a waste of time to learn for beginners nowadays. The learning curve is steep, your code is relatively complex and takes time to develop. Plus, it’s relatively slow compared to other choices and can easily burst a browser in tears when you have to manage a lot of UI stuff in one view (“dirty checking” sounds cool on paper, though). And finally: it doesn’t provide value if you already have your projects written in meteor. Angular is useful if you build a very complex frontend app with several teams of engineers, since the introduced complexity helps a lot with the maintenance later on (at least if you don’t want to rewrite everything again when angular X.0 launches with killer feature XY). Compare Angular to a heavyweight, full blown JavaEE stack with all the bells and whistles.

Ember.js is the “rails” of the frontend frameworks. You want to learn the conventions and how to do something the “proper” way, and all the goodies it has included out-of-the-box. After that, you start to code, and probably you’ll achieve what you want. But you’ll notice that the framework size is quite hefty, the performance is just average, and you’ll spend much time reading and looking up stuff.

Then you have the good old backbone.js. It’s barely useful nowadays, since it’s finally just a little better than raw jquery-apps. Used it for some projects a few months… it’s learned in a few hours, but delivers only so much value, compared to the other frameworks. I do not recommend it any longer in 2015.

You also have Meteor’s built-in solution “Blaze”, which is by far the easiest to learn and in most cases all you need to get stuff done. Spacebars, the “language” Blaze uses, is just a variation of handlebars, and very pleasant to work with. Use this if you don’t have very specific reasons not to. Most of meteor’s atmosphere packages assume that you use blaze. Also, it’s very easy to learn, chances are high that you already know all you need since you have some meteor projects.

If you need raw performance on the client, and possibly native server-side-rendering, go for react.js. Additionally it gives you a nice structure for defining a component-based UI, and with https://github.com/jhartma/meteor-cjsx a very nice syntax to begin with. You can also mix-and-match react with blaze, there are packages for this. I personally love to have the CSS/HTML/JS for a component together in a single file (with CJSX syntax), instead of 3 files and hopping around between them. But react with meteor is a fairly new topic and has some rough edges, though.

These were the relevant choices for JS-Frameworks.


Basically the first set of frameworks define how your “styling” is organized, while the JS frameworks define how your code/logic is organized and how your frontend behaves. Pick one of every category. I recommend Bootstrap+Meteor’s Blaze to begin with. (But the way react fits into the meteor stack is increasingly engaging me).


Before the rants fly in: this is of course a heavly opinionated statement, based on personal experiences and my own taste. There is no “correct” answer here.


#3

It’s kind of sad we are at a point in society norm where we have to defend our opinions against ranting. Of course they are opinions. Of course they are worth putting out there. And of course everyone must respect that! And of course it is the other way around :frowning:

FWIW, nice write up. Thanks for taking the time to share.


#4

Exactly what I was looking for! Someone with experience, breaking them down into layman’s terms. I’ll brush up on my bootstrap and go from there, thank you so much.

Also, an opinion is what I was looking for so if any rants come from it, tell them to look at the question :smile:


#5

Small correction re Famo.us; it is indeed DOM based, SEO-able, etc. The new “mixed mode” supports WebGL too, but in the same coordinate system with the same API. It’s called mixed mode because your text still lands up in the DOM but you can mix in Web GL stuff. In this respect, Famo.us is the only such solution that exists. You can see e.g. https://fview-lab2.meteor.com/pads/3WusgoWo7BRWpj5JX/4 and inspect it.

Back to the original question, yes, so, Famo.us enables the creation of revolutionary / futuristic user interfaces. But that’s not what you’re interested in doing. From a more “regular” app perspective, I think it will has a lot to offer, in terms of pre-built widgets that are more “alive” and resize themselves well for web & mobile. However, the newest famous has only just come out in beta, and no such components are available yet. e.g. http://fview-flex.meteor.com/TabBar for the old version.

Only other thing, is that even without pre-built components, and even without fancy animations, I found sizing and positioning to be a lot more sensible in famous. These are things you probably won’t notice if using something like bootstrap, but if you ever build something yourself in HTML/CSS and try to horizontally and vertically center something, you realize the directives you need differ depending on which elements and structure you’re using, or when combined with relative sizing, it might just be impossible. Both these things are a whole 10 characters of code in Famous and work perfectly.

I guess my short answer is if you are building something that needs to be production-ready soon, stick with existing tools. But definitely worth checking out Famous. IMHO it’s a big deal, especially once it reaches a 1.0 release with lots of community contributions. There’s an interactive lesson with live coding (preview quality) using famous-views here: https://fview-lab2.meteor.com/pads/P6uKaGQ6HPHTZA7Fm

Disclaimer: I’m the author of famous-views, the Meteor integration of famo.us. But it’s purely FOSS and I’m not paid for it, my investment in it is purely because I believe in the technology.