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 »

NovemberMike: Dec 28, 2008

Yeah, it's probably best to start with a real TDD book if you're interested in unit testing. Unit testing is a little all or nothing, where trying to tack tests onto code that wasn't written for it can be painful and the tests tend to be brittle. Integration testing is a little less all or nothing, in that it's easy to write a test for the happy path that demonstrates that the core system works.

# ? Dec 20, 2013 03:35

Adbot: ADBOT LOVES YOU

# ? Apr 25, 2024 06:11

Simulated: Sep 28, 2001; Lowtax giveth, and Lowtax taketh away.; College Slice

Anyone have suggestions for organizing large applications? Most of the examples for various tools and frameworks are laughably simple, but if you aren't building the next Twitter, you end up with a mess. In ASP.Net MVC terms, a million partial views strung together, most of which have intimate knowledge of the HTML generated by other partial views because the app actually needs to support a complex layout suitable to replace a full-blown Win32 app.

I've been slowly chipping away at the problem by trying to make JS APIs that hide implementation details of each "widget" or "component" on the page, but it is difficult, error prone, and requires all the other devs on the team to avoid the temptation to just have their component assume it has a child grid named resultsGrid that must be 500px wide and can be refreshed with resultsGrid.Refresh().

We are dealing with million+ object datasets with each object having potentially 1000+ properties. The number of things the user can do is insane, there is no way the UI can be less complex or (laugh) a single-page application.

# ? Dec 20, 2013 18:00

Summit: Mar 6, 2004; David wanted you to have this.

A lot of the so-called SPA frameworks don't require you to build out a SPA. Angular for example does not necessarily need to be built out as a SPA. I've made applications in it that were different pages and it works great in that role as well.

# ? Dec 20, 2013 20:16

The Insect Court: Nov 22, 2012; by FactsAreUseless

Ender.uNF posted:

Anyone have suggestions for organizing large applications? Most of the examples for various tools and frameworks are laughably simple, but if you aren't building the next Twitter, you end up with a mess. In ASP.Net MVC terms, a million partial views strung together, most of which have intimate knowledge of the HTML generated by other partial views because the app actually needs to support a complex layout suitable to replace a full-blown Win32 app.

I've been slowly chipping away at the problem by trying to make JS APIs that hide implementation details of each "widget" or "component" on the page, but it is difficult, error prone, and requires all the other devs on the team to avoid the temptation to just have their component assume it has a child grid named resultsGrid that must be 500px wide and can be refreshed with resultsGrid.Refresh().

We are dealing with million+ object datasets with each object having potentially 1000+ properties. The number of things the user can do is insane, there is no way the UI can be less complex or (laugh) a single-page application.

I would suggest AngularJS, which is pretty good about encapsulation. Directives sound like what you're looking for if you want a way to encapsulate repeatedly used bits of DOM + code to modify it. Obviously, it's still entirely possible to wind up with horrible spaghetti code with angular or any other framework, but angular plus at least a little bit of attention paid to best practices goes a lot of the way.

# ? Dec 21, 2013 02:41

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Ender.uNF posted:

Anyone have suggestions for organizing large applications? Most of the examples for various tools and frameworks are laughably simple, but if you aren't building the next Twitter, you end up with a mess. In ASP.Net MVC terms, a million partial views strung together, most of which have intimate knowledge of the HTML generated by other partial views because the app actually needs to support a complex layout suitable to replace a full-blown Win32 app.

I've been slowly chipping away at the problem by trying to make JS APIs that hide implementation details of each "widget" or "component" on the page, but it is difficult, error prone, and requires all the other devs on the team to avoid the temptation to just have their component assume it has a child grid named resultsGrid that must be 500px wide and can be refreshed with resultsGrid.Refresh().

We are dealing with million+ object datasets with each object having potentially 1000+ properties. The number of things the user can do is insane, there is no way the UI can be less complex or (laugh) a single-page application.

Oh, do you work for a hosed up medical company? Are they using google closure? Trying to replace a win32 gui with a webapp is a loving bad idea and won't make anyone happy.

# ? Dec 21, 2013 17:21

Simulated: Sep 28, 2001; Lowtax giveth, and Lowtax taketh away.; College Slice

Bruegels Fuckbooks posted:

Oh, do you work for a hosed up medical company? Are they using google closure? Trying to replace a win32 gui with a webapp is a loving bad idea and won't make anyone happy.

No. We already replaced the Win32 client with a web one, it just has much worse performance than it should because everything does post backs on WebForms, or uses massive callbacks containing the world (that has to run the entire page's post back logic anyway). I managed to get WebForms and MVC to interop and our new features are using MVC, so performance wise we are in much better shape, but my grand plan to make the UI clean and more maintainable was promptly turned into spaghetti code once everyone else was let loose on it.

# ? Dec 21, 2013 23:58

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Ender.uNF posted:

No. We already replaced the Win32 client with a web one, it just has much worse performance than it should because everything does post backs on WebForms, or uses massive callbacks containing the world (that has to run the entire page's post back logic anyway). I managed to get WebForms and MVC to interop and our new features are using MVC, so performance wise we are in much better shape, but my grand plan to make the UI clean and more maintainable was promptly turned into spaghetti code once everyone else was let loose on it.

This is an inherent problem with doing UI in client side javascript - it's too easy to monkey patch and if you have too many people developing the UI, you end up with bad poo poo happening.

# ? Dec 22, 2013 00:16

Hed: Mar 31, 2004; Fun Shoe

Angular question: My server returns decimal numbers as quoted strings. Let's say I can't change that, how can I get the objects to correctly deserialize? I'm trying to get their value to bind with the HTML5 "number" type input.

JSON returned:

code:

[
    {
        "id": 1, 
        "url": "http://tester.local/timekeeper/api/charges/1/", 
        "charge_code": "http://tester.local/timekeeper/api/chargecodes/ACME-001/", 
        "hours": "7.25", 
        "charge_date": "2013-12-21", 
        "employee": "hed", 
        "entry_reason": "http://tester.local/timekeeper/api/reasons/1/"
    }, 
...
]

I'm using Angular's $resource module instead of straight $http, and it's being a stupid mess. I'm trying this:

code:

app.api.factory('Charge', [
  '$resource', function($resource) {
    url = './api/charges/:id ';
    paramDefaults = {
      id: '@id'
    };

    actions = {
      'get':  {
        method: 'GET', 
       // isArray: true,
        transformResponse: function(data, header) {
          console.log('transforming');
          console.log(response);
          return response;
        }
      }
    };

    return $resource(url, paramDefaults, actions);
  }
]);

But that transformResponse function isn't firing. I've tried query methods, making it a member of a list, changing the function signature. I just want that "hours" in the above JSON to be a number and not a string! (Or otherwise work with the <input type="number"> element.) Any ideas?

# ? Dec 22, 2013 05:20

jiggerypokery: Feb 1, 2012; ...But I could hardly wait six months with a red hot jape like that under me belt.

NovemberMike posted:

Yeah, it's probably best to start with a real TDD book if you're interested in unit testing. Unit testing is a little all or nothing, where trying to tack tests onto code that wasn't written for it can be painful and the tests tend to be brittle. Integration testing is a little less all or nothing, in that it's easy to write a test for the happy path that demonstrates that the core system works.

Really they shouldn't be hacking tests into code, more hacking code into tests in that situation. Hideous as it may be.

# ? Dec 22, 2013 12:35

Hed: Mar 31, 2004; Fun Shoe

I fixed it.

code:

    actions = {
      query:  { // remove the quoted strings from each "hours" thing.
        method: 'GET', 
       isArray: true,
        transformResponse: $http.defaults.transformResponse.concat([
          function(data, header) {
            angular.forEach(data, function(charge) {
                // console.log('modifying ' + JSON.stringify(charge));
                charge.hours = parseFloat(charge.hours);
            })
            return data;
        }])
      }
    };

Since the docs were a bit better on the $http examples, I just injected $http and called the underlying layer. The trick here is that in $http "transformResponse" is an array of transformers so I have to use concat to add my additional one.

# ? Dec 22, 2013 19:25

wwb: Aug 17, 2004

Our new front-end guy is looking to use CodeKit which is great and all but does it do anything you can't just about as easily do with grunt?

# ? Dec 29, 2013 18:08

Plorkyeran: Mar 22, 2007; To Escape The Shackles Of The Old Forums, We Must Reject The Tribal Negativity He Endorsed

No. It's just a GUI for all the same things that people usually use with grunt.

# ? Dec 29, 2013 18:18

Oh My Science: Dec 29, 2008

wwb posted:

Our new front-end guy is looking to use CodeKit which is great and all but does it do anything you can't just about as easily do with grunt?

http://yeoman.io/ is what I see most people use now. It combines grunt and bower.

I would say it depends on how you manage your projects and if he will be working with others. Grunt is great because once it's setup everyone can use the same configuration files and off you go without spending $30 a seat. However, it can take a new guy a few hours to get it setup the way he wants.

CodeKit is fun for front end developers because it's a visual representation of your projects. Unlike Grunt the GUI lists all of your active projects, what files are associated with them, and does exactly what your Front End guy wants. Plus you don't have to use the terminal, which is scary.

# ? Dec 29, 2013 20:18

wwb: Aug 17, 2004

Thanks for the info. How does codekit store it's "gruntfile" equivalent -- the main concern I've got is that we can't source control / recreate the environment when someone's mac dies. That and the whole part of the team not on macs.

# ? Dec 29, 2013 23:33

Oh My Science: Dec 29, 2008

wwb posted:

Thanks for the info. How does codekit store it's "gruntfile" equivalent -- the main concern I've got is that we can't source control / recreate the environment when someone's mac dies. That and the whole part of the team not on macs.

They use a json format, but as you pointed out there is no Windows or Linux option.

Version Control + Grunt would be my suggestion. Once you're all working off the same repository and the config files are set-up anyone can hop in and get started quickly.

# ? Dec 30, 2013 04:38

an skeleton: Apr 23, 2012; scowls @ u

I've scored a pretty awesome internship for a local company and started 2 days ago. We are working mainly with Angularjs which is talking to PHP on the backend. I have never really programmed in javascript before and so the past 2 days have been a lot of learning. Luckily, my coworkers are all really cool and helpful and are giving me time to learn this stuff. I was wondering if anyone in here had any advice for learning this stuff more quickly and getting as much out of this internship/impressing my coworkers as much as possible. I really like working with frontend stuff (almost all my previous programming was in C++) so far and could see myself making sexy stuff to interact with for some time into the future.

# ? Jan 8, 2014 11:36

mortarr: Apr 28, 2005; frozen meat at high speed

Not sure if this is the right thread for my question, but anyway...

I'm doing babby's first ember.js project, kind-of following this tutorial with an asp.net mvc web api back-end based on this, and ember/ember-data/handlebars up front.

All I've got so far is a list of users I want to put on the index page, and although ember seems to start OK and hit the url of my datasource, at some stage after that it bails with two errors: "No model was found for '0'" and "Error while loading route: TypeError: factory is undefined" in ember-data.js.

Googling doesn't give me much to go on, and stepping through ember-data.js is just painful - does anyone have any pointers to what I should be looking at?

I'm using Ember 1.3.0, Ember Data 1.0.0-beta.3, Handlebars 1.1.2 and jQuery 2.0.3.

# ? Jan 8, 2014 23:33

Sedro: Dec 31, 2008

Using ember.js, how can I render a template to a HTML string?

I'm integrating with a third-party component which sticks the HTML into a jQuery selector. In other words, I have control over the callback:

JavaScript code:

// third-party code
$( myCallback(modelObject) ).insertAfter( someElement );

This seems horribly wrong

JavaScript code:

myCallback: function(model) {
  var view = App.MyView.create();
  view.createElement();
  var element = view.get('element');
  return element.outerHTML;
}

# ? Jan 14, 2014 01:53

wwb: Aug 17, 2004

Oh My Science posted:

They use a json format, but as you pointed out there is no Windows or Linux option.

Version Control + Grunt would be my suggestion. Once you're all working off the same repository and the config files are set-up anyone can hop in and get started quickly.

Successfully sold the skinny jeans types that they didn't even need anything more than compass at the end of the day. W00t.

# ? Jan 14, 2014 15:22

excidium: Oct 24, 2004; Tambahawk Soars

Hopefully this is the right place to ask AngularJS + PhoneGap questions. I created a pretty basic app locally that works perfectly in the browser. When I go to emulate it though my routes all stop working. I get file:///(route-name) Page load failed with error: The requested URL was not found on this server. So I get that it's most likely a cross origin request issue, but I don't know how to get around it yet. I have approximately 20 some-odd routes and 20 directives that all use templateUrl files to load my page data. I'm stuck on what to do to get this working.

# ? Jan 30, 2014 04:46

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

excidium posted:

Hopefully this is the right place to ask AngularJS + PhoneGap questions. I created a pretty basic app locally that works perfectly in the browser. When I go to emulate it though my routes all stop working. I get file:///(route-name) Page load failed with error: The requested URL was not found on this server. So I get that it's most likely a cross origin request issue, but I don't know how to get around it yet. I have approximately 20 some-odd routes and 20 directives that all use templateUrl files to load my page data. I'm stuck on what to do to get this working.

Shouldn't you point phonegap to served content instead of a file? Then from there if you need to work offline add in Html5 offline caching of the static assets.

# ? Jan 30, 2014 05:12

excidium: Oct 24, 2004; Tambahawk Soars

Well, this was a totally offline app, so my first thought was that the files would just work similar to how they do locally (but I guess that's with a web-server). I could technically re-do the thing so that it's not doing any templateUrl requests, but it seemed like it should just work anyway. I'll look at the HTML5 caching though, see if that works for me.

# ? Jan 30, 2014 05:36

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

excidium posted:

Well, this was a totally offline app, so my first thought was that the files would just work similar to how they do locally (but I guess that's with a web-server). I could technically re-do the thing so that it's not doing any templateUrl requests, but it seemed like it should just work anyway. I'll look at the HTML5 caching though, see if that works for me.

The Templateurl calls are fine if you serve from an endpoint rather than try to run it as a local file. Just use the cache manifest to specify that the browser will persist all the relevant resources, including the template URL files.

# ? Jan 30, 2014 07:37

excidium: Oct 24, 2004; Tambahawk Soars

Maluco Marinero posted:

The Templateurl calls are fine if you serve from an endpoint rather than try to run it as a local file. Just use the cache manifest to specify that the browser will persist all the relevant resources, including the template URL files.

Is it not possible to download these files as part of the app package so that it doesn't have to access the internet at all? A pre-populated cache of sorts?

# ? Jan 30, 2014 16:08

glompix: Jan 19, 2004; propane grill-pilled

Speaking of the application cache, when you use that, does your application just give up on network calls altogether? That's what mine's doing. I haven't read anything to lead me to believe this is how it's supposed to work, so I think I'm doing something stupid or am misunderstanding something.

See screenshot below from my application. It will just not grab anything over the network. (Facebook login for example) Here's my appcache manifest.

Maybe I just need to read more. I've looked at everything I could find on MDN, HTML5Rocks, and appcachefacts.info.

# ? Jan 30, 2014 16:34

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

Have you read this?

# ? Jan 30, 2014 18:41

wwb: Aug 17, 2004

No, but it seems that ala is down . . .

# ? Jan 30, 2014 19:24

The March Hare: Oct 15, 2006; _{Je r�ve d'un}
Wayne's World 3; Buglord

wwb posted:

No, but it seems that ala is down . . .

They front-paged HN, seem to have recovered now though.

# ? Jan 30, 2014 20:17

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

excidium posted:

Is it not possible to download these files as part of the app package so that it doesn't have to access the internet at all? A pre-populated cache of sorts?

I'm unsure, this is where I leave off as I haven't got much experience with Phonegap itself. A preloaded appcache would be great if it's possible, otherwise a way for a phonegap to act as a local 'server' so were not trying to do direct file access which clamps down hard on browser permissions.

I'm assuming that you want to have an almost offline install right? Otherwise maybe there's a way to populate the appcache in the install process.

# ? Jan 30, 2014 21:13

excidium: Oct 24, 2004; Tambahawk Soars

Maluco Marinero posted:

I'm unsure, this is where I leave off as I haven't got much experience with Phonegap itself. A preloaded appcache would be great if it's possible, otherwise a way for a phonegap to act as a local 'server' so were not trying to do direct file access which clamps down hard on browser permissions.

I'm assuming that you want to have an almost offline install right? Otherwise maybe there's a way to populate the appcache in the install process.

Well the idea was that the app itself could be used offline and downloaded/installed in one go from either the iTunes or Google Play store. I didn't want to learn native code in 2 languages to code what was a pretty simple app so I thought HTML/JS would be a good alternative with PhoneGap covering the device specific stuff around my code. I'm thinking that it might just be better to change my template calls to template: '<html goes here>' and prevent the need for most/all of the templateUrl: calls that are causing the issues to begin with.

# ? Jan 30, 2014 21:42

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

excidium posted:

Well the idea was that the app itself could be used offline and downloaded/installed in one go from either the iTunes or Google Play store. I didn't want to learn native code in 2 languages to code what was a pretty simple app so I thought HTML/JS would be a good alternative with PhoneGap covering the device specific stuff around my code. I'm thinking that it might just be better to change my template calls to template: '<html goes here>' and prevent the need for most/all of the templateUrl: calls that are causing the issues to begin with.

If you can make that work, then go for it. I do believe Angular also has SCP (secure content policy) version that may help with getting it to work in this context. I know in using Angular for a Chrome Extension I needed to use secure content policy, maybe the rules apply in your sandboxed Phonegap environment too.

# ? Jan 30, 2014 23:22

an skeleton: Apr 23, 2012; scowls @ u

AngularJS question ahead:
I'm trying to turn off a save button based on one of the inputs inside of an ngGrid (populated dynamically based on data) being invalid. It may not be possible, but does anyone have any bright ideas?

# ? Jan 31, 2014 18:52

Pseudo-God: Mar 13, 2006; I just love oranges!

an skeleton posted:

AngularJS question ahead:
I'm trying to turn off a save button based on one of the inputs inside of an ngGrid (populated dynamically based on data) being invalid. It may not be possible, but does anyone have any bright ideas?

I did this at work a couple of days ago, but by using jQuery. You check the input each time, and if it fulfills certain conditions, you bind a click handler to your button like so:

code:

$("#mybutton").click(function(){
    $(this).preventDefault();
});

Once the conditions of the button press change, you will have to unbind and rebind another click handler on it. The reason why this has to be done is that in Javascript, when you bind a click handler to a DOM object, the bound state will persist even though the original conditions that caused the bind may no longer be valid.

# ? Jan 31, 2014 20:24

glompix: Jan 19, 2004; propane grill-pilled

an skeleton posted:

AngularJS question ahead:
I'm trying to turn off a save button based on one of the inputs inside of an ngGrid (populated dynamically based on data) being invalid. It may not be possible, but does anyone have any bright ideas?

Angular newbie here, but I do something like this in one of my apps. Here's what I do in my controller:

code:

$scope.canSave = function () { return $scope.c.data.name && $scope.c.json() !== $scope.localCharacterJson; };

And my view:

code:

<li><a ng-disabled="!canSave()" ng-click="save()">Save</a></li>

I'm simply checking the serialized state of $scope.c against a cache to see if anything new needs to be saved. My $scope.save() method can also check $scope.canSave and immediately return without doing work if it's not allowed.

It's not much different if you're simply validating. Just replace what's in canSave with your own validation logic. Of course, this assumes your textbox is ng-model-bound. Sounds like it should be.

glompix fucked around with this message at 20:41 on Jan 31, 2014

# ? Jan 31, 2014 20:33

an skeleton: Apr 23, 2012; scowls @ u

I may be misunderstanding the solutions offered, but I don't think either of those help me. I need to be able to disable a save button, without access to form names, or at least I am finding it very difficult to find the form names. I have an angular foreach() function going through each row, and I tried to check if the forms are valid by seeing if getElementsByClassName('ng-invalid') had an index of >-1, but I can't figure out how to find the element name to check for it. So I am thoroughly confused right now.

# ? Feb 3, 2014 17:42

glompix: Jan 19, 2004; propane grill-pilled

an skeleton posted:

I may be misunderstanding the solutions offered, but I don't think either of those help me. I need to be able to disable a save button, without access to form names, or at least I am finding it very difficult to find the form names. I have an angular foreach() function going through each row, and I tried to check if the forms are valid by seeing if getElementsByClassName('ng-invalid') had an index of >-1, but I can't figure out how to find the element name to check for it. So I am thoroughly confused right now.

Can you post some of your code? In my experience, Angular and other MV* frameworks are very good about making it so you don't have to reach into the DOM by hand to do stuff like that.

# ? Feb 3, 2014 18:13

an skeleton: Apr 23, 2012; scowls @ u

I have an ng-grid that has a variable amount of rows created when the page is loaded. The issue is that the grid seems to have an isolated scope, so it doesn't seem like the usual validation methods are workable. Which part of the code would you want to see?

# ? Feb 3, 2014 18:55

an skeleton: Apr 23, 2012; scowls @ u

There's also something popping up when I document.getElementsByClassName() called "ngPagerCurrent" and I can't tell if it is a part of ng-grid or some Angular remnant but if I could get rid of that then I could probably solve my problem. The problem is that "ngPagerCurrent" has the "ng-invalid" class and its screwing up the results of that function.

edit: I developed a workaround where it checks if "ngPagerCurrent" is one of the elements with ng-invalid as a class and if it is, it disregards that. So invalidCount increases if any other fields are invalid and, therefore, I should be able to disable the save button. Really kind of awkward but oh well.

an skeleton fucked around with this message at 19:31 on Feb 3, 2014

# ? Feb 3, 2014 19:23

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

an skeleton posted:

AngularJS question ahead:
I'm trying to turn off a save button based on one of the inputs inside of an ngGrid (populated dynamically based on data) being invalid. It may not be possible, but does anyone have any bright ideas?

What are you using to determine if it's valid or not? I'm assuming adding ng validations to the template? I don't see anything in the API that could be doing it otherwise.

Can you post the HTML and JS that are creating and populating this grid?

# ? Feb 3, 2014 23:08

Adbot: ADBOT LOVES YOU

# ? Apr 25, 2024 06:11

an skeleton: Apr 23, 2012; scowls @ u

EVGA Longoria posted:

What are you using to determine if it's valid or not? I'm assuming adding ng validations to the template? I don't see anything in the API that could be doing it otherwise.

Can you post the HTML and JS that are creating and populating this grid?

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

# ? Feb 4, 2014 06:19

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

«‹›234 »