10 ms·
AngularJS has a J2EE mindset. Where libraries grow to become as hard to learn as programming languages themselves. It does not make semantic sense to me anymore
by jeswin 13y ago
AngularJS has a J2EE mindset. Where libraries grow to become as hard to learn as programming languages themselves. It does not make semantic sense to me anymore.
Here is an example from the site:
<div>
Length (float):
<input type="text" ng-model="length" name="length" smart-float />
{{length}}<br />
<span ng-show="form.length.$error.float">
This is not a valid float number!</span>
</div>
How semantic is ng-show="form.length.$error.float? smart-float sounds like C++. If programming languages worked like this, we wouldn't have built many apps. The problem is that some frameworks assume that everything should be done with using configuration. What ends up happening is that the configuration (and conventions) becomes its own language. This is a waste of time in the long term; library conventions are not a portable skill set.
Some things are just better off with plain JS and simple HTML. FB/Instagram's React is a much better approach to building HTML UIs; you get readable JS and HTML instead of configuration mess.
- dmak 13y agoYou know, I disagreed at first, but then I looked at React's semantics and couldn't agree more afterwards.
- eloisant 13y agoThat's not necessarily semantic, but that's declarative and it's what I like with Angular. No need to think cinematic such as "when this change, update that", but just declare links.
- kayloos 13y agoThis is a critique of the example, more than the framework itself. The "smart-float" directive is not a native angular directive, but rather a directive made for the example. As for the "form.length.$error.float", it probably could be a bit more concise, but is it really that bad? What would be a "more semantic" way? The main strength of angular, is that you are able to point your DOM elements to environment variables in your JavaScript code -- eliminating the need for traversing the DOM to find a mount node. If you are opposed to this functionality and insisting on traversing the DOM from the JS side, I'd love to hear why. You can find small things you dislike in any framework, but rarely are they valid criticisms of the general concept. Often, these details are there for a reason, and just as often, they are flaws waiting to be fixed by an open source developer.
- jeswin 13y agoI'll keep this high level; that's where I have issues with Angular. Angular wants you to learn its vocabulary, and encourages users to expand it further. Like you point out, smart-float is a directive specific to the example. To me, it is a foreign object I don't recognize in html. In fact, directives, scopes? The big one. Dependency Injection, factories, modules. In JS, this is a solution looking for a problem. There are simpler alternatives to DI. They have issues, but only in theory. Clarity matters a lot. ng-show="form.length.$error.float". Is there a more simpler way of doing it? There should be; I can't even tell what that means. I think there are distinctly two camps. I'm in the one which wants frameworks to make me productive with the languages, specs and standards I already know. React (+ router) does this. Backbone does this too, depending on what you're building. (Edit: replaced semantic with clarity)
- reboog711 13y agoMy interpertation of the AngularJS DI implementation is that it exists primarily to make it easy to swap items out for testing purposes. I believe it solves that problem very well. What alternatives do you recommend to DI?
- jeswin 13y agoNothing, for swapping things out. :) In my test initialization, I'd probably just replace the value of "ns.someService" worldwide with a mock.
- nocoment 13y ago> just replace the value of "ns.someService" worldwide with a mock. Having a window-wide namespace might make sense in the test, but it is pretty risky/limiting if you are writing a component that should be reused in contexts you don't fully control. There are other ways around that besides DI, but they will probably have similar trade-offs in safety EOU, etc.
- jqueryin 13y ago
- iSnow 13y agoI only looked superficially at React, so maybe I got something wrong, but the HTML/XML intermingled with Javascript seems extremely off-putting to me, akin to ASP/JSP/PHP.
- danabramov 13y agoIt's just the first impression. React view code is not HTML in pure sense—it's a DSL for describing virtual DOM tree (that happens to look a lot like HTML for obvious reasons). You won't regret taking a couple of hours to try to build something simple with it.
- iSnow 13y agoBut then again, is the comparison between Angular and React even a valid one? After all, Angular is more or less MVC with a lot of functionality for resource routing, component building whereas React seems like a view templating library. So if I am not wrong, we are comparing a framework with a targeted library. The weakness with Angular is not the view imo, but the $apply-cycle which can bog down even a modern browser with moderately sized data.
- dangoor 13y agoReact basically eliminates the need for something like the apply cycle, because you just re-render from the top whenever something changes. React is the view layer, but its approach is different enough that you may restructure (and simplify) the rest of your app as a result.
- jesstaa 13y ago'JSX' is also what made me avoid React at first. But once I started using it, it made perfect sense. The 'JSX' is just compiled to Javascript anyway, it's just more convenient for deep nesting of html elements within a component. In more recent talks the React devs have avoided using JSX in examples and instead use the compiled form as JSX goes far enough from what people expect that it turns people away before they've given it a chance. The most important idea to take from React is that UI components are much simpler when they are state machines.
- deleted 13y ago[deleted]
- porker 13y ago> How semantic is ng-show="form.length.$error.float? I agree with your conclusion, but I think you're misusing semantics. This isn't semantic, but neither would anything else be. As soon as we get to using logic, we don't have semantics. That line is unclear and not easy to understand. That is why I object to it.
- jeswin 13y agoThanks; I will read up on the proper definition. I had been using it to imply 'meaning' (more or less), from Semantics which wiki says is the 'study of meaning'. 'unclear' is a better choice. And less pretentious too, than 'semantic'.
- watty 13y agoThis is extremely picky. "Smart-float" is the name of a custom directive that is used as an example. The term "smart float" can be used as a React component name just as easily. In that case, your React component would "sound like C++". Also, the "we wouldn't have built many apps" part is a stretch. It's actually the opposite, AngularJS is extremely popular and the most successful current JS framework.
- versusdotcom 13y agoTotally agree and also recommend to look at React. While Angular is just way too much of everything React is pretty much thought-out: Here a quick comparison of both: http://versus.com/en/angularjs-vs-react http://versus.com/en/angularjs-vs-react Here a pretty good video of React's founder pointing on some weakness of Angular: http://www.youtube.com/watch?v=x7cQ3mrcKaY http://www.youtube.com/watch?v=x7cQ3mrcKaY
- fiatjaf 13y agoReact solves all the problems in the world with their nestable but still autonomous components approach. It dispenses controllers -- and automatically give control to the component which deserves it --, it dispenses templates, and automatically gives the power to make the entire app in modular small pieces of HTML, it dispenses models, because models are already embedded in the components in which data is rendered. React is the Holy Grail of JS frameworks.
- hahahafail 13y agoUntil tomorrow when someone else on HN tells me "______ is the Holy Grail of JS frameworks."
- marknutter 13y agoI'm curious what happens when you want to share models across components. In angular.js you would use services to do this, but what's the analog in React?
- Touche 13y agoIf you're passing it to child components you pass it through attributes. If you're passing up to parents, however, you have to create a function on the parent that will get called to accept the child's new data. This can get really messy if you have deeply nested components and need to get data from one branch to another branch.
- rok3 13y agoReact encourages you to use a parent component that controls the state and passes it down to it's children via props. Passing data to separate components without a shared parent is outside of what React is trying to accomplish but I've handled it before by passing a Backbone model to the separate components as props.
- fiatjaf 13y agoI have been successful by instantiating separate services to perform REST operations and a global event emitter to establish communication between all the services and all the components that relate to these services in any way.
- stuaxo 13y agoThis is true. AngularJS is much better than what we had before, it is kind of large and monolithic. The cycle probably goes thusly: Large monolithic framework comes and shows everyone a new way of doing things (Angular/Django). People think it is too large and monolithic, so make microframeworks (Flask/Whatever comes after Angular). The next step will be a kind of happy medium.
- marknutter 13y agoExcept that Backbone.js, a micro-framework if there ever was one, exploded in popularity long before most people had even heard of AngularJS.
- Touche 13y agoBackbone was the start of the cycle. It came around at a time when front-end apps were largely jQuery soup and put polish on best practices that good JS developers were already doing. Then a lot of other frameworks were developed which largely started from the same code-first premise that Backbone had/has, and Angular "won" by introducing a new paradigm built on declarative binding. I predict that the next winner will leverage web components and do the one thing that makes that paradigm better.
- shadowmint 13y agoBackbone doesn't do data binding; it's a completely different thing. (That's why things like rivet and epoxy exist; because backbone doesn't do it right)
- mattwad 13y agoCorrection: Backbone doesn't try to be the kitchen sink like Angular. Its source code is about 500 lines, and its docs say as much: "Two way data-binding" is avoided. While it certainly makes for a nifty demo, and works for the most basic CRUD, it doesn't tend to be terribly useful in your real-world app. Sometimes you want to update on every keypress, sometimes on blur, sometimes when the panel is closed, and sometimes when the "save" button is clicked. In almost all cases, simply serializing the form to JSON is faster and easier. All that aside, if your heart is set, go for it.
- smrtinsert 13y agoPlease don't insult JEE by comparing it with Angular.
- mbell 13y agoAngular is starting to remind me more and more of JSF + CDI which immediately triggers a negative visceral reaction for me. But, if I step back and think for a moment, most of what I despised about working with JSF was related to the amount of state it needs to maintain between the browser and server. If that state is completely contained on the client and the client maintains a stateless connection to the server, it may actually work out well.
- ErikAugust 13y agosmart-float is an HTML attribute. It does not "sound" like C++. Maybe you should learn HTML5 first? Why this is the top comment is beyond me. This is whining.
- angersock 13y agoExcept that it appears to be an angular directive...? http://docs.angularjs.org/guide/forms http://docs.angularjs.org/guide/forms
- ErikAugust 13y agoWhat do you think an Angular directive is? It is a DOM marker (HTML attribute, element, class or comment) with behavior (JavaScript) tied to it. Angular lets you create your own HTML attributes. That's what a directive is.
- mcv 13y agoI don't see the problem. `<span ng-show="form.length.$error.float">` makes total sense to me. You show the content of that span when form.length.$error.float is truthy. Probably when it exists. And yes, AngularJS absolutely defines its own language. The directives create an enhanced HTML (that you can enhance even further), and it has its own expression language where you can ask the value of `form.length.$error.float` without fearing null pointers. This is basically what Angular is about, and why it works as nicely and cleanly as it does. And it's true; learning a new framework is absolutely comparable to learning a new language. Rails is not simply standard Ruby; it defines loads of new stuff that automatically handles things for you below the surface. Spring completely changes the way you work with Java. Grails has its own DSLs for various tasks. Every framework has a learning curve. And a framework that doesn't change how you think is as useless to learn as a language that doesn't change how you think. But if you don't like learning, you can always simply stick to what you're familiar with.
- coldtea 13y ago>How semantic is ng-show="form.length.$error.float? I could not care less. I find that talk about web programming has been polluted by non-terms like "semantic" that doesn't mean anything specific (in the context). Especially the whole hoopla with regard to "semantic HTML", with designers (who don't know much if anything about programming, and just heard this "semantic" term from a few industry fad gurus) using it to insist developers should treat HTML as a format for reuse (as if the reason we write HTML is to enable better screen scrapping). Endless discussions about whether it's ok to a DIV if it's purely for display purposes of not, as if HTML/CSS dont already make a clusterfuck of separating markup from presentation. Fuck "semantic HTML" -- it's a presentation format, that also happens to have a not-that-functional styling component. If you wan't reuse and semantics, get those from the data level (the db, the REST endpoint, etc), not from code meant for browsers.