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

Ochowie: Nov 9, 2007

Has anyone used Backgrid.js? It seems pretty nice but I'm wondering if there are better alternatives as I'm pretty new to Javascript development. Also, any thoughts on D3.js? It seems like a really neat visualization library.

# ¿ Nov 19, 2013 22:42

Adbot: ADBOT LOVES YOU

# ¿ May 7, 2024 04:41

Ochowie: Nov 9, 2007

I've been playing around with Meteor and it seems like a really cool concept. One nagging doubt that keeps coming up is that it seems like you are buying into a full stack solution. In other words, if I was working on a mobile app and decided I wanted to switch to a native app rather than something like PhoneGap all of the server side work I did with Meteor is essentially useless whereas if I was using something like Backbone, chances are I could reuse my services with a native front end. Is there something I'm missing or is this just the tradeoff of using Meteor?

# ¿ Feb 19, 2014 02:16

Ochowie: Nov 9, 2007

In Angular, how do you catch the event when a tab is closed or the whole page is refreshed. I am working with Angular and SignalR and it seems that since Angular co-opts the window unloaded event that the SignalR connection isn't terminated (the OnDisconnect doesn't fire on the server). I tried using

code:

$rootScope.$on('$stateChangeStart')

but that seems to work only for transitions between multiple view templates and not a complete exit of the page.

# ¿ Aug 20, 2014 03:09

Ochowie: Nov 9, 2007

SuicideSnowman posted:

Not sure of the Angular way, but with straight JS you can use window.onbeforeunload and that should handle both refreshes and tab closes..

edit: looks like you may have tried this already? Perhaps $locationChangeStart instead of $stateChangeStart

$locationChangeStart seems to trigger when I load a page rather than when I destroy the app. I hit the breakpoint when I reload the page but I don't hit my server breakpoint when I destroy the page by closing the tab.

# ¿ Aug 20, 2014 16:51

Ochowie: Nov 9, 2007

Is there a way to catch an event when an Angular app is completely unloaded? Basically, I'm storing a authentication status in sessionStorage which means that if I open a new tab I have to log in again. If I switch to localStorage that issue goes away but I have no way of clearing localStorage out after I close the tabs so when I reopen them I don't get another login screen. If there is a better way to handle this sort of thing I would be open to that as well.

# ¿ Sep 6, 2014 02:47

Ochowie: Nov 9, 2007

v1nce posted:

Wait, so if you open the app in a new tab/window at all, you have to login again? Why not just store the credentials in a variable in a service that's not persisted on the client side? When the app is reloaded, they won't have their credentials.

If you have server-side authentication using session and you want to keep using that, you could just add an extra "token" credential that's generated at login and shared between client/server, but don't keep the token in persistent storage on the client side. If the request from the client doesn't include the token, then they're not logged in, and you can trash the server session for the user.

If you do that, be aware that the session persistence will be to the cookie (browser session), so if you want to be logged in on two tabs and use session credentials too, you might need a way of storing multiple tokens and to never destroy a users session, or you'll only be able to log into one tab at a time.

Thanks. I've decided to go with an expiring token that's issued and validated server side. Although that's raised some more issues, but that's for the .NET thread.

# ¿ Sep 10, 2014 15:33

Ochowie: Nov 9, 2007

Has anyone here worked with the boostrap-ui tools for Angular? I'm using the modal functionality and it seems like the modal window doesn't inherit the parent's scope like a normal Angular controller does. Is there any way around this? I have a view that I'd like to reuse as a modal pop-up , however the view uses some data from the parent scope and that data is not coming through when the view is launched as a modal. Is there any way around this or do I really have to create a separate controller that takes in the scope object I'd like to share?

# ¿ Feb 6, 2015 17:15

Ochowie: Nov 9, 2007

SuicideSnowman posted:

You can pass data through to modal with resolve:
code:
var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });
Then in the controller for the modal just do something like:
code:
controller('ModalInstanceCtrl', function($scope, $modalInstance, items) {
	$scope.items = items;
});
Then when you access or change $scope.items in the modal those changes will be reflected in the original as well. This code is taken from the bootstrap-ui documentation.

I was hoping to use the same controller as the non-modal version.

# ¿ Feb 6, 2015 18:10

Ochowie: Nov 9, 2007

SuicideSnowman posted:

Sorry, I read your question wrong. In that case, no I don't believe you can do that. You have to pass objects with resolve.

https://uithought.wordpress.com/2014/09/23/use-the-same-controller-for-modal-and-non-modal-template-in-angular-ui-bootstrap/

There's a possible solution.

That helped. I didn't know you could pass a scope to the modal separately, so I added the shared object to the scope and passed it to the modal and that worked. Now the controller is the same for both display modes.

# ¿ Feb 7, 2015 23:24

Ochowie: Nov 9, 2007

So I have another boostrap-ui modal question. Is there a way to make the largest modal view wider? I have a large table that I'd like to display in the modal view and it runs off the edge of the window on the right and starts writing in the "blacked out" space. I'm starting to think the modal idea isn't worth it and I should just redirect the user to the appropriate page but if anyone has any ideas I would appreciate it.

Edit: Got rid of the modal approach for now. I think it looks better this way anyways.

Ochowie fucked around with this message at 18:14 on Feb 13, 2015

# ¿ Feb 13, 2015 16:38

Ochowie: Nov 9, 2007

I've been out of this thread for a while and I'm wondering if there are any good tutorials for React/Flux that involve building a non-trivial example app.

# ¿ May 21, 2015 21:49

Ochowie: Nov 9, 2007

yoyomama posted:

I remember following this: http://tech.pro/blog/2020/a-thrown-to-the-wolves-hands-on-introduction-to-react

I found it more helpful to follow than some of the usual todo app examples.

This looks good thanks. When I learned Angular it was pretty easy to see the default structure for the various components but a lot of the React tutorials I've seen have the code right in the HTML file which can't be the right way to go. Also is jQuery the most common way to interact with backend services or are there better options?

# ¿ May 22, 2015 22:08

Ochowie: Nov 9, 2007

So in the course of looking at delving into React I see that almost all of the examples out there use node.js as the backend routing framework. Coming from Angular which has the routing built into the client side code I'm not sure what the equivalent (if any) would be for React. Do I have to resign myself to doing the front-end piece using node and then have my api in whatever language I feel like?

# ¿ Jun 5, 2015 22:30

Ochowie: Nov 9, 2007

Stoph posted:

I think you're confused as gently caress. You might want to ask more clarifying questions because I'm not sure how to approach this.

The backend/server does not necessarily have to have anything to do with React.js - it's just like AngularJS in that regard. I use it with PHP as the backend, for example.

It's very possible. I think I'm getting confused between React on it's own and Flux. Flux seems to be dependent on node.

Lumpy posted:

React is just views. If you mean routing for what views to show based on URL, then React Router is the bee's knees. If you mean 'fetching data from my backend based on what the user did', then React does not do that. In the Flux architectural pattern that's widely used w/ React, Actions are triggered by user interaction, and then the Action fetches data from wherever, and passes it to Stores to update. When a Store updates, it tells components that care, they get the data they need from the Store. (Some people have the Action trigger a fetch on a Store to update itself)

I meant the first part, displaying views based on URL. For the second part, I assume that using the jQuery AJAX functions would work as an alternative to Flux, right? Mainly, as Lumpy said, I'm confused as gently caress...

# ¿ Jun 6, 2015 00:42

Ochowie: Nov 9, 2007

piratepilates posted:

Flux is purely client-side, it has nothing to do with Node. It's just an architecture for front-end development that's all about events being the prime movers for your application.

Thermopyle posted:

Flux doesn't have anything to do with node.

When I was reading the introduction and ToDo tutorial it mentioned using node's EventEmitter and I took it to mean that it's tied to node in some manner. But I guess not and I think I need to step through the tutorials again.

# ¿ Jun 6, 2015 00:48

Ochowie: Nov 9, 2007

How good are the Egghead.io tutorials for learning React/Flux? I've been wanting to create a small site as a personal project using React and have been having a tough time finding good resources.

# ¿ Aug 31, 2015 20:49

Ochowie: Nov 9, 2007

Parrotine posted:

Have you ever hit a wall with learning a general concept so hard that it's caused you to contemplate if you've picked the wrong career path, despite months of investment trying to learn the general framework?

This is how I feel when it comes to methods.

I have this challenge in my Thinkful course where i'm supposed to build the function for this 'Hot or Cold' game app in order to get it to work, connecting the already built HTML/CSS to bring these static files to life. Despite spending the weekend trying to wrap my head around all the new terminology and working my way through the example exercises, I was still nowhere close to figuring out how to build this thing outside of the general 'function newGame () { }' frame.

I caved and found the correct answer through this codepen online, but i'll be damned on how I was supposed to put this together myself. Here's the correct answer for those interested:
code:
function newGame() {
    var randomNumber = value;
    
    randomNumber = Math.floor(Math.random() * 100);

    randomNumber.check = function(value) {
      if (value === randomNumber.number)
        return true;
      } 
  }
The codepen is here: http://codepen.io/iamromanh/pen/XbjeMg?editors=001

Had to spend a good chunk of today trying to figure out what half of that stuff even is, much less what's causing what to go where and do what in the app.

Maybe someone could break this function down in layman's terms so I can better grasp what's going on in this thing? I tend to learn better by reverse engineering the finished solution in order to wrap my head around it, and i'm pretty burnt out already :?

Skandranon posted:

Are you asking how it gets hooked up to the application at large? Or just how this function works? Math.floor() removes any decimals. Math.random() creates a random number between 0-1. Multiplying by 100 and removing decimals gets you a random number between 0 and 99. randomNumber.check() is a function which when passed in a number, will check against the generated number. Not sure why it works in general though, it doesn't make a lot of sense, a more sensible function would be
code:
function newGame() {
	var randomNumber = {};
	randomNumber.number = Math.floor(Math.random() * 100);
	randomNumber.check = function(value) {
		return value === randomNumber.number;
        };
}

The original version doesn't make sense to me. It has an inner function that is never called so the outer function doesn't return anything. Also, randomNumber.number would be undefined in the original version wouldn't it? I know javascript is hosed up but I don't think Math.floor adds a number property to randomNumber silently. Your version makes sense except it still doesn't return anything from newGame().

# ¿ Sep 3, 2015 09:04

Ochowie: Nov 9, 2007

What's the best IDE/Text editor for developing React? I've found WebStorm and Sublime struggle with JSX indentation. How is Facebook's Nuclide?

# ¿ Nov 29, 2015 20:23

Ochowie: Nov 9, 2007

Lumpy posted:

I use VIM and it handles it fine. But unless you already know VIM, it might not be "the best".

I've tried with VIM but it's a bit of a pain to set it up to handle some of the JSX elements.

Skandranon posted:

VSCode (supposedly, not tried it) support for both JSX and TSX (TypeScript).

I'll give VSCode a try.

# ¿ Nov 29, 2015 23:05

Ochowie: Nov 9, 2007

Thermopyle posted:

FWIW, I do tons of JSX in Webstorm and only have a few minor complaints about its JSX formatting...

WebStorm is probably the closest I've used but there are a few things that annoy me about it. For one, it defaults to quotes for tag attributes instead of curly braces. Also, sometimes the elements don't line up. I think it's that I'm still not that used to or a fan of JSX syntax.

# ¿ Nov 30, 2015 00:40

Ochowie: Nov 9, 2007

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

bartkusa's answer is probably the correct one. However, if you don't want to go down that approach you could wrap the text elements in a form and use a form onSubmit event instead of a button onClick, addiing an event parameter to your event handler, and accessing the individual text boxes. This is pretty hacky and I would strongly suggest looking at some Flux framework. One note to point out though is that even in the Flux version the event handler would need to be pushed down to the UserInput component since it would need access to the values of the text boxes to add into the action (unless I'm missing something. I'm still pretty new to React/Flux myself).

# ¿ Dec 8, 2015 01:44

Ochowie: Nov 9, 2007

Helicity posted:

For small stuff like that I honestly wouldn't even bother with the Flux framework - just use the pattern. Bind events to a handler, have the handler figure out what event happened, and update the store appropriately (which is really just your model, aka a Javascript object). You don't need to do the annoying passing of the handler down the component chain. I'll see if I can scrounge up an easy example at work tomorrow morning.

Also, I'd go back to their tutorial and look at how children work. I honestly don't think I've ever used refs before because there isn't really a need in a lot of cases.

Pretty sure refs aren't exposed up the hierarchy. I think the easiest way would be to create the event handler on the child but pass a function from the parent to the child via props that takes an argument. The event handler in the child would call the function from the parent that would update the state.

# ¿ Dec 8, 2015 05:09

Ochowie: Nov 9, 2007

Helicity posted:

I'm saying not to use refs - instead do what you recommend with passing the root component's update function down through the props, or implement the flux pattern. Anytime you see .getDOMNode() in React there should be alarm bells going off because the whole point of React is that working with the DOM's API is horrible. Passing the root component's update function down through props is easy enough until you get more than a few layers of components and/or a few update functions, then it becomes a maintenance PITA so I'd do it once to see how it works and then happily move on.

Here's my quick and dirty "flux pattern" implementation that I mentioned the other day. It doesn't get hung up in naming things actors or dispatchers, or forcing a bunch of cruft on you. It does enable you to do one-way data flows to a central store without annoying prop chaining, which is why it's nice.

Sorry, didn't mean to imply that you said that I was (wrongly) confirming your impression.

# ¿ Dec 10, 2015 03:05

Ochowie: Nov 9, 2007

caiman posted:

Is Browserify the best solution for allowing modularization of my React components?

I've been using Webpack and have been pretty happy with it.

# ¿ Dec 15, 2015 00:49

Ochowie: Nov 9, 2007

Here's a dumb question. Are people using React and Redux in a non SPA situation? I've been thinking of going down that route because I'm not a huge fan of putting everything through React Router. I feel like I have to hard code the routes and it could get unwieldily as the application grows. It seems that React and Redux could be modular enough to be used across different pages.

# ¿ Jan 30, 2016 07:31

Ochowie: Nov 9, 2007

Anony Mouse posted:

So, trying to wrap my head around React + Redux.

Take a look at this very, very basic example I put together: https://jsbin.com/xapeza/7/edit?js,output

Is this an acceptable design pattern? It seems sketchy to manually trigger forceUpdate() when one of the tenants of React is that components are supposed to just automatically respond to changes in state. I'm aware of react-redux, but I'm not quite sold on its purpose. Is it just to help connect Redux and React and avoid manually doing forceUpdate()? Does React's efficient diff engine mean that forceUpdate() isn't actually very costly?

Yes it connects the two together via functions that you create describing how to map the store's state to your component's props. I highly recommend Dan Abramov's egghead.io Redux videos which go through several methods of connecting React and Redux.

# ¿ Feb 12, 2016 03:33

Ochowie: Nov 9, 2007

Never mind. I was for some reason trying to see a the source map of the bundled file rather than the original TS file.

Ochowie fucked around with this message at 22:53 on Apr 29, 2016

# ¿ Apr 29, 2016 22:45

Ochowie: Nov 9, 2007

Thermopyle posted:

Anyone doing React+Redux in TypeScript?

How well does it work?

Do you feel like you're contorting the tools?

When getting help from the internets for React or Redux do you ever wish you were just writing vanilla ES6?

In my limited work with it (and my general terribleness), the most annoying thing I've seen is that if you specify an interface for a component's props and you're using react-redux connect to map them in from the store, then you need to mark those interface members as optional otherwise it will fail to compile. There is also some weirdness in terms of specifying the return types of mapStateToProps and mapDispatchToProps. Basically if you don't setup the types accordingly it will infer it to be an intersection type of the return types of mapStateToProps and mapDispatchToProps rather than a combination of them.

Edit: Also, if you have a reducer that operates on actions with more than on payload type then I guess you would have to define a union/intersection type for that payload and then test (and cast) the action payload to that type.

Also, the object spread operator isn't part of the language yet which I've found to be infinitely better than Object.assign but that might be preference.

Ochowie fucked around with this message at 01:54 on Jun 7, 2016

# ¿ Jun 7, 2016 01:51

Ochowie: Nov 9, 2007

Rocko Bonaparte posted:

Yes--I was going through them. I was just surprised that prompting for a username and password, and saving that information across payloads, was not some basic API thing in YOOL 2016. This is especially because I would consider stuff like that to be sensitive and likely to be screwed up in insecure ways. I would have figured it would be wrapped in some standard calls. My perspective is coming from never doing this kind of thing before now and having set up some expectations from these frameworks before reaching user authentication. That's pretty much all me, but I'm still going to run my mouth about it on the Internet for a little bit.

Generally speaking, the host side with Django was less of a surprise to me.

Take a look at auth0. It provides everything you would need to implement authentication including APIs and examples for most major frontend and backend frameworks.

# ¿ Dec 19, 2016 21:54

Ochowie: Nov 9, 2007

Rocko Bonaparte posted:

Ugh... after I got basic authentication going. I still might though.

If you want to use Google or Facebook as authentication options it makes it really easy.

# ¿ Dec 25, 2016 03:09

Ochowie: Nov 9, 2007

Couldn't you validate the date after the control loses focus using the onBlur event?

# ¿ Jan 19, 2017 00:30

Ochowie: Nov 9, 2007

Lumpy posted:

Spend the afternoon watching Dan Abromov's Egghead React/Redux videos. You seem to have a tenuous grasp on how React actually works for someone who has been asking questions about it for so long.

Definitely do this. After that, take a look at redux-forms. I've found it makes splitting container and presentation components really easy. It has some things I don't like but it's been the best solution I've found so far.

# ¿ Jan 20, 2017 18:56

Ochowie: Nov 9, 2007

The Wizard of Poz posted:

Is it acceptable to use the lifecycle methods for this?

I hope so. Otherwise I've been doing it wrong.

# ¿ Jan 26, 2017 00:21

Adbot: ADBOT LOVES YOU

# ¿ May 7, 2024 04:41

Ochowie: Nov 9, 2007

Lumpy posted:

If you only have a render function, you can just use that function as the component. It will be passed in props as an argument. You can still do fancy stuff like mapping and using refs even:

~~You can't use refs in functional components.~~

edit: Looks like you can use refs inside functional components but not on functional components. Sorry about that.

Ochowie fucked around with this message at 19:31 on Feb 9, 2017

# ¿ Feb 9, 2017 19:28

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