Another demo build w/ AngularJS and Rails

1,686 views
Skip to first unread message

sectore

unread,
Jan 17, 2012, 9:17:30 AM1/17/12
to AngularJS
Here is another CafeTownsend demo build with AngularJS and Rails. All
JavaScript code is written in CoffeeScript.

Live demo on Heroku:
http://cafetownsend-angular-rails.herokuapp.com/

Source code at Github:
https://github.com/sectore/CafeTownsend-Angular-Rails

Blog post:
http://www.websector.de/blog/2012/01/17/fun-with-angularjs-rails-coffeescript-sass-another-cafe-townsend-example/

P.S.: The design (layout) of this example based on a similar demo for
using SpineJS I have created few weeks before
http://www.websector.de/blog/2011/12/31/spine-js-cafe-townsend-example

Any feedback are welcome, thanks!

-Jens
--
http://www.websector.de

andrew mcelroy

unread,
Jan 17, 2012, 10:39:18 AM1/17/12
to ang...@googlegroups.com
On Tue, Jan 17, 2012 at 8:17 AM, sectore <sec...@gmail.com> wrote:
Here is another CafeTownsend demo build with AngularJS and Rails. All
JavaScript code is written in CoffeeScript.

Is angle-up.js strictly needed to make this app work?

I was looking at the angular-sencha todo mobile example and it never calls for it nor do most other examples I have seen.
I'm trying to get a sense of what angle-up.js bought. The docs say its an angular js answer to inherited resources.

It's always nice to have additional reference projects, some basic jasmine tests would be nice :-)
I see you use basic auth for the authentication.

If something like omniauth + devise were dropped in, how would you consider handeling the callbacks from omniauth?
Also, there is no yield in your application layout file. I'm guessing this was done to have a pageless site?

Andrew McElroy
 

Live demo on Heroku:
http://cafetownsend-angular-rails.herokuapp.com/

Source code at Github:
https://github.com/sectore/CafeTownsend-Angular-Rails

Blog post:
http://www.websector.de/blog/2012/01/17/fun-with-angularjs-rails-coffeescript-sass-another-cafe-townsend-example/

P.S.: The design (layout) of this example based on a similar demo for
using SpineJS I have created few weeks before
http://www.websector.de/blog/2011/12/31/spine-js-cafe-townsend-example

Any feedback are welcome, thanks!

-Jens
--
http://www.websector.de

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.


john tigernassau

unread,
Jan 17, 2012, 11:22:16 AM1/17/12
to ang...@googlegroups.com

While maybe trendy, this example still seems the opposite of elegant or lean code - bad enough Angular adds non-standard code (tradeoff for power) but using Rails creates the code bloat of 2 MVC frameworks and Rails itself is pretty bloated and slow, much less adding backstage magic.  And Coffeescript (whether producing a cleaner  js or not) is non-standard.  So this example says hey, lets add more code bloat, add a slow framework, and add in a bunch of non standard code and create a slower running and maintenance nightmare

A better, more elegant solution would entail either 1) no server mvc, using procedures in the db instead, or 2) using a lean nodejs type of listener on the back

Less code = less bugs, less languages or language derivatives = more maintainable

andrew mcelroy

unread,
Jan 17, 2012, 11:33:33 AM1/17/12
to ang...@googlegroups.com
On Tue, Jan 17, 2012 at 10:22 AM, john tigernassau <john.tig...@gmail.com> wrote:

While maybe trendy, this example still seems the opposite of elegant or lean code - bad enough Angular adds non-standard code (tradeoff for power) but using Rails creates the code bloat of 2 MVC frameworks and Rails itself is pretty bloated and slow, much less adding backstage magic.  And Coffeescript (whether producing a cleaner  js or not) is non-standard. 

A lot of things are non standard. XHR was a microsoft invention for the web edition of outlook. Was it bad to use XHR before it became standardized? In fact, to this day XHR isn't even an official standard. It is a candidate standard. 

I can't find it right now, but the author of JS agreed with the CS guy that CS is JS.next.

So this example says hey, lets add more code bloat, add a slow framework, and add in a bunch of non standard code and create a slower running and maintenance nightmare

A better, more elegant solution would entail either 1) no server mvc, using procedures in the db instead, or 2) using a lean nodejs type of listener on the back

Less code = less bugs, less languages or language derivatives = more maintainable

So lets all go back to assembler  :-)
 
Seriously though, this is why more rails apps should be using execjs. It is possible to dry up your mvc layers between rails and js.
There was a railscast indirectly about this a while back. I think it was js template episode. 
I am more than happy to see node or other backend solutions. However, I personally find rails solutions more useful as that is the stack that I work with and give a care about.

Andrew McElroy

Daniel Nelson

unread,
Jan 17, 2012, 12:17:39 PM1/17/12
to ang...@googlegroups.com

While maybe trendy, this example still seems the opposite of elegant or lean code - bad enough Angular adds non-standard code (tradeoff for power) but using Rails creates the code bloat of 2 MVC frameworks and Rails itself is pretty bloated and slow, much less adding backstage magic.  And Coffeescript (whether producing a cleaner  js or not) is non-standard.  So this example says hey, lets add more code bloat, add a slow framework, and add in a bunch of non standard code and create a slower running and maintenance nightmare

A better, more elegant solution would entail either 1) no server mvc, using procedures in the db instead, or 2) using a lean nodejs type of listener on the back

Less code = less bugs, less languages or language derivatives = more maintainable


These are all technologies we use (Rails, CoffeeScript, AngularJS plus Backbone.js), and I would beg to differ. We approach the front and back ends as separate applications with separate domains. Each domain is well bounded, with minimal external exposure through RESTful APIs. Those APIs can also be opened up to other services / front ends.

Most of the web applications I use on a day to day basis—and that we are building—provide core value in services performed by server side business logic. These domains have no connection whatsoever to the front end, and they demand a full-featured framework. Regardless of one's language preference, this means separate frameworks, and if one is switching frameworks, there is little extra cost in switching languages.

As far as CoffeeScript goes, it is more expressive than Javascript (so it is easier to read and understand intent), it is more succinct (less code to maintain), and it enforces several best practices. A lot of the people I work with were skeptical of CoffeeScript until they actually used it. The light really went off for me when I started writing specs in CoffeeScript...it was so clean and easily readable in CoffeeScript. What I had been writing in Javascript was a mess of extra noise.

-Daniel

Misko Hevery

unread,
Jan 17, 2012, 1:24:02 PM1/17/12
to ang...@googlegroups.com
Thanks for the demo! I think it is great! I like that you have brought together a lot of different technologies to show how they can all work together. 

-- Misko

--

Vojta Jina

unread,
Jan 17, 2012, 1:29:26 PM1/17/12
to ang...@googlegroups.com
Nice !

ThomasBurleson

unread,
Jan 17, 2012, 1:58:46 PM1/17/12
to AngularJS
Jens,

Really nice work here.
This app has much better colors than the SpineJS version
Best of all is the use of Coffeescript; and I also think the `Random
Notes` section adds nice value.

This is a great community, learning resource. My hat is off to you!

Question:

1) Your Controllers configures routes and use of partials.
Would that not be best done in a Service?


On Jan 17, 8:17 am, sectore <sect...@gmail.com> wrote:
> Here is another CafeTownsend demo build with AngularJS and Rails. All
> JavaScript code is written in CoffeeScript.
>
> Live demo on Heroku:http://cafetownsend-angular-rails.herokuapp.com/
>
> Source code at Github:https://github.com/sectore/CafeTownsend-Angular-Rails
>
> Blog post:http://www.websector.de/blog/2012/01/17/fun-with-angularjs-rails-coff...
>
> P.S.: The design (layout) of this example based on a similar demo for
> using SpineJS I have created few weeks beforehttp://www.websector.de/blog/2011/12/31/spine-js-cafe-townsend-example

sectore

unread,
Jan 17, 2012, 2:53:47 PM1/17/12
to AngularJS
On Jan 17, 4:39 pm, andrew mcelroy <sophri...@gmail.com> wrote:
> Is angle-up.js strictly needed to make this app work?
Nope! All controllers just extend the Route class of angle-up to
simplify all the definitions for the header stuff. angle-up provides
some other helpers which the app not used so far. To avoid confusion
about it I will clean up the source without the need of angle-up.

> I see you use basic auth for the authentication.
> If something like omniauth + devise were dropped in, how would you consider
> handeling the callbacks from omniauth?
Here is an example (not AngularJS, but batman.js and Rails) for log
into an github account using omniauth:
https://github.com/Shopify/batman-classifieds/blob/master/app/controllers/sessions_controller.rb
It might be helpfull...

> Also, there is no yield in your application layout file. I'm guessing this
> was done to have a pageless site?
Yep, there is no need for a yield, because all templates are rendered
by client (AngularJS) only.

-Jens
--
http://www.websector.de

sectore

unread,
Jan 17, 2012, 3:01:56 PM1/17/12
to AngularJS
On Jan 17, 7:58 pm, ThomasBurleson <thomasburle...@gmail.com> wrote:
> Question:
> 1) Your Controllers configures routes and use of partials.
>    Would that not be best done in a Service?
As I Angular understood $route is already a kind of a service and it
should be handled within a controller. Anybody?

-Jens
--
http://www.websector.de

ThomasBurleson

unread,
Jan 17, 2012, 3:24:41 PM1/17/12
to AngularJS
Services are singletons. As such they are great for
DataServices
Shared, in-memory data stores, etc.

Custom services can be injected into Controllers and other services

Controllers are not singletons.
Controllers are instantiated (As I understand it) per rendering of
view (e.g. use of partial).
Controllers are `Presentation Models`.

So to me the goto<XXX>View logic should ideally be in custom service.

But my understanding could be wrong. Any thoughts Angular Team ?

- ThomasB

Misko Hevery

unread,
Jan 17, 2012, 4:56:33 PM1/17/12
to ang...@googlegroups.com
On Tue, Jan 17, 2012 at 12:24 PM, ThomasBurleson <thomasb...@gmail.com> wrote:
Services are singletons. As such they are great for
 DataServices
 Shared, in-memory data stores, etc.

Custom services can be injected into Controllers and other services

Controllers are not singletons.
Controllers are instantiated (As I understand it) per rendering of
view (e.g. use of partial).
Controllers are `Presentation Models`.


This is correct

 
So to me the goto<XXX>View logic should ideally be in custom service.


not sure what the goto<XXX> reefers to. Is it not just a link you click on, and you let the $route do the rest?

-- Misko

 
But my understanding could be wrong. Any thoughts Angular Team ?

- ThomasB

On Jan 17, 2:01 pm, sectore <sect...@gmail.com> wrote:
> On Jan 17, 7:58 pm, ThomasBurleson <thomasburle...@gmail.com> wrote:> Question:
> > 1) Your Controllers configures routes and use of partials.
> >    Would that not be best done in a Service?
>
> As I Angular understood $route is already a kind of a service and it
> should be handled within a controller. Anybody?
>
> -Jens
> --http://www.websector.de

ThomasBurleson

unread,
Jan 17, 2012, 7:10:32 PM1/17/12
to AngularJS
Misko,

Sorry for the confusion. Sectore had Controller code that was calling
$location.path.

See line 130 @ https://github.com/sectore/CafeTownsend-Angular-Rails/blob/master/app/assets/javascripts/controllers.coffee.erb

So I was using a generic term `goto<XXX> to reference his navigation
commands:

browseToOverview()
browseToNew()
browseToEdit()
etc.



On Jan 17, 3:56 pm, Misko Hevery <mi...@hevery.com> wrote:
> On Tue, Jan 17, 2012 at 12:24 PM, ThomasBurleson
> <thomasburle...@gmail.com>wrote:
Reply all
Reply to author
Forward
0 new messages