Show HN: roots - a toolkit for advanced front-end dev
roots.cx
roots.cx
Also, this website is open source in addition to the project. It's here on github: https://github.com/jenius/roots.cx
----
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.
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...?
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.
– The text shadows on the main page are a bit much. 1px offset is sufficient and the shadow color probably doesn't need to be so light.
– Grey boxes around text are too tight and probably shouldn't be so rounded.
– Headers on home-page are either too big or aren't given enough space. Whitespace! Don't be afraid to use it.
– Darker shadows on headers have the same problem – too much offset – just looks tacky.
– Title and description on homepage looks crammed into the top. Give it more space. Maybe smaller text.
– Red headers are way too bright. Tone it down.
– The bathroom-tile background image is kind of weird.
– Body text is too wide throughout the docs.
– More whitespace throughout the design would help (between all typographic elements), especially given your choice of a large, open typeface.
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.
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). Because it's focused on building small prototypes, it saves everything to gists and provides a viewer at http://proto.es/{gist-id}.
Regards
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?
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.
npm install -g typescript
tsc helloworld.ts
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
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.
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.
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.
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 : )
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.
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.
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.
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?
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 :)
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)?
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!
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
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!
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.
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.
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.
- 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
EDIT: sorry, I meant @include: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#in...
http://learnboost.github.com/stylus/docs/extend.html
edit: You're right, @include's support for mixin bodies is not available :/ I am hoping Stylus adds this soon. It helps a lot for media queries.
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.
@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.
Have you seen node-webkit[1]? You can easily create a cross-platform app with HTML5/NodeJS capabilities.
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!
Sidenote: the design is gorgeous.
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
Hope that helps.
After looking it over, what kinds of other code examples would you want to see?
Reading the introduction about express.js i (don't know why) expected more glue magic between frontend and backend.
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...
On a side note, I can totally see myself using this. So, cheers!
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
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.
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 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.
Looks pretty good for the rest btw.
P.S. It seems the link to the SASS plugin on your site is broken.