|
Lumpy posted:
Ah, this makes sense. I wasn't visualizing it right in my head. Thanks!
|
#
?
May 1, 2017 18:45
|
|
|
|
| # ? Jun 7, 2024 17:25 |
|
|
I have had cases where I've put two React apps on the same page, and it's because I'm trying to force-fit React into a legacy Rails site that I'm adding features to. I don't think it's something I would ever do if I was starting from scratch and had control over my stack.
|
|
#
?
May 1, 2017 19:09
|
|
|
COOL CORN posted:Ah, this makes sense. I wasn't visualizing it right in my head. Thanks! Sure thing. Your NavBar can go inside the router too if it needs access to any state that only lives there.
|
|
#
?
May 1, 2017 19:19
|
|
|
I know (and work on) some apps that have multiple React roots. Almost all of them are legacy systems migrating to React, but some use it for exception isolation (so an exception during rendering won't bring down the entire application). Should be unnecessary in the next version of React though (and you can already abstract it away into a component right now as well).
|
|
#
?
May 1, 2017 19:55
|
|
|
HOLY CRAP meteor is actually pretty cool. In under 3 hours, I went from having a React app with 3 components with all my data as the state to having 2 components where all my data saves in MongoDB and being able to call it super easily. Meteor is preeeeeeeety loving sweet. I feel like I'm really starting to get this modern development stuff. teen phone cutie fucked around with this message at 22:14 on May 1, 2017 |
|
#
?
May 1, 2017 22:11
|
|
|
Helicity posted:Not to be snarky, but ask yourself what the definition of "main" is. I think it's kind of limiting to view React as a container for apps. It's not, it scales up to that but it's merely a view, it really makes no difference if that's multiple views or one single one. They could all be controlled by a single redux store and the difference would be largely academic except you have options to actually try new renderers in isolated areas of your app, maybe even Elm. I'm trying something with a new project I'm working on that renders each page as a single React mount, so I can express transitions between them with far more flexibility, but also give me the option of using whatever I like to render each discrete view or chrome element, Elm, React, whatever, because the state is housed in Redux, not React. Might be misguided but honestly the dev experience has been really nice this far, and exceptions are handling well rather than just making GBS threads the bed, which I like.
|
|
#
?
May 2, 2017 00:05
|
|
|
How the heck you consume an external graphql API? I'm looking at graphqljs examples but the examples all seem to take in account a local server, not an external endpoint. I don't want to setup Relay because this is for a technical assignment, and I don't want to lose time reading up on Relay to simply do two queries on their API. edit: eff it, I'm going to use https://github.com/kadirahq/lokka seems simple enough Honest Thief fucked around with this message at 14:53 on May 2, 2017 |
|
#
?
May 2, 2017 14:43
|
|
|
How are you React folks handling responsive menus and so on? Any issues using plain old CSS stuff coupled with either the checkbox trick / manipulating class name via refs? Is there a better / standard way?
|
|
#
?
May 2, 2017 15:00
|
|
|
Lumpy posted:How are you React folks handling responsive menus and so on? Any issues using plain old CSS stuff coupled with either the checkbox trick / manipulating class name via refs? Is there a better / standard way? Express the menu structure as simple object/array liberals and then write a component for each design? I think any app, if it gets to a certain point of complexity & scale, shouldn't be built the old way where you hammer one HTML set into all the breakpoints. Send the client width and height down as a prop and let components be chosen based on that. It's not a static render way to do it but that's the assumption. But then you can also work towards mobile/desktop static renders too to address that if it's important. That's not to say your old tricks won't work still, but as usual it's all situational. Old tricks still work just fine, it just depends whether it's actually the best option. As an aside this is why my recent exploration into an application wrapper allows you to assemble the views, chrome & routes into more than one UIContext, because it makes it easier to handle the conditional changes in one place and see how it flows down. Mouse vs Touch interface stuff can get out of hand pretty quickly in a single breakpoint oriented app.
|
|
#
?
May 2, 2017 16:40
|
|
|
Honest Thief posted:How the heck you consume an external graphql API? I've been using Apollo client for my playing around and you just point it at any ol' URL: http://dev.apollodata.com/react/simple-example.html
|
|
#
?
May 2, 2017 16:56
|
|
|
Maluco Marinero posted:Express the menu structure as simple object/array liberals and then write a component for each design? If people never resize, then great!  I'm just hesitant to listen to resize and re-render the whole app based on that. Then again, I probably shouldn't be. 
|
|
#
?
May 2, 2017 18:38
|
|
|
Lumpy posted:If people never resize, then great! Just use media queries to switch it to a mobile friendly version at some breakpoint. What I've done in the past is have my nav restyled at a certain breakpoint to work on mobile and have it hidden by default, then show a toggle button that has an onclick method attached to it that adds a show class to the hidden mobile menu.
|
|
#
?
May 2, 2017 18:43
|
|
|
ddiddles posted:Just use media queries to switch it to a mobile friendly version at some breakpoint. What I've done in the past is have my nav restyled at a certain breakpoint to work on mobile and have it hidden by default, then show a toggle button that has an onclick method attached to it that adds a show class to the hidden mobile menu. That's what I'm doing, I just wondered if there was some fancy-pants thing that came out in the last few months that "everyone" used now. Actually, I have my nav hold a local state flag, which buttons that only show when small set, and that toggles a class name on the menu, which at big size does nothing, but hides / shows when it's small. Lumpy fucked around with this message at 19:26 on May 2, 2017 |
|
#
?
May 2, 2017 19:23
|
|
|
I've been building a proof-of-concept of the crux of my company's application in react. I built a dynamic form following this method: http://stackoverflow.com/a/40896168/671896 (we have hundreds of clients each building multiple forms from ~30 preset types) It's going really well, but I feel that I've hit a bit of a wall (maybe). It has to do with sibling components that rely on the previous components value to generate. For example. I have series of dropdowns that are parent / child related. Dropdown A Dropdown B (values populated determined by value of A) Dropdown C (values populated determined by value of B) In an ideal world, I could replace this with an autocomplete and build the tree beforehand. But that would require the user to know what to start to type to see the results. Plus many of our clients have things like: Javascript > Security > React Javascript > Frameworks > React In the end, each "React" here would be a different classification value. Anyway, do I have this correct: If I make an api call to get all the values and now for "Dropdown B" has a different parent value, when I render() it's only updating "Dropdown B" (and subsequently "Dropdown C"?) even if the render() call with the List of components updates N components? I guess what I'm asking is: I don't explicitly talk directly to "Dropdown B" from "Dropdown A". I just get a fresh datasource, render() it all and React decides what needs to be updated?
|
|
#
?
May 3, 2017 02:40
|
|
|
Yeah, you would have some sort of form component or something that has the whole form state/props in mind and can pass dropdown B its correct choices as props based on that form state.
|
|
#
?
May 3, 2017 03:16
|
|
|
Lumpy posted:If people never resize, then great! As an aside a couple of questions I think are worth asking: Is the breakpoint actually size, or is it more like mouse vs touch How often is that range of resizing used, in touch it's usually real straightforward, portrait or landscape. In mouse land it's less so. If you don't wanna re-render is there a problem with just having both menu types and display none-ing the one that's not applicable. I guess I've come to the conclusion that constant resizing is a thing nerdy designer devs from the fluid layout days love to do, but a real user picks a size and then stops.
|
|
#
?
May 3, 2017 03:20
|
|
|
What's everyone using for error tracking? I've seen Bugsnag mentioned a few times, but for a decent sized team it's not cheap. Anyone using Sentry, or something else?
|
|
#
?
May 3, 2017 04:15
|
|
|
Any tip on how to avoid CORS issues when hosting on localhost with webpack dev server? I simply use the chrome CORS enable extension to speed things up but I can't send it like that.porksmash posted:I've been using Apollo client for my playing around and you just point it at any ol' URL: http://dev.apollodata.com/react/simple-example.html
|
|
#
?
May 3, 2017 11:02
|
|
|
Depending on how you're running Webpack Dev Server you should be able to set it's headers, recently on one project I'm working on:code:
|
|
#
?
May 3, 2017 11:13
|
|
|
Maluco Marinero posted:Depending on how you're running Webpack Dev Server you should be able to set it's headers, recently on one project I'm working on: I'm doing something similar with this extension of the fetch library https://github.com/gucheen/FetchQL but I still end up having to circumvent the whole thing by way of a CORS enabler extension at the browser level. I'll try and see if setting the headers at webpack level will have a bigger impact, still, thanks. Honest Thief fucked around with this message at 11:29 on May 3, 2017 |
|
#
?
May 3, 2017 11:24
|
|
|
Honest Thief posted:I'm doing something similar with this extension of the fetch library https://github.com/gucheen/FetchQL but I still end up having to circumvent the whole thing by way of a CORS enabler extension at the browser level. I'll try and see if setting the headers at webpack level will have a bigger impact, still, thanks. It depends which endpoints are causing the CORS issue. It's the responsibility of the server to allow CORS, the client already knows what to do from there, so you should have clear errors as to which requests are failing CORS.
|
|
#
?
May 3, 2017 13:16
|
|
|
Maluco Marinero posted:It depends which endpoints are causing the CORS issue. It's the responsibility of the server to allow CORS, the client already knows what to do from there, so you should have clear errors as to which requests are failing CORS. I think the issue is chrome straight up rejecting any requests when the origin is localhost, rather than the API server which I don't have access to.
|
|
#
?
May 3, 2017 13:30
|
|
|
Hmm okay. You can always get around that by binding a valid host name to 127.0.0.1 in your hosts file, ie local.projectname.com
|
|
#
?
May 3, 2017 13:34
|
|
|
Maluco Marinero posted:As an aside a couple of questions I think are worth asking: It's size. We show a ton of data with the ability to interact with it, so on mobile, the UX is not so good. The joys of going from "tech demo" to "ahhhh, this needs to go live!" that we all so well.
|
|
#
?
May 3, 2017 13:56
|
|
|
Lumpy posted:It's size. We show a ton of data with the ability to interact with it, so on mobile, the UX is not so good. The joys of going from "tech demo" to "ahhhh, this needs to go live!" that we all so well. Why is this going mobile? What's the use case on mobile? Who's the mobile audience? A lot of places want to go mobile just because, and it's not always a good idea.
|
|
#
?
May 3, 2017 14:20
|
|
|
Maluco Marinero posted:Hmm okay. You can always get around that by binding a valid host name to 127.0.0.1 in your hosts file, ie local.projectname.com Yeah, that's true, but if I deliver the assignment I'd like to avoid an addendum like "please enbale a valid hostname on your local machine" or something like that
|
|
#
?
May 3, 2017 14:34
|
|
|
Honest Thief posted:I think the issue is chrome straight up rejecting any requests when the origin is localhost
|
|
#
?
May 3, 2017 14:44
|
|
|
Kekekela posted:Weird, I run CORS requests from localhost through Chrome all the time. I'm sure there are many things that could be set up differently in our environments though. edit:gently caress this, I'll make a small backend api and run the external requests through there Honest Thief fucked around with this message at 15:05 on May 3, 2017 |
|
#
?
May 3, 2017 14:58
|
|
|
Pollyanna posted:Why is this going mobile? What's the use case on mobile? Who's the mobile audience? Because lots of our potential customers do a majority of their internet on their phones. Don't worry, I've made sure there's an actual use case.
|
|
#
?
May 3, 2017 15:53
|
|
|
I think listening to the resize event is going to be your best bet. I mean in reality how often are people rotating their phone or resizing their browser windows, while browsing?
|
|
#
?
May 3, 2017 17:18
|
|
|
Looking for an easy way to scroll to a component on componentDidMount However, I don't want to do the scroll if the page is being loaded for the first time, as I have one component that's going to have rendered again and again if a form to add another component is filled out. Any ideas? e; Actually, I guess it should go in componentDidUpdate, but still having problems scrolling to the component, as it's inserted into a list sorted in alphabetical order. teen phone cutie fucked around with this message at 20:05 on May 3, 2017 |
|
#
?
May 3, 2017 19:16
|
|
|
Honest Thief posted:I guess the issue is at the API server itself That makes sense. I had to do add some code to my web api project to properly handle (ie ignore) the options request that precedes the actual request, or it'd return a CORS error. quote:I'll make a small backend api and run the external requests through there Yeah, this is what I do for external stuff. Kekekela fucked around with this message at 19:20 on May 3, 2017 |
|
#
?
May 3, 2017 19:18
|
|
|
I R SMART LIKE ROCK posted:I think listening to the resize event is going to be your best bet. I mean in reality how often are people rotating their phone or resizing their browser windows, while browsing? I think you and Maluco are right. Size changes will be rare, and with smart checking on the conversion from window size to "app size" I won't re-render very often. So I'll put a windowWidth prop in the store that's hydrated on launch with sizes mapped to "SMALL_WINDOW" and "NOT_SMALL_WINDOW", then resize can fire a debounced action to update that for the few things that vanilla media queries can't handle. Lumpy fucked around with this message at 19:19 on May 3, 2017 |
|
#
?
May 3, 2017 19:16
|
|
|
Oh, actually one thing to keep in mind is last I did stuff like this I found Android's browser considers the keyboard something that alters the viewport (unlike iOS which lays the keyboard over the top not altering the viewport). This has clear performance ramifications if you listen to onResize to do layout altering things. We ended up wrapping the onResize function with something that check whether both dimensions changed (a rotation) or just heigh (a keyboard summon) and worked with that accordingly. Thanks android.
|
|
#
?
May 3, 2017 22:49
|
|
|
Maluco Marinero posted:Oh, actually one thing to keep in mind is last I did stuff like this I found Android's browser considers the keyboard something that alters the viewport (unlike iOS which lays the keyboard over the top not altering the viewport). Thanks for the heads up! I (think I) only care about width, but I will keep that in mind.
|
|
#
?
May 4, 2017 01:46
|
|
|
Honest Thief posted:I guess the issue is at the API server itself, but I'm not sure if that's something they did on purpose or what, I mean I could try going through jsonp. If you run Chrome with --disable-web-security it'll ignore all cors errors and let you do your thing.
|
|
#
?
May 4, 2017 03:56
|
|
|
Bruegels Fuckbooks posted:If you run Chrome with --disable-web-security it'll ignore all cors errors and let you do your thing. This is how I have to handle this because our infrastructure team is SUPER slow. I made the following alias in my .bash_profile: pre:alias dangerchrome='open -a Google\ Chrome --args --disable-web-security --user-data-dir'
|
|
#
?
May 4, 2017 12:42
|
|
|
Here's a cool thing: prepack from facebook. They wrote an ES5 interpreter in javascript and then use it as a build step to optimize your source for speed. For example, it takes this: code:code:I can't seem to find any benchmarks yet, but it seems like a cool project.
|
|
#
?
May 5, 2017 15:42
|
|
|
Thermopyle posted:Here's a cool thing: prepack from facebook. I woke up this morning and said to myself "Boy, I really wish there was yet another thing I could add to my build process..." Facebook, you've done it again! (But seriously, this is pretty cool)
|
|
#
?
May 5, 2017 15:51
|
|
|
|
| # ? Jun 7, 2024 17:25 |
|
|
Unless you're working on a game/library/framework, I don't see why you'd need what prepack brings to the table. In those situations where speed is that critical, you probably want to understand how to manually profile and tune the language. "leveraging Prepack as a platform" sounds loving horrible and stupid. An interesting project but I'm struggling to figure out how I'd want to use it.
|
|
#
?
May 5, 2017 16:10
|
|
