Hacker News new | ask | show | jobs
by illicium 4313 days ago
Directives and scopes may be somewhat tricky concepts but they are not "bug ridden."

Do you want composability? Write a bunch of element directives and nest them -- it'll end up looking almost exactly like React's classes and components. The main difference is that in React you throw away MVC and replace with with a big ol' render() function that spits out "HTML" (well, a shadow-DOM version of it anyway)

Scopes are just objects that use prototypal inheritance to inherit from outer scopes. Create an new (isolated) scope in your directive to isolate data to that component and its subcomponents.

Also, using AngularUI Router is essential.

2 comments

Sorry. After last two months with angular (and no previous experience with it) I found five bugs in angular. Fix for one was released in the meantime. Some already had fixes submitted months ago but got stuck on different stages of their process of accepting patches. One is not even reported yet (although I admit this one is not about directives but $ q).

As for composability they did not seriously thought this through. One bug I found out, the one that got fixed, showed up for anone who created two directives with isolated scope and transclusion, one used in template of the other. Basically isolated scope of outer directive got transcluded into inner one instead scope outer in relation to outside directive.

Scopes suffer from the same flaws that with() statement in js suffers mainly that when you assign inside it will be assigned not where you at first expect (current leaf scope not the scope of closest controller). When you add to this the fact that humble ng-model assigns you have a huge hole that nearly all newbies fall into at least once.

Another gripe is that angular doesn't eat it's own dogfood. For example ng-required is not a directive. It's just attribute parsed internally by input directive.

AngularUI router is worthless if you need to have multiple tabs inside your web app as it allows you to have just one branch of views tree shown at any given time. There are suggestions about implementing parallel subviews but last time I checked it was too hard for them.

Angular is set of legos with lots of weird pieces. React is blueprint how to make your own bricks so they fit together and won't turn into tower of ugly chaos when assembled.

I was distrustful towards virtual dom at first. But that's just a way of batching and saving dom changes. The architecture that's enabled by it is all about composability and maintaining control over your project.

Not every directive attribute needs to be another directive -- it's probably overkill, especially if the attribute applies to only on one type of element. ngValue is an example of dogfooding directives with more directives.

UI Router states are pretty tightly bound to the URL fragment path, which makes it difficult to point to all the parallel states that make up that particular view "configuration"

Say you have a page /foo that shows two sets of tabs, A B and X Y. To point to foo with tabs A and X open, you need put that in the URL, e.g. /foo/A,X, or express it as a state path foo.A,X. It gets even hairier if you then want to activate children of those states, e.g. A.a and X.x.

You could implement your own subview routing with ngSwitch and stateParams (perhaps query parameters). It's obviously not a great solution.

> Not every directive attribute needs to be another directive -- it's probably overkill,

I think that this particular example shows that rather than extending framework of directives to nicely incorporate lightweight directives such as ng-required angular team chose to hack it into input/select/textarea directive because it was easier that way for them. There are many places like that in angular where the hacky path was chosen and due to this, architecture is lacking some of very obvious features like one-way binding of expression given in attribute to isolate scope (which is what ng-requried does to get it's value). You need to use & as workaround to achieve one way binding.

As for Angular UI as I said there were people that wanted to figure out how to implement tabbed views but they got no love from core developers. Basically recent advice about using UI Router to implement tabbed app is "Don't".

So I just went to implement my own stuff with $route, $routeParams, $location and ng-include.

throw away MVC and replace with with a big ol' render() function that spits out "HTML"

Simply put, no. React.js can be treated as a simple, dumb view or part of something larger ala Backbone, Flux, etc..

Angular.js doesn't even have a model layer aside from $scope, which in my experience is being thrown away more and more in favor of controllerAs syntax & convoluted services masquerading as 'models'