15 ms·

Show HN: roots - a toolkit for advanced front-end dev

195 points by jenius 14y ago

reidrac 14y ago
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 http://pastebin.com/uX3RnaYM
- jenius 14y ago
  Thanks for bringing that up - I'll check it out and see if I can get that fixed shortly!
jaredcwhite 14y ago
Nice job on the site design there. Feels clean, professional. I'm interested in learning more about the tools...will bookmark.
carlsednaoui 14y ago
Awesome job! Loving the CSS Library section - http://roots.cx/css/ http://roots.cx/css/
jenius 14y ago
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 https://github.com/jenius/roots.cx
- JungleGymSam 14y ago
  In that case please consider redoing your videos with more care. Both the audio and video are poor. Your microphone should be near your mouth so that you don't sound like you're far away and the video resolution is really low.
  - jenius 14y ago
    I know, I definitely need to do a better job with the videos. I just did them this morning (wasn't planning on having them but i thought it might be a good idea) and vimeo really murdered me on the resolution, not sure why. I'll have new ones up soon, promise : )
  - raimondious 14y ago
    Not to mention being able to hear every single tap click and movement on the laptop is really distracting. However everything else looks pretty slick!
- msutherl 14y ago
  Really great job, excited to try this out. Are there any other similar projects out there (aside from Yeomen)?
  - jenius 14y ago
    middleman (http://middlemanapp.com/ http://middlemanapp.com/) is a solid alternative for ruby as well - this is the only other one i know of apart from yeoman as you mentioned
  - jrmoran 14y ago
    There are a few http://mimosajs.com/ http://mimosajs.com/ http://brunch.io/ 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 14y ago
      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 14y ago
        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 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.
        msutherl 14y ago
- roxxor 14y ago
  Cool project. Also, you should checkout Punch (http://laktek.github.com/punch http://laktek.github.com/punch). I like it mainly for the JSON based content definitions, which is really helpful when it comes to prototyping web apps.
  - jenius 14y ago
    this looks really cool, thanks for sharing! i'm definitely going to check it out and pick it apart : )
- alexcabrera 14y ago
  This is really nice and a great way to rapidly build without resorting to templates or bootstrap. Highly polished, great work. We released something built on the same stack (jade, stylus, coffeescript) that's a bit more lightweight, more geared towards building prototypes called [proto](https://github.com/droptype/proto https://github.com/droptype/proto). Because it's focused on building small prototypes, it saves everything to gists and provides a viewer at http://proto.es/{gist-id} http://proto.es/{gist-id}.
  - jenius 14y ago
    Thanks so much! I really appreciate it. Proto looks like top quality stuff - excellent work. I'm going to check this out in depth - perhaps our tools can learn something from each other or combine in some way : )
    - alexcabrera 14y ago
      That would be fantastic. As I said, root is very highly polished and you've done a great job. We have something in the pipeline that might make sense to collaborate on. Will shoot you an email to discuss.
      - jenius 14y ago
        Awesome, thanks. Got your email, will be in touch shortly!
- jjoe 14y ago
  Congratulations on releasing this. I think you meant to say sftp instead of ftp.
  - jenius 14y ago
    Do you mean on possibly future deploy to ftp implementation? There's a pretty long story behind that one too - ftp is brutal to work with.
    - jjoe 14y ago
      Sorry for being unclear. On the video you recommended using ftp to transfer the pub folder over to the web server for go live. It's best to recommend a tool that operates on an encrypted ssh transport like sftp/scp/etc. Regards
- eranation 14y ago
  Very exciting, it's hard to keep up with all the moving parts nowadays, I like it. Reminds me of rails composer a little. as for feedback: * would love it if you'll add TypeScript support somehow. I come from the Java / Scala world and it will be an easier transition to node dev this way * best download to launch-in-browser sequence Iv'e seen yet. (roots create foo, cd foo, roots watch) browser actually opens for you, nice touch. * you seem to put a lot of effort on usability and convenience, please continue. * good documentation and usage print-outs * the js client side package manager is a great addition, any dependency management there?
  - jenius 14y ago
    Thanks for the feedback, and so glad you like it! I made a plugin interface just for things like adding typescript support. I know pretty much nothing about typescript through, are there any good node compilers out there? It would be incredible if you made a plugin for it - if not I'd be happy to try to tinker one together myself.
    - eranation 14y ago
      Yep npm install -g typescript tsc helloworld.ts More info here: http://www.typescriptlang.org http://www.typescriptlang.org Will give it a shot :) p.s. I would add a tweet button on the site, I actively looked for it, although I'm lazy I tweeted anyway, but this might give you some extra shout-outs, especially for the shot grace period you are on HN front page
      - jenius 14y ago
        Thanks! I'll check it out. Feel free to ping me on twitter if you're having trouble or want me to put one together - http://twitter.com/jescalan http://twitter.com/jescalan
  - jitl 14y ago
    It looks like roots is using Bower to manage client-side packages. Bower is Twitter's "front-end JavaScript" package manager. Bower does indeed manage and track dependencies for you, see http://twitter.github.com/bower/ http://twitter.github.com/bower/
pruett 14y ago
well done, nice work...this looks like an awesome tool for building static sites
- deleted 14y ago
  [deleted]
backwardm 14y ago
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.
insraq 14y ago
What's the difference between this and Yeoman ? (http://yeoman.io/ http://yeoman.io/)
- jenius 14y ago
  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!
Jgrubb 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      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 14y ago
        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.
- jenius 14y ago
  Fair enough. This is why I have explicit instructions on how to install without the run-as-remote-file install method right above it. Do you think it would help to add a view source link next to it or something?
niels_bom 14y ago
Typo in one of the first sentences: "pratices". Looks pretty good for the rest btw.
- jenius 14y ago
  Thank you - great catch. Already fixed and shipped : )
andreasklinger 14y ago
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 14y ago
  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 14y ago
    Yes you are right. Reading the introduction about express.js i (don't know why) expected more glue magic between frontend and backend.
    - jenius 14y ago
      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...
littlespark 14y ago
VERY NICE! Thank you!
mikegirouard 14y ago
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 14y ago
  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
sctechie 14y ago
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 14y ago
  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.
bretthopper 14y ago
Not sure if you're aware, but there's a popular WordPress theme with the name Roots: * https://github.com/retlehs/roots https://github.com/retlehs/roots * http://www.rootstheme.com/ http://www.rootstheme.com/
- jenius 14y ago
  I was not aware, but I think this is ok. This roots is a vastly different tool that will appeal to a very different audience : )
- ppradhan 14y ago
  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 14y ago
    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.
- rquantz 14y ago
  It is also the name of a band, a work of narrative history, and a widely used botanical nourishment framework.
- illicium 14y ago
  And Apple is a record company.
cmwelsh 14y ago
This seems comparable to Fire.app (http://fireapp.handlino.com/ 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 14y ago
  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 14y ago
    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.
    - jenius 14y ago
      For sure. I actually built roots on top of sass originally, and I became frustrated with it's limitations. I tried porting it to stylus because that was the only viable alternative that I knew of, and once I started working with it I couldn't go back. The only drawback to stylus is that sometimes you can get caught with ambiguity. But I've tried to make roots so that if you are just starting, you deal with that as little as possible.
      - msutherl 14y ago
        I'd love to know what you didn't like about SASS.
      - jenius 14y ago
        The major advantages to stylus (rather than putting down sass, which i do still love) that I saw were these: - native css-style syntax for mixins - ability to pull properties from a parent (killer) - better programming logic and syntax - runs nicely on javascript and ruby - you can use brackets and semis or not without switching languages, and you can mix the two types of syntax - easy to build libraries for and import libraries into
jongold 14y ago
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 14y ago
  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 https://github.com/jenius/roots-rails) that's working, but still tinkering with it. More than happy to accept contributions as well!
thedjpetersen 14y ago
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.
slajax 14y ago
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!
KaoruAoiShiho 14y ago
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 14y ago
  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 14y ago
    I don't like bootstrap / foundation. We need a stylus based alternative to those. http://news.ycombinator.com/item?id=4893514 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 14y ago
      Ok, i see what you're saying. That is the exact mission of this library (https://github.com/jenius/roots-css 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!
combataircraft 14y ago
Why RequireJS, not OneJS?
- jenius 14y ago
  I had never heard of onejs. I'll look into it now and if it looks promising definitely include it!
mbarvian 14y ago
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 14y ago
  Ah, thank you. I'll fix that link right away.
dreamdu5t 14y ago
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 14y ago
  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 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 : )
desireco42 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      Good news - I already made a plugin for rails : ) https://github.com/jenius/roots-rails https://github.com/jenius/roots-rails
dwerthen 14y ago
Looks very nice! Will try it out for sure. Quick question, is there a option to use plain js instead of CoffeeScript?
- jenius 14y ago
  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 14y ago
    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 14y ago
      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 14y ago
        I guess I can give it a try, after all, I am tired of writing those 'function's all the time ^^
        jenius 14y ago
        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
adefa 14y ago
On your roots/css library page: http://roots.cx/css/ 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.
jameswyse 14y ago
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 14y ago
  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 14y ago
    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!
bensummers 14y ago
Obligatory link to "| sh" HN comment: http://news.ycombinator.com/item?id=2427492 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 14y ago
  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 14y ago
    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 14y ago
      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.
dysoco 14y ago
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?

195 points by jenius 14y ago

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 http://pastebin.com/uX3RnaYM

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

jaredcwhite 14y ago

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

carlsednaoui 14y ago

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

jenius 14y ago

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 https://github.com/jenius/roots.cx

JungleGymSam 14y ago
In that case please consider redoing your videos with more care. Both the audio and video are poor. Your microphone should be near your mouth so that you don't sound like you're far away and the video resolution is really low.
- jenius 14y ago
  I know, I definitely need to do a better job with the videos. I just did them this morning (wasn't planning on having them but i thought it might be a good idea) and vimeo really murdered me on the resolution, not sure why. I'll have new ones up soon, promise : )
- raimondious 14y ago
  Not to mention being able to hear every single tap click and movement on the laptop is really distracting. However everything else looks pretty slick!
msutherl 14y ago
Really great job, excited to try this out. Are there any other similar projects out there (aside from Yeomen)?
- jenius 14y ago
  middleman (http://middlemanapp.com/ http://middlemanapp.com/) is a solid alternative for ruby as well - this is the only other one i know of apart from yeoman as you mentioned
- jrmoran 14y ago
  There are a few http://mimosajs.com/ http://mimosajs.com/ http://brunch.io/ 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 14y ago
    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 14y ago
      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 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.
      - msutherl 14y ago
roxxor 14y ago
Cool project. Also, you should checkout Punch (http://laktek.github.com/punch http://laktek.github.com/punch). I like it mainly for the JSON based content definitions, which is really helpful when it comes to prototyping web apps.
- jenius 14y ago
  this looks really cool, thanks for sharing! i'm definitely going to check it out and pick it apart : )
alexcabrera 14y ago
This is really nice and a great way to rapidly build without resorting to templates or bootstrap. Highly polished, great work. We released something built on the same stack (jade, stylus, coffeescript) that's a bit more lightweight, more geared towards building prototypes called [proto](https://github.com/droptype/proto https://github.com/droptype/proto). Because it's focused on building small prototypes, it saves everything to gists and provides a viewer at http://proto.es/{gist-id} http://proto.es/{gist-id}.
- jenius 14y ago
  Thanks so much! I really appreciate it. Proto looks like top quality stuff - excellent work. I'm going to check this out in depth - perhaps our tools can learn something from each other or combine in some way : )
  - alexcabrera 14y ago
    That would be fantastic. As I said, root is very highly polished and you've done a great job. We have something in the pipeline that might make sense to collaborate on. Will shoot you an email to discuss.
    - jenius 14y ago
      Awesome, thanks. Got your email, will be in touch shortly!
jjoe 14y ago
Congratulations on releasing this. I think you meant to say sftp instead of ftp.
- jenius 14y ago
  Do you mean on possibly future deploy to ftp implementation? There's a pretty long story behind that one too - ftp is brutal to work with.
  - jjoe 14y ago
    Sorry for being unclear. On the video you recommended using ftp to transfer the pub folder over to the web server for go live. It's best to recommend a tool that operates on an encrypted ssh transport like sftp/scp/etc. Regards
eranation 14y ago
Very exciting, it's hard to keep up with all the moving parts nowadays, I like it. Reminds me of rails composer a little. as for feedback: * would love it if you'll add TypeScript support somehow. I come from the Java / Scala world and it will be an easier transition to node dev this way * best download to launch-in-browser sequence Iv'e seen yet. (roots create foo, cd foo, roots watch) browser actually opens for you, nice touch. * you seem to put a lot of effort on usability and convenience, please continue. * good documentation and usage print-outs * the js client side package manager is a great addition, any dependency management there?
- jenius 14y ago
  Thanks for the feedback, and so glad you like it! I made a plugin interface just for things like adding typescript support. I know pretty much nothing about typescript through, are there any good node compilers out there? It would be incredible if you made a plugin for it - if not I'd be happy to try to tinker one together myself.
  - eranation 14y ago
    Yep npm install -g typescript tsc helloworld.ts More info here: http://www.typescriptlang.org http://www.typescriptlang.org Will give it a shot :) p.s. I would add a tweet button on the site, I actively looked for it, although I'm lazy I tweeted anyway, but this might give you some extra shout-outs, especially for the shot grace period you are on HN front page
    - jenius 14y ago
      Thanks! I'll check it out. Feel free to ping me on twitter if you're having trouble or want me to put one together - http://twitter.com/jescalan http://twitter.com/jescalan
- jitl 14y ago
  It looks like roots is using Bower to manage client-side packages. Bower is Twitter's "front-end JavaScript" package manager. Bower does indeed manage and track dependencies for you, see http://twitter.github.com/bower/ http://twitter.github.com/bower/

pruett 14y ago

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

deleted 14y ago
[deleted]

backwardm 14y ago

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.

insraq 14y ago

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

jenius 14y ago
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!

Jgrubb 14y ago

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 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      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.
jenius 14y ago
Fair enough. This is why I have explicit instructions on how to install without the run-as-remote-file install method right above it. Do you think it would help to add a view source link next to it or something?

niels_bom 14y ago

Typo in one of the first sentences: "pratices". Looks pretty good for the rest btw.

jenius 14y ago
Thank you - great catch. Already fixed and shipped : )

andreasklinger 14y ago

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 14y ago
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 14y ago
  Yes you are right. Reading the introduction about express.js i (don't know why) expected more glue magic between frontend and backend.
  - jenius 14y ago
    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...

littlespark 14y ago

VERY NICE! Thank you!

mikegirouard 14y ago

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 14y ago
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

sctechie 14y ago

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 14y ago
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.

bretthopper 14y ago

Not sure if you're aware, but there's a popular WordPress theme with the name Roots: * https://github.com/retlehs/roots https://github.com/retlehs/roots * http://www.rootstheme.com/ http://www.rootstheme.com/

jenius 14y ago
I was not aware, but I think this is ok. This roots is a vastly different tool that will appeal to a very different audience : )
ppradhan 14y ago
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 14y ago
  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.
rquantz 14y ago
It is also the name of a band, a work of narrative history, and a widely used botanical nourishment framework.
illicium 14y ago
And Apple is a record company.

cmwelsh 14y ago

This seems comparable to Fire.app (http://fireapp.handlino.com/ 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 14y ago
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 14y ago
  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.
  - jenius 14y ago
    For sure. I actually built roots on top of sass originally, and I became frustrated with it's limitations. I tried porting it to stylus because that was the only viable alternative that I knew of, and once I started working with it I couldn't go back. The only drawback to stylus is that sometimes you can get caught with ambiguity. But I've tried to make roots so that if you are just starting, you deal with that as little as possible.
    - msutherl 14y ago
      I'd love to know what you didn't like about SASS.
    - jenius 14y ago
      The major advantages to stylus (rather than putting down sass, which i do still love) that I saw were these: - native css-style syntax for mixins - ability to pull properties from a parent (killer) - better programming logic and syntax - runs nicely on javascript and ruby - you can use brackets and semis or not without switching languages, and you can mix the two types of syntax - easy to build libraries for and import libraries into

jongold 14y ago

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 14y ago
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 https://github.com/jenius/roots-rails) that's working, but still tinkering with it. More than happy to accept contributions as well!

thedjpetersen 14y ago

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.

slajax 14y ago

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!

KaoruAoiShiho 14y ago

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 14y ago
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 14y ago
  I don't like bootstrap / foundation. We need a stylus based alternative to those. http://news.ycombinator.com/item?id=4893514 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 14y ago
    Ok, i see what you're saying. That is the exact mission of this library (https://github.com/jenius/roots-css 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!

combataircraft 14y ago

Why RequireJS, not OneJS?

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

mbarvian 14y ago

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 14y ago
Ah, thank you. I'll fix that link right away.

dreamdu5t 14y ago

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 14y ago
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 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 : )

desireco42 14y ago

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 14y ago
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 14y ago
  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 14y ago
    Good news - I already made a plugin for rails : ) https://github.com/jenius/roots-rails https://github.com/jenius/roots-rails

dwerthen 14y ago

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

jenius 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      I guess I can give it a try, after all, I am tired of writing those 'function's all the time ^^
      - jenius 14y ago
        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

adefa 14y ago

On your roots/css library page: http://roots.cx/css/ 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.

jameswyse 14y ago

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 14y ago
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 14y ago
  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!

bensummers 14y ago

Obligatory link to "| sh" HN comment: http://news.ycombinator.com/item?id=2427492 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 14y ago
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 14y ago
  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 14y ago
    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.

dysoco 14y ago

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?