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 »

an skeleton: Apr 23, 2012; scowls @ u

Odette posted:

What the gently caress is type-based folder structure? Something like css/ js/ html/ img/ objectX/ objectY/?

lol not *quite* that bad, but close. we're talking controllers/ services/ views/ etc. etc.

they wanted type-based. most of us (all of those experienced in Angular) wanted to do feature-based of some sort. they told us to do research and when it turned out 9/10+ articles, the Angular team, and prominent community leaders preferred feature-based, they told us to do type-based anyway and said our research was "biased"

# ? Dec 22, 2015 05:51

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 05:42

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

Odette posted:

What the gently caress is type-based folder structure? Something like css/ js/ html/ img/ objectX/ objectY/?

That's usually controllers/ services/ directives/ html/ etc.

And it's stupid for large applications. Type based is basically your first attempt at organizing things beyond everything in a single file, but it scales poorly and does not promote organizing your code into reusable chunks.

an skeleton posted:

they wanted type-based. most of us (all of those experienced in Angular) wanted to do feature-based of some sort. they told us to do research and when it turned out 9/10+ articles, the Angular team, and prominent community leaders preferred feature-based, they told us to do type-based anyway and said our research was "biased"

This really makes me appreciate not getting this crap. I've had a fairly free hand in implementing best practices at my place, and I feel it's going pretty well. I could probably even push for moving everything to Angular 2.0 if I really wanted, but we've got some momentum with our 1.x codebase and need to release things.

Skandranon fucked around with this message at 05:55 on Dec 22, 2015

# ? Dec 22, 2015 05:52

TildeATH: Oct 21, 2010; by Lowtax

Thermopyle posted:

I feel like most of my React components don't need any unit tests as almost all the logic of my apps live elsewhere.

This is what the guys at Facebook say when you ask them, or at least what the guys at Facebook said when I asked them.

# ? Dec 22, 2015 06:01

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

an skeleton posted:

lol not *quite* that bad, but close. we're talking controllers/ services/ views/ etc. etc.

they wanted type-based. most of us (all of those experienced in Angular) wanted to do feature-based of some sort. they told us to do research and when it turned out 9/10+ articles, the Angular team, and prominent community leaders preferred feature-based, they told us to do type-based anyway and said our research was "biased"

Lol gently caress that it doesn't scale well at all. Make a folder for every component/feature, throw tests in side by side with running components. Never question what relates to what again.

# ? Dec 22, 2015 06:17

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

I've been diving into React for the last week or two and I'm digging it, but there are some quirks to JSX that still confuse me. Is there better documentation for it than the official page? Like, I have no idea what well formed JSX is supposed to actually look like or what the rules are here. It's like XML, HTML, and JavaScript had a threesome and the baby has a few too many chromosomes.

Anony Mouse fucked around with this message at 11:58 on Dec 22, 2015

# ? Dec 22, 2015 11:22

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Does anyone have an example of cascading drop downs in react? I can't seem to find one.

# ? Dec 22, 2015 11:55

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

Anony Mouse posted:

I've been diving into React for the last week or two and I'm digging it, but there are some quirks to JSX that still confuse me. Is there better documentation for it than the official page? Like, I have no idea what well formed JSX is supposed to actually look like or what the rules are here. It's like XML, HTML, and JavaScript had a threesome and the baby has a few too many chromosomes.

I'm just diving in myself but haven't found the quirks of JSX to be too bad. In my brief exposure to React, the only real gotchas that have applied to me are:
-Make sure to surround your entire chunk of JSX with a single parent element.
-className instead of class
-Event handlers look like this: onClick, onChange, onFocus, etc.

Maybe there's a lot of weirdness that I haven't been forced to deal with yet, but I'm finding JSK pretty intuitive.

# ? Dec 22, 2015 17:27

Strong Sauce: Jul 2, 2003; You know I am not really your father.

There are three titled JSX* underneath displaying data in the doc files that explains pretty much everything about JSX.

http://facebook.github.io/react/docs/displaying-data.html

# ? Dec 22, 2015 17:35

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

I'd echo all this and add a reminder that it is actually a really dumb transformer in the end of the day. Nothing particularly sophisticated is going on, as evidenced in https://facebook.github.io/react/docs/jsx-in-depth.html

The real gotcha with jsx is that it is a single expression, so if you want to add control flow inline you need to use Ternaries, Immediately Invoked Function Expressions, and maps on arrays.

It is usually better to pull this conditional stuff out of line and make the results of the conditional a variable that you drop into a simpler JSX expression.

# ? Dec 22, 2015 20:36

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

Maluco Marinero posted:

I'd echo all this and add a reminder that it is actually a really dumb transformer in the end of the day. Nothing particularly sophisticated is going on, as evidenced in https://facebook.github.io/react/docs/jsx-in-depth.html

The real gotcha with jsx is that it is a single expression, so if you want to add control flow inline you need to use Ternaries, Immediately Invoked Function Expressions, and maps on arrays.

It is usually better to pull this conditional stuff out of line and make the results of the conditional a variable that you drop into a simpler JSX expression.

Yeah, I really prefer this approach with Angular as well. You can put a lot of functionality into expressions in your templates, but it almost always feels like a bad idea, and instead placing in the Controller is a much better idea.

# ? Dec 22, 2015 20:45

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

Maluco Marinero posted:

The real gotcha with jsx is that it is a single expression, so if you want to add control flow inline you need to use Ternaries, Immediately Invoked Function Expressions, and maps on arrays.

...Or a function call.

code:

render: function() {
    return (
        <Foo bar={this.props.bar}>
            { this.renderBazOrQuux() }
        </Foo>
    );
}

# ? Dec 22, 2015 22:09

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

Uziel posted:

Does anyone have an example of cascading drop downs in react? I can't seem to find one.

https://react.rocks/tag/Dropdown There's a few on that page. (although maybe they all suck or were written for 0.13...)

Lumpy fucked around with this message at 22:51 on Dec 22, 2015

# ? Dec 22, 2015 22:47

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Lumpy posted:

https://react.rocks/tag/Dropdown There's a few on that page. (although maybe they all suck or were written for 0.13...)

I've seen that page and maybe my eyes are broken but I'm specifically looking for something like:
Two dropdowns, One for State, one for City, initial state is for States are list of states, initial state for Cities is empty. When a state is selected, the cities for that state are pushed into the city dropdown.
I'm assuming (I literally just started working with react today), that the store would have the city/state data, and I could simply use that to specifically bind properties to the two dropdowns?

# ? Dec 22, 2015 23:59

Depressing Box: Jun 27, 2010; Half-price sideshow.

Uziel posted:

I've seen that page and maybe my eyes are broken but I'm specifically looking for something like:
Two dropdowns, One for State, one for City, initial state is for States are list of states, initial state for Cities is empty. When a state is selected, the cities for that state are pushed into the city dropdown.
I'm assuming (I literally just started working with react today), that the store would have the city/state data, and I could simply use that to specifically bind properties to the two dropdowns?

That sounds about right. Here's a way you could structure it:

The State dropdown receives states, selectedState, and an onChange handler that updates selectedState.

The City dropdown receives cities (filtered by selectedState), selectedCity, and an onChange handler that updates selectedCity.

EDIT: Here's a basic example on JSFiddle.

Depressing Box fucked around with this message at 01:35 on Dec 23, 2015

# ? Dec 23, 2015 00:31

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

Uziel posted:

I've seen that page and maybe my eyes are broken but I'm specifically looking for something like:
Two dropdowns, One for State, one for City, initial state is for States are list of states, initial state for Cities is empty. When a state is selected, the cities for that state are pushed into the city dropdown.
I'm assuming (I literally just started working with react today), that the store would have the city/state data, and I could simply use that to specifically bind properties to the two dropdowns?

Ah, I saw in my head a multi-level drop down menu. Yes, what you and Depressing said. Everything should be a prop to the dropdowns themselves.

# ? Dec 23, 2015 00:48

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

Depressing Box posted:

That sounds about right. Here's a way you could structure it:

The State dropdown receives states, selectedState, and an onChange handler that updates selectedState.

The City dropdown receives cities (filtered by selectedState), selectedCity, and an onChange handler that updates selectedCity.

EDIT: Here's a basic example on JSFiddle.

This is perfect, thank you so much. I was able to understand this, and even modified it to have the datasource be a single array. If I wanted to have one of the Component's props load from a URL, is there an easy way to do that?

For example, I have the below code now and want cities to be bound to an api endpoint:

code:

const cities = [
	['Red City 1', 'Red State'],
	['Red City 2', 'Red State'],
	['Red City 3', 'Red State'],
	['Blue City 1', 'Blue State'],
	['Blue City 2', 'Blue State'],
	['Blue City 3', 'Blue State']
];

const states = cities.map(city => city[1])
             .filter((value, index, self) => self.indexOf(value) === index);

ReactDOM.render(
	<StateCitySelect states={states} cities={cities}/>,
	document.getElementById('root')
);

# ? Dec 23, 2015 15:01

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

Uziel posted:

This is perfect, thank you so much. I was able to understand this, and even modified it to have the datasource be a single array. If I wanted to have one of the Component's props load from a URL, is there an easy way to do that?

For example, I have the below code now and want cities to be bound to an api endpoint:
code:
const cities = [
	['Red City 1', 'Red State'],
	['Red City 2', 'Red State'],
	['Red City 3', 'Red State'],
	['Blue City 1', 'Blue State'],
	['Blue City 2', 'Blue State'],
	['Blue City 3', 'Blue State']
];

const states = cities.map(city => city[1])
             .filter((value, index, self) => self.indexOf(value) === index);

ReactDOM.render(
	<StateCitySelect states={states} cities={cities}/>,
	document.getElementById('root')
);

For one, if possible, I'd change your data structure to look like:

JavaScript code:

const cities = {
  'Blue State': ['blue city 1', ... ],
  'Red State': ['red city 1', ...]
}

Much easier to reason abut and parse. You can iterate over the keys to get a list of states, or even keep a list of states (or go hog wild and do something like:

JavaScript code:

const states = [1,2,3,4,...];
const statesById = {
  1: { 
    name: 'Red State',
    cities: ['red city 1', ....]
  },
  ...
};

Anyway, for the URL loading thing, assuming you meant loading a list of cities when you pick a state (couldn't tell from your post): The "bad" way of doing it would be to listen for the selected State change in the component that owns the State and City pickers,, fire off a promise to load the cities, and when he promise resolves, set the props on the City picker component. The right(er) way to do it is to fire an action (if you are using a Flux-like pattern) or call a method on your store that fires the Ajax request (again in a promise) that then updates the store which the component is notified of and it updates props.

# ? Dec 23, 2015 15:22

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

Kind of a sidenote to what Lumpy said, but I wanted to share. Don't prematurely optimize at the expense of easy to work with data structures. I wrote a GIS display in JavaScript/HTML5 that can render millions of vertices in a matter of milliseconds, and one of the biggest things I learned was that data structure isn't nearly as important for high performance. Always test your assumptions, but I found I didn't need arrays with tightly packed custom data formats, and call-by-sharing allows for some really awesome organization of your data. When in doubt use Chrome dev tools to look at your JS eval times and take heap snapshots to view memory use of individual objects/arrays that you are concerned about.

# ? Dec 23, 2015 16:35

Depressing Box: Jun 27, 2010; Half-price sideshow.

Lumpy posted:

For one, if possible, I'd change your data structure to look like:
JavaScript code:
const cities = {
  'Blue State': ['blue city 1', ... ],
  'Red State': ['red city 1', ...]
}

Yeah, something like this is much easier to work with. The states array I wrote isn't anything special, just influenced by something I had to deal with recently.

Uziel posted:

If I wanted to have one of the Component's props load from a URL, is there an easy way to do that?

You generally want to handle stuff like making Ajax requests and changing the application state at a higher level, maybe a root component or Flux store (as Lumpy went into). Then you pass the results down to the StateCityPicker component as props, plus any methods needed to trigger further requests (maybe something like getCitiesForState(state)). Now your component doesn't need to know how the API data is retrieved, it just needs to receive it and signal to its parents when it needs more. It's the same way you handled passing state to your select inputs, just at a component level.

A general rule of thumb in React is to make as many of your components dumb (stateless) as possible, so you only need to handle state in a few, top-level locations. If most of your app can just be functions that receive props it'll be a lot easier to manage.

Lumpy already mentioned Flux, but I've also enjoyed working with Redux (which is based on Flux). The counter example should give you a pretty good idea of how it works.

Depressing Box fucked around with this message at 17:14 on Dec 23, 2015

# ? Dec 23, 2015 17:02

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

Helicity posted:

Kind of a sidenote to what Lumpy said, but I wanted to share. Don't prematurely optimize at the expense of easy to work with data structures. I wrote a GIS display in JavaScript/HTML5 that can render millions of vertices in a matter of milliseconds, and one of the biggest things I learned was that data structure isn't nearly as important for high performance. Always test your assumptions, but I found I didn't need arrays with tightly packed custom data formats, and call-by-sharing allows for some really awesome organization of your data. When in doubt use Chrome dev tools to look at your JS eval times and take heap snapshots to view memory use of individual objects/arrays that you are concerned about.

This is good advice.

I mentioned changing the format mainly because it makes the code easier to reason about, which while it is not really a "performance optimization" but more of a "developer sanity optimization".

Depressing Box posted:

Lumpy already mentioned Flux, but I've also enjoyed working with Redux (which is based on Flux). The counter example should give you a pretty good idea of how it works.

This. I love Redux.

# ? Dec 23, 2015 19:18

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

Lumpy posted:

I mentioned changing the format mainly because it makes the code easier to reason about, which while it is not really a "performance optimization" but more of a "developer sanity optimization".

Yeah, I was agreeing with what you said - there's no reason to sacrifice sanity when the performance gains likely aren't there. JavaScript VMs are insanely good at optimizing. Also agree on Redux being the poo poo :tipshat:

# ? Dec 24, 2015 03:56

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

Helicity posted:

Yeah, I was agreeing with what you said - there's no reason to sacrifice sanity when the performance gains likely aren't there. JavaScript VMs are insanely good at optimizing. Also agree on Redux being the poo poo

Well then. Let's agree to continue to agree, and I'll work on my reading comprehension in the new year.

:v:

# ? Dec 24, 2015 15:56

well why not: Feb 10, 2009

apologies if this has been covered, but can anyone recommend a tutorial/starting point for AngularJS? I've been watching some youtube and messing about with it a bit, but I'm still not feeling that confident that I understand all the terminology.

# ? Dec 29, 2015 04:03

TildeATH: Oct 21, 2010; by Lowtax

Helicity posted:

Yeah, I was agreeing with what you said - there's no reason to sacrifice sanity when the performance gains likely aren't there. JavaScript VMs are insanely good at optimizing. Also agree on Redux being the poo poo

What is it that makes Redux so awesome? I ask this as someone who has made the transition from Flux to Redux. I find it kind of esoteric in the whole reducer/action creator thing, but I just assumed I don't get it. What does that do (or other aspects of Redux that are amazing) that makes it so wonderful?

# ? Dec 29, 2015 05:11

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

Strong Sauce posted:

Why are they deciding this? Why would they even have an opinion about this?

Management is usually the ones explaining the code to Bangalore :saddowns:

# ? Dec 29, 2015 08:28

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

Vulture Culture posted:

Management is usually the ones explaining the code to Bangalore

wtf? at my company management just allocates us Indian contractors, we communicate directly.

# ? Dec 29, 2015 09:36

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

TildeATH posted:

What is it that makes Redux so awesome? I ask this as someone who has made the transition from Flux to Redux. I find it kind of esoteric in the whole reducer/action creator thing, but I just assumed I don't get it. What does that do (or other aspects of Redux that are amazing) that makes it so wonderful?

The big thing for me is that it is conceptually small both in design and in how you end up implementing it, which means you can reason about it more effectively...just like React, really.

# ? Dec 29, 2015 15:53

abraham linksys: Sep 6, 2010

my main problem with Redux is that it requires higher-level abstractions and no one has agreed upon a set of sane defaults. you end up with (as this excellent article mentions) a combination of a bunch of middlewares and home-rolled abstractions for things like reducer boilerplate or async action state that should really be solved by now

I like it a lot and I think we'll get there, it's just frustrating at the moment

# ? Dec 29, 2015 15:57

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

I feel like Elm is a lot further along in that regard. The Elm Architecture is really well thought out and covers much the same ground as redux's various patterns. It also has the benefit of type checking to enforce it all.

I mean obviously it's a bigger leap because of the different lang but still, it feels better than the ball of JavaScript.

# ? Dec 29, 2015 21:19

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

Maluco Marinero posted:

I feel like Elm is a lot further along in that regard. The Elm Architecture is really well thought out and covers much the same ground as redux's various patterns. It also has the benefit of type checking to enforce it all.

I mean obviously it's a bigger leap because of the different lang but still, it feels better than the ball of JavaScript.

Yeah, Dan based most of redux right off of Elm. In fact Elm is just plain awesome, but the community is too small. And by that I mean you're not going to find anyone to work with on your project because the userbase is too small.

# ? Dec 29, 2015 23:18

Kekekela: Oct 28, 2004

For some reason I can't get webpack-dev-server working, it looks like it installs fine but I get "command not found" as soon as I try to use. Any ideas what I'm doing wrong?

# ? Jan 2, 2016 23:18

Depressing Box: Jun 27, 2010; Half-price sideshow.

Kekekela posted:

For some reason I can't get webpack-dev-server working, it looks like it installs fine but I get "command not found" as soon as I try to use. Any ideas what I'm doing wrong?

Did you install webpack-dev-server globally (npm install -g)? Just using $ webpack-dev-server only works if it's in your PATH.

EDIT: Or, if you want to use a local copy, you'll need to use the full path, which is probably something along the lines of "node_modules/.bin/webpack-dev-server".

EDIT 2: Yeah, I just looked at your screenshot again, and you're installing it locally, so you'll need to use the full path. Why the sudo, though?

Depressing Box fucked around with this message at 23:37 on Jan 2, 2016

# ? Jan 2, 2016 23:27

Kekekela: Oct 28, 2004

Depressing Box posted:

Did you install webpack-dev-server globally (npm install -g)? Just using $ webpack-dev-server only works if it's in your PATH.

EDIT: Or, if you want to use a local copy, you'll need to use the full path, which is probably something along the lines of "node_modules/.bin/webpack-dev-server".

Ahhh, awesome thanks!

# ? Jan 2, 2016 23:35

Odette: Mar 19, 2011

Depressing Box posted:

Why the sudo, though?

To anyone else that's using sudo to globally install npm packages, this is generally considered bad practice. Do this or that instead.

# ? Jan 3, 2016 00:03

Kekekela: Oct 28, 2004

quote:

Why the sudo, though?

Oh, I was trying to get around the EACESS errors, which this VV fixes

Odette posted:

To anyone else that's using sudo to globally install npm packages, this is generally considered bad practice. Do this or that instead.

Cool thanks! I'm just not really familiar with actually doing development on the mac, and am also retarded. :downs:

Kekekela fucked around with this message at 00:33 on Jan 3, 2016

# ? Jan 3, 2016 00:11

Sedro: Dec 31, 2008

Odette posted:

To anyone else that's using sudo to globally install npm packages, this is generally considered bad practice. Do this or that instead.

There's also nvm

# ? Jan 3, 2016 04:58

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

Are there any advantages of using something like MongoDB instead of plain .json files for storing and retrieving simple styling and text content data?

# ? Jan 5, 2016 20:48

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

caiman posted:

Are there any advantages of using something like MongoDB instead of plain .json files for storing and retrieving simple styling and text content data?

Try searching Google with some combination of terms like advantages and disadvantages of files over databases/databases over files and let me know if you have any questions...

This is a vague question.

# ? Jan 5, 2016 21:32

kloa: Feb 14, 2007

I really dislike the look of text-shadow, in an otherwise flat-design, but I can't really find a better way to display white text on a light background, such as yellow.

My conundrum is that the navigation tabs at the top are varying colors (not my choice). If I make the text black on yellow, then the black text on tabs that are dark are unreadable.

Amy tricks or ideas to have white text on both like and dark colored backgrounds?

# ? Jan 21, 2016 16:34

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 05:42

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

If the design is the design, you're pretty much hosed. If it can be altered, you need a better palette. Text shadow or backing gradients are used to help put text over images and should not be used to bandaid over flat colour choices. if the general colour scheme is in clash then fix the palette, don't just put lipstick on it.

# ? Jan 21, 2016 22:23

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

«‹›235 »