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 »

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Hoping someone knows of a neat solution for animation in React components. I know there's the CSS transition addon but in this case the animations really need to be performed in code. I'll use a specific example in order to illustrate what I'm struggling with:

I have kind of a list of expandable items that look like this:

Clicking on one will cause a panel to appear below it with more details:

In my React component this is done by storing against each item a boolean that flags the item as opened or closed. During render, the flag is checked and the detail content is not rendered if the item's "open" flag is set to false (i.e. the element doesn't actually exist in the DOM).

What I would like to do is have the detail panel slide down to appear, and slide up to disappear. Trying to implement this effect in pure CSS only ever produces janky ugly animation, and I was hoping to simply use jQuery's slideUp and slideDown features, but I'm not sure exactly where I would plug these in.

That's my specific problem, but I'm interested in any general approaches to JS (as opposed to CSS) animation that people have come across or tried out?

# ? Feb 18, 2015 06:34

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 13:04

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

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

I made a little library for managing CSS driven transitions/animations, especially in cases where you need to do measurement and tight frame timing.

https://github.com/weareoffsider/css-driven

I've used it on bits and pieces here and there where I need a little more control that CSS but I don't want to go full js with velocity. Its tricky but with requestAnimationFrame its possible to get the render to play pretty predictably, of course it's key to avoid doing animations other than transform+opacity if you want to keep the frame rate up though.

When you're working with React the main thing to remember is to clean up your poo poo, you can get the DOM node just fine so your focus should just be to trigger the anim, do the anim, and then clean up back to a state that can reconcile with React so it doesn't freak out or break changes.

# ? Feb 18, 2015 15:29

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

The Wizard of Poz posted:

Hoping someone knows of a neat solution for animation in React components. I know there's the CSS transition addon but in this case the animations really need to be performed in code. I'll use a specific example in order to illustrate what I'm struggling with:

I have kind of a list of expandable items that look like this:

Clicking on one will cause a panel to appear below it with more details:

In my React component this is done by storing against each item a boolean that flags the item as opened or closed. During render, the flag is checked and the detail content is not rendered if the item's "open" flag is set to false (i.e. the element doesn't actually exist in the DOM).

What I would like to do is have the detail panel slide down to appear, and slide up to disappear. Trying to implement this effect in pure CSS only ever produces janky ugly animation, and I was hoping to simply use jQuery's slideUp and slideDown features, but I'm not sure exactly where I would plug these in.

That's my specific problem, but I'm interested in any general approaches to JS (as opposed to CSS) animation that people have come across or tried out?

Toggle your flag like normal, and then in componentDidUpdate, call the jQuery method if needed? I think I've done that before.

# ? Feb 18, 2015 16:16

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

The problem with the CSS transitions is that slideUp is almost impossible to implement in a smooth way with pure CSS. I do like how the CSS transition group addon works but the actual CSS animation options are limited if you want something that looks nice.

Thermopyle posted:

Toggle your flag like normal, and then in componentDidUpdate, call the jQuery method if needed? I think I've done that before.

Unfortunately this won't work for this example because when the open flag gets set to false the child element is removed from the DOM immediately leaving no time to perform any animation. This is just how it works at the moment though, that can change. If there's a way to hold the element in DOM for the duration of the jQuery transition then I'm eager to hear it.

putin is a cunt fucked around with this message at 23:06 on Feb 18, 2015

# ? Feb 18, 2015 23:03

geetee: Feb 2, 2004; >;[

I think the componentWillLeave callback will be of help for hanging on to the DOM node: http://facebook.github.io/react/docs/animation.html#low-level-api-reacttransitiongroup

# ? Feb 19, 2015 01:46

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

Yeah, you don't have to use react transition groups top level api, go for the low level API that let's you define your transition end callbacks. The DOM element will stick around as long as you need it to.

# ? Feb 19, 2015 03:41

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Ahhhh those low levels hooks are exactly what I needed, thanks guys!

# ? Feb 19, 2015 05:48

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

I'm having this exact same problem http://stackoverflow.com/questions/26252266/sass-throwing-errors-about-things-it-should-not in my case it's _grid.css from Foundation 4 (which I haven't touched since in almost a year and it compiled fine back then)
The "solution" is just to downgrade SASS?
But to what version? How do I even do that?

All these SASS GULP things are supposed to make font-end development easier, but getting them set up and configured is so obtuse with mysterious command lines I feel like I'm using mid-90s Linux :argh:

EDIT: NEVERMIND I looked it up and ran more command line BS to downgrade to random version that worked. It's still stupid though :colbert:

The Merkinman fucked around with this message at 17:51 on Feb 19, 2015

# ? Feb 19, 2015 17:37

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

I don't use SASS anymore for that reason. Less CSS is actually pretty good these days, it has a JavaScript API for writing custom plugins, and doesn't have split implementations like SASS (libsass/rubysass) resulting in fragmentation and guess the version bs.

# ? Feb 19, 2015 18:17

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

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

bartkusa posted:

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.

I did come across that, and at first glance it looks pretty good, but too involved for what I needed (I just needed very basic slideUp, slideDown transitions, and maybe fadeIn and fadeOut. Very handy for future stuff though I'm sure, so cheers for that.

On another React note (I feel like that's all I've posted about for ages) is there an easy(ish) way to find out where you're missing a key? I keep getting notified in the console that I've missed a "key" prop somewhere but I can't figure out where. I've combed through my render method and even the output HTML and I can't see where it's missing from.

(Edit: never mind, I found it. I was setting the key prop, but the value I was using was a typo and so it was undefined. Doh!)

putin is a cunt fucked around with this message at 00:45 on Feb 20, 2015

# ? Feb 20, 2015 00:38

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

If you use the displayName attribute in your components, it'll be able to tell you the name of the component that contained the key error, which is usually enough for you to track it down.

# ? Feb 20, 2015 04:42

TildeATH: Oct 21, 2010; by Lowtax

The Merkinman posted:

getting them set up and configured is so obtuse with mysterious command lines I feel like I'm using mid-90s Linux

Webdevs have been making a CLI cargo cult for a while now. Annoying how people who do UI/UX/HCI can't implement those principles in their own tools.

# ? Feb 22, 2015 21:11

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

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.

# ? Feb 23, 2015 18:21

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

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

bartkusa posted:

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.

I don't think this is a solution to the problem I'm expressing as it already describes how I'm doing things. Your view-controller still has to know which component has which series of action "in flight". Imagine that ComponentOne and ComponentTwo are a couple of widgets with a form that change their state (spinner, success/fail indicator) based upon submitting the form. 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.

JavaScript code:

var ThingActions = Reflux.createActions({
  post: {asyncResult: true}
});

ThingActions.post.listen( function(arguments) {
    someAsyncAPIPost(arguments)
        .then(ThingActions.post.completed)
        .catch(ThingActions.post.failed);
});

# ? Feb 24, 2015 00:09

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

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Disclaimer: Please read the following with the understanding that I'm a bit naive/new to modern client-side development stuff (node, react, npm, requireJS etc) but I'm pretty experienced with web development in general. In other words, it's the tooling that I'm having trouble understanding - what to use, how to use it etc.

I'm having a lot of trouble wrapping my head around how to organise the various build/compile/minify processes that need to happen once you start to use Require and React/JSX. I'm using Visual Studio as my primary IDE for building the MVC site that underpins the app. This site renders each page and each page may or may not contain one or more React components. None of them rely on data external to themselves, except for the occasional AJAX call - my point being that they don't need to cross-communicate. So I have my JSX files set up with an NPM script I run that will watch the files and compile them to a bundle.js when something changes. This works well, I can work on the React stuff using Sublime Text and jump into Visual Studio for the meatier server-side stuff.

So to summarise my setup, VisualStudio project includes "bundle.js" in the BundleConfig and builds it into a larger bundle with some other JS that is served on every page. "bundle.js" is generated by an npm script that watches for changes and does the appropriate requires etc.

What I'm not sure about now is the best approach to including the React components in the views. Say I have a TodoList page and a FriendsList page. My thinking is that it makes some sort of sense to place the code for initialising each component into each separate page, rather than some global script. So on the TodoList page, I'll output the HTML with a container set aside for the TodoList, then have an inline script that just loads in the React component:

code:

<script>
    var todoListConfig = {};
    React.render(
        React.createElement(TodoList, {config: todoListConfig}),
        document.getElementById('TodoListContainer')
    );
</script>

Then on the FriendsList page I'd have something like this:

code:

<script>
    var friendsListConfig = {};
    React.render(
        React.createElement(FriendsList, {config: friendsListConfig}),
        document.getElementById('FriendsListContainer')
    );
</script>

The problem here, I think, is obvious. I can't access any of those global variables (React, TodoList) because they are built into modules using watchify, so they are actually privately scoped variables by the time this inline script is run. It seems like I would need some parent module that is loaded on every page, looks for the containers, and inserts the appropriate React component - is that correct? It seems icky, and I'm starting to become incredibly disheartened because I feel like I just don't get it.

putin is a cunt fucked around with this message at 03:48 on Feb 24, 2015

# ? Feb 24, 2015 03:37

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

How does site security work with a single-page app? For example, I can store in a Firebase a user's role (i.e. user, admin, etc...), and I can grab that role and use it to grant or deny access to sections of the site. But isn't it simple for someone to change the value of that role variable locally because everything's in Javascript? Do frameworks obfuscate things to prevent this? Do I have to accept that this is a possibility and instead ensure that the backend is locked down to prevent tampering?

# ? Feb 24, 2015 05:59

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Karthe posted:

How does site security work with a single-page app? For example, I can store in a Firebase a user's role (i.e. user, admin, etc...), and I can grab that role and use it to grant or deny access to sections of the site. But isn't it simple for someone to change the value of that role variable locally because everything's in Javascript? Do frameworks obfuscate things to prevent this? Do I have to accept that this is a possibility and instead ensure that the backend is locked down to prevent tampering?

The latter, you have to assume on the server-end that the client is evil and is trying to attack you.

# ? Feb 24, 2015 06:05

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

Yeah, the back end needs login credentials of some kind just like a standard website, usually a username/password login followed up with the creation of a securely randomized string as their session token. No difference, although you have more options for storage, cookies, local storage, memory only etc.

How long lived your session token is depends on your security requirements.

# ? Feb 24, 2015 06:14

hedgecore: May 2, 2004

Validation is the responsibility of both parts - on the front-end it mostly benefits the UI/UX (for a non-tampering user), but on the backend it's essential to enforce security and data sanitization.

It's best to assume the worst.

# ? Feb 24, 2015 06:16

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

hedgecore posted:

Validation is the responsibility of both parts - on the front-end it mostly benefits the UI/UX (for a non-tampering user), but on the backend it's essential to enforce security and data sanitization.

It's best to assume the worst.

Pretty much. The good thing that means you can be pretty specific in what the two layers do. Client side validation assumes good faith and user friendly messaging. Server side validation clamps down on bullshit requests and gives clear error signalling, rejecting anything that is poorly formed. The only data you should be getting is sane stuff and anything else can take a hike.

# ? Feb 24, 2015 12:14

Kekekela: Oct 28, 2004

I'm also in the 'getting started with react' camp. For me the most daunting part was getting an environment set up so that I could be writing jsx but still see my changes instantly in the browser. I found this to be insanely helpful in that regard: http://tylermcginnis.com/reactjs-tutorial-pt-2-building-react-applications-with-gulp-and-browserify/

# ? Feb 24, 2015 12:39

Horn: Jun 18, 2004; Penetration is the key to success; College Slice

Thermopyle posted:

JavaScript code:

var ThingActions = Reflux.createActions({
  post: {asyncResult: true}
});

ThingActions.post.listen( function(arguments) {
    someAsyncAPIPost(arguments)
        .then(ThingActions.post.completed)
        .catch(ThingActions.post.failed);
});

I can't help you with your issue since you're well beyond my understanding of react/reflux but I do have a question on the async construct in reflux. In the example you have here, how would you pass the results from the async call down to the store? I'm doing the following in my code but it doesn't seem to be idiomatic reflux

JavaScript code:

Actions.refreshData.listen(function() {
    var serviceUrl = 'https://www.example.com/something';
    reqwest({ url: serviceUrl
    }).then(function(data) {
        Actions.refreshDataSuccess(data);
    }).fail(function(error) {
        console.log("refreshData error" +error);
    });
});

The stores are setup to listen to Success/Fail actions. I've gone through the reflux docs but I haven't seen any examples of passing data back to the store using the asyncResult: true shortcut. I'm sure there's something stupid I'm missing but I haven't been able to crack this one just yet.

# ? Feb 24, 2015 14:42

Skiant: Mar 10, 2013

TildeATH posted:

Webdevs have been making a CLI cargo cult for a while now. Annoying how people who do UI/UX/HCI can't implement those principles in their own tools.

Yeah, and you hear quotes like Stephen Hay's "Learn to love the command line. It isn�t scary. You know how to use Photoshop which has 300 buttons. That�s scary." all the time.
What they fail to mention is that Photoshop makes discovering what those buttons do easy and painless (thanks to the undo).

Not to mention that most of that CLI Cult is pushing people to develop tools saying "unix only" and gently caress that poo poo.
The Internet hasn't been built to be "unix only".

# ? Feb 24, 2015 17:26

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

Horn posted:

refluxrefluxrefluxrefluxrefluxrefluxrefluxrefluxrefluxreflux

How you should have your Action set up:

JavaScript code:

Actions = Reflux.createActions({
  refreshData: {asyncResult: true} 
});

This actually creates three actions:

Actions.refreshData, Actions.refreshData.completed, and Actions.refreshData.failed.

Then you configure your completed and failed actions like this:

JavaScript code:

Actions.refreshData.listen(function(arguments) {
  var serviceUrl = 'https://www.example.com/something';
  request({url: serviceUrl})

    // Note that we just pass the action, no need to do an anonymous function.  
    // `.then` just calls the first argument with the data from your request
    .then(Actions.refreshData.completed)  

    // same with `catch`
    .catch(Actions.refreshData.failed)  
});

Your Store:

JavaScript code:

var Store = Reflux.createStore({
  init() {
    this.data = [];
    this.refreshing = false;
    this.listenToMany(Actions)
  },
  
  // methods get whatever parameters you call the action with.  
  // Probably nothing for refreshData, but you could if you wanted.
  onRefreshData(something) { 
    this.refreshing = true;

    // Whatever arguments we call `this.trigger` with, will come 
    // along to our event-listener methods in our components
    this.trigger(something)
  },
  
  // Reflux automatically hooks up methods in the store to the 
  // actions the store is listening to if you  use `listenToMany` or the `
  // listenables` property.  You just have to name the methods correctly
  // like I did in this store.
  onRefreshDataCompleted(data) {
    // we receive the `data` from the `.then` call in our action.
    this.data = data;
    // sending the data along instead of making component query for it because why not.
    this.trigger(data);  
  },

  onRefreshDataFailed(failed) {
    console.log("you done screwed up, son");
    this.trigger("FAILFAILFAILFAILFAIL");
  }
});

Hopefully that's a little more clear for you. Feel free to ask for clarification. Now's the time to do it as I'm knee-deep in implementing a reflux-based app right now so it's fresh in my mind.

# ? Feb 24, 2015 20:04

Horn: Jun 18, 2004; Penetration is the key to success; College Slice

Thermopyle posted:

Then you configure your completed and failed actions like this:
JavaScript code:
    // Note that we just pass the action, no need to do an anonymous function.  
    // `.then` just calls the first argument with the data from your request
  

This right here was what I was missing. Thanks again for the help.

# ? Feb 24, 2015 20:49

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

The Wizard of Poz posted:

Disclaimer: Please read the following with the understanding that I'm a bit naive/new to modern client-side development stuff (node, react, npm, requireJS etc) but I'm pretty experienced with web development in general. In other words, it's the tooling that I'm having trouble understanding - what to use, how to use it etc.

The problem here, I think, is obvious. I can't access any of those global variables (React, TodoList) because they are built into modules using watchify, so they are actually privately scoped variables by the time this inline script is run. It seems like I would need some parent module that is loaded on every page, looks for the containers, and inserts the appropriate React component - is that correct? It seems icky, and I'm starting to become incredibly disheartened because I feel like I just don't get it.

Think of each page you serve up as module. You build a script file for each, and include that.

JavaScript code:

// TodoPage.js
React = require('react');
TodoList = require('./TodoList');

var whut = {lol: "buttes"};
React.render(<TodoList config={whut} />, document.body);


// FriendsListPage.js
React = require('react');
FriendsList = require('./FriendsList');

var whut = {whee: "whoa"};
React.render(<FriendsList config={whut} />, document.body);

You then use browserify or whatever to make separate todo_bundle.js and friends_bundle.js out of those two files and include them on Todo.html and Friends.html respectively.

Obviously this assumes you have a multiple "page" app that gets a different set of functionality / React components on each. Remember that you can ignore React itself in the browserify / bundling process, and include it separately via a CDN or whatever to avoid having a bunch of bundles with React stuffed in them.

# ? Feb 24, 2015 21:12

skul-gun: Dec 24, 2001; I got this account for Xmas.

Thermopyle posted:

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.

Doesn't seem that icky to me. I've done something similar, though I don't use reflux.

ComponentOne and ComponentTwo generate an ID to represent their request (or perhaps the Action Creator generates it for them, whatever). ComponentOne and ComponentTwo store the IDs in their state.

ThingStore contains the set of in-flight and failed requests, identified by IDs generated above.

When ThingStore changes, ComponentOne and ComponentTwo interrogate ThingStore about the status of their requests.

Slightly annoying part is the cleaning up the accumulated information about failed requests, if that's necessary.

# ? Feb 24, 2015 22:16

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

Ember posted:

Unconsumed Computed Properties Do Not Trigger Observers

If you never get a computed property, its observers will not fire even if its dependent keys change

So now our code has a bunch of this.get('someComputedProperty') in the initializer of many classes just to make observers work.

# ? Feb 24, 2015 22:40

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Lumpy posted:

Think of each page you serve up as module. You build a script file for each, and include that.
JavaScript code:
// TodoPage.js
React = require('react');
TodoList = require('./TodoList');

var whut = {lol: "buttes"};
React.render(<TodoList config={whut} />, document.body);


// FriendsListPage.js
React = require('react');
FriendsList = require('./FriendsList');

var whut = {whee: "whoa"};
React.render(<FriendsList config={whut} />, document.body);
You then use browserify or whatever to make separate todo_bundle.js and friends_bundle.js out of those two files and include them on Todo.html and Friends.html respectively.

Obviously this assumes you have a multiple "page" app that gets a different set of functionality / React components on each. Remember that you can ignore React itself in the browserify / bundling process, and include it separately via a CDN or whatever to avoid having a bunch of bundles with React stuffed in them.

That's making a lot of sense to me, thanks! I'm not sure how to set up that separate bundling but I can Google that - cheers!

# ? Feb 24, 2015 23:51

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Newbie react question...how come I'm not getting the alert when a button is clicked?

Here's my jsfiddle: http://jsfiddle.net/7phvhdgf/1/

# ? Mar 3, 2015 02:39

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

^ 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?

# ? Mar 3, 2015 03:03

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

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

bartkusa posted:

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".

Doh! Thank you =)

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

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

# ? Mar 3, 2015 03:49

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

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

bartkusa posted:

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

undefined

# ? Mar 3, 2015 07:12

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 13:04

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

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

«‹›235 »