5 ms·

How to build a large Angular.js application

125 points by harrisonp 13y ago

dons 13y ago
> The core app is 9K lines of code. I don't think 9K is "large" for an application. At all.
- scotth 13y ago
  Agreed. It's probably closer to small. The insights are still worth considering, however.
- andreypopp 13y ago
  I think 9K lines of code using framework which is meant to be "high-level" is a pretty big code base.
- petenixey 13y ago
  I'm not sure what you're comparing this to but 9,000 lines of well-written code in a powerful MVC framework is a very significant size. Because there is so little boiler-plate code that is being written, the utility-density of such a codebase can be extraordinarily high. 9,000 lines of PHP could amount to very little utility but when well-architected, there is a crazy amount that can be done with even 2,000 lines of a framework such as Angular or Rails. [EDIT] The point I'm making is that a good developer working in harmony with a framework can do in 4 very readable lines what a less experienced developer might easily expand to 60 lines. As such dismissing a 15k codebase as "small" is somewhat naive. A 15k Angular app can do a vast amount. My experience with Rails (and my limited experience with Angular suggests it's similar) is that working harmoniously with the framework gives you massive amounts of utility with very, very few lines of code. I've personally refactored 100 line controllers from junior developers down to 12 lines. It might feel macho to compare codebase sizes but there's no strong coupling to utility (arguably perhaps the reverse). You can certainly write 60k apps in Rails, Angular or Django but dismissing a 15k app as "small" doesn't do justice to the utility that even such a "small" codebase can deliver. ...sorry this comment was so long I didn't have time to write a short one ;)
  - deizel 13y ago
    Example: I'm working on a "large" CakePHP application (similar to Rails) with 24,000 lines of our own code, 57,000 lines of code from community plugins, and 240,000 lines of core framework code.
    - jiggy2011 13y ago
      I am the sole maintainer of a framework free PHP codebase with ~100K lines. Who's jealous? It could probably be rewritten down to about 10-20K lines (maybe less) if I had a spare month or two.
      - deizel 13y ago
        If you are saying the size of your application could be reduced by rewriting it to using a framework (an existing one or one of your own creation), I think this is the point we are all trying to make here. Assuming one uses all the features of a framework, the total complexity of my 24K line framework application (counting only code I've written) could be compared to that of a 321K line non-framework application (counting all the code in my project). Thankfully I only have to write/maintain 8% of the codebase, as the remaining 92% is kept up-to-date by typing `composer update` on a weekly basis.
        jiggy2011 13y ago
        In this case, simply refactoring to remove duplication would probably work. For example there are at least 3 different ways to send email. There is a lot of code in there that is really "framework" but it's completely baked into everything else so not really separable. There's probably at least 2 different and distinct attempts at creating a framework, and you can tell the age of the code by which it uses. The main reason it hasn't been significantly refactored is that it is astonishingly reliable considering how bad the code is.
    - dscrd 13y ago
      It would be 2-10 times less lines of code on Django (and also on Rails). Lines of code comparisons do not scale between programming languages.
- zenocon 13y ago
  The small team I am on just re-wrote a number of different apps written by 3rd parties that were 20/30k and got them down to ~3k -- mainly by throwing out all their library junk and just doing things right in AngularJS.
- sgt 13y ago
  Our largest Angular app currently has a 2500 line controllers.js file. There are about 20 controllers in this file. I've thought about splitting it up into multiple files, and I think I'm going to do that. However, right now it works quite well since I'm using "editor folds" to separate each controller.
- rdtsc 13y ago
  It is for JS. At least if you consider all the other "built with Angular-js" examples so far (except for Double-Click maybe). For a C++ or Java code that 9K would probably make it into the "small" category.
- zachsnow 13y ago
  Currently our AngularJS application is 20k lines (between controllers, directives, services, and templates) and it certainly feels like a large application -- not when working on it, but when using it. AngularJS makes it very easy to build quite "large" (in the complexity/richness sense) applications with much less code than most other approaches, in my experiences. Of course, if we are treating size as absolute, and basing it on lines of code, then 9k is pretty small. I mean linux has like 15m lines! It will take a while to catch up.
- nickpresta 13y ago
  9K LOC (not including comments) may not be "large" but it is quite sizeable and in a framework like Angular, probably does quite a bit. For comparison, I work on a Backbone.js app that has the following distribution. -------------------------------------------------------------------------------- Language files blank comment code -------------------------------------------------------------------------------- Javascript 282 4348 7356 27860 CoffeeScript 336 4953 1687 17939 Obviously Backbone.js has much less "batteries" included. The tips in the article were good and well thought out. I appreciate the effort the author made.
  - dchuk 13y ago
    What did you use to generate this LoC analysis?
    - ktsmith 13y ago
      Looks like the output of cloc
michielvoo 13y ago
Can anyone comment from experience on the testability of Angular.js, that is mentioned in the article? Was it a reason to chose Angular.js over some other framework (if so, which framework)?
- harrisonp 13y ago
  We specifically looked at CanJS, Backbone and EmberJS. None of which have testability as a core feature. CanJS and Backbone barely mention how to do it, EmberJS has one tiny page on integration testing. Which practically means there isn't a established right way to do testing. And you as a developer need to figure it all out. Ember are improving this however, with the ember-testing package: https://github.com/emberjs/ember.js/tree/master/packages/ember-testing https://github.com/emberjs/ember.js/tree/master/packages/emb... Backbone has countless tutorials on how to test, but it's not built into the framework.
  - hybridcivic182 13y ago
    I personally think ember has the best testability story for both unit and integration testing. The screencast below shows how to get started with ember / QUnit and karma http://toranbillups.com/blog/archive/2013/07/21/Integration-testing-your-emberjs-app-with-QUnit-and-Karma/ http://toranbillups.com/blog/archive/2013/07/21/Integration-...
  - nahname 13y ago
    Angular's dependency on the DOM for rendering will always make testing it very difficult. This will continue their move towards feature based testing. Feature tests have their use, but they do not scale and provide the least useful insight into why something is failing. They are also notoriously slow, so once you have a large test suite, it can easily take 20 minutes or more for feedback. I have worked with feature based test suites that take 2 hours to run. It wasn't fun.
- zenocon 13y ago
  Angular enables testability by design. This is one of the better written tutorials on how to approach it: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-...
ChrisAntaki 13y ago
What are some large AngularJS projects that have been launched? I could only find Google DoubleClick and YouTube's PS3 interface. http://builtwith.angularjs.org/ http://builtwith.angularjs.org/ Not to downplay the Ermahgerd Translator! http://ermahgerd.jmillerdesign.com/#!/translate http://ermahgerd.jmillerdesign.com/#!/translate
- jhartikainen 13y ago
  http://www.ribbon.co http://www.ribbon.co uses Angular both for checkouts and creating/editing products. Disclaimer: I worked with them implementing that.
- olegp 13y ago
  We launched https://starthq.com https://starthq.com, not sure if it qualifies as large though as its currently at 2KLOC of JS for the front end code.
- yeleti 13y ago
  https://www.tesla.im https://www.tesla.im
- yeleti 13y ago
  the site http://builtwith.angularjs.org http://builtwith.angularjs.org is no longer updating i guess. their github page indicates a lot of pending pull requests. https://github.com/angular/builtwith.angularjs.org/pulls https://github.com/angular/builtwith.angularjs.org/pulls
- taude 13y ago
  I have a feeling AngularJS is the type of framework the will be used often for inside-the-firewall type of corporate apps than public facing consumer web stuff. But this is just my hunch right now and is influenced by my past building these style apps with Adobe Flex.
  - tomsaffell 13y ago
    Have you built anything with AngularJS? I've built apps in both Flex and AngularJS, and to me AngularJS is a very different beast, and a much better beast. Unlike Flex, AngularJS: does not provide a UI component library, has a first-class runtime environment (that is growing, not shrinking), integrates into existing websites (rather than sitting inside them as black boxes), brings an MV* way of thinking with it (Flex had MV* options, but only 3rd party add-ons), and finally (this is purely a personal one), is a joy to code with (I love AS3, but I found Flex to be clunky) I'd be willing to bet that AngularJS will be hugely successful, and will gain a significant share of the Single-Page-App market.
tlarkworthy 13y ago
not as good as ng-boilerplate http://joshdmiller.github.io/ng-boilerplate/#/home http://joshdmiller.github.io/ng-boilerplate/#/home with its modular cut and paste directory structure.
- benaiah 13y ago
  Thanks a lot for mentioning this - I was about to have to dive into setting up a build for an Angular app I'm working on (which I need to learn eventually, just not right now) so that project really helps.
  - tlarkworthy 13y ago
    actually I think that structure is a bit overwhelming for learning angular, but when you scale up your talents I think that's the best I have seen.
- stevedomin 13y ago
  We've basically settled on the same way of organizing Angular project. Our plan is to have specs and scss file in the module folder too. Unfortunately we couldn't do it before because we're using rails assets pipeline, but it should happen soon now.
- kawera 13y ago
  Another project but with node/mongo included: https://github.com/angular-app/angular-app https://github.com/angular-app/angular-app
jhartikainen 13y ago
Would be interesting to hear if you discovered any downsides to Angular. I've been working with it a lot lately, but it seems to be a really good solution and the only issues with it is it can be hard to set up to be compatible with googlebot and the slightly tough learning curve
- stevedomin 13y ago
  We didn't look at all at SEO since it's our customer dashboard, we don't really care about it. Here's the few downsides of Angular IMO : - I'm particularly unhappy with the router, it does a good job but as soon as you start to have nested routes and complex layout, it you want to avoid copy-pasting the same bits of code everywhere it becomes a nightmare. We mitigated most of these issues by using a lot of directives but it doesn't solve the problem entirely. We looked at ui-router at some point but weren't totally satisfied by the way it worked. Maybe we should take another look. - errors are sometimes very obscure, it can be hard to debug, even if at some point you start to recognize some errors and know where to look first - docs could be better There are some other glitches here and there but most of the time Angular is a real pleasure to use, it's by far the best front-end framework I've worked with.
- pseudobry 13y ago
  Problems Angular doesn't solve for you: http://jmdobry.github.io/talks/2013/building-large-apps-with-angularjs/#/7 http://jmdobry.github.io/talks/2013/building-large-apps-with...
- chaddeshon 13y ago
  I made http://www.BromBone.com http://www.BromBone.com to help with the googlebot problem. I agree. The learning curve can be steep, but I've really enjoyed using Angular.
- tlarkworthy 13y ago
  SEO is the most annoying. You end up writing server side templates to mimic the client side templates just for the spiders benefits. Not a unique angular problem.
wuliwong 13y ago
"Replacing Rails" seems silly. You can enable the asset pipeline in development if you really want. But most people would rather deal with slower page loads in development rather than debugging minified/uglified javascript in the console.
- mbell 13y ago
  It's not an either / or option. Yeoman handles serving unminified files during dev just fine and compiles / concatenates them for production. You can do everything the rails asset pipeline does and more with grunt. Yeoman comes with a default configuration to do just that. http://yeoman.io/ http://yeoman.io/ For dev / early testing I've just been using yeoman + grunt-connect-proxy with grunt spitting the final build files into the rails public directory to make it easy to push up to heroku. In final production you'd probably want to send your static assets to a cdn but that is easy enough.
bhouston 13y ago
Great article but 9K lines of code isn't that large, it is probably medium size. For example, http://Clara.io http://Clara.io, our 3D design as a service offering, is already 52K LOC in just our core and that excludes the 30K LOC of external libraries.

125 points by harrisonp 13y ago

dons 13y ago

> The core app is 9K lines of code. I don't think 9K is "large" for an application. At all.

scotth 13y ago
Agreed. It's probably closer to small. The insights are still worth considering, however.
andreypopp 13y ago
I think 9K lines of code using framework which is meant to be "high-level" is a pretty big code base.
petenixey 13y ago
I'm not sure what you're comparing this to but 9,000 lines of well-written code in a powerful MVC framework is a very significant size. Because there is so little boiler-plate code that is being written, the utility-density of such a codebase can be extraordinarily high. 9,000 lines of PHP could amount to very little utility but when well-architected, there is a crazy amount that can be done with even 2,000 lines of a framework such as Angular or Rails. [EDIT] The point I'm making is that a good developer working in harmony with a framework can do in 4 very readable lines what a less experienced developer might easily expand to 60 lines. As such dismissing a 15k codebase as "small" is somewhat naive. A 15k Angular app can do a vast amount. My experience with Rails (and my limited experience with Angular suggests it's similar) is that working harmoniously with the framework gives you massive amounts of utility with very, very few lines of code. I've personally refactored 100 line controllers from junior developers down to 12 lines. It might feel macho to compare codebase sizes but there's no strong coupling to utility (arguably perhaps the reverse). You can certainly write 60k apps in Rails, Angular or Django but dismissing a 15k app as "small" doesn't do justice to the utility that even such a "small" codebase can deliver. ...sorry this comment was so long I didn't have time to write a short one ;)
- deizel 13y ago
  Example: I'm working on a "large" CakePHP application (similar to Rails) with 24,000 lines of our own code, 57,000 lines of code from community plugins, and 240,000 lines of core framework code.
  - jiggy2011 13y ago
    I am the sole maintainer of a framework free PHP codebase with ~100K lines. Who's jealous? It could probably be rewritten down to about 10-20K lines (maybe less) if I had a spare month or two.
    - deizel 13y ago
      If you are saying the size of your application could be reduced by rewriting it to using a framework (an existing one or one of your own creation), I think this is the point we are all trying to make here. Assuming one uses all the features of a framework, the total complexity of my 24K line framework application (counting only code I've written) could be compared to that of a 321K line non-framework application (counting all the code in my project). Thankfully I only have to write/maintain 8% of the codebase, as the remaining 92% is kept up-to-date by typing `composer update` on a weekly basis.
      - jiggy2011 13y ago
        In this case, simply refactoring to remove duplication would probably work. For example there are at least 3 different ways to send email. There is a lot of code in there that is really "framework" but it's completely baked into everything else so not really separable. There's probably at least 2 different and distinct attempts at creating a framework, and you can tell the age of the code by which it uses. The main reason it hasn't been significantly refactored is that it is astonishingly reliable considering how bad the code is.
  - dscrd 13y ago
    It would be 2-10 times less lines of code on Django (and also on Rails). Lines of code comparisons do not scale between programming languages.
zenocon 13y ago
The small team I am on just re-wrote a number of different apps written by 3rd parties that were 20/30k and got them down to ~3k -- mainly by throwing out all their library junk and just doing things right in AngularJS.
sgt 13y ago
Our largest Angular app currently has a 2500 line controllers.js file. There are about 20 controllers in this file. I've thought about splitting it up into multiple files, and I think I'm going to do that. However, right now it works quite well since I'm using "editor folds" to separate each controller.
rdtsc 13y ago
It is for JS. At least if you consider all the other "built with Angular-js" examples so far (except for Double-Click maybe). For a C++ or Java code that 9K would probably make it into the "small" category.
zachsnow 13y ago
Currently our AngularJS application is 20k lines (between controllers, directives, services, and templates) and it certainly feels like a large application -- not when working on it, but when using it. AngularJS makes it very easy to build quite "large" (in the complexity/richness sense) applications with much less code than most other approaches, in my experiences. Of course, if we are treating size as absolute, and basing it on lines of code, then 9k is pretty small. I mean linux has like 15m lines! It will take a while to catch up.
nickpresta 13y ago
9K LOC (not including comments) may not be "large" but it is quite sizeable and in a framework like Angular, probably does quite a bit. For comparison, I work on a Backbone.js app that has the following distribution. -------------------------------------------------------------------------------- Language files blank comment code -------------------------------------------------------------------------------- Javascript 282 4348 7356 27860 CoffeeScript 336 4953 1687 17939 Obviously Backbone.js has much less "batteries" included. The tips in the article were good and well thought out. I appreciate the effort the author made.
- dchuk 13y ago
  What did you use to generate this LoC analysis?
  - ktsmith 13y ago
    Looks like the output of cloc

michielvoo 13y ago

Can anyone comment from experience on the testability of Angular.js, that is mentioned in the article? Was it a reason to chose Angular.js over some other framework (if so, which framework)?

harrisonp 13y ago
We specifically looked at CanJS, Backbone and EmberJS. None of which have testability as a core feature. CanJS and Backbone barely mention how to do it, EmberJS has one tiny page on integration testing. Which practically means there isn't a established right way to do testing. And you as a developer need to figure it all out. Ember are improving this however, with the ember-testing package: https://github.com/emberjs/ember.js/tree/master/packages/ember-testing https://github.com/emberjs/ember.js/tree/master/packages/emb... Backbone has countless tutorials on how to test, but it's not built into the framework.
- hybridcivic182 13y ago
  I personally think ember has the best testability story for both unit and integration testing. The screencast below shows how to get started with ember / QUnit and karma http://toranbillups.com/blog/archive/2013/07/21/Integration-testing-your-emberjs-app-with-QUnit-and-Karma/ http://toranbillups.com/blog/archive/2013/07/21/Integration-...
- nahname 13y ago
  Angular's dependency on the DOM for rendering will always make testing it very difficult. This will continue their move towards feature based testing. Feature tests have their use, but they do not scale and provide the least useful insight into why something is failing. They are also notoriously slow, so once you have a large test suite, it can easily take 20 minutes or more for feedback. I have worked with feature based test suites that take 2 hours to run. It wasn't fun.
zenocon 13y ago
Angular enables testability by design. This is one of the better written tutorials on how to approach it: http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-...

ChrisAntaki 13y ago

What are some large AngularJS projects that have been launched? I could only find Google DoubleClick and YouTube's PS3 interface. http://builtwith.angularjs.org/ http://builtwith.angularjs.org/ Not to downplay the Ermahgerd Translator! http://ermahgerd.jmillerdesign.com/#!/translate http://ermahgerd.jmillerdesign.com/#!/translate

jhartikainen 13y ago
http://www.ribbon.co http://www.ribbon.co uses Angular both for checkouts and creating/editing products. Disclaimer: I worked with them implementing that.
olegp 13y ago
We launched https://starthq.com https://starthq.com, not sure if it qualifies as large though as its currently at 2KLOC of JS for the front end code.
yeleti 13y ago
https://www.tesla.im https://www.tesla.im
yeleti 13y ago
the site http://builtwith.angularjs.org http://builtwith.angularjs.org is no longer updating i guess. their github page indicates a lot of pending pull requests. https://github.com/angular/builtwith.angularjs.org/pulls https://github.com/angular/builtwith.angularjs.org/pulls
taude 13y ago
I have a feeling AngularJS is the type of framework the will be used often for inside-the-firewall type of corporate apps than public facing consumer web stuff. But this is just my hunch right now and is influenced by my past building these style apps with Adobe Flex.
- tomsaffell 13y ago
  Have you built anything with AngularJS? I've built apps in both Flex and AngularJS, and to me AngularJS is a very different beast, and a much better beast. Unlike Flex, AngularJS: does not provide a UI component library, has a first-class runtime environment (that is growing, not shrinking), integrates into existing websites (rather than sitting inside them as black boxes), brings an MV* way of thinking with it (Flex had MV* options, but only 3rd party add-ons), and finally (this is purely a personal one), is a joy to code with (I love AS3, but I found Flex to be clunky) I'd be willing to bet that AngularJS will be hugely successful, and will gain a significant share of the Single-Page-App market.

tlarkworthy 13y ago

not as good as ng-boilerplate http://joshdmiller.github.io/ng-boilerplate/#/home http://joshdmiller.github.io/ng-boilerplate/#/home with its modular cut and paste directory structure.

benaiah 13y ago
Thanks a lot for mentioning this - I was about to have to dive into setting up a build for an Angular app I'm working on (which I need to learn eventually, just not right now) so that project really helps.
- tlarkworthy 13y ago
  actually I think that structure is a bit overwhelming for learning angular, but when you scale up your talents I think that's the best I have seen.
stevedomin 13y ago
We've basically settled on the same way of organizing Angular project. Our plan is to have specs and scss file in the module folder too. Unfortunately we couldn't do it before because we're using rails assets pipeline, but it should happen soon now.
kawera 13y ago
Another project but with node/mongo included: https://github.com/angular-app/angular-app https://github.com/angular-app/angular-app

jhartikainen 13y ago

Would be interesting to hear if you discovered any downsides to Angular. I've been working with it a lot lately, but it seems to be a really good solution and the only issues with it is it can be hard to set up to be compatible with googlebot and the slightly tough learning curve

stevedomin 13y ago
We didn't look at all at SEO since it's our customer dashboard, we don't really care about it. Here's the few downsides of Angular IMO : - I'm particularly unhappy with the router, it does a good job but as soon as you start to have nested routes and complex layout, it you want to avoid copy-pasting the same bits of code everywhere it becomes a nightmare. We mitigated most of these issues by using a lot of directives but it doesn't solve the problem entirely. We looked at ui-router at some point but weren't totally satisfied by the way it worked. Maybe we should take another look. - errors are sometimes very obscure, it can be hard to debug, even if at some point you start to recognize some errors and know where to look first - docs could be better There are some other glitches here and there but most of the time Angular is a real pleasure to use, it's by far the best front-end framework I've worked with.
pseudobry 13y ago
Problems Angular doesn't solve for you: http://jmdobry.github.io/talks/2013/building-large-apps-with-angularjs/#/7 http://jmdobry.github.io/talks/2013/building-large-apps-with...
chaddeshon 13y ago
I made http://www.BromBone.com http://www.BromBone.com to help with the googlebot problem. I agree. The learning curve can be steep, but I've really enjoyed using Angular.
tlarkworthy 13y ago
SEO is the most annoying. You end up writing server side templates to mimic the client side templates just for the spiders benefits. Not a unique angular problem.

wuliwong 13y ago

"Replacing Rails" seems silly. You can enable the asset pipeline in development if you really want. But most people would rather deal with slower page loads in development rather than debugging minified/uglified javascript in the console.

mbell 13y ago
It's not an either / or option. Yeoman handles serving unminified files during dev just fine and compiles / concatenates them for production. You can do everything the rails asset pipeline does and more with grunt. Yeoman comes with a default configuration to do just that. http://yeoman.io/ http://yeoman.io/ For dev / early testing I've just been using yeoman + grunt-connect-proxy with grunt spitting the final build files into the rails public directory to make it easy to push up to heroku. In final production you'd probably want to send your static assets to a cdn but that is easy enough.

bhouston 13y ago

Great article but 9K lines of code isn't that large, it is probably medium size. For example, http://Clara.io http://Clara.io, our 3D design as a service offering, is already 52K LOC in just our core and that excludes the 30K LOC of external libraries.