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

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

Sometimes I see people talk about "routing" with these frameworks, and I'm not sure what that means. Can someone explain it?

# ¿ Sep 19, 2013 20:58

Adbot: ADBOT LOVES YOU

# ¿ May 2, 2024 23:50

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

caiman posted:

Because that's what the browser is actually looking at, thus it's the only file that actually has the potential to affect performance.

Have you measured the performance of your pages, and found CSS is actually the bottleneck?

I've written some terrible CSS, and found it didn't matter even 0.01% compared to my terrible Javascript.

# ¿ Oct 20, 2014 17:07

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

Wheany posted:

But for the InfoWindow, I need a HTML text.

I don't work with Google Maps, but I would be surprised if Google didn't let you pass in a DOM node, instead of an HTML string.

# ¿ Jan 12, 2015 19:29

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

TildeATH posted:

I'm a little leery of JSX, though, and prefer writing out the vanilla JavaScript. Does that make sense?

JSX gets transformed to vanilla JS under the covers: http://facebook.github.io/react/docs/jsx-in-depth.html .

In most circumstances, no, I don't think JSX is worth eshewing. The code is quite succinct, and I don't feel like the generated code is worth worrying about.

# ¿ Jan 22, 2015 18:54

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

The author of that guide links to Facebook's original guide, which includes this line that your guide seems to be missing:

code:

<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
--> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>

Browsers don't know what a "JSX" is, so you need to load some code to translate JSX to plain JS.

# ¿ Jan 29, 2015 03:06

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

I think you'd be crazy to not use JSX.

It has dumb poo poo (forcing you to use "className" as an attribute, but barely warning you when you use "class"), but so does everything.

# ¿ Feb 12, 2015 03:12

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

The Wizard of Poz posted:

Hoping someone knows of a neat solution for animation in React components.

Have you looked at ReactTransitionGroup? It basically seems to apply one CSS class on render, then another after the next animation frame, permitting the use of CSS transitions.

I have used Dojo's animation library in the past. I think you basically wire up each animation as a chain of Promises, and it manually changes the DOM's styles each animation frame, but I can't imagine something so stateful playing well with React's "render all the things, all the time" attitude.

Also, I've always found my life is improved when I let the browser and CSS do things for me, instead of trying to hack them up in JS.

You can do stateful poo poo in React. I'm making a low-maintenance responsive carousel at the moment, which means measuring parent nodes' widths and passing them down as state/props. I have to do careful poo poo in pretty much every stage of the component lifecycle, registering and cleaning up resize listeners, waiting for the parent to render before measuring, etc. But I'm careful, so I can get away with it.

# ¿ Feb 18, 2015 07:55

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

I went to a React meetup at Facebook yesterday. Someone recommended this for animation:

https://github.com/chenglou/react-tween-state

I haven't looked into it much yet, just thought I'd share.

# ¿ Feb 19, 2015 19:57

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

Thermopyle posted:

I've had something bothering me for the past couple of days and I can't seem to come up with a solution that I like. I'm using Reflux, but I think its applicable to vanilla Flux as well.

So, say I have a React ComponentOne that calls a flux action to post some form data to an API to create a Thing.

My store fires a "ok, a Thing is POSTing" event, and then in a bit fires a "ok, a Thing was created" event.

How is my ComponentOne supposed to disambiguate these events? ComponentTwo could have called the same action and we don't know which Thing-POSTed event corresponds to which component.

Maybe ComponentOne's data results in a failure event, whilst ComponentTwo results in a completed event...we've got two events, both of which are plausible events for both components to expect and no obvious way to tell which is which.

The pattern I've heard is:
- ComponentOne and ComponentTwo have some state in a distant store, which could include an "isPosting" flag.
- Something, maybe a "view-controller" is responsible for connecting the right store-contents to ComponentOne and ComponentTwo. Your components are not responsible for anything; they just render. No thinking allowed.
- Your Flux actions should be responsible for meddling with the API, not your stores.

As far as I can tell, React is a stupid-simple View, your actions are your Controller, and your data-stores are your Model, which includes UI-state as well as app-state.

# ¿ Feb 23, 2015 23:33

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

Thermopyle posted:

So if ComponentOne has called the post-a-thing action^* and ComponentTwo has called the post-a-thing action, there's not a way for anyone to know which completed or failed action belongs to which component.

What I've settled on for now is attaching a unique ID whenever I call the post action and then include it in my completed/failed action call and then include it when my store triggers the completed/failed event.

This feels pretty icky to me, but I don't know of a better way to do it.

Alternatively, you could include a reference to a component in your action, although that component might die and be replaced with a clone.

It does feel icky to me too, but I think it's what was recommended during a React Meetup at Facebook Seattle.

# ¿ Feb 24, 2015 00:22

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

fletcher posted:

^ I made another attempt at it, still couldn't get it to work though: http://jsfiddle.net/pj6hz7hq/

Is there a different way I should be going about this?

For starters, use "onClick" instead of "onclick".

JSX looks like HTML, but it's not; it's just an easy way to write JavaScript. It tricks you into thinking you can write HTML attributes like "class" and "onclick", but REALLY you need to use the strictly-cased DOM API, with fields like "className" and "onClick".

bartkusa fucked around with this message at 03:15 on Mar 3, 2015

# ¿ Mar 3, 2015 03:11

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

fletcher posted:

Doh! Thank you =)

http://jsfiddle.net/pj6hz7hq/1/

How come it's giving me a "TypeError: this.props.onClickMe is not a function" now?

Use your debugger and tell us what it is, if not a function.

# ¿ Mar 3, 2015 04:26

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

fletcher posted:

undefined

Ah. Weird. Next step: what is "this.props"? What is "this"?

# ¿ Mar 3, 2015 07:15

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

fletcher posted:

"this.props" is {dataRow: Object, onClickMe: undefined}

OK. So where are you going to put your next breakpoint, to figure out why your assignment to onClickMe is wrong? You're going to put a breakpoint in this.props.dataRows.map(...)

And what will you find is causing your problems? "this" will be undefined, because you're passing an anonymous function to map(...), and you aren't binding it to any context.

# ¿ Mar 3, 2015 07:49

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

The Wizard of Poz posted:

Each of the three bundles listed there need to be generated by some kind of a compiler that can take the source files, resolve the includes, render the JSX and output the result as a bundle.

Require definitely seems to support bundling: requirejs.org/docs/optimization.html

Does this help with the JSX piece? https://stackoverflow.com/questions/23381561/using-reactjs-with-requirejs

# ¿ Mar 5, 2015 02:01

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

I think I'm able to follow your train of thought, even without your speech, which is a good sign.

I don't know if your audience will load this in their browsers during/after your talk, but it might help to hyperlink drat near everything on slide 13.

Examples are great. Your CSS examples are compelling. Maybe it'd even more compelling to have a Goofus and Gallant section where you quickly run through things like "this lovely templating example runs at 10fps in Chrome, but this one small tweak names it run 3x faster."

# ¿ Mar 8, 2015 09:22

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

yoyomama posted:

I was wondering if there's anyone that can point me to a resource that explains how to have a React component listen to changes in an input field that isn't rendered by React. I'm using React for one part of a web app I'm making, and getting it to work with the rest of my code has been a challenge (and facebook's docs don't help at all).

Have a non-React piece of code listen to the non-React input, and feed the value to the React component as a prop.

React components shouldn't listen to anything except props.

# ¿ Apr 23, 2015 15:43

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

So, I'm jumping down the toolkit-bullshit rabbit hole, and it's extremely painful so far.

Bower ignores me when I tell it where it should put poo poo it downloads. Reflux is making Webpack unhappy because it tells Webpack to find timers-browserify\main.js and gently caress if I know what that is and where it should be.

How does anyone figure this poo poo out?

# ¿ Apr 27, 2015 05:24

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

Sometimes you need to work on the DOM. That's what componentDidMount() is for.

# ¿ Apr 27, 2015 18:55

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

Summit posted:

I know a guy. My co-dev on the project I'm on right now loves setting all that stuff up. Which is great for me cause I am quickly bored by it all. For putting bower files somewhere not default you need a .bowerrc file in the root directory.

http://bower.io/docs/config/

Well, gently caress. The .bowerrc I was editing was not the .bowerrc in my project root. That one was empty. :suicide:

Now to figure out how to get Bower poo poo into Webpack.

# ¿ Apr 27, 2015 21:16

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

TheOtherContraGuy posted:

Hey I just inherited a bunch of old HTML4 emailers. I want to spruce them up but I also heard that CSS is only partially supported on some email clients. What are the guidelines for using CSS in emails?

IIRC, don't. Use inline styles. Srsly.

The only email clients with good style support are on mobile phones. Web mail is universally awful.

I got a lot of use out of Litmus for email testing.

# ¿ May 6, 2015 20:14

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

What's wrong with JSX?

# ¿ Jun 5, 2015 18:51

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

I don't enjoy writing React.createComponent(...) over and over again. I don't enjoy reading it over and over again. JSX is supremely readable. High signal, low noise.

Unless you have a nasty ball of props. Or if you really hate closing tags.

# ¿ Jun 5, 2015 21:56

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

kloa posted:

I may need to hit up the JS thread, but would d3js be the easiest/fastest way to visually display backend data?

We typically use Tableau/ReportingServices with SQL Server/cubes, but I'd like to delve more into the webapp/front-end side and learn something new.

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.

# ¿ Jul 11, 2015 19:27

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

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

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

caiman posted:

I've just begun learning React. I'm trying to change the styling of an element based on user input. I was able to accomplish this using refs, but when I split the app into child components, the refs no longer work. I suspect this is by design, so what is the ideal way to pass the value of a child element to a function in the parent? Or am I going about this all wrong?

http://codepen.io/caiman/pen/RrNpyX?editors=001

Try using the Flux pattern, using a library like Reflux or Redux.

This will split your app into four pieces.

- The Store will track the your app's data. This is basically just a pile of data sitting in memory in JS; the only special bit is that it has a callback to notify you when something in the Store has changed.

- Your React components will get the Store's contents as props. 90%+ of your React code should work off of props; rarely use state or DOM manipulation.

- When the user interacts with the React components, the event-handler should emit an Action, which is basically a message object. At this point, the React components are no longer responsible for getting work done.

- A Dispatcher will listen to all actions. Somehow, Stores will tell the Dispatcher what Actions they care about, and ask to be notified if one comes in. Dispatchers are pretty boring.

At that point, the Store may inspect the Action and mess with the data in memory, which automagically notifies the React components to read new props and rerender.

# ¿ Dec 8, 2015 00:59

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

caiman posted:

What's the best way to deal with simple animations in React? Like sliding in or fading in on hover, that sort of thing. In the past I'd turn to jQuery without a second thought, but I figure it's not the ideal method with React. How about ReactCSSTransitionGroup? Or maybe just CSS animations?

Start with CSS animations. Easiest to try, easiest to throw away if it didn't do everything you need.

I tried transition groups once, for a carousel widget, and found them fragile when adding or removing DOM nodes. I couldn't control what order the nodes were added or removed in, leading to janky animation. Also, hard to interrupt animations for nodes removed from DOM, then added back in. Also, listening for animation-complete DOM events was really spotty.

I had more success using TweenState to manage style-variables on this.state, and taking more explicit control over what was displayed, and in what order.

https://github.com/chenglou/react-tween-state

bartkusa fucked around with this message at 17:21 on Dec 14, 2015

# ¿ Dec 14, 2015 17:18

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

Strong Sauce posted:

So I'm kinda stuck, I'm trying to mock a component that runs a $.ajax call. When I try to just "import X from 'X'", I get an error from $.ajax saying a.document is trying to access an undefined variable (a). Is there anyway in sinon so that when it sees the import call it just mocks it? I apparently cannot preemptively mock it like you can in jester it seems. I'm not too familiar though with sinon so I don't know if I'm doing it right or if its possible.

We use a library called Mockery to do that. Maybe it'd help?

# ¿ Dec 18, 2015 04:39

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

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

piratepilates posted:

No idea on a good one for webpack.

https://webpack.github.io/docs/long-term-caching.html

Instead of a version, you can use a hash, which is nice if you have releases where the JS doesn't change.

# ¿ Mar 30, 2016 19:39

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

Redfin released an isomorphic server for React today. It's called react-server.

(We had better names for it, but other open source projects kept taking them.)

It has good perf for pages that depend on many downstream data requests, and server-side rendering is great for bots and humans alike.

# ¿ May 21, 2016 03:18

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

spacebard posted:

I've spent the last X years trying to avoid inline JavaScript on elements.

Should doing something like documented on DOM Event Listeners be better?

No. It's fine. Do what React says.

It's not really creating an onclick-handler as a string on the DOM element. The React renderer is basically creating and attaching a DOM event listener under the covers. The onClick that you're writing is just declaring that React should do that for you.

(Actually, that's a lie, too. React has its own goofy synthetic event system. Probably to work around some performance issue I'm not even aware of. It works great most of the time, but I've run into 1 or 2 edge cases where I had to revert to creating DOM event listeners in componentDidMount.)

e: f;b

# ¿ Jul 13, 2016 21:54

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

Albums can have multiple artists, no? Hell, songs can have multiple artists.

# ¿ May 13, 2017 16:08

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

spacebard posted:

To me /artists/ID/albums means that I'm looking for all the albums the artist is a member of rather than is the owner of.

I've done the following to provide list arguments.

/albums?artists[]=One&artists[]=Two

And I've seen operators included for really complex APIs that need to do so: ?artistsOp=And&artists[]=One&artists[]=Two

Go a little further down that trail, and you're in GraphQL territory.

# ¿ May 13, 2017 21:59

Adbot: ADBOT LOVES YOU

# ¿ May 2, 2024 23:50

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

smackfu posted:

Anyone have tips on working with static assets (like images) and CDNs and files

Webpack renames our images with hashes of their content.

# ¿ Mar 11, 2019 17:45

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