Rewrite of PeepCode's Backbone app to AngularJS

[Igor Minar]

Hi Guys,

I rewrote PeepCode's Backbone Tunes app with AngularJS and was a bit surprised by how well Angular compares to Backbone.

If you haven't seen PeepCode's screencasts, I recommend that you check them out: http://peepcode.com/products/backbone-js and http://peepcode.com/products/backbone-ii

I put together some notes with my findings and comparison of Angular with Backbone, so be sure to read the README file.

Everything can be found here: https://github.com/angular/peepcode-tunes

Let us know how you like it or how *either* version could be improved.

cheers,

Igor

[Vojta Jina]

Great job Igor !

[Marcello Nuccio]

Very nice.
I've never used Backbone, so I don't know how it can be improved.

Thanks for sharing,
Marcello

2011/10/28 Igor Minar <ig...@angularjs.org>:

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

[Daniel Nelson]

> I rewrote PeepCode's Backbone Tunes app with AngularJS and was a bit
> surprised by how well Angular compares to Backbone.

Awesome! Just tweeted a link to the Github project.

-Daniel

[Nolan Dubeau]

Hi guys,

What would be required to get this to run under apache web server? I don't have Node JS running.

Thanks.

Nolan

[andrew mcelroy]

On Fri, Oct 28, 2011 at 11:25 AM, Nolan Dubeau <nolan...@gmail.com> wrote:
> Hi guys,
>
> What would be required to get this to run under apache web server?  I don't have Node JS running.

It looks like a sinatra app.
rackup
if you have sinatra install that's all you need to type.

Andrew McElroy

[Nolan Dubeau]

Hi Andrew,

thanks for your email.

I would prefer to not have to install anything (if that's at all possible). In looking at the code in the public folder it appears that I should be just be able to load the app via - http://127.0.0.1/angular-peepcode/public/index.html

This loads, but without data or controls. Am I missing something?

Cheers,

Nolan

[Igor Minar]

The original app had some rewriting rules in place that rewrite requests like /albums -> public/albums.json and so on. This is really not necessary. I'll change the app so that you can run it with any web server without special configuration.

/i

[Nolan Dubeau]

Awesome.  Thanks Igor!

Nolan Dubeau

Sent from my Commodore-64

Load *.*,8,1

[Igor Minar]

done: https://github.com/angular/peepcode-tunes/commit/31be5775533a278868bd15659bab57d3d2face7b

fetch the bits from the repo and you should be ready to go.

Please note that while file:// protocol is now supported (no webserver needed) on chrome you will need to jump over some security hoops to get it to work: http://www.google.com/support/forum/p/Chrome/thread?tid=171316324d16747b&hl=en

FF or Safari don't require anything special to be done for file:// to work.

cheers,

Igor

[Nolan Dubeau]

Got it working.  Thanks Igor!  Nice work!

Nolan

[Nate Kidwell]

I made conversion of peepcode example to coffeescript: https://gist.github.com/1398601

Curious if this jibes with best practices, etc. This is my
interpretation of how it should come together.

On Oct 28, 1:39 am, Igor Minar <i...@angularjs.org> wrote:
> Hi Guys,
>
> I rewrote PeepCode's Backbone Tunes app with AngularJS and was a bit
> surprised by how well Angular compares to Backbone.
>
> If you haven't seen PeepCode's screencasts, I recommend that you check them

> out:http://peepcode.com/products/backbone-jsandhttp://peepcode.com/products/backbone-ii

[Miško Hevery]

Very nice!

-- Miško

[Igor Minar]

Hi Nate,

I looked at the code and found two big interrelated issues:

1/ you changed the Player from an angular service in the js version to a global constructor fn in your coffee version:

class @Player

2/ you instantiate the Player object in your controller:

@player = @$parent.$new Player




These two changes result in two issues:



1/ each time the controller is instantiated a new player object is created. (this is not a big deal for the current version of the app, but if $route was used to create multiple views you'd lose the playlist state, etc when you navigate between routes.


2/ you are not leveraging DI to make it easy to swap in a fake player object in tests. Again, this is not a big issue for this app because it's so simple, but since you want to know what the best practice is, then avoiding issues like this one is one of them.


otherwise the code looks ok.


it looks like coffee script didn't buy you that much here though since even the original code was quite compact.


cheers,

Igor

[Nate Kidwell]

Igor-

Thanks so much for your feedback. A revised version taking your
suggestions is over at: https://gist.github.com/1401821 (leaving up
original gist for my public shaming :)). Once again let me know if I
am straying from angularjs philosophy.

Changes I made are:

1) removed instantiation from TunesCtrl constructor and using
injection

2) re-added player service: angular.service 'player', -> @$new Player

3) Made Player class private to module (shouldn't have been exposed in
first place)

----------------------------------

I agree that CS doesn't add too much to the already terse angular
style but I want to learn semantic for it because

1) Still saves ~20% of LOC (viewed in terms of a workweek that means
fridays off :))

2) Is somewhat "politically unnegotiable" for the Rails ecosystem

3) Peepcode's Backbone Part 3 is in Coffeescript (this is the most
importatant reason IMHO - it was a retweet to your peepcode example
that brought me to angular in the first place, after having bought/
viewed the Peepcode screencasts).

4) Troll opinion - I think the classes make it purtier for those who
haven't read Crockford (though obviously devs should know what's going
on in JS before using CS).

> >http://peepcode.com/products/backbone-jsandhttp://peepcode.com/produc...

[Igor Minar]

On Mon, Nov 28, 2011 at 12:31 PM, Nate Kidwell <natek...@gmail.com> wrote:

Igor-

Thanks so much for your feedback.  A revised version taking your
suggestions is over at: https://gist.github.com/1401821 (leaving up
original gist for my public shaming :)).  Once again let me know if I
am straying from angularjs philosophy.

That's much better. As long as you are avare of the differences between

angular.service('player', function(audio) {

  ...

  return  playerInstance;

}

and 

angular.service 'player', ->

@$new Player

then your code looks good. (tip: the latter creates a new angular scope for the player, while the former does not. for this particular application there is no difference between the two).

 

Changes I made are:

1) removed instantiation from TunesCtrl constructor and using
injection

good

 

2) re-added player service: angular.service 'player', -> @$new Player

see my comment above

 

3) Made Player class private to module (shouldn't have been exposed in
first place)

yup

 

----------------------------------

I agree that CS doesn't add too much to the already terse angular
style but I want to learn semantic for it because

1) Still saves ~20% of LOC (viewed in terms of a workweek that means
fridays off :))

:-)

 

 

2) Is somewhat "politically unnegotiable" for the Rails ecosystem

yeah. Don't get me wrong. I'm not opposed to coffee script. :-)

 

3) Peepcode's Backbone Part 3 is in Coffeescript (this is the most
importatant reason IMHO - it was a retweet to your peepcode example
that brought me to angular in the first place, after having bought/
viewed the Peepcode screencasts).

Oh.. interesting. I guess I'll have to update my fork when I have some free time.

 

4) Troll opinion - I think the classes make it purtier for those who
haven't read Crockford (though obviously devs should know what's going
on in JS before using CS).

:-D

I need to look at the latest version of the screencast and redo my app. I'll likely stick to js instead of coffeescript. Would you be interested to redo this updated version back to cs when available?

/i

[Nate Kidwell]

I'd be happy to take a stab at a CS translation. It's a new project
though - they made a todo app of all things - and I'd be curious to
see how you reinterpret it.

On Nov 28, 5:34 pm, Igor Minar <i...@angularjs.org> wrote:

> On Mon, Nov 28, 2011 at 12:31 PM, Nate Kidwell <natekidw...@gmail.com>wrote:
>
> > Igor-
>
> > Thanks so much for your feedback.  A revised version taking your

> > suggestions is over at:https://gist.github.com/1401821(leaving up