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 »

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Apologies if this had been covered. One of or devs wants to use AngularJS for or ecommerce site. Watching the egghead.io videos it seems AngularJS (and the other frameworks in this thread) are meant for generating, then manipulating, content.
Isn't that terrible for SEO since I think bots don't run JavaScript?

# ? Dec 1, 2013 20:38

Adbot: ADBOT LOVES YOU

# ? Apr 19, 2024 12:04

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

The Merkinman posted:

Apologies if this had been covered. One of or devs wants to use AngularJS for or ecommerce site. Watching the egghead.io videos it seems AngularJS (and the other frameworks in this thread) are meant for generating, then manipulating, content.
Isn't that terrible for SEO since I think bots don't run JavaScript?

http://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications

Does that help?

# ? Dec 1, 2013 20:40

Adahn the nameless: Jul 12, 2006

Cryolite posted:

I've heard of Durandal but it seems to be a for-profit venture by the people developing it which makes me a little uncomfortable. If they close up shop I think I'd be left with a dead framework especially since it seems to have little uptake so far. Angular's taken off enough that even if Google stopped official support I bet it would survive. Another group at my company actually looked into using Durandal but abandoned it in favor of Angular.

The number of jobs referencing Angular vs. Durandal on indeed.com is also a factor...

Yeah, there's no doubt that Angular is king of the mountain in terms of front-end frameworks. Community adoption, tons of extensions, widget libraries, etc. I was throwing Durandal out there as an option if you have enough of an investment in Knockout that the switching cost would be prohibitive for whatever reason (other developers, existing application very heavily based in knockout). Certainly if I was going to recommend a new spa framework it would be Angular.

# ? Dec 1, 2013 22:49

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

I've used backbone.js a bit (mostly with marionette). What does AngularJS get me that I don't get with backbone + marionette?

# ? Dec 2, 2013 04:00

rotor: Jun 11, 2001; classic case of pineapple derangement syndrome

The Merkinman posted:

Apologies if this had been covered. One of or devs wants to use AngularJS for or ecommerce site. Watching the egghead.io videos it seems AngularJS (and the other frameworks in this thread) are meant for generating, then manipulating, content.
Isn't that terrible for SEO since I think bots don't run JavaScript?

we do server-side rendering and generally the whole thing is way more of a pain in the rear end than you'd think it is.

# ? Dec 2, 2013 05:48

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

There are a few services that will handle your angular/ember/whatever poo poo for SEO but you could also just use server-side frameworks sooooo

unless your use case requires offline capabilities, I guess.

# ? Dec 2, 2013 06:57

abraham linksys: Sep 6, 2010

For as much fun as we like to make of Jeff Fatwood on these forums, the solution Discourse (Ember.js-based) takes seems to work: it uses duplicated, unstyled markup in a noscript tag. Check out the source here for an example. From what I've heard, it took them like an extra day to implement the server-side templates, though YMMV.

# ? Dec 2, 2013 07:12

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

abraham linksys posted:

Check out the source here for an example.

Huh??

# ? Dec 2, 2013 07:15

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

As an aside, although I haven't ye tried it one of the cool parts about ReactJS's approach to component rendering is that it can (according to their brief experiments with Node) generate perfectly suitable server side markup through its rendering of components, as long as its fed the right data. So much so that a potential suggested use is to render the page server side so the DOM has been pregenerated, and then by the time the JavaScript loads client side all it would need to do is attach the appropriate handlers as per the component set, giving super fast setup times.

# ? Dec 2, 2013 07:36

abraham linksys: Sep 6, 2010

Suspicious Dish posted:

Huh??

Sorry, should have been more clear - literally right click -> view source on that page and ctrl-f for "noscript" :v:

That's all you need your server to output. In fact, even that has been optimized somewhat to be actually an actual usable page without JS; if all you need is friendly scraping you can get away with less.

# ? Dec 2, 2013 07:39

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

What experience have you guys had with Knockout.js? Is it like a replacement for Angular or something, or is it totally different from that?

# ? Dec 4, 2013 18:48

ManoliIsFat: Oct 4, 2002

Pollyanna posted:

What experience have you guys had with Knockout.js? Is it like a replacement for Angular or something, or is it totally different from that?

It's way more low level, really it's whole purpose is the model binding. I love it, but it's very bare bones. Before, for a task like this, you'd have jquery all over the place, updating the UI when a value changes. With knockout, you just change a property on your JS object, and the changes ripple throughout your bindings.

I mean, just look at the documentation (http://knockoutjs.com/documentation/introduction.html), that's really about all you can do with it. Bind to HTML properties, bind to click events and some control logic (if, foreach). The live examples really make it click, what you do with it after that is up to you.

# ? Dec 4, 2013 19:08

wwb: Aug 17, 2004

If you are coming from WPF or Silverlight than Knockout is awesome -- it is designed to support the MVVM pattern. I've done some stuff with knockout and I'm building something in angular and I don't think I'd touch knockout again given the option, angular feels alot better for the web in alot of ways.

# ? Dec 4, 2013 19:37

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

Hummm. I think I brought this up before in the web dev thread, but I was looking to recreate this in HTML/tables format, and figured that a JS framework would work best for it. Would Angular or Knockout be better for this?

# ? Dec 4, 2013 19:49

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

Pollyanna posted:

Hummm. I think I brought this up before in the web dev thread, but I was looking to recreate this in HTML/tables format, and figured that a JS framework would work best for it. Would Angular or Knockout be better for this?

Knockout isn't a framework, it's a library that binds the resulting html to the current state of your application. So if you want to write a program in javascript, and not worry about manually rendering stuff to the screen, use knockout.

# ? Dec 4, 2013 19:54

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

A MIRACLE posted:

Knockout isn't a framework, it's a library that binds the resulting html to the current state of your application. So if you want to write a program in javascript, and not worry about manually rendering stuff to the screen, use knockout.

Whoops I got that wrong then. What I was thinking of was some sort of tool that's basically a text field, then a list of text fields with an associated integer, then a table of variable rows, then a radio button or something. Would it make sense to try and MVC that or is that better done through plain HTML?

# ? Dec 4, 2013 19:58

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

Pollyanna posted:

Would it make sense to try and MVC that or is that better done through plain HTML?

You're confused.

But anyway, Angular will do what you need, easily. I don't know if it's the best tool for the job, but for such a very simple project I doubt you're going to see much difference between any of the tools as far as the complexity of implementation goes.

# ? Dec 4, 2013 20:03

A MIRACLE: Sep 17, 2007; All right. It's Saturday night; I have no date, a two-liter bottle of Shasta and my all-Rush mix-tape... Let's rock.

You can totally use knockout for this if you're intending to save the data somewhere (serverside? locally?). Represent the form data as json objects, then bind them to the view. After the user submits the form, all you need to do is post the json to your server and you can save the model that way. Will save you a lot of headaches from trying to `var selection = $("#myForm input[type=radio]").val();` all over the place.

# ? Dec 4, 2013 20:05

jony neuemonic: Nov 13, 2009

Pollyanna posted:

Whoops I got that wrong then. What I was thinking of was some sort of tool that's basically a text field, then a list of text fields with an associated integer, then a table of variable rows, then a radio button or something. Would it make sense to try and MVC that or is that better done through plain HTML?

You're bringing a machine gun to a knife fight. You don't need to apply a design pattern or bring in a JS framework to make an HTML form.

# ? Dec 4, 2013 20:05

NovemberMike: Dec 28, 2008

Pollyanna posted:

Whoops I got that wrong then. What I was thinking of was some sort of tool that's basically a text field, then a list of text fields with an associated integer, then a table of variable rows, then a radio button or something. Would it make sense to try and MVC that or is that better done through plain HTML?

No offense, but I've seen a few posts from you recently that seem to have a similar theme. You're learning how to program (I think) and you see cool poo poo that you want to try, but you haven't done the basics so you don't understand what the cool poo poo is actually trying to fix. If I'm right I'd recommend just sticking to raw html, javascript and whatever server language you know for and just get something done. I'm not trying to make you feel bad but you obviously don't understand the "why" behind a lot of the stuff you're talking about.

# ? Dec 4, 2013 20:31

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

Orrrr, just go ahead and make a crazy form using angularjs. Are you being paid for this? If not, go nuts, see what works, what doesn't and experience first hand why.

At least you're not going the usual route of "guys I just learned to program but I think I want to make my own compiler/framework/operating system" (which is also a fine way of learning stuff the hard way).

# ? Dec 4, 2013 20:39

NovemberMike: Dec 28, 2008

If it works it works, but one of the issues is that a lot of these frameworks add a little bit of complexity in order to do something that's beneficial in a production environment, but if you're just building simple examples you don't need to worry about MVC or writing clean code or whatever, you just hack away at a small problem until you start to get it. It makes more sense if you're building something to keep on using but if you're just learning then hack away at it.

# ? Dec 4, 2013 20:54

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

Eh - I do think complexity overhead really is one of those things that is somewhat hard to explain/internalize until it's caused you personal pain.

Also, many forms actually hide quite a bit of irreducible complexity behind them - interdependent fields and validation rules and all that. It's not a bad candidate for a data-binding MVC-esque solution IMO.

# ? Dec 5, 2013 00:20

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

Well, okay. Here's the implementation I was thinking of: There's a text field with the "upsetting event", then a list of smaller text fields with associated 0-100 numbers, then a table with three column and variable rows, and I'm imagining a button that lets you add more rows as you need them. Then there's a radio button 'do you feel better' prompt and then you can like hit submit or something to record your log to a database/JSON thingy.

That's why I wanted some sorta framework. Does that explain the reasoning a bit better? I looked at Knockout cause the tutorials were all about form submission and dynamic tables 'n poo poo so I thought it was a good place to start.

# ? Dec 5, 2013 01:45

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

Pollyanna posted:

Well, okay. Here's the implementation I was thinking of: There's a text field with the "upsetting event", then a list of smaller text fields with associated 0-100 numbers, then a table with three column and variable rows, and I'm imagining a button that lets you add more rows as you need them. Then there's a radio button 'do you feel better' prompt and then you can like hit submit or something to record your log to a database/JSON thingy.

That's why I wanted some sorta framework. Does that explain the reasoning a bit better? I looked at Knockout cause the tutorials were all about form submission and dynamic tables 'n poo poo so I thought it was a good place to start.

Having said all that stuff I said above, I do think that either way you are worrying far too much about picking the best sword to kill a mosquito with. Pick whatever looks cool (knockout is fine) and do it. What you want can be done in any framework or not using frameworks at all.

# ? Dec 5, 2013 01:57

Oh My Science: Dec 29, 2008

Do it in every framework you find interesting and then compare results. You'll learn a lot and be able to come back to this thread and tell people exactly why x framework was best for the job.

# ? Dec 5, 2013 02:06

Xesis: Jul 11, 2002

A framework is still way overkill for that. You're better off just using jQuery for this since any issues you run into can be easily googled. The whole point of a proper framework, even in other languages, is to help make complex applications modular with design practices that go far beyond the scope of your project. If your project involved multiple 'pages' with a lot of dynamic client side interaction as well as server side data interaction (not just one form's data) then it'd be worth learning a Javascript framework to see how it all fits together.

# ? Dec 5, 2013 02:19

Jimlit: Jun 30, 2005

nevermind.

# ? Dec 5, 2013 03:25

Jimlit: Jun 30, 2005

Sorry for the double post, but I'm having issues setting something up with Angular's $http features.

So what i'm trying to do is pass form values on the page to a .json document on the server. Not that it needs to be said, but I'm extremely green with angular.

The code I'm working with:

HTML

code:

<body ng-controller="testCtrl">

<form>
<div><input name="name1" ng-model="testdata.0.name" ><span>{{testdata.0.name}} </span><br></div>
<div><input name="name2" ng-model="testdata.1.name" ><span>{{testdata.1.name}} </span><br></div>
<div><input name="name3" ng-model="testdata.2.name" ><span>{{testdata.2.name}} </span><br></div>
<div><input name="name4" ng-model="testdata.3.name" ><span>{{testdata.3.name}} </span><br></div>

<button ng-click="save()" >Submit</button>
<br>
<p>{{msg}}</p>
</form>

JSON

code:

[
		{"name": "bob"},
		{"name": "cindy"},
		{"name": "frank"},
		{"name": "linda"}

]

Controller

code:

var testApp = angular.module('testApp', []);

testApp.controller('testCtrl', function($scope, $http){
	$http.get('/springboard/testing/data.json').success(function(data) {
		$scope.testdata = data;
	});   
	
	$scope.orderProp = 'name';

	$scope.save = function() {
		$http.post('/springboard/testing/data.json', $scope.testdata).then(function(data) {
		$scope.msg = 'Data saved';
    });
	};
	
});

The idea was to take the form values from the html and update the .json document on the server. Right now it is pulling from the document successfully but the ".post" function is not writing the values back to the document. I'm a bit over my head and fairly certain i'm missing a few (or a lot) of vital steps.

What is the issue here?

# ? Dec 5, 2013 21:16

etcetera08: Sep 11, 2008

wretched_gavek posted:

The idea was to take the form values from the html and update the .json document on the server. Right now it is pulling from the document successfully but the ".post" function is not writing the values back to the document. I'm a bit over my head and fairly certain i'm missing a few (or a lot) of vital steps.

What is the issue here?

A POST isn't equivalent to a "save" to a document. See: http://en.wikipedia.org/wiki/POST_(HTTP)

# ? Dec 5, 2013 22:03

Knyteguy: Jul 6, 2005; YES to love
NO to shirts; Toilet Rascal

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.

# ? Dec 6, 2013 01:08

wwb: Aug 17, 2004

Never spent any time with ember so I can't speak to that but angular has been picked up pretty heavily by the .NET community so there is a bit more tooling support -- IE the semi-official Web Essentials pack features pretty significant angular support baked in, etc. Neither of them should come near SQL, you probably want to be projecting out and spitting json down the wire in either case.

# ? Dec 6, 2013 03:42

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

wretched_gavek posted:

The idea was to take the form values from the html and update the .json document on the server. Right now it is pulling from the document successfully but the ".post" function is not writing the values back to the document. I'm a bit over my head and fairly certain i'm missing a few (or a lot) of vital steps.

What is the issue here?

Forgive me if this is too elementary, but you need a server-side language like PHP to process your form submission. You can't just post data to a file and expect the file contents to change.

# ? Dec 6, 2013 09:01

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

Opulent Ceremony: Feb 22, 2012

Knyteguy posted:

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

I'm using Angular and ASP.NET Web API + SQL Server for a project right now and I like it a whole bunch.

# ? Dec 6, 2013 17:03

Jimlit: Jun 30, 2005

Stoph posted:

Forgive me if this is too elementary, but you need a server-side language like PHP to process your form submission. You can't just post data to a file and expect the file contents to change.

No its not too elementary, it's a huge help. I'm just cutting my teeth on all of this, and that's basically the answer I was looking for.

# ? Dec 6, 2013 17:09

Opulent Ceremony: Feb 22, 2012

wretched_gavek posted:

<div><input name="name1" ng-model="testdata.0.name" ><span>{{testdata.0.name}} </span><br></div>
<div><input name="name2" ng-model="testdata.1.name" ><span>{{testdata.1.name}} </span><br></div>
<div><input name="name3" ng-model="testdata.2.name" ><span>{{testdata.2.name}} </span><br></div>
<div><input name="name4" ng-model="testdata.3.name" ><span>{{testdata.3.name}} </span><br></div>

What other people said is way important but I don't think those bindings are going to link to testdata in your controller since the .json file looks like it will return an array. ng-model="testdata.0.name" should be ng-model="testdata[0].name", etc.

# ? Dec 6, 2013 18:44

Jimlit: Jun 30, 2005

Opulent Ceremony posted:

What other people said is way important but I don't think those bindings are going to link to testdata in your controller since the .json file looks like it will return an array. ng-model="testdata.0.name" should be ng-model="testdata[0].name", etc.

They were working fine but the php code I wrote returned it as a one line IE:

code:

[{"name1":"greg","name2":"gill","name3":"franklin","name4":"bob"}]

So this was really helpful.

I finally got it all to work as intended with this php script in case anyone had similar questions:

code:

<?php 

$name1 = $_REQUEST['name1'] ;
$name2 = $_REQUEST['name2'] ;
$name3 = $_REQUEST['name3'] ;
$name4 = $_REQUEST['name4'] ;

$jsonString = file_get_contents('/home4/arcdaddy/public_html/springboard/testing/data.json');
$data = json_decode($jsonString);

$data = array(
			array(
			"name1" => $name1,
			"name2" => $name2,
			"name3" => $name3, 
			"name4" => $name4 
			)
		);

$newJsonString = json_encode($data);
file_put_contents('/home4/arcdaddy/public_html/springboard/testing/data.json', $newJsonString);

?>

Thank you all for your help

Jimlit fucked around with this message at 19:40 on Dec 6, 2013

# ? Dec 6, 2013 19:37

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

Skiant posted:

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

This is why I started learning Backbone the other day.

# ? Dec 7, 2013 03:48

Adbot: ADBOT LOVES YOU

# ? Apr 19, 2024 12:04

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

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.

Both provide the same tools you'd need for building complex front-end applications (data-binding, routing, templates, components). Both do a form of MVC. The major difference is Ember is highly opinionated and takes a bit longer to get started with (conventions, API), with the payoff being following the Ember way you'll have a well-structured application that's going to be more maintainable, etc..

If I were starting today, I'd pick Angular. The adoption rate is higher, it's easier to get started with and you have more flexibility in structuring your application (flipside, you may structure it wrong). Also some concepts translate well if you have experience working in the back-end, like dependency injection and services.

There's been a push lately to get more Angular best practices out since every project you see posted does it wrong so read those if you pick Angular.

# ? Dec 7, 2013 16:50

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

«‹›234 »