Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›234 »

rsjr: Nov 2, 2002; yay for protoss being so simple that retards can win with it

an skeleton posted:

It's realllly complex. We have a service that takes in strings as parameters and turns them into parameters for the nggrid via its API. Yes we were trying to manipulate the ng-grid by wrapping it in a form tag in html and then manipulating it with a $watch that iterates thru the grid whenever there is a change and if one of the ng-grid's form inputs was $invalid, then it turned off the save button. Problem is the $valid variable seemed to be unattainable from within the controller. Anyways we came up with the solution of just searching the document for elements with the "ng-invalid" class which is applied on invalid input, and if there were any then the save button was ng-disabled. This had a couple of other complications but basically worked

Give your form a name. The form directives exposes a form object on the parent scope and calls it whatever the name attribute is. This object has all the state methods: $valid, $pristine, $dirty, etc., as well as all the ngModel inputs that are in that form and their validation states.

Please don't do the thing you outlined.

# ? Feb 5, 2014 01:58

Adbot: ADBOT LOVES YOU

# ? Apr 19, 2024 03:06

leftist heap: Feb 28, 2013; Fun Shoe

an skeleton everything you're doing just sounds... wrong. Anyway. AngularJS allows the arbitrary nesting of forms via the ng-form tag. Sub-forms will propagate their validity up to their parent forms. I made you a jsFiddle and everything because I'm bored.

http://jsfiddle.net/jK72r/

The validation of subForm propagates up to myForm.

# ? Feb 5, 2014 02:20

an skeleton: Apr 23, 2012; scowls @ u

Of course it's wrong. We tried doing it the correct way as you described (giving the form a name) and it did not work.

# ? Feb 6, 2014 00:06

leftist heap: Feb 28, 2013; Fun Shoe

What about it didn't work? Works fine in the jsFiddle. Maybe there is some scope wackiness on the go with the ngGrid stuff? I've never used ngGrid before. Do you have a top level form that contains everything?

# ? Feb 6, 2014 00:08

etcetera08: Sep 11, 2008

Ng-grid can emit events upon cell changes, you don't have to do any of that stuff.
Also it's not a form, don't treat it like one.

# ? Feb 6, 2014 03:48

an skeleton: Apr 23, 2012; scowls @ u

etcetera08 posted:

Ng-grid can emit events upon cell changes, you don't have to do any of that stuff.
Also it's not a form, don't treat it like one.

How do you detect the cell change?

# ? Feb 6, 2014 08:44

EVGA Longoria: Dec 25, 2005; Let's go exploring!

an skeleton posted:

How do you detect the cell change?

http://angular-ui.github.io/ng-grid/

afterSelectionChange function (rowItem, event) {} Callback for when you want to validate something after selection.

It's a grid option, so you just give it the callback. Edit is a selection event, so you're probably doing this anyway.

# ? Feb 6, 2014 15:11

an skeleton: Apr 23, 2012; scowls @ u

EVGA Longoria posted:

http://angular-ui.github.io/ng-grid/

afterSelectionChange function (rowItem, event) {} Callback for when you want to validate something after selection.

It's a grid option, so you just give it the callback. Edit is a selection event, so you're probably doing this anyway.

Apologies in advance for being obtuse, but does that only trigger after you change selection-- i.e., when you click on another row or off of another row? Because our save button needs to disable as soon as bad input is entered, not after they click on some other row/off-grid. Also, what do you pass into rowItem? The name of "name" of the item given in the cell template?

# ? Feb 6, 2014 17:40

Ochowie: Nov 9, 2007

I've been playing around with Meteor and it seems like a really cool concept. One nagging doubt that keeps coming up is that it seems like you are buying into a full stack solution. In other words, if I was working on a mobile app and decided I wanted to switch to a native app rather than something like PhoneGap all of the server side work I did with Meteor is essentially useless whereas if I was using something like Backbone, chances are I could reuse my services with a native front end. Is there something I'm missing or is this just the tradeoff of using Meteor?

# ? Feb 19, 2014 02:16

excidium: Oct 24, 2004; Tambahawk Soars

So I've wrote an app that I'm going to publish and it works fine and dandy. This is the first time I've really used AngularJS and wrote a non-trivial JS app. I really want to take my work now and learn from my mistakes to improve my efficiency going forward. I feel like a major sticking point is code repetition. Looking at this snippet, what can I do to improve this code? I have a bunch of different calculations and they are all set up exactly like this. It seems like the favorite stuff should be easy to extract but I'm not sure where to start.

code:

angular.module('CalcApp')
  .controller('XYZController', function ($scope, $route, localStorageService) {
		$scope.equation = {};
		$scope.equation.name = 'XYZ formula';
		$scope.equation.formula = '(a * 1.5) + 8 � 2';
		$scope.change = function () {
			$scope.equation.outputLow = (($scope.equation.a * 1.5) + 8) - 2;
			$scope.equation.outputHigh = (($scope.equation.a * 1.5) + 8) + 2;
		};
		$scope.isFavorite = localStorageService.get('xyz');
		$scope.addFavorite = function() {
			localStorageService.add('xyz', true);
			$route.reload();
		};
		$scope.removeFavorite = function() {
			localStorageService.remove('xyz');
			$route.reload();
		};
	});

# ? Feb 19, 2014 04:53

The Insect Court: Nov 22, 2012; by FactsAreUseless

Ochowie posted:

I've been playing around with Meteor and it seems like a really cool concept. One nagging doubt that keeps coming up is that it seems like you are buying into a full stack solution. In other words, if I was working on a mobile app and decided I wanted to switch to a native app rather than something like PhoneGap all of the server side work I did with Meteor is essentially useless whereas if I was using something like Backbone, chances are I could reuse my services with a native front end. Is there something I'm missing or is this just the tradeoff of using Meteor?

Nope, Meteor is "opinionated" and doesn't play well with others. The data exchange protocol used is open sourced, and a fairly simple pub-sub one, but I don't know of any existing libraries for iOS/Android that implement it so you'd have to do it yourself.

# ? Feb 19, 2014 06:13

leftist heap: Feb 28, 2013; Fun Shoe

excidium posted:

So I've wrote an app that I'm going to publish and it works fine and dandy. This is the first time I've really used AngularJS and wrote a non-trivial JS app. I really want to take my work now and learn from my mistakes to improve my efficiency going forward. I feel like a major sticking point is code repetition. Looking at this snippet, what can I do to improve this code? I have a bunch of different calculations and they are all set up exactly like this. It seems like the favorite stuff should be easy to extract but I'm not sure where to start.
code:
angular.module('CalcApp')
  .controller('XYZController', function ($scope, $route, localStorageService) {
		$scope.equation = {};
		$scope.equation.name = 'XYZ formula';
		$scope.equation.formula = '(a * 1.5) + 8 � 2';
		$scope.change = function () {
			$scope.equation.outputLow = (($scope.equation.a * 1.5) + 8) - 2;
			$scope.equation.outputHigh = (($scope.equation.a * 1.5) + 8) + 2;
		};
		$scope.isFavorite = localStorageService.get('xyz');
		$scope.addFavorite = function() {
			localStorageService.add('xyz', true);
			$route.reload();
		};
		$scope.removeFavorite = function() {
			localStorageService.remove('xyz');
			$route.reload();
		};
	});

There is nothing all that magical about AngularJS controllers. At our company we use a mixin pattern to separate out common functionality. See here for an example:

http://digital-drive.com/?p=188

# ? Feb 19, 2014 07:36

excidium: Oct 24, 2004; Tambahawk Soars

[edit] Asking in the Android thread since that seems like the more logical place.

excidium fucked around with this message at 18:13 on Feb 21, 2014

# ? Feb 21, 2014 07:01

Skiant: Mar 10, 2013

Angular question, related to the digest loop and bindings because I've no idea what I'm doing anymore.

Basically the feature I'm working on is a translator panel. We've been using angular-translate and it does the work pretty well, but we need a way to display a panel containing all the translations requested on the current page, with input fields for each so the translators can fix typos and all, then save their work. Another request is to have a search field so the translator can easily find the string he's looking for.

I solved that by copying the directive and filter shipping out with ng-translate, and make the filter call a service to add the requested translationKey to an object.
Now, in my translator panel controller, I call the same service and ask him a list of all those translationKey's. Then, I load up both the EN and the current locale raw data (using a custom loader I plugged to angular-translate as well) and add them to the object.

The end result looks like this :

code:

$scope.translator.keys = {
  translationKey1: {
    id: 'translationKey1',
    reference: 'english reference string',
    value: 'some foreign gibberish'
  },
  translationKey2: {
    id: 'translationKey2',
    reference: 'an other english reference string',
    value: 'some more foreign gibberish'
  }
};

This object is then plugged into an ngRepeat directive :

code:

<div class="control-group" ng-repeat="(key, translation) in translator.keys | filter:searchText">
  <label class="control-label" for="key-{{$index}}" ng-bind="key"></label>
  <div class="controls">
    <input type="text" id="key-{{$index}}" name="key" ng-model="translation.value" class="input-block-level">
    <span class="help-block">{{translation.reference}}</span>
  </div>
</div>

Now, the problem is this works mostly okay when I'm on a page with very few translations but it goes terribly wrong on a page where ~15 translation keys are generated dynamically.
I assumed it was due to the fact that my controller code was pushing the "reference" and "value" strings one by one, so I now I push those in a temp object then I copy this temp object over the $scope binded value. Yet, I'm hitting the $digest loop limit, so I guess I'm still doing something terrible.

There might be a better way to grab the collection of requested translation keys on the page, and there might also be a better way to add the reference/current value strings to the objects, but I'm an idiot.

# ? Feb 24, 2014 17:00

Chilled Milk: Jun 22, 2003; No one here is alone,
satellites in every home

So I'm a Rails dev and been given the opportunity to pick up AngularJS for a new project. Its the front end to talk to an API a team we're collaborating with is building. Nothing super crazy (yet), user logs in, reads their messages and whatnot. So, stuff I could easily do in a traditional rails environment, but this would be my first big front-end/api-talking-to app.

I've bookmarked egghead, learnangularjs.net, and that 60 minute Angular fundamentals video. Any other good ebook/books, tutorials, etc, I should be aware of? I put together a simple angular hello world using a bare rails app to take advantage of the asset pipeline and hit the ground running, is that an acceptable strategy going forward?

# ? Feb 27, 2014 02:32

waffle enthusiast: Nov 16, 2007

^^ For the next two hours, Manning has all their JS books at 50% off, including AngularJS in Action.

I'm also curious if anyone has read Secrets of the JavaScript Ninja and would recommend it for varying levels of JavaScript ability.

# ? Feb 27, 2014 04:12

Chilled Milk: Jun 22, 2003; No one here is alone,
satellites in every home

Dangerllama posted:

^^ For the next two hours, Manning has all their JS books at 50% off, including AngularJS in Action.

I'm also curious if anyone has read Secrets of the JavaScript Ninja and would recommend it for varying levels of JavaScript ability.

Thanks, snatched that up for my kindle.

# ? Feb 27, 2014 04:39

the talent deficit: Dec 20, 2003; self-deprecation is a very british trait, and problems can arise when the british attempt to do so with a foreign culture

Is there any reason to use RequireJS (or similar) over concating all my scripts (and dependencies) together via grunt/gulp/browserify if I'm using grunt/gulp anyways?

# ? Feb 27, 2014 08:24

Doc Hawkins: Jun 15, 2010; Dashing? But I'm not even moving!

It depends on how many entry points your app has, and which files each entry point needs on initial load.

I'm a RequireJS fanatic, but it sounds like you're just concatenating and minifying everything together and loading it everywhere? In that case there's no big advantage except being ~part of the future~.

# ? Feb 27, 2014 09:59

EVGA Longoria: Dec 25, 2005; Let's go exploring!

Dangerllama posted:

^^ For the next two hours, Manning has all their JS books at 50% off, including AngularJS in Action.

I'm also curious if anyone has read Secrets of the JavaScript Ninja and would recommend it for varying levels of JavaScript ability.

AngularJS in Action will probably be really good in about 6 months. Right now, it's so empty.

# ? Feb 27, 2014 12:48

sim: Sep 24, 2003

the talent deficit posted:

Is there any reason to use RequireJS (or similar) over concating all my scripts (and dependencies) together via grunt/gulp/browserify if I'm using grunt/gulp anyways?

It's nice not having to worry about namespacing or script ordering, but in terms of benefits to your users, no.

# ? Feb 27, 2014 22:42

an skeleton: Apr 23, 2012; scowls @ u

Got a question. I'm an intern at a local company and one of our goals this month is to get jasmine/karma testing online for one of our company's web applications this month. Problem is, the people who are supposed to help us are always busy and it doesn't seem like its gonna get done unless we do it ourselves. However I have no experience with unit testing and I'm feeling kinda intimidated by the whole idea, does anyone have any guidance for getting a jasmine/karma testing framework online for a large angular/jquery web app?

# ? Mar 8, 2014 05:19

MrDoDo: Jun 27, 2004; You better remember quick before we haul your sweet ass down to the precinct.

an skeleton posted:

Got a question. I'm an intern at a local company and one of our goals this month is to get jasmine/karma testing online for one of our company's web applications this month. Problem is, the people who are supposed to help us are always busy and it doesn't seem like its gonna get done unless we do it ourselves. However I have no experience with unit testing and I'm feeling kinda intimidated by the whole idea, does anyone have any guidance for getting a jasmine/karma testing framework online for a large angular/jquery web app?

What do you mean as in "online"? Unit testing is kind of one of those things thats tricky to do after the fact, especially for a large app if it has 0 test coverage. Setting your sights on getting a test suite up, with full coverage for a large JS app in a month is pretty ambitious.

I would just get jasmine/karma running if I were you, even if it is for a sample app at the moment, just to get the hang of it and see how it works. Then pick just a few small sections of the application you know a little bit about and practice writing tests.

# ? Mar 8, 2014 08:21

Skiant: Mar 10, 2013

an skeleton posted:

Got a question. I'm an intern at a local company and one of our goals this month is to get jasmine/karma testing online for one of our company's web applications this month. Problem is, the people who are supposed to help us are always busy and it doesn't seem like its gonna get done unless we do it ourselves. However I have no experience with unit testing and I'm feeling kinda intimidated by the whole idea, does anyone have any guidance for getting a jasmine/karma testing framework online for a large angular/jquery web app?

If you're looking for end-to-end testing (testing user scenarios), check out Protractor.
It's relatively easy to set up if you're already using NPM, and you can use Grunt/Gulp to run the test tasks for you.

# ? Mar 8, 2014 09:46

NovemberMike: Dec 28, 2008

an skeleton posted:

Got a question. I'm an intern at a local company and one of our goals this month is to get jasmine/karma testing online for one of our company's web applications this month. Problem is, the people who are supposed to help us are always busy and it doesn't seem like its gonna get done unless we do it ourselves. However I have no experience with unit testing and I'm feeling kinda intimidated by the whole idea, does anyone have any guidance for getting a jasmine/karma testing framework online for a large angular/jquery web app?

It depends on what you're actually trying to do but 100% test coverage in a month for a large project is going to be unreasonable. The easiest thing to do would probably be to define some critical paths and try to get tests up for those. Testing after the fact is also generally a bad idea.

# ? Mar 10, 2014 03:34

duck monster: Dec 15, 2004

MrDoDo posted:

What do you mean as in "online"? Unit testing is kind of one of those things thats tricky to do after the fact, especially for a large app if it has 0 test coverage. Setting your sights on getting a test suite up, with full coverage for a large JS app in a month is pretty ambitious.

I would just get jasmine/karma running if I were you, even if it is for a sample app at the moment, just to get the hang of it and see how it works. Then pick just a few small sections of the application you know a little bit about and practice writing tests.

Word. I started work at a large web firm that had this horrible inhouse CMS* written in bad PHP with everything wrong with PHP encoded in this mess (inline html, sql injections, long-drop coding styles (It starts at the top of the file, and drops all the waaaay through a big spagetti mess to the bottom and at the end lies a programmers lifeless corpse) and so on. All this built up over years of patches and crufting. Anyway, I got told I was being put onto a project to have "full coverage" for this code base. I pretty much said straight up it was a pipe dream because so much of the code just didn't lend itself to unit testing being massively side-effect filled, poorly structured with almost no object orientation at all. The loving thing managed to crash PhpLint, it was that bad. Anyway after lots of arguing I suggested a broader project of slowly refactoring the whole codebase into something modern and compliant and unit testing that. I was put on the task knowing it'd take me and another guy the better part of a year. Then I got sick and ended up in hospital. Then the recession hit whilst I was in hospital. Then the company died, because it turns out "Inhouse CMS" is a loving worthless assett that adds nothing to your share price, probably. The end.

*(Protip: AVOID companies with their own inhouse CMSs. They loving dement companies because management end up believing these hokey loving cms's are their secret weapon when in reality they are usually written by bad programmers, maintained by bad programmers and are filled with layers upon layers of crust custom written for long forgotten customers, with SQL injections galore, entwangled HTML and code and so on)

# ? Mar 10, 2014 04:41

Sulla Faex: May 14, 2010; No man ever did me so much good, or enemy so much harm, but I repaid him with ENDLESS SHITPOSTING

Duck monster I've always considered you to be a sort of programmer's George R. R. Martin, and posts like this remind me why.

"Nothing good ever happens and every hope and dream you ever had will be torn screaming to the ground and fed into the churning maw of hell itself"

# ? Mar 10, 2014 12:35

excidium: Oct 24, 2004; Tambahawk Soars

New AngularJS question relating to services. I'm using the MEAN stack and have the Yeoman angular-fullstack generator installed. I'm trying to add some more functionality to the User Mongoose/AngularJS controllers to retrieve all Users in the DB and return them in an array that I can then use in my views. I created the API call and it's returning data just fine, but I can't seem to hook it up from the Angular side.

This is the default code in the scaffolded app:

JavaScript code:

angular.module('infinityApp')
  .factory('User', function ($resource) {
    return $resource('/api/users/:id', {
      id: '@id'
    }, { //parameters default
      update: {
        method: 'PUT',
        params: {}
      },
      get: {
        method: 'GET',
        params: {
          id:'me'
        }
      }
	  });
  });

My API path to get all users is just a GET call to '/api/users'. How can I integrate that into this module without breaking the other functionality that's already here?

To see the angular-fullstack scaffold check out this github: https://github.com/DaftMonk/generator-angular-fullstack

excidium fucked around with this message at 19:04 on Mar 11, 2014

# ? Mar 11, 2014 18:57

excidium: Oct 24, 2004; Tambahawk Soars

excidium posted:

New AngularJS question relating to services. I'm using the MEAN stack and have the Yeoman angular-fullstack generator installed. I'm trying to add some more functionality to the User Mongoose/AngularJS controllers to retrieve all Users in the DB and return them in an array that I can then use in my views. I created the API call and it's returning data just fine, but I can't seem to hook it up from the Angular side.

This is the default code in the scaffolded app:
JavaScript code:
angular.module('infinityApp')
  .factory('User', function ($resource) {
    return $resource('/api/users/:id', {
      id: '@id'
    }, { //parameters default
      update: {
        method: 'PUT',
        params: {}
      },
      get: {
        method: 'GET',
        params: {
          id:'me'
        }
      }
	  });
  });
My API path to get all users is just a GET call to '/api/users'. How can I integrate that into this module without breaking the other functionality that's already here?

To see the angular-fullstack scaffold check out this github: https://github.com/DaftMonk/generator-angular-fullstack

Well, to answer my own question, there is a built in default option for save, query, get and delete when using the $resource functionality. So all I had to do was point my working API backend to be called query and then just use the resource as is. Sweet!

# ? Mar 12, 2014 00:02

an skeleton: Apr 23, 2012; scowls @ u

redacted

an skeleton fucked around with this message at 19:12 on Mar 13, 2014

# ? Mar 12, 2014 23:16

an skeleton: Apr 23, 2012; scowls @ u

Forget the previous problem, have a new problem.

We can get jasmine testing to work for one "it" on our angular application, but each subsequent test fails, even if its just expect(3).toBe(3) and nothing else. The error we get is:
Error: [ng:areq] Argument 'fn' is not a function, got <name of controller>

# ? Mar 13, 2014 19:13

ShaunO: Jan 29, 2006

A major IOS update 7.1 was released today.

This is an important update for front end web devs that develop webapps with very complex data binding scenarios combined with lots of handlers.

The issue is most apparent on iOS 7 devices with 512 or less Ram. During the data binding, safari would totally crash itself with out of memory exceptions.

7.1 has finally fixed this major bug and even improved performance.

Nice after spending 60 hours this year working around this issue alone....

# ? Mar 14, 2014 02:26

substitute: Aug 30, 2003; you for my mum

This reminds of something, how should you handle iOS's reading numbers with a dash between them as a phone number by default? We have product codes like 1234-5678, so by default iOS will display them as clickable phone numbers.

You can turn off phone recognition with a meta tag, then wrap your real phone contact numbers with href="tel:123-456-7890" and style the link to not look like a link / make the cursor: text; -- but I'm wondering if there's a more graceful method using scripting.

# ? Mar 14, 2014 02:44

The Insect Court: Nov 22, 2012; by FactsAreUseless

an skeleton posted:

Forget the previous problem, have a new problem.

We can get jasmine testing to work for one "it" on our angular application, but each subsequent test fails, even if its just expect(3).toBe(3) and nothing else. The error we get is:
Error: [ng:areq] Argument 'fn' is not a function, got <name of controller>

Are you using angular.mock.module or angular.module in your initialization code?

# ? Mar 14, 2014 06:25

duck monster: Dec 15, 2004

Sulla-Marius 88 posted:

Duck monster I've always considered you to be a sort of programmer's George R. R. Martin, and posts like this remind me why.

"Nothing good ever happens and every hope and dream you ever had will be torn screaming to the ground and fed into the churning maw of hell itself"

The only reason I'm still working as a programmer, is because at 40 its too late to change. I only post to remind people their life is meaningless and their dreams futile. Upon accepting this, and the resultant 7 stages of grief, they will eventually come to accept it, and finally be at peace scratching out a living in the dilbertesque hellscape that is software development. In short;- Dehumanize yourself and face to bloodshed.

:suicide:

duck monster fucked around with this message at 09:42 on Mar 17, 2014

# ? Mar 17, 2014 09:39

excidium: Oct 24, 2004; Tambahawk Soars

New weird AngularJS issue that I can't seem to figure out. I'm working with $resource to do all my CRUD operations and did some basic mocks initially to prove out the functionality before implementing real models/controllers. In this proving out routing/controllers I set up a redirect on the update call that was added to the $resource (since there is no default PUT operation for some reason). So here's what that code looks like:

JavaScript code:

  .controller('PersonEditCtrl', function ($scope, $http, Person, $routeParams, $location) {
    $scope.form = {};

    $scope.person = Person.get({id: $routeParams.id});

    $scope.update = function() {
      Person.update({id: $routeParams.id}, $scope.person, function() {
        $location.path('/person');
      });
    };
  });

This works great and on success the app is redirected to url/person which is my list of all people. Now utilizing this functionality with my real controller I get much different results. Here's the real controller code:

JavaScript code:

  .controller('UserAdminRolesEditCtrl', function ($scope, Role, $routeParams, $location, $http) {

    $scope.role = Role.get({id: $routeParams.id});

    $scope.update = function() {
      Role.update({id: $routeParams.id}, $scope.role, function() {
        $location.path('/useradmin/roles');
      });
    };

  });

When this update function is called my role is updated correctly, but then it does a GET request to /? and hits my otherwise route configuration. It never tries to hit the /useradmin/roles path at all. I really don't understand what could be the different between the two sets of code that would cause it to work correctly for one but not the other. Any ideas?

# ? Mar 18, 2014 15:22

spacebard: Jan 1, 2007; Football~

Angular has been neat for prototyping/testing the restful API I made for vendor applications. A couple of hours and I can just point to my test app as an example.

Much better than my first Angular experience with markdown and making my personal public page in it. Was quite the learning experience though to go down the Static caching rabbit hole. :downs:

excidium posted:

When this update function is called my role is updated correctly, but then it does a GET request to /? and hits my otherwise route configuration. It never tries to hit the /useradmin/roles path at all. I really don't understand what could be the different between the two sets of code that would cause it to work correctly for one but not the other. Any ideas?

Any typos in your app's route definition? That's all I can think of. Can you set a watch statement in web inspector and see why it's not hitting the route?

# ? Mar 18, 2014 18:48

excidium: Oct 24, 2004; Tambahawk Soars

spacebard posted:

Any typos in your app's route definition? That's all I can think of. Can you set a watch statement in web inspector and see why it's not hitting the route?

It's weird, it's not even hitting my success callback on the update. It just goes off the tracks somehow. I don't understand why one version works fine and the other doesn't.

# ? Mar 18, 2014 19:32

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

Ok so having done ~5 month or so of full-time-ish angular.js, the love affair is over, and I don't think I shall be pushing to use it for anything any longer.

The main scary thing is performance. Everyone knows it's is poo poo, but people keep saying "don't worry, it's Google, they'll fix it". I am not so sure. The problem is dirty checking - it is basically the worst way of doing this sort of thing, there is just no avoiding have to re-evaluate every single loving binding on your app whenever you hit $apply. Object.observe may or may not happen at some point, but that doesn't matter - they will still have to re-write the whole loving thing from scratch to use it and change the way the API works. It won't get you dependency tracking in computed bindings for example. I am also far form convinced Google is actually going to bother putting too many resources into this no matter how popular it gets as long as they aren't using it for any of their core money-makers (and they aren't - apparently it's used for an internal CRM tool and some really basic proof-of-concept UI work and that's it). It will never be used for gmail or docs in its current state and I really doubt you could ever make a business case for re-writing either of those into something new even under ideal circumstances, let alone into a framework that needs substantial reworking to even be able to handle the product that is working perfectly fine without it. Remember AppEngine? Google is quickly getting an (imo, entirely well earned) Microsoft-like reputation for simply loosing interest in poo poo without warning.

Beyond that it's just a bunch of smaller things - like just how many really terrible bugs, inconsistent implementations and undocumented features you run into. Also how poorly thought-out a whole bunch of the core functionality is - like ngResource absolutely cannot handle nested resources (don't even try, you're going to have SUCH a bad time) and ngRoute cannot loving conceive of the idea that maybe you just want it to handle a subset of all possible URLs instead of absolutely everything you don't explicitly whitelist using target="_self". Also the way ngRepeat works is really aggravating because the way it does identity tracking a really weird way that is easy to gently caress up and having to manage all your state changes using in-place array state manipulation is a HUUUUUGE pain in the rear end and pretty much forces you to do every single thing involving collections the hardest way possible (yes i know about "track by", no it doesn't solve all these problems, and it introduces a few new ones).

There are a lot of good ideas here - I still think any JS developer should give Angular a try to learn some new things and broaden your horizons a little. But don't try to actually build a huge single-page-app out of it, it's just not there yet, and may never get there. It's a bit like LISP and SmallTalk that way - a bunch of good ideas, completely unusable in the real world. Ember has the same scope as Angular and despite the much smaller eco-system has already worked out all these hosed-up little problems and overall does things much more sensibly. Or better yet just use something much smaller that solves templating and data-binding specifically and build your own frameworky bits on top of that as needed. Knockout is absolutely perfect for that - way smaller, way easier to understand and much more flexible.

# ? Mar 20, 2014 22:28

Adbot: ADBOT LOVES YOU

# ? Apr 19, 2024 03:06

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Very interesting perspective Mr. Wynand, just wanted to say thanks for sharing your experience!

# ? Mar 21, 2014 04:39

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›234 »