13 ms·
Facebook’s New React JavaScript Library Tutorial Rewritten in AngularJS
- ilyabraude 13y agoI'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 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.
- ConceitedCode 13y agoI 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 13y agoTheoretically 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.
- arianvanp 13y agoCould you elaborate why it's the achilles' heel? I'm exploring AngularJS right now, and am interested in its pitfalls
- skore 13y agoThen you may be interested in checking out Restangular: https://github.com/mgonto/restangular https://github.com/mgonto/restangular
- dreame4 13y agoI'm using AngularJS 1.1.5 and ngResource in my project and it works quite nice. I wouldn't discourage people from learning the hard way. However, +1 for Restangular.
- jval 13y agoNeat, 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.
- taude 13y agoO'Reily has a book out on AngularJS that's a succinct read: http://shop.oreilly.com/product/0636920028055.do http://shop.oreilly.com/product/0636920028055.do
- taternuts 13y agoI'm in the middle of reading this book and I'm really enjoying it, I recommend it
- drhayes9 13y agoI 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.
- taude 13y agoThat's probably a fair assessment. I don't really read books like this for the code precision (heck even sample repos on github don't survive working over much time). I look more at the high-level gist of concepts, so for that it's good, and then I know what to Google next... I wouldn't even be surprised if the book is totally out of date in a few months.
- jeffcunningham 13y agoI'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-development/book 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 13y agoThis blog does some interesting stuff if you mouse-wheel-click and drag past an edge.
- factorialboy 13y agoDoes nothing for me :\
- MatthewPhillips 13y agoSeeing the word "controller" in markup makes me want to gag myself.
- jonursenbach 13y agoWhy?
- MatthewPhillips 13y agoSeparation of concerns
- eric_bullington 13y agoThe controller is in fact separated. The "ngController" you see referenced in the markup is the link between the view and the separate controller. Any MVC framework you could hold up as an example of proper "separation of concerns" will necessarily have the same link, even if it's implicit. Sometimes it's defined in the controller, sometimes the link is defined in the view, and sometimes you don't see it defined, but it's still there. (of course, we all know explicit is better than implicit)
- MatthewPhillips 13y agoRight, but doing it this way means both the view and the controller know too much. Why should a view know about how it is going to be used? Also, I'm guessing if you give this to a designer his/her eyes are going to glaze over.
- davecap1 13y agoYou don't actually ever need to explicitly specify the controller in Angular views. Usually in angular apps, the controller is specified by the routing provider (in JS), along with the view (template path). In small examples (ie when not using angular routes) it is easier to explicitly specify the controller.
- mugenx86 13y agoI'm struggling to find an advantage that React has over AngularJS. +1 for AngularJS
- dougbarrett 13y agoI 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.
- peterhunt 13y agoGlad 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/scripts/example.js https://github.com/petehunt/react-tutorial/blob/master/scrip... Outside of standard HTML boilerplate our entire application is pretty small I think.
- thejosh 13y agoThis is the entire point of TodoMVC[1], which is to create a standard project across multiple languages/frameworks. [1] http://todomvc.com/ http://todomvc.com/
- peterhunt 13y agoHere ya go: https://github.com/facebook/react/tree/master/examples/todomvc 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/todomvc-backbone https://github.com/facebook/react/tree/master/examples/todom...
- jonahx 13y agoThe 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.
- ch0wn 13y agoThis is exactly why we're working on TasteApp[0] which is going to give frameworks a better chance to show of their strengths in medium-sized projects. [0] https://github.com/tastejs/tasteapp https://github.com/tastejs/tasteapp
- ojr 13y 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
- abhisec 13y agoAngular is much much more than React, so no apples to apples, it is a complete kick ass awesome framework. I have used it in banking applications, mobile app and working on a startup which employs angular. I looked at backbone and angular is pure productivity, nothing else. I am not trying to learn the javascript nitty gritty and angular gets a whole lot more done in a lot less time and effort. React seems similar to EXT-JS widget toolkit and though seems similar to angular is more verbose. I admire the work Misko and team has done on angular and I am hoping it cleanly rolls and provides a abstraction or path forward when web components go mainstream. All in all i am not going to try any other lib unless Angular is not solving my problem. To hell with the purists.
- goronbjorn 13y agoIf anything, this post shows that Medium needs a good way to display code snippets–having to resort to screenshots is pretty gross.
- codereflection 13y agoScreenshots work universally across language settings, so I think they're very appropriate.
- bascule 13y agoIt's text... frozen in an image, to where it can't be copied/pasted except via OCR. Seems bad
- codereflection 13y agoIt's a small amount of text, and IMHO, coping / pasting code from the web is hardly ever a good idea.
- ricardobeat 13y agoWhat if want to test or rewrite that code? I just tried to do that, don't think that's unusual at all in programming-related articles.
- randomfool 13y agoReact'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 13y agoI 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.
- ConceitedCode 13y agoThis seems to explain how to do it pretty well using angular. http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/ http://www.frederiknakstad.com/authentication-in-single-page...
- peterhunt 13y agoThere'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_ 13y agoOur 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 13y agoJust had try doing a KnockoutJS version of this also : http://anexiledderryman.com/post/51714264769/facebooks-new-react-javascript-library-tutorial http://anexiledderryman.com/post/51714264769/facebooks-new-r...
- gunn 13y agoHere's my EmberJS version. It's line for line equivalent to the angular one: http://jsfiddle.net/VNN4B/1/ http://jsfiddle.net/VNN4B/1/
- gbadman 13y agoPlunker can now import fiddles: http://plnkr.co/edit/fiddle:VNN4B@1?p=preview http://plnkr.co/edit/fiddle:VNN4B@1?p=preview Some people prefer the more traditional editor interface.
- WickyNilliams 13y agoI 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.
- gbadman 13y agoTo open the fiddle in Plunker: http://plnkr.co/edit/fiddle:Cdrse?p=preview http://plnkr.co/edit/fiddle:Cdrse?p=preview
- don_draper 13y agoThis 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.
- metaphorm 13y agothis was a nice walkthrough. thanks to the author. was simple and informative.
- alexdf 13y agoAfter first glance it seems that React started way before modern frameworks emerged or am I wrong?