
Show HN: roots - a toolkit for advanced front-end dev - jenius
http://roots.cx
======
jenius
Hey guys - project creator here. Would love to get any and all feedback - this
project has been my passion for over a year and I'm super excited to finally
release it!

Also, this website is open source in addition to the project. It's here on
github: <https://github.com/jenius/roots.cx>

~~~
msutherl
Really great job, excited to try this out. Are there any other similar
projects out there (aside from Yeomen)?

~~~
jrmoran
There are a few

<http://mimosajs.com/>

<http://brunch.io/>

\----

On a related note, I'm currently using Grunt.JS with few plugins for Compass,
CoffeeScript and Live Reload. Similar to Guards (ruby based), it's the plugin
ecosystem that makes it valuable and able to suit multiple needs.

Needless to say, roots sounds interesting.

~~~
msutherl
Thanks!

Mimosa seems less opinionated, supports everything. Has modules. Ugly website.

Brunch seems less opinionated, supports everything. Has skeletons, plugin API.
Nice website.

Grunt seems like the roll-your-own option and is probably more well supported
than the others...?

~~~
dbashford
Mimosa author here! I'll work on the website. =) I do think the tool is better
documented than some of the others, and I was really going for having the docs
rather than making them super pretty.

Mimosa is very pluggable (<http://mimosajs.com/modules.html>), moreso than
Brunch, but slightly less so than grunt, though, to be honest, my grunt
experience is slim. That said, grunt obviously has quite the ecosystem of
plugins that all the others lack.

~~~
dbashford
HackerNews commenting n00b, but guessing it only lets replies go so deep?
Hence my reply to the site suggestions goes here. =)

Crazy kinds of awesome to get that kind of feedback! I'll take a look at all
that stuff. Big site update content-wise with my next release and I can make
some changes then.

~~~
nightpool
Hacker News has exponential delay time on comments based on depth. So the
deeper a comment is, the longer you have to wait to reply to it. It's supposed
to help cool off flamewars.

------
Jgrubb
I very much appreciated the run-this-remote-file | sh installer method before
I learned what I was actually opening myself up to. As handy as it is, this
practice really should be discouraged, imho.

~~~
gravitronic
It gives the installer no more or less privileges than if you were to download
and run a binary or double click on an installer script.

~~~
Jgrubb
I get that, but what if you recently ran sudo make-me-a-sandwich in that shell
session? If someone maliciously slipped a sudo command in that script they'd
have everything they needed, and you might not even realize it. Obviously, I'm
not suggesting the authors of these tools, but these remote shell installers
seem like they'd be obvious targets for Bad Hackers.

It seems like the whole point of these remote shell installers is to make it
easier for some people, but some might not be aware of this risk.

~~~
gravitronic
you know you could just read the shell script, which is one way that this
install method is more transparent than an installer binary.

~~~
SkyMarshal
Yes, and they should drop the pipe to bash/sh at the end of the curl command.
Download it, read it, _then_ manually run it, don't just pipe it all together.

------
mikegirouard
This looks fun. Thanks for building a tool like this.

One suggestion: After I looked over the installer script, I tried running this
on my Arch machine and it didn't recognize `open`.

Depending on the platform, you may want to check for `xdg-open` as well.

~~~
jenius
Ah thanks! I definitely should have tested more on linux. Are there any other
commands you saw that might not work? I'll make that update shortly

------
dreamdu5t
As a developer, I don't quite get who this is for. I know these technologies
and how to use them and install them. Installing node.js and stuff is also
pretty much a couple of one liners.

I guess I don't see why others find much pain in installing node or rails... I
already have Ruby/Node and other stuff installed and each new project I create
differs in file structures and stuff like that based on the needs of the
project. Different projects require different stacks.

~~~
jenius
Hi - I'm a developer too, full time, and I'm the one who made this so I guess
I should be the one explaining it. Roots is for front-end devs or devs who do
front-end work. It makes doing front-end work blazing fast and much less
repetitive.

As for your comment on making it yourself, I would urge you to go check out
the github repo (<https://github.com/jenius/roots>). I can assure you that
replicating this environment is not something that can be done with a couple
lines of npm install xxx - there is a lot of code under the hood. I've spent
more than a year on and off working on this. The command line client is fast,
simple, and intuitive. The css library is extensive and extremely powerful. I
built this tool for developers to make life quicker and easier when it comes
to front-end dev.

Give it a shot, and if you still think it would be more convenient to roll
your own, email me and maybe I can take a few tips from you on how to continue
improving roots to make it more useful for developers : )

------
bensummers
Obligatory link to "| sh" HN comment:

<http://news.ycombinator.com/item?id=2427492>

Why do people _still_ do this for every new project? It's not as if roots
isn't packaged properly with npm.

~~~
jenius
Because it's simple. Getting over the 'installed' barrier is important. I
include very clear instructions on how to install with npm _above_ the "| sh
script". If people thought this was really a disaster, that comment would have
been upvoted more, and so would yours.

~~~
bensummers
I've never heard anyone argue using number of upvotes as evidence before! And
I'm not sure that the right thing to do is _always_ the most popular option.

Simplicity is desirable, but not at the expense of security. I'm sure you
wouldn't suggest that we omitted the password checking step in login forms
because it gets over the "forgetfulness" barrier.

And it's also questionable what it actually brings in terms of simplicity,
since it doesn't install node for you.

~~~
jenius
I only say this because I'm surprised you posted another comment just linking
to a comment that's already been made. Usually the practice is to add your
opinion under the existing comment or upvote it. It seemed to me that you
posted it again just so that your comment would be at the top of the page for
the limited period that new comments hang there, in order to get more
attention. And the reason I mentioned the upvotes was exactly this reason - if
people actually thought this was important, they would have upvoted the
original one more - you posting the _exact same thing_ again is unnecessary
and frankly should be discouraged.

Like I mentioned as a response to both your and the other comments, I explain
how to install it without that shortcut directly above, so it's not too
difficult to do this if you are concerned about security. In addition, it is
very simple to just check the source of the link if you are suspicious. I
asked in the other comment thread if it would help if I put a "view source"
link next to it to make it even more convenient and nobody responded, so I
figured it wasn't something people were after.

I'm not sure how to respond to your questioning it's simplicity. It's not a
complex script - it checks if you have node, and if you do it installs roots.
If you don't, it tells you that you need node and opens up the node.js
website. It's just a little helper, not a mind-blowing, life-saving tool. Is
it saving you hours upon hours of time? No. But does it make the process
simpler? Yes.

~~~
bensummers
The point of linking to another comment (made by someone else who is more
qualified to comment around 2 years ago) is to point out how people just
aren't learning.

While it may seem like it's just a convenience, these things tend to take on a
life of their own. For example, Chef's "pipe to bash" installer is used by
Vagrant, thereby exposing anyone using Vagrant and Chef to make a dev VM on an
untrusted network (any wifi!) to who knows what being installed. But unless
you read the source, you don't know about this risk.

Why does no one care about security?

------
thedjpetersen
Cool project - one of the major pain points with Yeoman was trying to get
templating working. Cool to see a project which takes this approach from the
beginning.

------
jaredcwhite
Nice job on the site design there. Feels clean, professional. I'm interested
in learning more about the tools...will bookmark.

------
jameswyse
This looks interesting, I've been doing a lot similar work as I'm currently
building an open source CMS for nodejs. It's a lot more complex than Roots
however the goal of the project is to make it easy for developers to build
websites and applications. It'll come with a full featured and extendable
admin control panel and built in support for all the common stuff like
authentication, user Management, content management, blog posts, asset
publishing, etc.

The nodejs side handles the API which automatically generates REST routes for
your resources, and you have the ability to write custom API endpoints as
well.

The website and admin panel are automatically built using Grunt and require.js
and depend only on the API so you're free to host your website on S3 or
another server entirely. The client-side website will call the API for
content, authentication, etc. The admin panel is written in AngularJS (So far
it's incredibly responsive and feels almost native!) and it's up to the user
what to use for the main website.

One nice thing is during development it'll watch your files for changes,
rebuild the site on the fly and update the client view using socket.io. No
more constantly refreshing the page after every change! In production mode
everything is bundled and minified using r.js.

If this sounds interesting to you guys then I should have something to show HN
in the next few weeks :)

~~~
jenius
Hey James,

Sounds like a cool project - excited to see it for sure. The tough part with
projects like this is making sure that it's simple but still flexible. For
example, can you fully customize the rest routes, or are those just generated?
If a developer knows enough to work with routing, models, and the back end,
why wouldn't they just use rails and activeadmin for the admin panel? If your
project is any less simple/flexible than rails, that will be a tough
compromise.

Either way, this sounds like a pretty sweet project, I'd love to check it out
when it's released. What are you thinking about calling it (just so i
recognize)?

~~~
jameswyse
Hey, thanks for replying :)

I completely agree with your points. I constantly encounter the same problems
when I use other frameworks so I want everything to be fully flexible.

At the moment the REST routes are generated for resources and available
through the api/resources endpoint. (For example, /api/resources/users/) you
can however add whatever other routes you like to /api/ using your own
controllers.

I'm thinking about adding a simple query language to the REST route syntax to
take care of some common requests. That may work something like this:
/api/resources/users/$near/lat,lon

It's still early stages though so I'll probably go through a lot of ideas
before I'm happy with it!

It'll be called Nails (or Nails Framework, Nails CMS, whatever sounds closest
to the finished idea) - I have the domain nails.io which I'll be using for
this project.

Cheers!

~~~
jenius
You should check out railwayjs before you get too deep into it - this might do
what you were after: <http://railwayjs.com/>

~~~
jameswyse
Cheers. I've used RailwayJS in the past but I switched to LocomotiveJS[1]
which I find much nicer to work with and it's incredibly flexible too.

I'm using locomotive in this project on top of express to help with
controllers and routing, though I'm thinking about using flatiron[2] which is
a pretty solid looking set of modules for routing, middleware, etc.

[1] LocomotiveJS: <http://locomotivejs.org/> [2] Flatiron:
<http://flatironjs.org/#data>

------
KaoruAoiShiho
Make some simple HTML components, break out the compiled HTML and CSS for non-
developers, and you've got yourself a bootstrap alternative. Please, make it
happen.

~~~
jenius
I made it my specific goal not to have this as a bootstrap alternate - there's
already boostrap and foundation - why do we need more? In addition, I'm very
much against using classes to dry up your css. You should be using mixins or
extends to build object-oriented css - that's the principle that roots css is
built upon.

Rather than catering to non-developers, I like to encourage people to learn
more about development so they can write clean code and make beautiful sites.
If that means less adoption, so be it - at least I won't be polluting the web
with poorly built sites : )

That being said, this is open source, so if that's something you want to work
on, you are more than welcome!

~~~
KaoruAoiShiho
I don't like bootstrap / foundation. We need a stylus based alternative to
those.

<http://news.ycombinator.com/item?id=4893514>

Since I'm a dev I would never use a compiled version of such a framework, but
having adoption by non-devs would benefit the community and create a market
for devs to create things for.

I wouldn't think of it as catering to them but creating an easier on-boarding
process.

~~~
jenius
Ok, i see what you're saying. That is the exact mission of this library
(<https://github.com/jenius/roots-css>) which is behind roots. I would love
any help or advice on making this go where you imagine it can. Hit me up via
email or twitter and let's talk about it!

------
cmwelsh
This seems comparable to Fire.app (<http://fireapp.handlino.com/>, F/LOSS, my
favorite) or CodeKit. I noticed that you are specifically pimping out Stylus
rather than Sass/Compass, but it doesn't seem to be a problem to get Compass
working if you copy the library in yourself.

~~~
jenius
for sure, this was what i was aiming for. if i were better at cocoa dev i
would have made a little mac app too.

I pimped out stylus and avoided sass/compass for very specific reasons. try
using the roots-css library and let me know what you think. I'm hoping people
find it to be a refreshing change of pace - the syntax is natural, extensive,
and includes ui components.

~~~
cmwelsh
Will do. I've heard people on Freenode IRC telling me that while Compass is a
great library, Stylus is the superior language. I certainly was a fan of Sass
over SCSS, and I like how Stylus reminds me of that.

~~~
msutherl
I'm not so sure Stylus is the superior language. SASS seems much more well
supported and features like @extend: <[http://sass-
lang.com/docs/yardoc/file.SASS_REFERENCE.html#ex...](http://sass-
lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend>); make a big difference.

EDIT: sorry, I meant @include: [http://sass-
lang.com/docs/yardoc/file.SASS_REFERENCE.html#in...](http://sass-
lang.com/docs/yardoc/file.SASS_REFERENCE.html#including_a_mixin)

~~~
jenius
I prefer using mixins over extend, as they are more flexible and intelligent.
If you don't structure your classes correctly it can lead to some code
duplication, but frankly this doesn't make any speed difference after gzip
anyway.

To respond to your edit, stylus is as good at including mixins as sass. it's a
lot less verbose in fact. you just run it as a function.

~~~
msutherl
It was this changelog that convinced me: [http://sass-
lang.com/docs/yardoc/file.SASS_CHANGELOG.html#32...](http://sass-
lang.com/docs/yardoc/file.SASS_CHANGELOG.html#320_10_august_2012)

@extend, @include, % placeholder selectors.

But I take your point about gzipping and from what I've read redundant CSS has
a negligible effect on site performance.

------
insraq
What's the difference between this and Yeoman ? (<http://yeoman.io/>)

~~~
jenius
Haha was very prepared for this question. The main differences for me are that
roots doesn't rely on ruby, it's built for advanced devs (starts with jade,
stylus, and coffeescript), it uses roots-css rather than compass, and the
project structure is a bit lighter and cleaner.

I tried yeoman and played with it for a while when it came out, but for me it
feels vastly different to actually use. The concepts are definitely similar
though. Great question!

------
sctechie
Looks great! I've been using yeoman for a while now and this looks like a
fantastic replacement / alternative. Are you looking for contributions or just
releasing this for people to use?

~~~
jenius
Both! Any and all contributions are more than welcome. I don't know what the
eff I'm doing. This works great for me, but if I can make it better for
everyone else I'm all about that. I'll continue to work hard on this until
it's the best it can be.

------
jongold
Are people using this/Brunch/Yeoman inside Rails apps? I can't work out the
usecase - or do you use this in conjunction with a separate app generating
your API?

Sidenote: the design is gorgeous.

~~~
jenius
Thanks so much! Really appreciate it. I am a backend dev and spend much of my
time in rails (as you can probably tell from the way this project was
written), so I very specifically built this to work with rails. I have a
plugin here (<https://github.com/jenius/roots-rails>) that's working, but
still tinkering with it. More than happy to accept contributions as well!

------
backwardm
Just watched your getting started video and am really excited to try it out.
Seems super clean and easy to get things done with. Installing now.

------
reidrac
Your "curl roots.cx/get | sh" installation method is not as easy as it seems
because it requires node.js but current text seems to imply that only a Linux
or Mac system is requited :)

May be it's just me being stupid, but...

Besides it didn't work very well here (Ubuntu 12.10), see:
<http://pastebin.com/uX3RnaYM>

~~~
jenius
Thanks for bringing that up - I'll check it out and see if I can get that
fixed shortly!

------
andreasklinger
Quick feedback. There is no example code nowhere on the main website. Videos
are great but i usually just scan for code.

Hope that helps.

~~~
jenius
I think the reason is because this isn't a code-based library, it's a command
line client. The portion that is more code-based (the css library) is chock
full of code examples, and all the commands are listed out on the front page.

After looking it over, what kinds of other code examples would you want to
see?

~~~
andreasklinger
Yes you are right.

Reading the introduction about express.js i (don't know why) expected more
glue magic between frontend and backend.

~~~
jenius
For sure. I do work mainly on backend dev, and the roots-rails and roots-
express plugins help me out a decent amount. Roots specifically is targeted to
front-end though. If you have any suggestions on how to tie this together
nicely with backend stuff I'd be more than happy to hear it though!

My biggest thing right now is getting the livereload to work with rails,
specifically through pow. I'm sure there's a way to do it, just have to figure
it out...

------
dwerthen
Looks very nice! Will try it out for sure. Quick question, is there a option
to use plain js instead of CoffeeScript?

~~~
jenius
Thank you! Yeah, you can absolutely use plain js. You can just drop a plain js
file in there and delete the coffeescript - everything should still compile
perfectly.

~~~
dwerthen
OK, terrific! Perhaps that would be a nice option in the initial generation? I
sure would like, not having to the delete the generated files :-)

On a side note, I can totally see myself using this. So, cheers!

~~~
jenius
If you want to use basic html, css, and js, you can use the flag --basic to
the end of a roots new command : )

But yeah I'm thinking some option for custom default templates might be nice
to add, now that you bring this up. Also, try coffeescript! It's great,
promise

~~~
dwerthen
I guess I can give it a try, after all, I am tired of writing those
'function's all the time ^^

~~~
jenius
You won't regret it. Just give yourself a week or so to get used to it - it
seems frustrating at first when you make syntax errors, but it is a life saver
in the long run

------
carlsednaoui
Awesome job! Loving the CSS Library section - <http://roots.cx/css/>

------
desireco42
Here is my feedback. I really like what you did, as you can see from other
comments, there are already a lot of alternatives.

I would prefer sass and haml honestly. Other then that, I love how you make
those mixins that seem very useful and I can see myself using it.

Videos are very good and show what are main features.

~~~
jenius
Hey Zeljko,

Thanks so much for leaving feedback - really appreciate it. It helps a lot,
and thanks so much for your kind words as well. Just out of curiosity, why
would you prefer sass and haml? Have you tried stylus and jade? If not, you
should give them a shot!

You're definitely right that there are a lot of alternatives - I just think
roots is the best. If there are any other features that you can see as
helpful, by all means let me know and I'd love to try to integrate them!

~~~
the_french
haml and sass would be nice because they are often used in rails projects. It
would allow me to easily integrate roots with rails.

~~~
jenius
Good news - I already made a plugin for rails : )
<https://github.com/jenius/roots-rails>

------
adefa
On your roots/css library page: <http://roots.cx/css/>

The scrollspy-esque navigation bar on the left never highlights the animation
link, whether you click it or scroll all the way down.

I'm using: Chrome 23.0.1271.95 on OSX 10.8.2.

------
slajax
Great job OP. Would love to see something that merges aspects from this and
Yeoman. I feel like (haven't officially tried either TBH) they focus on
slightly different aspects and would really cover full stack very very well.
Again, Great job!

------
bretthopper
Not sure if you're aware, but there's a popular WordPress theme with the name
Roots:

* <https://github.com/retlehs/roots>

* <http://www.rootstheme.com/>

~~~
ppradhan
how on earth can you name new products when even wordpress themes are there to
tell you the names taken? if that was what you were implying...

~~~
bretthopper
I wasn't implying anything. Some people like having a unique name so I was
just letting him know another Roots existed. Ultimately the author's choice if
he cares enough to rename it or not.

------
niels_bom
Typo in one of the first sentences: "pratices".

Looks pretty good for the rest btw.

~~~
jenius
Thank you - great catch. Already fixed and shipped : )

------
mbarvian
This looks like it will definitely come in handy for prototypes, great job.

P.S. It seems the link to the SASS plugin on your site is broken.

~~~
jenius
Ah, thank you. I'll fix that link right away.

------
dysoco
As someone who is not a Web Developer I don't get what this is for, but seems
it would help me. Can anyone explain?

------
pruett
well done, nice work...this looks like an awesome tool for building static
sites

------
combataircraft
Why RequireJS, not OneJS?

~~~
jenius
I had never heard of onejs. I'll look into it now and if it looks promising
definitely include it!

