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

Skiant: Mar 10, 2013

Jesus Christ, after digging for the first time in the underscore doc, I just realized that my whole team is currently working with a half-assed underscore written by one dude in the team.

The only thing I'm unsure about is the promises pattern.
He really fancies that a lot, and it looks like _.defer() is doing just that. Is that right?

# ¿ Sep 20, 2013 11:11

Adbot: ADBOT LOVES YOU

# ¿ Apr 23, 2024 20:12

Skiant: Mar 10, 2013

Wheany posted:

No. _.defer(someFunction) basically means window.setTimeout(someFunction, 0);

Indeed, so I guess these mixins would do the trick?

# ¿ Sep 20, 2013 11:25

Skiant: Mar 10, 2013

Knyteguy posted:

What would be better to (re) invest my time into learning? Angular or Ember? I was checking out Ember fairly heavily at one point but I haven't kept up in the past few months.

What's easier to learn, and has better docs, books, resources, and such? Is there any input on which may become the framework of choice down the road?

Also has anyone tried developing with either with a Microsoft stack like MVC and SQL Server?

Thanks.

Ember and Angular are not the same thing.
These slides explain it way better than I could.

# ¿ Dec 6, 2013 12:15

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

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

Skiant: Mar 10, 2013

Womens Jeans posted:

How do people feel about Dart? I've tried JS in the past and absolutely hated it. Dart + Polymer let me create a ridiculously nice website sending JSON objects to the backend with pretty much no hassle at all, and I feel as though it will be very easy to expand when the time comes.

Dart is pretty much JS for people coming from non-web background. Polymer is basically the webdev future available today. As long as you're not trying to force down Dart onto someone, I see no reasons why you should refrain from using it.

# ¿ Mar 31, 2014 23:15

Skiant: Mar 10, 2013

EVGA Longoria posted:

In before "don't you mean bonus?"

Though, to be honest, I think we are at a point where legacy browsers can be ignored for modern web apps. The auto update processes in every browser are a lot better, I don't see much old school usage.

Sadly most of our customers don't give two poo poo about tech and probably use old Dell laptops they bought in the 1990s and never updated anything.

# ¿ Jul 7, 2014 07:16

Skiant: Mar 10, 2013

fuf posted:

I've been using angular and ngRoute to make very basic static sites. Basically my only logic is a list of routes like:
code:
  .when('/about', { 
       templateUrl: 'templates/about.html'
   }
Basically doing the same thing I used to do with
code:
<?php include 'templates/about.php' ?> 
etc.

Is there another JS framework that is good for this kind of thing? Maybe a little more lightweight? I want to try something other than angular.

e: I guess backbone with LayoutManager?

e2: actually ember looks a lil easier

Ember is amazing if you can fit the use case they invented it for, but it's a death trap if you wanna do anything else.

# ¿ Sep 4, 2014 15:30

Skiant: Mar 10, 2013

Thermopyle posted:

I'm whipping together a Django backend that exposes a CRUD RESTful API that has about a dozen models with various relations. The backend serves no HTML at all.

I'm going to put together a web frontend and I'm looking to try some new JS libraries/framework. Just looking to expand my toolbelt and learn some new stuff or maybe become more familiar with things I've dabbled with before.

Any recommendations for anything you like for managing the backend and frontend objects and keeping them in sync?

IIRC you're already familiar with Angular, you might have missed Restangular that helps a ton when working with a RESTful API as the name suggests.
I've got no idea how far the Ember team went on Ember Data (the binding-to-server-data part) but it was clearly the biggest flaw I could find last november when we were investigating the whole Single-Page-Application thing.

# ¿ Sep 9, 2014 20:57

Skiant: Mar 10, 2013

SuicideSnowman posted:

What's the best way to handle a somewhat large AngularJS application? I'm talking 20-30 controllers and the various services that would be attached to them. Not all of them need to be loaded at the same time, so I've been using require.js to load additional files as needed but I keep reading that using require.js with Angular is not the best idea. I'm also not sure having an index page that loads dozens of js files is the best option either.

Get all your controllers and services in one single file, using automation tools like gulp-concat, gulp-ng-annotate and then gulp-uglify

# ¿ Oct 3, 2014 07:17

Skiant: Mar 10, 2013

SuicideSnowman posted:

Thanks for the advice. I've looked at this stuff in the past but it all seemed overwhelming so I never got far.

Been playing around with it for the last hour or so and can definitely see the benefits. This should really help me clean up my project.

Our current project has something like that.
It's probably not the best way to do it but it works so far.

code:

// Concatenate all application scripts
gulp.task('concatApp', function () {

	// remove old build
	gulp.src('www/scripts/build-*.js', {read: false})
		.pipe(gt.clean());

	gulp.src(appFiles)
		.pipe(gt.size())
		.pipe(gt.replace(/'use strict';/g, ''))
		.pipe(gt.concat('build-' + Date.now() + '.js'))
		.pipe(gt.header('\'use strict\';'))
		.pipe(gt.ngmin())
		.pipe(gt.uglify())
		.pipe(gt.size())
		.pipe(gulp.dest('www/scripts'));
});

PS: We're still using ngmin but we should move to ngannotate soon.

# ¿ Oct 3, 2014 10:50

Skiant: Mar 10, 2013

Lumpy posted:

I came across this during my morning coffee: https://medium.com/este-js-framework/whats-wrong-with-angular-js-97b0a787f903

I've only the barest experience with Angular, so I have no idea if the points are all valid, but I thought it might generate some discussion.

I don't know, most of his points are hugely open for debate.

For instance, you don't write logic in HTML, you write it in your services/controllers/directives.
Likewise, his point about dirty checking is completely defeated by the Object.observe() API, which will be baked in Angular 2.0 IIRC.

I mean sure, Angular have its pain points and weaknesses but the speed argument aside, this article doesn't cover any.
Basically, it sounds like someone who's in love with another lib/tech/stack who briefly tried Angular or read a random tutorial/the documentation and came up with a rebuttal.

# ¿ Oct 7, 2014 15:11

Skiant: Mar 10, 2013

Whalley posted:

I'm kind of a newbie developer, I've had at most a week's worth of experience with Angular and I already know there's issues with what he's said. Like, point number one is literally "wah wah I only like to code this way" and point four is... what? If you're making or changing a feature, you have to change the code? Then he starts complaining about dirty checking as if it wasn't already something that is being fixed. Hell, for low amounts of callbacks/low numbers, dirty checking seems way nicer than having to deal with accessors.

Also, people keep saying "no javascript" in reference to Angular, but the framework won't work without using javascript somewhere, and there's some really cool/useful things you can do through coding in Angular. Am I missing something?

The fact that Google doesn't seem to want to use its own framework in its flagship apps is problematic, but it's hardly a noose hanging around the framework's neck.

Actually they use Angular in production for the DoubleClick Campaign Manager.
It may be not as public-facing as Gmail but I don't think that Google consider its advertisement platform to be something of a side project.

# ¿ Oct 7, 2014 17:08

Skiant: Mar 10, 2013

Kobayashi posted:

Ember just announced its roadmap for v2.0. I love Ember, but I only write toy apps so I'm not really qualified to preach. Still, I like their "pave the cowpaths" approach to adding features. I also like how the tooling and documentation are integral parts of the development cycle, and their commitment to minimizing breaking changes. The TL;DR seems to be "aping cool features from React, avoiding the Angular 2.0 clusterfuck."

I think there's a lot of debate regarding the Angular 2.0 syntax presented at ng-europe, they might actually make it much less confusing and esoteric.

# ¿ Nov 4, 2014 08:24

Skiant: Mar 10, 2013

TildeATH posted:

Webdevs have been making a CLI cargo cult for a while now. Annoying how people who do UI/UX/HCI can't implement those principles in their own tools.

Yeah, and you hear quotes like Stephen Hay's "Learn to love the command line. It isn�t scary. You know how to use Photoshop which has 300 buttons. That�s scary." all the time.
What they fail to mention is that Photoshop makes discovering what those buttons do easy and painless (thanks to the undo).

Not to mention that most of that CLI Cult is pushing people to develop tools saying "unix only" and gently caress that poo poo.
The Internet hasn't been built to be "unix only".

# ¿ Feb 24, 2015 17:26

Skiant: Mar 10, 2013

quote:

We�ll continue building releases in the Angular 1 branch until the vast majority of folks have moved to Angular 2. We want the burden to be on the Angular team to make Angular 2 simple to learn, attractive in its features, and an easy target to migrate to from Angular 1.

Taken straight from the official announcement after NG-Conf.

# ¿ Mar 11, 2015 10:06

Skiant: Mar 10, 2013

I must be in full-blown Stockholm syndrome right now because I'm considering switching from JSHint to ESLint and I'm about to do that in the project's Gulpfile.

Related question: You guys think the ES6 modules could help us un-gently caress front-end dev a tiny bit? I'm on the fence about using that plus Babel or Traceur to make that poo poo slightly retro-compatible.

# ¿ Apr 8, 2015 07:14

Skiant: Mar 10, 2013

I work on Windows, mostly with Sublime Text + a git-bash window wrapped in Console, and I'm not really encountering any major issue.
I'm also trying out WebStorm at work right now and I have to admit I really like it. If my new work (I switch early may) doesn't have strong feelings about one or the other, I'll probably buy myself a licence.

# ¿ Apr 9, 2015 18:37

Skiant: Mar 10, 2013

Skandranon posted:

I had a lot of luck with NG-Book (Amazon or filez), it did a good job of explaining things and had good examples. The 1.x -> 2.0 route isn't as uncertain as it used to be, the Angular team recently announced there should be a smooth upgrade path, and they have definite plans up to 1.5, and probably more after that. Once you get how Angular wants you to structure your code, it makes a lot more sense and you feel like you aren't fumbling around so much. Directives are tough, but you get them eventually if you keep at it.

It helps a lot to be working on something larger than a ToDo list application, you get to flesh things out much more that way, but finding something like that can be tricky. Things with animation and lots of timers give you a good idea how the $digest loop works(and sometimes, doesn't).

Seconding ng-book, also check out this styleguide.

# ¿ Apr 20, 2015 22:43

Adbot: ADBOT LOVES YOU

# ¿ Apr 23, 2024 20:12

Skiant: Mar 10, 2013

mpaarating posted:

I also like the Todd Motto style guide.

John Papa and him are pals and each one have a link to the other's guide at the top of the page, I used John Papa's guide at my last job so I thought it would be enough to link his.
You're 100% right to also recommend Todd Motto's guide ofc.

If you want to be a pain in the rear end of your colleague who's writing code like there's no tomorrow, there's an ESLint plugin that checks for some of John Papa's rules.

# ¿ Apr 21, 2015 07:10

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

Wheany posted:

Knyteguy posted:

code:

code:

an skeleton posted:

Womens Jeans posted:

more like dICK posted:

EVGA Longoria posted:

fuf posted:

code:

code:

Thermopyle posted:

SuicideSnowman posted:

SuicideSnowman posted:

code:

Lumpy posted:

Whalley posted:

Kobayashi posted:

TildeATH posted:

more like dICK posted:

quote:

Skandranon posted:

mpaarating posted: