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 »

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

Karthe posted:

This isn't React specific, but a good rule of thumb for whenever you work on anything that interacts with a server: it's impossible to prevent anyone from tweaking any of your site's javascript once it's been downloaded to their computer. Assume that anyone who uses your website can unlock the full potential of the site.

What you need to focus on, then, is locking down your API end points to require authentication. Authentication can be handled by something as simple as a token that gets passed in with every request. This token is then used on the server side of things to verify that the user making the request has the appropriate permissions to make changes to the database. If no token is present, or if the presented token represents a user with insufficient permissions, then the request is dropped as unauthorized. Once you have that in place, it won't matter that someone has made a change to some JSON on their local machine because they won't be able to commit any of those changes to your database!

So does this completely rule out the idea of storing user data in static .json files, without an API/database?

# ? Dec 10, 2015 23:01

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 09:07

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

caiman posted:

So does this completely rule out the idea of storing user data in static .json files, without an API/database?

No*, you just have to check on the server side to see if the user has permission to do the thing they're trying to do.

*this assumes you have an otherwise sane and secure user access control system which it sounds like you might not, especially if you rolled itself

# ? Dec 10, 2015 23:20

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

caiman posted:

I appreciate all the helpful replies.

Another noob react question: say I have some code that allows only a logged in user to modify a file on the server via a react component (like updating a .json file, or something). What's to prevent an anonymous user from tinkering with the JS in his devtools and performing the same modifications?

Repeat after me: "Never trust the client. Never trust the client. Never trust the client..."

# ? Dec 10, 2015 23:31

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

Lumpy posted:

Repeat after me: "Never trust the client. Never trust the client. Never trust the client..."

It could be worse. I once inherited a VBScript web application (IE 6 only!) that used a hard coded SQL connection string (with username and password) to directly connect to the database and execute hard-coded, concatenated SQL statements. This was an internal application that was used to distribute work and whose data would dictate if people got raises or fired.

# ? Dec 10, 2015 23:38

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

Skandranon posted:

It could be worse. I once inherited a VBScript web application (IE 6 only!) that used a hard coded SQL connection string (with username and password) to directly connect to the database and execute hard-coded, concatenated SQL statements. This was an internal application that was used to distribute work and whose data would dictate if people got raises or fired.

Back in '96 we found an ecommerce site that kept prices in hidden form fields. It used those values on checkout. :homebrew:

# ? Dec 10, 2015 23:55

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

Lumpy posted:

Back in '96 we found an ecommerce site that kept prices in hidden form fields. It used those values on checkout.

lol, I love this.

# ? Dec 11, 2015 02:08

NovemberMike: Dec 28, 2008

Thermopyle posted:

Facebook engineers like Jing Chen, Peter Hunt, etc have specfically called out Flux as being an alternative to MVC, and to be honest, I think they're right and I certainly put them way ahead of your average front end developer in terms of experience and knowledge.

I mean, yeah, you can make MVC work somewhat similar to Flux, but you can stretch most systems/frameworks/patterns to work in any way you want them to.

My gut tells me that the vast majority of MVC implementations in the wild are definitely not the same thing as Flux.

No, Flux is literally a textbook case of MVC. Remember, MVC wasn't originally a web thing, it came from Xerox back when Microsoft and Apple were looting it for good ideas. Flux is different than Rails style MVC, but what Rails does isn't really classic MVC.

# ? Dec 11, 2015 07:06

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

Munkeymon posted:

No*, you just have to check on the server side to see if the user has permission to do the thing they're trying to do.

Could you or someone give me a high-level example of how one might do this? I know it's my lack of backend experience talking, but I'm having a hard time understanding how to authenticate access to a .json file. The file would supply a public-facing web page with its styling (via React), but only the one user should be able to make changes to it.

Munkeymon posted:

*this assumes you have an otherwise sane and secure user access control system which it sounds like you might not, especially if you rolled itself

Actually I don't have anything yet, this is all brainstorming at this point.

# ? Dec 11, 2015 16:08

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

NovemberMike posted:

No, Flux is literally a textbook case of MVC. Remember, MVC wasn't originally a web thing, it came from Xerox back when Microsoft and Apple were looting it for good ideas. Flux is different than Rails style MVC, but what Rails does isn't really classic MVC.

While I disagree that Flux is a textbook case of MVC because, while you can view Flux as a special case of the MVC pattern, adding "it is a special case of MVC" to its definition adds no useful information, unless you think looking down haughtily on new technologies, or people using new technologies, is useful.

All that being said, this is a semantic and dumb disagreement that will not go anywhere because its about a bag of terms with imprecise and assumed definitions without a canonical reference to turn to that provides precise and, most importantly, concise definitions.

# ? Dec 11, 2015 16:37

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

caiman posted:

Could you or someone give me a high-level example of how one might do this? I know it's my lack of backend experience talking, but I'm having a hard time understanding how to authenticate access to a .json file. The file would supply a public-facing web page with its styling (via React), but only the one user should be able to make changes to it.

Actually I don't have anything yet, this is all brainstorming at this point.

You'll need *something* on the server. Likely something simple that does two things:

1. Handles user authentication.
2. Ties a file to the user

When a user submits a request to see / edit a file, you check "Is this request coming from someone authenticated and does this authenticated person have access to the file?" If so, serve it / edit it / whatever. So maybe there's a file everyone can see that serve default styling, but if you want to customize, you need to log in, and then you can edit or do whatever to "your" file.

There are many, many, many ways to do this in many many frameworks. The good news is that the user / authentication part is built in to many / most of these things (or you can roll your own!) So creating the User piece will be done for you if you choose a framework that has libraries for it. For your file piece, you will create a "File" model object in your backend and tie it to a user. Here's an example in Django off the top of my head (so forgive typos / syntax errors):

Python code:

class MyFile(models.Model):
    file = FileField()
    user = ForeignKey(User)
    last_modified = DateTimeField(auto_now=True)

So when we create a file on the server, we have to give it a User object that "owns" the file. Then later, when we send a request for the file, we check "is the User making the request the same as the owner User". All our requests for files from the front end go to our back end, which has a single View (or Controller, or whatever your framework calls them) that handles the request and ownership checking and either serves the file or a FORBIDDEN error.

As I said, there are a ton of frameworks in a ton of languages, depending on your needs and desire to learn something new. A few to look at are: in python land, Flask and Django (though Django is probably overkill!). In PHP land, Laravel and Symfony, and if you want to go all JS, there are Node frameworks like Koa.

# ? Dec 11, 2015 16:42

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

Lumpy posted:

You'll need *something* on the server. Likely something simple that does two things:

1. Handles user authentication.
2. Ties a file to the user

When a user submits a request to see / edit a file, you check "Is this request coming from someone authenticated and does this authenticated person have access to the file?" If so, serve it / edit it / whatever. So maybe there's a file everyone can see that serve default styling, but if you want to customize, you need to log in, and then you can edit or do whatever to "your" file.

There are many, many, many ways to do this in many many frameworks. The good news is that the user / authentication part is built in to many / most of these things (or you can roll your own!) So creating the User piece will be done for you if you choose a framework that has libraries for it. For your file piece, you will create a "File" model object in your backend and tie it to a user. Here's an example in Django off the top of my head (so forgive typos / syntax errors):
Python code:
class MyFile(models.Model):
    file = FileField()
    user = ForeignKey(User)
    last_modified = DateTimeField(auto_now=True)
So when we create a file on the server, we have to give it a User object that "owns" the file. Then later, when we send a request for the file, we check "is the User making the request the same as the owner User". All our requests for files from the front end go to our back end, which has a single View (or Controller, or whatever your framework calls them) that handles the request and ownership checking and either serves the file or a FORBIDDEN error.

As I said, there are a ton of frameworks in a ton of languages, depending on your needs and desire to learn something new. A few to look at are: in python land, Flask and Django (though Django is probably overkill!). In PHP land, Laravel and Symfony, and if you want to go all JS, there are Node frameworks like Koa.

Fantastic answer. I get it now.

For the project I have in mind, my plan was to teach myself a backend framework and I'm pretty close to choosing Laravel, since I've had at least some PHP experience. Sounds like I should have no problems accomplishing my task.

# ? Dec 11, 2015 16:51

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

Thermopyle posted:

All that being said, this is a semantic and dumb disagreement

Like most arguments in development - you should've seen the fight we had at work over what was and wasn't a monad. I just brought it up because I've seen first hand how people parroting Chen can be problematic for an organization. MVC scales just fine, unless you're the largest web app in the world and use some bastardized implementation of it. Moving on...

caiman posted:

Could you or someone give me a high-level example of how one might do this? I know it's my lack of backend experience talking, but I'm having a hard time understanding how to authenticate access to a .json file. The file would supply a public-facing web page with its styling (via React), but only the one user should be able to make changes to it.

Two things:

1) Don't think of it as authenticating access to a JSON file, think of it as authenticating access to a resource. In this case the resource is a RESTful endpoint that allows a user to manipulate a specific JSON file. Figure out what server-side platform you're using and google for "CRUD tutorial" (create, read, update, delete). Authenticating users is a very common task, and incredibly difficult to get right if you roll your own authentication code, so I would not re-invent the wheel here. You need HTTPS, you need some sort of database to store user data unless you use OAuth - there's a lot of work that goes into authenticating users. Someone else has probably done that for you already.

2) Anytime I get stuck on a code problem, I challenge all assumptions first. Do you really need to authenticte access to a JSON file? What exactly are you trying to do?

caiman posted:

Fantastic answer. I get it now.

For the project I have in mind, my plan was to teach myself a backend framework and I'm pretty close to choosing Laravel, since I've had at least some PHP experience. Sounds like I should have no problems accomplishing my task.

Seriously reconsider using/learning PHP. You'll be doing your sanity and career a huge favor.

# ? Dec 11, 2015 17:05

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

Helicity posted:

2) Anytime I get stuck on a code problem, I challenge all assumptions first. Do you really need to authenticte access to a JSON file? What exactly are you trying to do?

My app will allow users to log in and create/style their own public-facing web page. The "site builder" portion will be written with JS/React and will use ajax to store the user's custom styling in a JSON file. Seems like, yes, I need to authenticate access to the JSON file so that visitors to the user's site can't modify it themselves, only the user can.

Helicity posted:

Seriously reconsider using/learning PHP. You'll be doing your sanity and career a huge favor.

My choice of Laravel was almost arbitrary. Which one would you suggest?

# ? Dec 11, 2015 17:18

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

Helicity posted:

Seriously reconsider using/learning PHP. You'll be doing your sanity and career a huge favor.

Meh. Use what will get you across the finish line fastest, especially for a "learning" project. Sure PHP is not the most well designed language in the world, but it sure runs a lot of websites. You can write awful code in any language; PHP just makes it easy. Plus then when he moves on to better languages, he'll appreciate them more!

Lumpy fucked around with this message at 17:27 on Dec 11, 2015

# ? Dec 11, 2015 17:25

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

Lumpy posted:

Meh. User what will get you across the finish line fastest, especially for a "learning" project. Sure PHP is not the most well designed language in the world, but it sure runs a lot of websites. You can write awful code in any language; PHP just makes it easy. Plus then when he moves on to better languages, he'll appreciate them more!

Although I've had only a small bit of experience with PHP, I've never had any problems with. Plus, by all accounts, Laravel seems to remedy some of PHP's issues.

# ? Dec 11, 2015 17:27

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

I personally can't see why anyone would recommend PHP over Python or Javascript for learning/rapid development/prototyping stuff in 2015. The languages are good, the ecosystems are healthy, and as an added bonus nearly every dev shop will look at experience in either as a plus. It's getting harder to find anyone looking for, or caring about, PHP experience these days. Koa for node, or Flask for Python are both fun and really easy to use. I tend to prefer Bottle, but that's just because I don't like Jinja templating in Flask.

That being said, pick whatever language you like and will help you stick through your project, though. It's kind of like photography where the best camera is the one you have with you. A subjectively better language doesn't matter if you give up on your project because it's not fun. Hell, if you really want to make this about learning, make this app in Laravel, Koa, and Flask and report back to us on what you liked in each implementation :getin:

# ? Dec 11, 2015 18:40

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

I say this every time it comes up, but there's almost no reason to reach for PHP in 2015...unless you have other constraining factors like you need to run on a host that only runs PHP, or are working on Wordpress, or other of factors of that sort.

ASP.NET, Python, JS, Java...all fine choices for backend code.

(I wouldn't pick Flask nowadays no matter the size of the project, but that's just personal opinion that is really neither here nor there unless someone wants to talk about it.)

# ? Dec 11, 2015 18:44

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

C# is my favorite language ever, but until .NET in Linux is easier I'd probably pick something else. Being tied into the Windows ecosystem is kind of a drag for getting things done quickly unless its a sunk cost. We did just get our first Linux C# app deployed into production the other day which is pretty drat cool, though.

Thermopyle posted:

(I wouldn't pick Flask nowadays no matter the size of the project, but that's just personal opinion that is really neither here nor there unless someone wants to talk about it.)

It's better than a Flux vs. MVC discussion so I'd be curious to hear more, and also if you've played with Bottle as an alternative.

# ? Dec 11, 2015 19:08

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

Okay you guys convinced me. Forget PHP. Now I'm thinking either Django/Python or Rails/Ruby. Thoughts?

Back-end talk in front-end thread...

# ? Dec 11, 2015 20:05

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

Helicity posted:

C# is my favorite language ever, but until .NET in Linux is easier I'd probably pick something else. Being tied into the Windows ecosystem is kind of a drag for getting things done quickly unless its a sunk cost. We did just get our first Linux C# app deployed into production the other day which is pretty drat cool, though.

It's better than a Flux vs. MVC discussion so I'd be curious to hear more, and also if you've played with Bottle as an alternative.

The one thing that makes C#/ASP.NET a cool and good thing is azure. I don't use it enough, but each time I've messed with the whole ecosystem (Visual Studio, ASP.NET, Azure) I feel like it's cool poo poo.

My thoughts about Flask are really about Django vs Flask, so that's what I'm going to say things about. I think Flask is a good framework and does what it does well, I just have a hard time conceiving of a case where it does something better than Django.

The advantage Flask has over Django is that it's lightweight and easier to wrap your head around. The disadvantage is that it's not as capable "out of the box". So, that's not controversial I don't think.

But the thing is...the big cost of the extra capabilities of Django is the initial getting-to-know-it phase takes longer. Once you know Django well, you can do everything you can do with Flask in basically just as simple a manner.

Now I realize the cognitive load of learning a bigger framework is not insubstantial, but once you pay that cost, it's paid and over with. By paying that cost, you're now using a framework that is built to handle a much wider array of things that the almost-inevitable feature and scope creep a project will hand you without bolting a bunch of stuff on like you would have to with Flask.

Of course, not all projects balloon into more complex projects and all they ever need is a basic web framework. Well, good news, if you started with Django, you're just fine because all the extra capabilities of Django aren't harming you...you just don't use them.

Maybe a person has some conceptual problem with the way Django does the most basic things like wiring up urls and views or whatever and that sort of thing is a valid thing to consider

# ? Dec 11, 2015 21:00

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

caiman posted:

Okay you guys convinced me. Forget PHP. Now I'm thinking either Django/Python or Rails/Ruby. Thoughts?

Back-end talk in front-end thread...

Well now that you are actually asking for recommendations... :v:

Forget PHP, it's awful. Use Django. The tutorial on their site will get you 97% of the way done w/ your project. Flask is also a decent place to start. I haven't used Bottle, so I can't comment on it.

As Thermopyle said, there's a lot more overhead in Django than the other two, but you get so much "for free" I feel the initial hurdle is well worth it.

# ? Dec 11, 2015 21:50

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

caiman posted:

Okay you guys convinced me. Forget PHP. Now I'm thinking either Django/Python or Rails/Ruby. Thoughts?

Back-end talk in front-end thread...

Don't pick Ruby/Rails, the 1-2 years you might put in yourself will never satisfy anyone looking for a Rails developer. I've said it before, but unless you have 5+ years in Rails and fully drink the TDD koolaid, they will kick you in the nuts and throw you off a building.

# ? Dec 11, 2015 22:01

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

Lumpy posted:

Well now that you are actually asking for recommendations...

Forget PHP, it's awful. Use Django. The tutorial on their site will get you 97% of the way done w/ your project. Flask is also a decent place to start. I haven't used Bottle, so I can't comment on it.

As Thermopyle said, there's a lot more overhead in Django than the other two, but you get so much "for free" I feel the initial hurdle is well worth it.

Cool. So the next obvious question: do I need to learn Python first, or at least familiarize myself with it, before jumping into Django?

# ? Dec 11, 2015 22:09

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

Thermopyle posted:

Now I realize the cognitive load of learning a bigger framework is not insubstantial, but once you pay that cost, it's paid and over with. By paying that cost, you're now using a framework that is built to handle a much wider array of things that the almost-inevitable feature and scope creep a project will hand you without bolting a bunch of stuff on like you would have to with Flask.

This is a really good point for anyone to consider, kind of like Fowler's argument for Monolith vs Microservices. Experienced developers hate the overhead and limitations of giant frameworks, but for just getting stuff done or dipping your toes in the water, a full-featured framework is a great thing.

caiman posted:

Cool. So the next obvious question: do I need to learn Python first, or at least familiarize myself with it, before jumping into Django?

If you choose Python, the good news is that its an incredibly easy language to pick up and play with and actually get a working result. I'd think you could just copy some Django tutorials and learn Python as you go.

# ? Dec 11, 2015 22:30

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

caiman posted:

Cool. So the next obvious question: do I need to learn Python first, or at least familiarize myself with it, before jumping into Django?

Do both at the same time. I enjoyed this Python book: http://www.greenteapress.com/thinkpython/ and it's free online. Not sure what the most recommended is these days, but I liked it.

# ? Dec 12, 2015 01:24

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

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?

# ? Dec 14, 2015 16:11

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

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

Stealing a post from the Functional Programming Thread, because it is probably interesting to folks here:

fart simpson posted:

A guy did a good talk at Strange Loop that I just watched where he gives a really high level description of what it's like to actually use Elm. I liked the talk:
https://www.youtube.com/watch?v=FV0DXNB94NE

# ? Dec 14, 2015 21:10

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

If you're timing JavaScript with CSS I've had more reliable results measuring the currently computed animation/transition duration + delay to set a target time stamp and then using requestAnimationFrame to keep track of the time of when the event needs to occur. This gets around issues such as multiple transition & animation properties (because you can just target the longest duration one) and seems pretty predictable because getComputedStyle is gonna behave reliably.

I sort of formalised this with this library https://github.com/weareoffsider/css-driven and it's kind of nice because it means you can easily tweak the animations in browser tools and the CSS without having to reload the JavaScript. Complicated stuff your still gonna have to fallback to JavaScript animation libraries like Velocity, but I like css driven for simpler state change stuff.

# ? Dec 14, 2015 21:13

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

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

# ? Dec 14, 2015 23:42

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

EkardNT: Mar 31, 2011

How would you handle purely widget-related/UI state in a redux application? I'm talking about stuff like dropdown open/closed, selected tab, etc. It gets very cumbersome very fast to make a reducer for every single instance of a widget in your application...

# ? Dec 15, 2015 06:00

abraham linksys: Sep 6, 2010

EkardNT posted:

How would you handle purely widget-related/UI state in a redux application? I'm talking about stuff like dropdown open/closed, selected tab, etc. It gets very cumbersome very fast to make a reducer for every single instance of a widget in your application...

If the state is purely encapsulated to the state of the component, you can just put it in component state.

If the state has an impact on the other state stored in Redux, then you probably want to have it in Redux. You can still keep your components somewhat isolated if you use event handlers & props to pass state up and down the tree to/from your Redux-wrapped components, or you can just tie your components into Redux, whichever makes sense (see how this example is structured: http://rackt.org/redux/docs/basics/UsageWithReact.html)

# ? Dec 15, 2015 06:10

EkardNT: Mar 31, 2011

abraham linksys posted:

If the state is purely encapsulated to the state of the component, you can just put it in component state.

If the state has an impact on the other state stored in Redux, then you probably want to have it in Redux. You can still keep your components somewhat isolated if you use event handlers & props to pass state up and down the tree to/from your Redux-wrapped components, or you can just tie your components into Redux, whichever makes sense (see how this example is structured: http://rackt.org/redux/docs/basics/UsageWithReact.html)

Yeah, I ended up using this.state, but it just feels... wrong, when most of your components are purely-functional, to have a great big ball of mutable state.

# ? Dec 15, 2015 06:17

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

Yeah, it took me awhile to get past that feeling. Sometimes a components state is just a components state, man!

# ? Dec 15, 2015 07:09

TheDestructinator: Jul 18, 2006

I'm working on an Ember app and I'm having trouble wrapping my brain around handling the DOM and components. I have a companies model that will display every company in the database and will expand to show the jobs that are available at the company:

code:

<h1>Companies</h1>

{{#each model as |company| }}
	{{company-expander name=company.name url=company.url address=company.address positions=company.positions}}
{{/each}}

{{outlet}}

The company-expander component template looks like this:

code:

<div class="expander">
  <a href="javascript:void(0)" id="js-expander-trigger" class="expander-trigger expander-hidden">{{name}}</a>
  <div id="js-expander-content" class="expander-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </div>
</div>

and company-expander.js:

code:

import Ember from 'ember';

export default Ember.Component.extend({
	_setup: Ember.on('didInsertElement', function() {

		var expanderTrigger = document.getElementById("js-expander-trigger");
		var expanderContent = document.getElementById("js-expander-content");

		$('#js-expander-trigger').click(function(){
			console.log("click");
			$(this).toggleClass("expander-hidden");
		});
		
	})
});

The component successfully loads and pulls the name of the company. The problem the click only registers when clicking on the first item and registers the number of clicks as however many company records are returned. The class of the div is also not toggled. I'm stumped how to proceed on this one.

# ? Dec 15, 2015 18:13

Sedro: Dec 31, 2008

TheDestructinator posted:

I'm working on an Ember app and I'm having trouble wrapping my brain around handling the DOM and components. I have a companies model that will display every company in the database and will expand to show the jobs that are available at the company:

1) You shouldn't give DOM elements an ID if you are creating several of them. Get rid of "js-expander-trigger"
2) $('#js-expander-trigger') finds all elements in the entire document. Inside a component, this.$ will give you a jQuery object scoped to the component. Change your code to: this.$('.expander-trigger').click(...)

# ? Dec 15, 2015 18:46

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

caiman posted:

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

Webpack, as mentioned previously.

# ? Dec 15, 2015 19:10

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

EkardNT posted:

How would you handle purely widget-related/UI state in a redux application? I'm talking about stuff like dropdown open/closed, selected tab, etc. It gets very cumbersome very fast to make a reducer for every single instance of a widget in your application...

I asked this one a couple pages back

Stoph posted:

So what is the answer when it comes to widget state like accordions or tooltips or confirm dialogs or etc.?

# ? Dec 15, 2015 19:41

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 09:07

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

Angular 2.0 is now in beta
Given this is Google, it will be out of beta in, what, 3 years?

# ? Dec 15, 2015 21:02

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

«‹›235 »