Voat front-end stack?

1    16 Jun 2016 06:38 by u/prahladyeri

Hello Folks,

I'm new on Voat. Being a programmer myself, I'm interested to know what front-end stack voat is using? Does it use Twitter-bootstrap to be responsive?

More importantly, what is the primary MVC structure such as Backbone/Angular/etc.?

Thanks,

Prahlad

3 comments

0 u/Past9 18 Jun 2016 04:33

You got me curious so I did a little sleuthing.

If you're using Chrome, you can hit F12 to bring up the developer tools and go to the Sources tab. If you look under the "bundles" folder, you can see that there are two JavaScript files. One is called "bootstrap", but I believe it's just for "bootstrapping" the UI--it's not Twitter Bootstrap.

The only CSS I can see is under Content > Dark. It looks to me like it's all custom CSS.

You can paste the main javascript bundle into an unminifier (just Google "javascript unminify"). All I see is jQuery and raw JS. No fancy MVC frameworks.

1 u/prahladyeri [OP] 18 Jun 2016 05:28

The only CSS I can see is under Content > Dark. It looks to me like it's all custom CSS.

Well, its possible that they might have used Twitter-Bootstrap under the hood and then compressed/minified it all? But then, there aren't any col-md-* classes around the divs, so I don't think that's a possibility. If they had to change the class names as well, why would they bother using TB?

All I see is jQuery and raw JS. No fancy MVC frameworks.

That's actually ideal and best for performance! But having something light-weight like Backbone can help a lot in modularizing code. But if you can code smartly and always carefully follow DRY (Don't repeat yourself), I don't think even that is necessary.

1 u/Past9 18 Jun 2016 05:34

Yeah, my inspection was cursory so it's possible the source is minified in there somewhere, but I didn't see it. And actually, I think bootstrap is longer than that whole CSS file.

That's actually ideal and best for performance!

That's often the case, but using a higher-level framework can allow certain optimizations. Take React and its Virtual DOM, for example. Whenever you update your models, it calculates what the new DOM tree should look like, then calculates a diff from the current DOM and only updates the elements that have changed. I suppose one could do that with hand-coded JavaScript, but God help them.