6 ms·

Building HTML5 Apps with Yeoman and Backbone

59 points by rockyj 13y ago

Wintamute 13y ago
A quick word of warning for anyone following this guide. You should never sudo npm install. That's giving root privileges to anyone that care's to upload code to the npm package registry. npm should work fine without sudo.
- sneak 13y ago
  Furthermore, it doesn't appear that any of these fad language repositories do any sort of package signing, so you're vulnerable not just to the people who upload their own code, but anyone who may compromise the mirrors, too, because even if you trust the source, there's no way of verifying the code hasn't been modified on the mirror. See also: http://cristianobetta.com/blog/2013/02/02/ruby-gems-are-not-safe-to-use/ http://cristianobetta.com/blog/2013/02/02/ruby-gems-are-not-...
  - sgrove 13y ago
    I believe Clojars at least supports package signing, if not requires it. Was extremely useful in a code audit recently.
  - SanderMak 13y ago
    And even the established ones which do require signing are not really trivial to use correctly: http://branchandbound.net/blog/security/2012/08/verify-dependencies-using-pgp/ http://branchandbound.net/blog/security/2012/08/verify-depen...
  - contrahax 13y ago
    > fad language lol
- vixen99 13y ago
  No doubt I've nothing better to do but stare aghast at "care's to upload code". It's a matter of deep mystery to me that folk adept at using languages demanding absolute grammatical precision treat their native language so carelessly.
  - mistermumble 13y ago
    Two assumptions you're making: 1) That English is the poster's native language 2) the poster did not use auto-correct
  - Wintamute 13y ago
    Hah. I just reread my comment and stared aghast at my own error. Languages requiring absolute grammatical precision fail to compile with errors, not so Hacker News comments sadly. There, I just solved your mystery for you :)
devmach 13y ago
I understand the advantages of using these tools but isn't it too much ? Node, Npm,Yeoman, Grunt, Bower just to bootstrap some font-end code, if you don't use node.js for back-end you have to use other tools in back-end development too ( composer, phpunit, gem, rake etc... you name it... ). Sometimes i feel like we use tools just to use them. edit: Just to clarify : I'm not saying don't use any of them and don't organize/automate tasks and code like monkey...
- rockyj 13y ago
  You are right, it's a lot of tools for FE development. However, (IMHO) when I used this toolkit, I felt very productive, for example, if you make a change in the CSS, the UI is automatically refreshed (no need to manually refresh). The final build process optimizes PNGs among other things. All in all, it felt that someone has thought of everything that a webdev needs and put it in.
  - philpill 13y ago
    Could you explain what you mean by 'no need to manually refresh'? I understand this to mean you don't need to refresh your browser to see the changes you've made in your source. EDIT: Ah, nevermind - just read up on it: "Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to."
- untog 13y ago
  If your front end is simple, perhaps. But if you're constructing complex webapps with tests etc. then this stuff comes in very useful.
romain_dardour 13y ago
You should take a look at aura.js (http://github.com/aurajs/aura http://github.com/aurajs/aura). Abstracts many of the steps of this article (require.js, bower...) and offers a decoupled architecture for scalable and well structured apps. There's also a yeoman generator, and they have an extensions system that seamlessly integrate handlebars.js for example.
MatthewPhillips 13y ago
This is probably irrational, but it's always annoyed me that Yeoman is little more than a package.json file and small bash script yet has a professionally designed logo.
- romain_dardour 13y ago
  Having a professional logo gives it a more polished first contact. For a tool that makes disparate bits easier to use it's part of the contract. Who cares how it's made when it brings convenience to the table?
- mofle 13y ago
  This isn't at all constructive and you're severely misinformed. This is Yeoman: https://github.com/yeoman/ https://github.com/yeoman/
  - MatthewPhillips 13y ago
    Of course it isn't constructive. I'm just bitter that I've debated spending $500+ of my personal money for logos of my open source projects that do something genuinely original so that I can perhaps get above 100 stars on GitHub, while a scaffolding script (probably) got one for free and appears on the front page of Hacker News weekly. So yes, not constructive at all; this is plain old jealously.
- paulirish 13y ago
  The yeoman project encompasses a lot more. It's original design was very monolithic but the community and core team decided it's better broken into modules, so you primarily use much of yeoman through grunt, but much of that workflow is authored by the Yeoman dev team. There's yo (that scaffolds via generators), 10 officially supported generators that work with common webapps setups (e.g. angular backbone ember chrome-extension mocha karma), and (so far) 74 generators in the community building off this platform: https://npmjs.org/browse/depended/yeoman-generator https://npmjs.org/browse/depended/yeoman-generator Then other supplementary modules: grunt-contrib-compass, grunt-contrib-imagemin, grunt-contrib-htmlmin, grunt-contrib-livereload, grunt-regarde, grunt-svgmin, grunt-contrib-connect, grunt-bower-requirejs, grunt-usemin, node adapters for optipng and jpegtran, configstore. This grunt infrastructure designed and maintained by the project. In addition, the Yeoman also collaborates very heavily with the Bower and Grunt projects, both of which are accellerating very fast. There is considerable overlap in the core dev teams here, everyone working together amongst this disparate but congealing webapp developing tooling ecosystem.

59 points by rockyj 13y ago

A quick word of warning for anyone following this guide. You should never sudo npm install. That's giving root privileges to anyone that care's to upload code to the npm package registry. npm should work fine without sudo.

sneak 13y ago
Furthermore, it doesn't appear that any of these fad language repositories do any sort of package signing, so you're vulnerable not just to the people who upload their own code, but anyone who may compromise the mirrors, too, because even if you trust the source, there's no way of verifying the code hasn't been modified on the mirror. See also: http://cristianobetta.com/blog/2013/02/02/ruby-gems-are-not-safe-to-use/ http://cristianobetta.com/blog/2013/02/02/ruby-gems-are-not-...
- sgrove 13y ago
  I believe Clojars at least supports package signing, if not requires it. Was extremely useful in a code audit recently.
- SanderMak 13y ago
  And even the established ones which do require signing are not really trivial to use correctly: http://branchandbound.net/blog/security/2012/08/verify-dependencies-using-pgp/ http://branchandbound.net/blog/security/2012/08/verify-depen...
- contrahax 13y ago
  > fad language lol
vixen99 13y ago
No doubt I've nothing better to do but stare aghast at "care's to upload code". It's a matter of deep mystery to me that folk adept at using languages demanding absolute grammatical precision treat their native language so carelessly.
- mistermumble 13y ago
  Two assumptions you're making: 1) That English is the poster's native language 2) the poster did not use auto-correct
- Wintamute 13y ago
  Hah. I just reread my comment and stared aghast at my own error. Languages requiring absolute grammatical precision fail to compile with errors, not so Hacker News comments sadly. There, I just solved your mystery for you :)

devmach 13y ago

I understand the advantages of using these tools but isn't it too much ? Node, Npm,Yeoman, Grunt, Bower just to bootstrap some font-end code, if you don't use node.js for back-end you have to use other tools in back-end development too ( composer, phpunit, gem, rake etc... you name it... ). Sometimes i feel like we use tools just to use them. edit: Just to clarify : I'm not saying don't use any of them and don't organize/automate tasks and code like monkey...

rockyj 13y ago
You are right, it's a lot of tools for FE development. However, (IMHO) when I used this toolkit, I felt very productive, for example, if you make a change in the CSS, the UI is automatically refreshed (no need to manually refresh). The final build process optimizes PNGs among other things. All in all, it felt that someone has thought of everything that a webdev needs and put it in.
- philpill 13y ago
  Could you explain what you mean by 'no need to manually refresh'? I understand this to mean you don't need to refresh your browser to see the changes you've made in your source. EDIT: Ah, nevermind - just read up on it: "Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to."
untog 13y ago
If your front end is simple, perhaps. But if you're constructing complex webapps with tests etc. then this stuff comes in very useful.

romain_dardour 13y ago

You should take a look at aura.js (http://github.com/aurajs/aura http://github.com/aurajs/aura). Abstracts many of the steps of this article (require.js, bower...) and offers a decoupled architecture for scalable and well structured apps. There's also a yeoman generator, and they have an extensions system that seamlessly integrate handlebars.js for example.

MatthewPhillips 13y ago

This is probably irrational, but it's always annoyed me that Yeoman is little more than a package.json file and small bash script yet has a professionally designed logo.

romain_dardour 13y ago
Having a professional logo gives it a more polished first contact. For a tool that makes disparate bits easier to use it's part of the contract. Who cares how it's made when it brings convenience to the table?
mofle 13y ago
This isn't at all constructive and you're severely misinformed. This is Yeoman: https://github.com/yeoman/ https://github.com/yeoman/
- MatthewPhillips 13y ago
  Of course it isn't constructive. I'm just bitter that I've debated spending $500+ of my personal money for logos of my open source projects that do something genuinely original so that I can perhaps get above 100 stars on GitHub, while a scaffolding script (probably) got one for free and appears on the front page of Hacker News weekly. So yes, not constructive at all; this is plain old jealously.
paulirish 13y ago
The yeoman project encompasses a lot more. It's original design was very monolithic but the community and core team decided it's better broken into modules, so you primarily use much of yeoman through grunt, but much of that workflow is authored by the Yeoman dev team. There's yo (that scaffolds via generators), 10 officially supported generators that work with common webapps setups (e.g. angular backbone ember chrome-extension mocha karma), and (so far) 74 generators in the community building off this platform: https://npmjs.org/browse/depended/yeoman-generator https://npmjs.org/browse/depended/yeoman-generator Then other supplementary modules: grunt-contrib-compass, grunt-contrib-imagemin, grunt-contrib-htmlmin, grunt-contrib-livereload, grunt-regarde, grunt-svgmin, grunt-contrib-connect, grunt-bower-requirejs, grunt-usemin, node adapters for optipng and jpegtran, configstore. This grunt infrastructure designed and maintained by the project. In addition, the Yeoman also collaborates very heavily with the Bower and Grunt projects, both of which are accellerating very fast. There is considerable overlap in the core dev teams here, everyone working together amongst this disparate but congealing webapp developing tooling ecosystem.