

How to build a large Angular.js application - harrisonp
https://gocardless.com/blog/building-a-large-angular-application/

======
ChrisAntaki
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)

~~~
taude
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
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.

~~~
taude
Yeup, i've worked with both and a lot, and with Flex back in the day (I co-
authored a big publisher book on the topic).

I'm not saying Angular/Flex is the same beast. I'm saying that one of market
segments that is going to find it most useful is the same people who were
looking at Flex to solve problems back in 2006/07\. Naturally, technology has
progressed quite a bit since Flex came out. For a JS library, Angular hits a
pretty good sweet spot for those same large dev teams looking to build native
browser-based apps.

~~~
tomsaffell
Yes, I'd agree that both solve the "large dev teams looking to build native
browser-based apps". But I think the difference is that Flex was _reasonably_
good at it, but was _very_ effectively sold into the enterprise by Adobe.
Hence it did well in the enterprise, but not great outside.

By contrast, AngularJs is not being sold into the enterprise by anyone (yet?),
and is, IMO, better at solving those problems.

Hence my prediction: unlike Flex, AngularJS will gain market share in single-
page-apps outside the firewall, as well as inside the firewall.

------
dons
> The core app is 9K lines of code.

I don't think 9K is "large" for an application. At all.

~~~
petenixey
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
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.

~~~
dscrd
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.

~~~
deizel
I'm not sure I agree. All the frameworks just mentioned do more or less the
same thing and have comparable lines of code counts.

\- Django - 215,000 LOC (.py)

\- Ruby - 232,000 LOC (.rb)

\- CakePHP - 240,000 LOC (.php)

~~~
steveklabnik
Rails is about 110,000 LOC, last I checked right before the 4.0.0 release,
where'd you get that number?

~~~
deizel
$ git clone
[https://github.com/rails/rails.git](https://github.com/rails/rails.git) && cd
rails

$ find . -name '*.rb' | xargs wc -l | tail -1

232424 total

Maybe I should have said LOCC (lines of commented code)?

~~~
evilduck
That does include all of their unit tests code though. I wouldn't personally
define unit tests as "core" framework code since I can deploy a Rails app
without them (they never show up in a stack trace). It's going to come down to
your own semantics since Rails wouldn't exist as it is today without them
either.

------
bhouston
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.

------
jhartikainen
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
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.

------
tlarkworthy
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
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
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.

------
michielvoo
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
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/emb...](https://github.com/emberjs/ember.js/tree/master/packages/ember-
testing) Backbone has countless tutorials on how to test, but it's not built
into the framework.

~~~
hybridcivic182
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-...](http://toranbillups.com/blog/archive/2013/07/21/Integration-
testing-your-emberjs-app-with-QUnit-and-Karma/)

------
wuliwong
"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
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.

