Facebook’s New React JavaScript Library Tutorial Rewritten in AngularJS

https://medium.com/make-your-own-apps/e71bcedc36b

by vlad • 13 years ago

173 54 13 years ago

jval• 13 years ago

Neat, although I'm more interested in when you plan on having this book out... Angular is incredibly powerful but it really could use with some more resources for those who are picking it up.

taude2• 13 years ago

O'Reily has a book out on AngularJS that's a succinct read: http://shop.oreilly.com/product/0636920028055.do

taternuts• 13 years ago

I'm in the middle of reading this book and I'm really enjoying it, I recommend it

drhayes9• 13 years ago

I can't quite recommend that book. A lot of the code examples contain errors and, worse, some of them are subtle errors in nomenclature (the text refers to the "myService" service but the code declares it as "service" in one place and then "myService" in another) and not jsut typos.

And yes, that was intentional.

jeffcunningham• 13 years ago

I've read the OReilly AngularJS book, and am now reading a new pre-published version of an AngularJS book from Packt: http://www.packtpub.com/angularjs-web-application-developmen...

I'm only 2 chapters into it, but it is excellent so far. If you search for Packt coupons, you can pick up the ebook for around $16.

twiceaday• 13 years ago

This blog does some interesting stuff if you mouse-wheel-click and drag past an edge.

factorialboy• 13 years ago

Does nothing for me :\

MatthewPhillips3• 13 years ago

Seeing the word "controller" in markup makes me want to gag myself.

jonursenbach• 13 years ago

Why?

MatthewPhillips3• 13 years ago

Separation of concerns

mugenx862• 13 years ago

The controller directive is necessary to determine the scope of the variables/functions embedded in the view.

But I do agree on the point that designers would certainly gag when seeing this... A developer would need to go though the deign and insert all the hooks. This step is unavoidable with any web application framework.

That being said, I think a designer would puke if they were required to write React components.

metaphorm3• 13 years ago

you should learn about the angular concept of scope before gagging on this. its actually a very elegant mechanism for letting you treat a segment of the document as lexically scoped data within your Javascript.

nobleach• 13 years ago

I think he/she's going after the idea of polluting one's view with all sorts of non-standard markup invokes a gag reflex. I'm amazed that Google chose to adopt such an ugly non-standard idea. HTML5 does allow for data attributes, why on earth did Angular choose to ignore those? "ng-repeat", "ng-pooponastick" etc??? Most templating languages to not violate the actual HTML attributes to exploit their purposes. I'm not hating on Angular.js yet as I've yet to use it in a real project. But I'd hate to have to migrate a project from Angular to a more pure template.

mugenx862• 13 years ago

I'm struggling to find an advantage that React has over AngularJS.

+1 for AngularJS

dougbarrett• 13 years ago

I agree, within the first few days of using AngularJS I immediately felt the benefits more than I did trying any of the other more popular JS MVC frameworks. I've gone as far as going back into other parts of apps I'm making and rewriting them using AngularJS from it originally just being some jQuery functions.

peterhunt4• 13 years ago

Glad to see people implementing similar projects in both frameworks so everyone can evaluate their needs.

Though, comparing code snippets to a lengthy tutorial kind of misrepresents the verbosity of React. I think we forgot to put the completed tutorial on GitHub, so here it is for an easier comparison:

https://github.com/petehunt/react-tutorial/blob/master/scrip...

Outside of standard HTML boilerplate our entire application is pretty small I think.

thejosh• 13 years ago

This is the entire point of TodoMVC[1], which is to create a standard project across multiple languages/frameworks.

[1] http://todomvc.com/

peterhunt4• 13 years ago

Here ya go: https://github.com/facebook/react/tree/master/examples/todom...

We also have a demo of Backbone integration, too:

https://github.com/facebook/react/tree/master/examples/todom...

jonahx• 13 years ago

The difficulty is when the Todo MVC does not represent a framework's advantages. In the main react thread, peter's comments suggest that React shines in an environment with many, complex interacting UI components.

ojr• 13 years ago

>Our entire application is pretty small I think

Well, I think most would agree that AngularJS has better readability and is more concise but a disclaimer would be that I've been looking at Angular's syntax for quite some time and reactjs is a new framework...Instagram's website is nice by the way, simple, clean UI.

The "Load More" Button on the site is probably powered by reactjs? @peterhunt

peterhunt4• 13 years ago

There's a decent amount in there. We have client-side URL routing/transitions (thanks, Backbone) and the entire profile and feed pages are just big React components. There are also photo modals, login modals, and a full layer/tooltip system which is non-trivial to get right.

robocat• 13 years ago

From beginning of tutorial:

> For our comment box example, we'll have the following component structure:

>- CommentBox

> - CommentList

> - Comment

> - CommentForm

Yet the AngularJS solution simplifies this down to one component.

If we presume React could simplify down to a single component too, then the AngularJS solution is would only be fair if it keeps the artificial constraint of having four component classes.

goronbjorn• 13 years ago

If anything, this post shows that Medium needs a good way to display code snippets–having to resort to screenshots is pretty gross.

codereflection2• 13 years ago

Screenshots work universally across language settings, so I think they're very appropriate.

bascule• 13 years ago

It's text... frozen in an image, to where it can't be copied/pasted except via OCR. Seems bad

ilyabraude• 13 years ago

I've been using Angular recently and love it. But this example is not matched evenly with the modular component demonstration of the React tutorial.

The equivalent in Angular would be to use directives (http://docs.angularjs.org/guide/directive) for the comment list, each comment, and each part of a comment.

Passing data between parent and child components (via scope) becomes a little tricky.

ConceitedCode2• 13 years ago

I am relatively new to Angular, but wouldn't you want to have the comments be a Factory using ngResource? If the comments are restful then it seems much easier.

s1kx• 13 years ago

Theoretically yes, but ngResource is kind of the achilles' heel of AngularJS right now. You're often better off using a different library or making your own class with $http requests.

randomfool• 13 years ago

React's model is a bit interesting- it inverts the relationship between markup and code with the code containing the markup (without odd escaping). Not quite sure how well it really works without using it in a large app, but it is intriguing.

I do think that components which consist entirely of JS are convenient (self-contained w/ no ancillary HTML assets). Not sure it's enough to justify the framework, but has some potential.

Kiro• 13 years ago

I would like to see a similar tutorial which also covers authentication and how to add security to your app. There are a few but I want to see a really simple one.

What I don't understand is how you add login while keeping your REST backend stateless. How do you validate the request and make sure that it comes from the correct user and not just someone who forges the request without keeping a state on the server-side? Normally you just add a session.

ConceitedCode2• 13 years ago

This seems to explain how to do it pretty well using angular.

http://www.frederiknakstad.com/authentication-in-single-page...

peterhunt4• 13 years ago

There's a bunch of different ways to do this. For Instagram we use Django's normal login mechanisms which add a session cookie. Our calls to the REST backend include this cookie. It works pretty well for us.

I think Facebook.com does something similar.

Cthulhu_• 13 years ago

Our web application / REST API actually uses two systems; for employees, it uses HTTP basic authentication, which is validated to LDAP via Spring Security. For customers, there's a security proxy in between the front-end and our API (IBM's WebSeal), so authentication's handled completely outside of our REST API.

Just a couple ideas.

shaydoc• 13 years ago

Just had try doing a KnockoutJS version of this also : http://anexiledderryman.com/post/51714264769/facebooks-new-r...

gunn• 13 years ago

Here's my EmberJS version. It's line for line equivalent to the angular one:

http://jsfiddle.net/VNN4B/1/

gbadman2• 13 years ago

Plunker can now import fiddles: http://plnkr.co/edit/fiddle:VNN4B@1?p=preview

Some people prefer the more traditional editor interface.

WickyNilliams2• 13 years ago

I think knockout is a fairer comparison than angular. KO is not at all prescriptive, just one piece in the puzzle which you combine with other things, much like React professes to be.

gbadman2• 13 years ago

To open the fiddle in Plunker: http://plnkr.co/edit/fiddle:Cdrse?p=preview

don_draper• 13 years ago

This is a great example of where Angular shines compared to jQuery. Yes, you can do this with just jQuery but it won't be as well modeled or as easy to test.

alexdf• 13 years ago

After first glance it seems that React started way before modern frameworks emerged or am I wrong?

metaphorm3• 13 years ago

this was a nice walkthrough. thanks to the author. was simple and informative.

Facebook’s New React JavaScript Library Tutorial Rewritten in AngularJS

Related Stories