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

«‹›235 »

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

Gots a question for you nerds about building a pretty simple app and what you would recommend for it (frameworks or whatever).

Currently have a site with some lists of things to do in the city, like a itineraries and stuff. I can retrieve all these posts via a JSON API. What I would like to do now is build a simple app that just fetches data from this API and now its on your phone, ta-da. Not dependent on having internet and can just resync and update when you do.

I know 0 about any native app development, I do have a decent set of JS skills but little experience with anything like Angular, Backbone, etc. What do?

# ? Sep 26, 2014 01:53

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 08:16

Stoph: Mar 19, 2006; Give a hug - save a life.

streetlamp posted:

Gots a question for you nerds about building a pretty simple app and what you would recommend for it (frameworks or whatever).

Currently have a site with some lists of things to do in the city, like a itineraries and stuff. I can retrieve all these posts via a JSON API. What I would like to do now is build a simple app that just fetches data from this API and now its on your phone, ta-da. Not dependent on having internet and can just resync and update when you do.

I know 0 about any native app development, I do have a decent set of JS skills but little experience with anything like Angular, Backbone, etc. What do?

You can look at Titanium and Alloy application development. Great for quick throwaway or proof of concept apps. It uses JavaScript.

# ? Sep 26, 2014 02:12

SuicideSnowman: Jul 26, 2003

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.

# ? Oct 3, 2014 06:43

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

SuicideSnowman: Jul 26, 2003

Skiant posted:

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

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.

# ? Oct 3, 2014 09:48

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

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Why is Ember's API documentation so poo poo?

http://emberjs.com/api/classes/RSVP.html#method_all

quote:

This is a convenient alias for RSVP.Promise.all

gently caress you too.

This wouldn't be that bad it there was actual documentation for RSVP.Promise.all, but there isn't. Instead, if you look at http://emberjs.com/api/classes/RSVP.Promise.html, you may find the last code example before the method listing, titled "Unlike callbacks, promises are great composable primitives.", where the code example nonchalantly shows that the callback given to "then" function gets an array of values, and not for example the values themselves as arguments.

# ? Oct 3, 2014 14:55

Stoph: Mar 19, 2006; Give a hug - save a life.

Wheany posted:

This wouldn't be that bad it there was actual documentation for RSVP.Promise.all, but there isn't. Instead, if you look at http://emberjs.com/api/classes/RSVP.Promise.html, you may find the last code example before the method listing, titled "Unlike callbacks, promises are great composable primitives.", where the code example nonchalantly shows that the callback given to "then" function gets an array of values, and not for example the values themselves as arguments.

In their defense, promises are pretty much part of the language now. Some promise libraries have helpers to mitigate that issue, for example Bluebird has Promise.prototype.spread:

https://github.com/petkaantonov/bluebird/blob/master/API.md#spreadfunction-fulfilledhandler--function-rejectedhandler----promise

(promises can't resolve to more than 1 argument by default)

# ? Oct 3, 2014 15:28

Pollyanna: Mar 5, 2005; Milk's on them.

I'd love to learn a bit more about how front-end MVC frameworks work, but I have trouble learning the basics in a Javascript context. Is there some sort of MVC framework that uses similar concepts (like two-way binding, events, controllers, etc.) in a language like Ruby or Python? I'm just mentally allergic to Javascript.

# ? Oct 3, 2014 16:11

My Rhythmic Crotch: Jan 13, 2011

I was extremely allergic to Javascript at first. I did a bunch of jQuery stuff, and that sort of got me over the hump. Then when I started looking at MVC stuff, it was much easier.

Side note... I was digging through my bookmarks and realized I bookmarked Vanilla JS not knowing it was a joke.

# ? Oct 3, 2014 16:19

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

But isn't JavaScript the defining factor in what makes a front-end framework "front-end"?

# ? Oct 3, 2014 16:19

Pollyanna: Mar 5, 2005; Milk's on them.

Front-end, maybe. But I still don't quite get what all this poo poo does in a Backbone application, or why I need all of it:

JavaScript code:

/*global Backbone, jQuery, _, ENTER_KEY */
var app = app || {};

(function ($) {
	'use strict';

	// The Application
	// ---------------

	// Our overall **AppView** is the top-level piece of UI.
	app.AppView = Backbone.View.extend({

		// Instead of generating a new element, bind to the existing skeleton of
		// the App already present in the HTML.
		el: '#todoapp',

		// Our template for the line of statistics at the bottom of the app.
		statsTemplate: _.template($('#stats-template').html()),

		// Delegated events for creating new items, and clearing completed ones.
		events: {
			'keypress #new-todo': 'createOnEnter',
			'click #clear-completed': 'clearCompleted',
			'click #toggle-all': 'toggleAllComplete'
		},

		// At initialization we bind to the relevant events on the `Todos`
		// collection, when items are added or changed. Kick things off by
		// loading any preexisting todos that might be saved in *localStorage*.
		initialize: function () {
			this.allCheckbox = this.$('#toggle-all')[0];
			this.$input = this.$('#new-todo');
			this.$footer = this.$('#footer');
			this.$main = this.$('#main');
			this.$list = $('#todo-list');

			this.listenTo(app.todos, 'add', this.addOne);
			this.listenTo(app.todos, 'reset', this.addAll);
			this.listenTo(app.todos, 'change:completed', this.filterOne);
			this.listenTo(app.todos, 'filter', this.filterAll);
			this.listenTo(app.todos, 'all', this.render);

			// Suppresses 'add' events with {reset: true} and prevents the app view
			// from being re-rendered for every model. Only renders when the 'reset'
			// event is triggered at the end of the fetch.
			app.todos.fetch({reset: true});
		},

		// Re-rendering the App just means refreshing the statistics -- the rest
		// of the app doesn't change.
		render: function () {
			var completed = app.todos.completed().length;
			var remaining = app.todos.remaining().length;

			if (app.todos.length) {
				this.$main.show();
				this.$footer.show();

				this.$footer.html(this.statsTemplate({
					completed: completed,
					remaining: remaining
				}));

				this.$('#filters li a')
					.removeClass('selected')
					.filter('[href="#/' + (app.TodoFilter || '') + '"]')
					.addClass('selected');
			} else {
				this.$main.hide();
				this.$footer.hide();
			}

			this.allCheckbox.checked = !remaining;
		},

		// Add a single todo item to the list by creating a view for it, and
		// appending its element to the `<ul>`.
		addOne: function (todo) {
			var view = new app.TodoView({ model: todo });
			this.$list.append(view.render().el);
		},

		// Add all items in the **Todos** collection at once.
		addAll: function () {
			this.$list.html('');
			app.todos.each(this.addOne, this);
		},

		filterOne: function (todo) {
			todo.trigger('visible');
		},

		filterAll: function () {
			app.todos.each(this.filterOne, this);
		},

		// Generate the attributes for a new Todo item.
		newAttributes: function () {
			return {
				title: this.$input.val().trim(),
				order: app.todos.nextOrder(),
				completed: false
			};
		},

		// If you hit return in the main input field, create new **Todo** model,
		// persisting it to *localStorage*.
		createOnEnter: function (e) {
			if (e.which === ENTER_KEY && this.$input.val().trim()) {
				app.todos.create(this.newAttributes());
				this.$input.val('');
			}
		},

		// Clear all completed todo items, destroying their models.
		clearCompleted: function () {
			_.invoke(app.todos.completed(), 'destroy');
			return false;
		},

		toggleAllComplete: function () {
			var completed = this.allCheckbox.checked;

			app.todos.each(function (todo) {
				todo.save({
					completed: completed
				});
			});
		}
	});
})(jQuery);

# ? Oct 3, 2014 16:56

fuf: Sep 12, 2004; haha

Pollyanna posted:

I'd love to learn a bit more about how front-end MVC frameworks work, but I have trouble learning the basics in a Javascript context. Is there some sort of MVC framework that uses similar concepts (like two-way binding, events, controllers, etc.) in a language like Ruby or Python? I'm just mentally allergic to Javascript.

You're confused about something... Ruby and Python are server-side languages, so obviously there's no front-end (client-side) frameworks built with them. If you just mean MVC in general then there's Ruby on Rails and Django.

e:

Pollyanna posted:

But I still don't quite get what all this poo poo does in a Backbone application, or why I need all of it:

So you're asking how Backbone works?
http://backbonetutorials.com/

fuf fucked around with this message at 17:03 on Oct 3, 2014

# ? Oct 3, 2014 17:00

My Rhythmic Crotch: Jan 13, 2011

Pollyanna posted:

Front-end, maybe. But I still don't quite get what all this poo poo does in a Backbone application, or why I need all of it:

In a nutshell you want all of it because otherwise (if you were just using jQuery only) you'll have a tangled mess of event handlers and callbacks and crap.

Just try making the traditional "ToDo" application with jQuery only - it can absolutely be done - and you'll start to get the point of the MVC stuff. I did not get it at first either.

# ? Oct 3, 2014 17:30

glompix: Jan 19, 2004; propane grill-pilled

Skiant posted:

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

For my last project I just decided I want to do whatever angular-fullstack is doing. Still haven't learned how every little thing works but all the injection/bower-related work it does is priceless.

# ? Oct 3, 2014 21:12

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

Pollyanna posted:

Front-end, maybe. But I still don't quite get what all this poo poo does in a Backbone application, or why I need all of it:

<words>
A better way to think about these frameworks is not necessarily think about how they all work under the hood. They aren't created equal.

React has what is more or less a render pipeline that takes Javascript and transforms it into a DOM representation. Angular is a combination of a templating language, directives, controllers, and services, that forms a system for making changes to Javascript and having those changes propagate to the templating layer, and the directives support binding to propagate changes in the other direction.

There isn't necessarily a common thread in implementation here. What is common is that they have an opinionated, structured way to achieve a goal, which is a web application interface. The purpose of 'all this poo poo' is to provide you enough tools within the opinionated framework to build your web application in a way that is structured and maintainable. The issue with jQuery is that it's difficult to build a sane maintainable structure of abstraction on the fly, you'll gently caress it up and couple things too hard or make an incomprehensible mess.

Frameworks have the experience invested into a structure that is usable to create larger scale applications. That said, on the top of this, that sort of means you have to buy the opinion of whichever framework you use. Trying to build an app with the opinions of Ember within an Angular app is destined for failure just as much as your jQuery cobble together.

Learn deeper about whichever framework you hitch your wagon to, but trying to learn how they ALL work will have you pretty busy for marginal gain depending on what you then do with that knowledge. It's better to find a framework that speaks to you and allows you to get what you need done, build some stuff and learn it over the process. In some ways I think the more you need to know about the internals, the worse an abstraction that framework is. It's part of why I don't depend on Angular, it's scope digest system is total black box to me, and the process is way too complex for me to enjoy having to dive into, so when I have performance issues it can become very difficult (to me) to break them down in a way that preserves the abstractions Angular use, like templating, data-binding, and the scope.

In a way that's why I gravitate towards things like React because I'd rather have smaller libraries with reliable abstractions than bigger libraries/frameworks with blind spots. That said, that means you need to think a lot more about your tech and structure choices, rather than just taking what you're given by the mega framework. Angular solves that problem really well by the way, it just has more overhead than I feel is acceptable for web applications, especially in the context of mobile applications where there is significantly lower calculation ceiling, where all these event listeners and bindings and general calculation hits the limits real fast.

</words>

# ? Oct 3, 2014 21:42

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Stoph posted:

In their defense, promises are pretty much part of the language now. Some promise libraries have helpers to mitigate that issue, for example Bluebird has Promise.prototype.spread:

https://github.com/petkaantonov/bluebird/blob/master/API.md#spreadfunction-fulfilledhandler--function-rejectedhandler----promise

(promises can't resolve to more than 1 argument by default)

... Or, you could actually document what your API does.

Quick: If you define an attribute in you model in Ember data using DS.attr('number'), then do a get('your_attribute') and the value is not set? How do you test if a "not set" value was returned? Assume 0 is a valid value for your attribute. The API documentation mentions that "you can specify an optional type to have the value automatically transformed." Does that mean that if the value is undefined, it is automatically converted to NaN as Number(undefined) is NaN? Or maybe a zero since Number(null) is 0? Does it just return null or undefined as-is?

It uses Ember.isEmpty(value) ? null : Number(value), so it always returns null when the value is null, undefined, empty string or an empty array. Also I guess you should also test for NaN, since "qwerty" is "non-empty", but it converts into NaN

# ? Oct 3, 2014 22:46

SuicideSnowman: Jul 26, 2003

Skiant posted:

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

It can't be any worse than the way I was doing it before.

It took me a while but I've finally got everything setup nicely for development. I'm using gulp to watch all my html/js/css files so whenever there is a change to any of them it automatically runs the task for the respective file type. For html and css files it just copies them straight up. For js files, I'm using browserify to look at required modules/controllers/services, automatically merge them and copy the single .js file to my web server. I'm pretty much stuck using IIS because my back end uses .Net for various services and authentication purposes but it still works well because anytime I make I change I simply refresh the page and all the changes are instantly applied.

This is a hell of a lot more productive than before when I was constantly having to manually upload all files to the web server, making sure I didn't accidentally miss one because if I did it'd break. Now it's all done in the background and I can focus on just simply writing the application.

# ? Oct 4, 2014 01:49

Corla Plankun: May 8, 2007; improve the lives of everyone

Is there a name for the kind of dialog with two list boxes and an Add/Remove button in the middle?

The best example I can think of is Winamp's column headers dialog. The left list box has all of the possible headers and the right one is all the active headers.

To avoid the XY Problem: I'm trying to think of a way to easily select a lot (~50) of CSVs from a folder full of them, and then create some d3 graphics based on the selection. The dialog I'm thinking of seems like the easiest way to do that but maybe I am missing something obvious.

# ? Oct 4, 2014 19:49

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

Corla Plankun posted:

Is there a name for the kind of dialog with two list boxes and an Add/Remove button in the middle?

The best example I can think of is Winamp's column headers dialog. The left list box has all of the possible headers and the right one is all the active headers.

To avoid the XY Problem: I'm trying to think of a way to easily select a lot (~50) of CSVs from a folder full of them, and then create some d3 graphics based on the selection. The dialog I'm thinking of seems like the easiest way to do that but maybe I am missing something obvious.

A filtered multiple select or multiple select list box seems to bring up results. Django admin has a good one but stand-alone I only found http://loudev.com so far...

# ? Oct 4, 2014 20:52

Pollyanna: Mar 5, 2005; Milk's on them.

I think my question is more on understanding and implementing a more general model-view-controller setup. Like, make a simple one from scratch in Ruby or Python to understand why the gently caress we'd want to do it and what the important bits are. I know that frameworks differ, but there has to be some sort of commonality, right?

# ? Oct 5, 2014 01:14

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Corla Plankun posted:

Is there a name for the kind of dialog with two list boxes and an Add/Remove button in the middle?

The best example I can think of is Winamp's column headers dialog. The left list box has all of the possible headers and the right one is all the active headers.

To avoid the XY Problem: I'm trying to think of a way to easily select a lot (~50) of CSVs from a folder full of them, and then create some d3 graphics based on the selection. The dialog I'm thinking of seems like the easiest way to do that but maybe I am missing something obvious.

I had to do a number of these types of things lately and I found selectize.js produced a really nice interface with minimal pain. It manifests as a drop-down list with typeahead option filtering.

For example, selecting alaska and new york from a list of states comes down to:

type ala, hit enter
type new, hit down twice (past hampshire and jersey), hit enter

# ? Oct 5, 2014 01:31

My Rhythmic Crotch: Jan 13, 2011

Pollyanna posted:

I think my question is more on understanding and implementing a more general model-view-controller setup. Like, make a simple one from scratch in Ruby or Python to understand why the gently caress we'd want to do it and what the important bits are. I know that frameworks differ, but there has to be some sort of commonality, right?

http://lmgtfy.com/?q=python+model+view+controller

The commonality is that they are written in Javascript? :v:

I give up

edit: I'll try not to be a dick for a second. MVC is just a concept, and so it could be implemented in any language where you have GUI capabilities. If the specifics of a certain framework seem odd then I can offer 3 suggestions: look at another framework, look at the source code to that framework, or try to implement whatever it is you want to do without a framework at all and see what happens (you might be surprised how easy it is to live without it).

My Rhythmic Crotch fucked around with this message at 01:38 on Oct 5, 2014

# ? Oct 5, 2014 01:33

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

My Rhythmic Crotch posted:

http://lmgtfy.com/?q=python+model+view+controller

The commonality is that they are written in Javascript? I give up

edit: I'll try not to be a dick for a second. MVC is just a concept, and so it could be implemented in any language where you have GUI capabilities. If the specifics of a certain framework seem odd then I can offer 3 suggestions: look at another framework, look at the source code to that framework, or try to implement whatever it is you want to do without a framework at all and see what happens (you might be surprised how easy it is to live without it).

Related, but here are a poo poo ton of ways to do it in JS and things that compile to JS: http://todomvc.com

# ? Oct 5, 2014 01:53

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Pollyanna posted:

I think my question is more on understanding and implementing a more general model-view-controller setup. Like, make a simple one from scratch in Ruby or Python to understand why the gently caress we'd want to do it and what the important bits are. I know that frameworks differ, but there has to be some sort of commonality, right?

I think your problem, and I can only guess since I think I'm only half a step ahead of you, is that it really is difficult to appreciate what's provided by these frameworks until you've had personal experience with the problems that they aim to address. You've got some skills and knowledge, but you haven't been part of any efforts to construct anything complicated enough that it would benefit from a framework.

You need to start building something from scratch and not stop until it starts collapsing under its own weight. You'll know that your project is collapsing under its own weight when adding a new feature becomes less about programming the requirements of the feature itself, and more about integrating it with the rest of the system in a non-breaking way.

I think that you had posted a little app for tracking job applications - is that right? That's suitable. I think I also saw a decent little html resume that you posted? Add a resume compiler to the job app tracker - let users add resume entries (schools, jobs, volunteer experience, etc) and then let them configure and 'compile' a resume for a particular job by going through a form with checkboxes, etc. Have it attach a copy of the application resume to each job applied for. Let users check off whether they got a call-back from an application, and make the app spit statistics at the users that order their resume components in terms of effectiveness at producing call-backs. Etc, etc. Just build and build until all of the moving parts get gummed up and in each others' way. It won't take as long as you imagine

Newf fucked around with this message at 02:29 on Oct 5, 2014

# ? Oct 5, 2014 02:25

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Pollyanna posted:

I think my question is more on understanding and implementing a more general model-view-controller setup. Like, make a simple one from scratch in Ruby or Python to understand why the gently caress we'd want to do it and what the important bits are. I know that frameworks differ, but there has to be some sort of commonality, right?

This isn't what you want to do. What you want to do to really understand what I think you're wanting to understand is (as Newf mentioned) develop a complex-ish project from scratch without using a MVC framework.

# ? Oct 5, 2014 02:37

Analytic Engine: May 18, 2009; not the analytical engine

I'm having trouble supporting the SVG foreignObject element across multiple browsers and I'd appreciate the hell out of some advice.

My captions are divs containing h2 and p tags while the nodes they're attached to are SVG g elements.

As you can see this works great on Chrome, but there's awful tearing in Safari and missing stuff in Firefox.

# ? Oct 6, 2014 02:57

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

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.

# ? Oct 7, 2014 14:52

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

Wungus: Mar 5, 2004

Skiant posted:

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

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.

# ? Oct 7, 2014 16:33

aBagorn: Aug 26, 2004

Whalley posted:

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.

Microsoft doesn't code any of its flagship apps (Windows, Office) in C# or VB.

By his logic "pee pee doo doo they are bad languages."

# ? Oct 7, 2014 17:07

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

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

He's a framework developer with an axe to grind and hits to pull in. I actually agree that for a lot of apps Angular is unsuited, slow, and is bloated with too many features that add unnecessary complexity...

But it's all argued from the point of view that his framework is the true way of doing things, so honestly I start to tune out there.

Angular IS good for beginners despite what I said because you can to some basic functionality without being an experienced developer. Angular has most of your fundamental architectural decisions made so you just follow that and you're good to go.

I sort of hate that so many articles are just thinly veiled plugs for their own 'brand' that run out linkbait, I hate seeing them on sidebar.io too cause it just wastes peoples time on promotion pieces.

# ? Oct 7, 2014 17:55

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

"Daniel Dennett posted:

There's nothing I like less than bad arguments for a view that I hold dear.

# ? Oct 7, 2014 18:09

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

AngularJS question.

I'm currently reverse engineering/hacking someone else's AngularJS app and while I don't have specific experience of Angular, I have looked at other MV* frameworks before so for the most part I can figure out what's going on.

What's stumped me is the following: There is a template that outputs an image in a div (the image path is in a config object) with the following code

code:

<div id="gallery" data-ng-show="location.type === 'gallery'">
    <img data-ng-src="{{ image }}" data-ng-repeat="image in location.images"/>
</div>

The problem is the images I'm using don't always fit in the parent div so I get letterboxing. I want to use the image as a background image on the parent #gallery div so I can use background-size: cover but I can't work out how to do it. I tried adding

code:

style="background-image: url('{{ image }}')"

but that didn't work.

EDIT: Actually, this wouldn't allow you to scroll the image, would it? I'd like to resize the image with JS as an alternative, thing is I don't know where to add my code because Angular doesnt seem to load the image in until you get to that page. Where do I need to add JS to run after a particular page/controller/whatever has loaded?

nexus6 fucked around with this message at 12:37 on Oct 9, 2014

# ? Oct 9, 2014 12:26

Wungus: Mar 5, 2004

I've got something similar on a page I'm working on right now - here's my code, just so you can compare.

code:

<div class="column" ng-controller="visualSchool as school">
	<div class="links"  
		ng-repeat="instance in school.instances"
		style="background: url({{instance.imageUrl}}) no-repeat;'">
			<a id="visual_school" ng-href="{{instance.pageUrl}}" >
				<div class="link_overlay"> <p>{{instance.title}}</p> </div>
			</a>
	</div>
</div> <!-- end left column -->

On my page, it's styling just fine - I've got ".links: background-size: cover" and all the various extra -webkit poo poo in my CSS and everything. Maybe there's something wrong with their controller?

My issue is that before I rearranged this page for Angular, that visual_school link was working just fine with Colorbox. Now, do what I can, I can't get Colorbox to open up an iframe. It's just loading up the link in a new page. I'm kind of uncomfortable with writing angular directives... does anyone have any clue why Colorbox has poo poo the bed?

Wungus fucked around with this message at 22:09 on Oct 10, 2014

# ? Oct 10, 2014 19:22

Spraynard Kruger: May 8, 2007

nexus6 posted:

AngularJS question.

I'm currently reverse engineering/hacking someone else's AngularJS app and while I don't have specific experience of Angular, I have looked at other MV* frameworks before so for the most part I can figure out what's going on.

What's stumped me is the following: There is a template that outputs an image in a div (the image path is in a config object) with the following code
code:
<div id="gallery" data-ng-show="location.type === 'gallery'">
    <img data-ng-src="{{ image }}" data-ng-repeat="image in location.images"/>
</div>
The problem is the images I'm using don't always fit in the parent div so I get letterboxing. I want to use the image as a background image on the parent #gallery div so I can use background-size: cover but I can't work out how to do it. I tried adding
code:
style="background-image: url('{{ image }}')"
but that didn't work.

EDIT: Actually, this wouldn't allow you to scroll the image, would it? I'd like to resize the image with JS as an alternative, thing is I don't know where to add my code because Angular doesnt seem to load the image in until you get to that page. Where do I need to add JS to run after a particular page/controller/whatever has loaded?

You might just be missing some other CSS properties, maybe height and width? Here's a Plunker: http://embed.plnkr.co/agnZ9yhMbK3h8bDK2aQp/preview

# ? Oct 16, 2014 04:40

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

What is the state of the art with asynchronous script loading/dependency resolution? I tried $script.js but turns out it's too simple for us. I'm not sure if I want to go all the way and start using modules, especially since I don't think all our libraries even support that.

I'm currently looking at LABjs, which hasn't updated in years (because it's stable and "done", apparently).

I "just" want to give a list of files to load, that are loaded as asynchronously as possible, but also say that "file_a.js must be run before file_b.js because file_b.js depends on file_a.js" (apparently this is easier said than done).

Some of the files are external libraries, like Ember, jQuery and Moment, so I can't easily wrap them into callbacks. Or I could, but it would be a maintenance nightmare.

So I need to be able to say "load jQuery before Ember. Then when both are ready, run app.js", except many more levels because our models and controllers are in separate files.

# ? Oct 17, 2014 16:49

sim: Sep 24, 2003

I've used http://requirejs.org but from what I've read it's not all that different than LABjs. All JS script loaders are basically the same. You don't have to turn everything into a module, just everything that you want to keep in a separate file. RequireJS provides a shim config option for fixing any libraries that aren't setup as modules. To do what you want to do, basically create a script that defines all your dependencies:

code:

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        }
    }
});

https://github.com/requirejs/example-multipage-shim/blob/master/www/js/common.js

Then wrap your main JS in a require call that loads in 'backbone' (or 'ember'), 'jquery', etc. and RequireJS will handle loading them all in the right order.

# ? Oct 17, 2014 17:53

Adbot: ADBOT LOVES YOU

# ? Jun 1, 2024 08:16

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

sim posted:

http://requirejs.org

Maybe I'll try that, at least I've heard of it before.

# ? Oct 17, 2014 19:20

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

«‹›235 »