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 »

HaB: Jan 5, 2001; What are the odds?

my bony fealty posted:

I've been asked by a coworker to take a look at an online application form our clients use that is rather user unfriendly and apparently has a high rate of abandonment before completion. It's written in vanilla JS and is spread across several pages. He wants me to mock up a more modern version that's easier to use and fully responsive. I was going to just make something simple with JS and a better design, but I want to try using one of the more modern frameworks. Since I'm doing this as a favor and not writing anything that will actually be deployed to the wild, I'm not worried about having production-quality code in the first version.

Any recommendations for the best tool here? I'm leaning towards Angular, as it seems to have robust form validation built in and two-way data binding seems enormously useful for forms.

Ask 100 people and you will get 100 answers. I would go with Angular 1.x as well, but that's only because I'm most familiar with it. A ReactJS guy would tell you React.

My one piece of advice should you try to do it in Angular: embrace Angular. Fully. It sucks if you can't immediately figure something out and just go "I'll just do this part in jQuery real quick because I know how." That will only cause you problems later. Try to do everything the Angular "way." But for any library, do some tutorials, maybe read the style guide. If you like it, use it. If not - there are a billion other frameworks with a billion other tutorials out there.

And I agree with Skandranon that you shouldn't worry about Angular 1.x not being supported. It has at least two years, and they have already stated plainly that despite initial statements to the contrary, there will be a CLEAR upgrade path from 1.x -> 2.x So no worries.

# ? Jul 11, 2015 19:31

Adbot: ADBOT LOVES YOU

# ? Jun 9, 2024 05:34

kloa: Feb 14, 2007

bartkusa posted:

The "fastest" way to "visually display" backend data is to dump the data as an HTML table to the browser; no JS needed.

What kind of data do you have, and what do you want to visualize about it?

If you just want to do bar/line graphs, D3 is too low-level.

There would be some line and bar charts, but I was playing with the interactive ones like the zoomable sunburst that looked neat.

If I wanted to do the sunburst one: start at a high level, like one of our products, and be able to reach down multiple levels to arrive at the doctor/patient level data.

# ? Jul 11, 2015 19:42

TildeATH: Oct 21, 2010; by Lowtax

kloa posted:

There would be some line and bar charts, but I was playing with the interactive ones like the zoomable sunburst that looked neat.

If I wanted to do the sunburst one: start at a high level, like one of our products, and be able to reach down multiple levels to arrive at the doctor/patient level data.

Any d3 hierarchical layout like partition (sunburst is just a radially projected partition) just requires that you nest your data into the required format. You can easily make your data fit the examples and look into d3.nest if you want that to be dynamic.

As was said earlier, if you just want line charts, bar charts and pie charts, use a different library (or one of the libraries built on d3, like NVD3, dc.js or whatever) but as soon as you want to do something weird, even though some of those libs do things like network visualization and sunbursts, you're almost always going to want to roll your own in D3.

And there really isn't any other data visualization library in js to do that, unless you want to make cool art with HTML5 Canvas, in which case look at P5.

# ? Jul 11, 2015 20:26

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

TildeATH posted:

And there really isn't any other data visualization library in js to do that, unless you want to make cool art with HTML5 Canvas, in which case look at P5.

I think React can output SVG. D3 has some nice SVG helpers, and has an easier time coping with exit-animations, but React's ease-of-use might be more useful for someone getting started.

# ? Jul 11, 2015 22:52

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

bartkusa posted:

I think React can output SVG. D3 has some nice SVG helpers, and has an easier time coping with exit-animations, but React's ease-of-use might be more useful for someone getting started.

React also plays nice with d3

# ? Jul 12, 2015 04:02

The Journey Fraternity: Nov 25, 2003; I found this on the ground!

Lumpy posted:

React also plays nice with d3

Curious how this is since both d3 and react seem to want to be the ones to control the DOM.

# ? Jul 12, 2015 08:02

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

The Journey Fraternity posted:

Curious how this is since both d3 and react seem to want to be the ones to control the DOM.

Me too. React hates state, whereas D3 seems stateful as fuuuck.

# ? Jul 12, 2015 08:42

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

The Journey Fraternity posted:

Curious how this is since both d3 and react seem to want to be the ones to control the DOM.

bartkusa posted:

Me too. React hates state, whereas D3 seems stateful as fuuuck.

There are a million billion tutorials / libraries out there.

# ? Jul 12, 2015 13:43

Mahatma Goonsay: Jun 6, 2007; Yum

I tried out using some d3 with react and I basically ended up having react make an empty svg component and throwing all the d3 stuff into componentDidMount so that it could do its thing after the page rendered. Something similar to this.

# ? Jul 12, 2015 19:27

TildeATH: Oct 21, 2010; by Lowtax

Mahatma Goonsay posted:

I tried out using some d3 with react and I basically ended up having react make an empty svg component and throwing all the d3 stuff into componentDidMount so that it could do its thing after the page rendered. Something similar to this.

That's one way to do it but it's frowned upon because in that case D3 becomes like a Flash or Java applet. You can create SVG with React fine but then D3 is just for layouts and drawing functions. There are some good examples but they fall into three camps:

1. D3 as a black box using componentDidMount to pass the DOM node to a D3 function that handles everything without being part of the React lifecycle.

2. React handles all the enter/exit/update and D3 is just used for scales and drawing and laying out.

3. Various Frankenstein's monster mixes of the above two.

# ? Jul 12, 2015 20:49

Heskie: Aug 10, 2002

I know React gets a lot of love round these parts, but has anyone given Vue.js a go? How did you find it?

I have a project that's going to need a bunch of widgets, and rather than slap together some jQuery monstrosity I'm going to embrace modern JS for once.

# ? Jul 24, 2015 23:09

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

Heskie posted:

I know React gets a lot of love round these parts, but has anyone given Vue.js a go? How did you find it?

I have a project that's going to need a bunch of widgets, and rather than slap together some jQuery monstrosity I'm going to embrace modern JS for once.

Then use React. Vue might be great, but React is going to be (obviously this is my opinion!!!) The Way Web Things Get Made� for the next several years. The main reason for this (obviously, my opinion again) is that it does just about everything right. The only thing that the React ecosystem needs to figure out is which Flux implementation (or two) will "win" and become the standard. But seriously: do your stuff in React. Not only will you (my opinion, blah blah...) love it, but you'll be ready to rock as React becomes how everything new gets made.

Obviously if you know React and are just looking for something to play with for fun, then completely ignore me.

# ? Jul 24, 2015 23:59

Mecca-Benghazi: Mar 31, 2012

Speaking of reactive things, I'm playing around in Meteor and I have a question about rerendering templates with a different data context. Specifically, I have a template where the routing (using iron router) looks like this:

code:

Router.route('/viewLocation/:_id', {name:'locationProfile',
	data:function() {
		return Locations.find({_id:this.params._id});
	}
});

Now, in each locationProfile template I have a series of clickable links for locations that are nearby. I can navigate to new pages and have the new data update the page but I can't navigate back to previous ones. Or rather, I can, but that doesn't rerender the template, despite the data changing each time. I tried experimenting with Blaze rerendering the template and autorun stuff, but that didn't work.

# ? Jul 26, 2015 01:58

fantastic in plastic: Jun 15, 2007; The Socialist Workers Party's newspaper proved to be a tough sell to downtown businessmen.

Boss sold a project on the basis of using Angular. We don't have an Angular guy. I've been elected to learn since I've done some front end stuff before. What are some good resources for ramping up on the basics? Project's using Angular 1.4.

# ? Jul 28, 2015 06:14

mpaarating: May 6, 2011; The Baddest Boi

Tao Jones posted:

Boss sold a project on the basis of using Angular. We don't have an Angular guy. I've been elected to learn since I've done some front end stuff before. What are some good resources for ramping up on the basics? Project's using Angular 1.4.

egghead.io, pluralsight, todd motto's blog, john papa's blog, and scotch.io all have some good resources for learning. I'd start with egghead.

This is a nice little tutorial app from egghead: https://github.com/eggheadio/egghead-angularjs-from-scratch-getting-started

edit: This style guide is what we use and it helps to make things far more organized and clear https://github.com/johnpapa/angular-styleguide

mpaarating fucked around with this message at 14:55 on Jul 28, 2015

# ? Jul 28, 2015 14:31

HaB: Jan 5, 2001; What are the odds?

mpaarating posted:

egghead.io, pluralsight, todd motto's blog, john papa's blog, and scotch.io all have some good resources for learning. I'd start with egghead.

This is a nice little tutorial app from egghead: https://github.com/eggheadio/egghead-angularjs-from-scratch-getting-started

edit: This style guide is what we use and it helps to make things far more organized and clear https://github.com/johnpapa/angular-styleguide

Agreeing with all of this, but I will add one caveat:

When I was learning angular, and even to this day - I don't know of a tutorial that shows you a "real-world" scenario very well. Most will teach you one tiny aspect of angular, but don't give any advice as far as laying out a large-ish production application. For example most tutorials put the js inline, or stuff all the controllers in controllers.js, services in services.js, etc. That works fine for something tiny, but becomes unwieldy SUPER fast if you have more than say 2-3 controllers/services.

How to layout the project can quickly become a religious argument, so I won't bother suggesting anything outright, but I'm just saying: use the tutorials to get concepts, and to get "how it works" but don't rely on them for "how to ACTUALLY do it" in a real-world scenario.

# ? Jul 28, 2015 15:14

mpaarating: May 6, 2011; The Baddest Boi

HaB posted:

How to layout the project can quickly become a religious argument, so I won't bother suggesting anything outright, but I'm just saying: use the tutorials to get concepts, and to get "how it works" but don't rely on them for "how to ACTUALLY do it" in a real-world scenario.

Yes, most of the tutorials are bad about showing real world examples but that's where John Papa's style guide comes into play and his Angular Clean Code course on Pluralsight addresses some of the issues with architecting a large angular app.

Alternatively, Todd Motto's style guide is also very helpful (but a bit different from Papa's).

edit: In addition, I highly suggest listening to the Adventures in Angular podcast and watching some of the ng-conf (and other angular convention) videos. This is a particularly interesting one for modularizing large angular components: https://www.youtube.com/watch?v=dF_ObGgzGE8

mpaarating fucked around with this message at 15:42 on Jul 28, 2015

# ? Jul 28, 2015 15:25

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Tao Jones posted:

Boss sold a project on the basis of using Angular. We don't have an Angular guy. I've been elected to learn since I've done some front end stuff before. What are some good resources for ramping up on the basics? Project's using Angular 1.4.

NG-Book does a good job of presenting things the Angular Way, and gives some better examples of how largish things go.

I would also suggest using Typescript, it's class & module semantics lend itself very well to bundling up your Controllers & Directives in a meaningful way. Your controllers are classes, put fields on your controller classes, and use the BindToController & ControllerAs directive flags to avoid using scope & scope inheritance for anything. Use a message bus like AmplifyJS or Postal to communicate across controllers.

# ? Jul 28, 2015 15:57

mpaarating: May 6, 2011; The Baddest Boi

Skandranon posted:

I would also suggest using Typescript, it's class & module semantics lend itself very well to bundling up your Controllers & Directives in a meaningful way. Your controllers are classes, put fields on your controller classes, and use the BindToController & ControllerAs directive flags to avoid using scope & scope inheritance for anything. Use a message bus like AmplifyJS or Postal to communicate across controllers.

This is a great suggestion. Our large application would be made so much easier with the adoption of TS.

edit: speaking of BindToController: http://toddmotto.com/no-scope-soup-bind-to-controller-angularjs/

# ? Jul 28, 2015 16:26

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

I also want to add that I think ngbp (formerly ng-boilerplate) is a great way to get up and running. Its methodology for organizing sections of site and functionality into standalone modules simplifies reuse later on down the line: https://github.com/ngbp/ngbp

The gist of it is that each module is contained within a folder as a template HTML file, a Javascript file, and a file defining tests for whatever's in the Javascript file. In addition, each Javascript file defines the URL path to itself, making it much easier later on to reuse that particular "module" in another site. It's been working well for me and I only started using Angular three or four months ago.

# ? Jul 28, 2015 16:35

mpaarating: May 6, 2011; The Baddest Boi

Karthe posted:

I also want to add that I think ngbp (formerly ng-boilerplate) is a great way to get up and running. Its methodology for organizing sections of site and functionality into standalone modules simplifies reuse later on down the line: https://github.com/ngbp/ngbp

The gist of it is that each module is contained within a folder as a template HTML file, a Javascript file, and a file defining tests for whatever's in the Javascript file. In addition, each Javascript file defines the URL path to itself, making it much easier later on to reuse that particular "module" in another site. It's been working well for me and I only started using Angular three or four months ago.

The only issue with it, is that it is a bit outdated (it's not been updated in a year). I would also say that one should definitely use gulp over grunt for a large application. It matters less for small applications but gulp gives you the flexibility to write a lot of custom build processes more easily than grunt does.

# ? Jul 28, 2015 16:41

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

mpaarating posted:

edit: In addition, I highly suggest listening to the Adventures in Angular podcast and watching some of the ng-conf (and other angular convention) videos. This is a particularly interesting one for modularizing large angular components: https://www.youtube.com/watch?v=dF_ObGgzGE8

Yeah, lots of this with technologies that are big enough to have a broad user base, but either too fast-moving or too immature to have any substantive books written yet. I learned Angular listening to conference videos in my car on the drive to/from work.

# ? Jul 28, 2015 17:41

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

mpaarating posted:

The only issue with it, is that it is a bit outdated (it's not been updated in a year). I would also say that one should definitely use gulp over grunt for a large application. It matters less for small applications but gulp gives you the flexibility to write a lot of custom build processes more easily than grunt does.

Thanks for bringing up the outdated dependencies, I forgot that I had to go in and manually update everything to get it up to date.

As for gulp, I might start agreeing with you on that. I've been using bower just because it was included in ngbp, but another boilerplate kit I've started playing around with uses gulp and I like its "test server" setup a lot better. I might try and move my grunt project to gulp just for that.

# ? Jul 28, 2015 17:50

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Karthe posted:

Thanks for bringing up the outdated dependencies, I forgot that I had to go in and manually update everything to get it up to date.

As for gulp, I might start agreeing with you on that. I've been using bower just because it was included in ngbp, but another boilerplate kit I've started playing around with uses gulp and I like its "test server" setup a lot better. I might try and move my grunt project to gulp just for that.

BrowserSync works even better, it will refresh your browser whenever things change in your gulp.watches

# ? Jul 28, 2015 17:53

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Skandranon posted:

BrowserSync works even better, it will refresh your browser whenever things change in your gulp.watches

That's exactly what I've been using, and it's scary how quickly the page reloads when I use gulp: by the time I alt+tab back it's already done. The combination of grunt plus the LiveReload browser plugin feels super slow now in comparison. With BrowserSync I sometimes have to reload the page because I can't believe it's already updated.

# ? Jul 28, 2015 18:05

mpaarating: May 6, 2011; The Baddest Boi

Karthe posted:

That's exactly what I've been using, and it's scary how quickly the page reloads when I use gulp: by the time I alt+tab back it's already done. The combination of grunt plus the LiveReload browser plugin feels super slow now in comparison. With BrowserSync I sometimes have to reload the page because I can't believe it's already updated.

Lol, I experienced that as well. I do think the ngbp is a good place to start for beginners with small apps, but for larger apps I doubt he'll want to use a boilerplate. Too much ~magic~.

# ? Jul 28, 2015 19:12

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

One of the nice things about gulp is that it uses a virtual file format, so stuff flowing between pipes stays in memory until it's finally written to disk. Tasks are also launched in parallel, so they shouldn't end up blocked on file read/write operations.

# ? Jul 28, 2015 20:16

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

Gulp is good, but when I was learning I wish someone would have pointed out to me that you could use npm as your build tool, so I usually like to bring that up when a discussion arises around it.

I almost always use npm as my build tool nowadays.

# ? Jul 28, 2015 20:34

mpaarating: May 6, 2011; The Baddest Boi

Thermopyle posted:

Gulp is good, but when I was learning I wish someone would have pointed out to me that you could use npm as your build tool, so I usually like to bring that up when a discussion arises around it.

I almost always use npm as my build tool nowadays.

That's a good point. I've not taken the time to try out a build process in npm yet due to all my boilerplate stuff being in gulp but I remember this article being interesting.

edit: god I'm bad at bbcode

mpaarating fucked around with this message at 20:49 on Jul 28, 2015

# ? Jul 28, 2015 20:45

luchadornado: Oct 7, 2004; A boombox is not a toy!

Does anyone know how to profile DOM parsing/tree creation? I'm tuning a production site that has some crappy Google PageSpeed metrics and I noticed that there's a 1500 ms gap between receiving the document and fetching any additional resources. I've never seen anything like it, and it's not due for a rewrite for at least a few months.

# ? Jul 29, 2015 01:34

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Helicity posted:

Does anyone know how to profile DOM parsing/tree creation? I'm tuning a production site that has some crappy Google PageSpeed metrics and I noticed that there's a 1500 ms gap between receiving the document and fetching any additional resources. I've never seen anything like it, and it's not due for a rewrite for at least a few months.

You can get some pretty good information using Chrome's Timeline profiling. It will show you how much and when various parts of the rendering process are happening.

# ? Jul 29, 2015 01:45

luchadornado: Oct 7, 2004; A boombox is not a toy!

Skandranon posted:

You can get some pretty good information using Chrome's Timeline profiling. It will show you how much and when various parts of the rendering process are happening.

~~Yeah, I've been using that but it seems to be more geared towards profiling Javascript. I think my issues are with inefficient DOM parsing, but I'll keep chugging along - thanks!~~Timeline seems to have most of what I need, I just need to learn how it works.

edit: VVVV hell yeah, that's good stuff, especially sections 2+3

luchadornado fucked around with this message at 03:25 on Jul 29, 2015

# ? Jul 29, 2015 02:47

mpaarating: May 6, 2011; The Baddest Boi

Helicity posted:

Yeah, I've been using that but it seems to be more geared towards profiling Javascript. I think my issues are with inefficient DOM parsing, but I'll keep chugging along - thanks!

This article could be helpful in identifying ~some~ of the slow downs.

# ? Jul 29, 2015 03:05

Geisladisk: Sep 15, 2007

Tearing my hair out here.

We're building a web application. One of the things this web application has to do is serve videos in a Html 5 video player. Users upload videos, videos are transcoded to H264 mp4, and those videos are then served to users to play in the video player.

This works on Chrome on both Windows and Linux, and this works on Firefox on Windows - But not Linux. I get a "Media resource could not be decoded" error in the browser console.

Googling around, I discovered that Ubuntu 14.04 (which is what I was using) doesn't come with a H264 codec out of the box. Okay, fine - I installed the codec, but it still doesn't work.

What could possibly be causing this? Codec is present, as evidenced by the fact that Chrome on that same Linux test machine works. :confused:

# ? Jul 29, 2015 14:34

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Geisladisk posted:

Tearing my hair out here.

We're building a web application. One of the things this web application has to do is serve videos in a Html 5 video player. Users upload videos, videos are transcoded to H264 mp4, and those videos are then served to users to play in the video player.

This works on Chrome on both Windows and Linux, and this works on Firefox on Windows - But not Linux. I get a "Media resource could not be decoded" error in the browser console.

Googling around, I discovered that Ubuntu 14.04 (which is what I was using) doesn't come with a H264 codec out of the box. Okay, fine - I installed the codec, but it still doesn't work.

What could possibly be causing this? Codec is present, as evidenced by the fact that Chrome on that same Linux test machine works.

Codec doesn't register with Firefox, so it still thinks it's not there?

# ? Jul 29, 2015 14:49

Geisladisk: Sep 15, 2007

Skandranon posted:

Codec doesn't register with Firefox, so it still thinks it's not there?

How can I check if that's the case, and if so fix it?

e: I don't think that's it, the youtube html5 test page says the browser supports H264.

ee: I had to enable MSE (http://www.ghacks.net/2014/07/25/enable-mse-h2-64-support-youtube-firefox-right-now/), it works now.

Geisladisk fucked around with this message at 15:45 on Jul 29, 2015

# ? Jul 29, 2015 14:50

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Thermopyle posted:

Gulp is good, but when I was learning I wish someone would have pointed out to me that you could use npm as your build tool, so I usually like to bring that up when a discussion arises around it.

I almost always use npm as my build tool nowadays.

I use NPM as a build tool when I can but then package.json happens and there's no way to add comments with some horribly convoluted hack because web development. :sigh:

# ? Jul 29, 2015 15:17

luchadornado: Oct 7, 2004; A boombox is not a toy!

Ok, so I'm a little confused on this:

1) According to the events, there is nothing happening between Timer Fired (2463) and Finish Loading, yet there is a ~100ms gap. I see a few instances like this. What the hell is actually happening in there?

2) When I press Ctrl+R to reload the page and start a new capture, I have a whole bunch of Ad stuff and beforeunload events before I ever see the request/response for my page's main document. Is that leftover transactions from the previous page finishing up? Is there any way to stop that?

# ? Jul 29, 2015 19:54

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Helicity posted:

Ok, so I'm a little confused on this:

1) According to the events, there is nothing happening between Timer Fired (2463) and Finish Loading, yet there is a ~100ms gap. I see a few instances like this. What the hell is actually happening in there?

2) When I press Ctrl+R to reload the page and start a new capture, I have a whole bunch of Ad stuff and beforeunload events before I ever see the request/response for my page's main document. Is that leftover transactions from the previous page finishing up? Is there any way to stop that?

It starts logging everything once you hit the record button, and doesn't clear stuff when you refresh. I usually start up a new Incognito tab, start recording, then load the page. Then you can see a clear 0-60 loading of your page, instead of some assets unloading and other loading.

As for the timer thing, I would guess it's doing nothing as it waits on the results of an HTTP call. Hard to tell just from the picture though.

# ? Jul 29, 2015 20:14

Adbot: ADBOT LOVES YOU

# ? Jun 9, 2024 05:34

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

Hey all, I'm working on a conference proposal talk and would like to get a feel for what kind of things people would like to hear in it. The title is want to use if I was allowed would be "Unfuck your poo poo show of a toolchain" but I'll have to settle with "Fix yo toolchain".

I want to focus on a bunch of little/large things + code snippets people can use to make their build tools less annoying to use in day to day. Better watching, stable incremental builds, good error handling, that kind of thing. Some of the focus is also going to be on fixing build systems so they're not constantly tripping up junior devs as well.

I was more or less wondering just what particular things folks hate about build systems, task runners, etc these days.

# ? Aug 3, 2015 13:31

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

«‹›235 »