3 ms·

Reading the comments I'm wondering if I'm the only one who noticed that this example does NOT intermingle CSS. This is a view component that keeps track of it'

by throwaway2016a 10y ago

Reading the comments I'm wondering if I'm the only one who noticed that this example does NOT intermingle CSS. This is a view component that keeps track of it's own state. It is 100% encapsulated and by building in events and data bindings it can be composed into more complicated applications. It is in fact separation of concerns. This is only one concern. The UI of a single component. In a full React app the business logic will be in controllers and models that don't themselves contain view/UI code. But because an HTML like syntax was chosen to represent view hierarchy we draw a red flag because it looks like we are mixing HTML with Javascript. But that was only ever a red flag because HTML semantically was hypertext representing data and relationships. Having tried React in earnest (and yes, I know people will have counter-anecdotes) I can say that being able to components my web application leads to more testable code, easier delegating of workload across teams (each team member only needs to know the interface of a component to use it), and better code reuse. It is beautiful (albeit busy looking).

ajeet_dhaliwal 10y ago
Yes, given the tweet text I was looking for the css in the image but couldn't find it, I didn't want to bother looking for too long and figured it was just well hidden.
carlosdp 10y ago
Yea, I'm super confused on how this snippet of code is meant as evidence of un-separated concerns. He even says it contains styling, but it absolutely does not. Sure, if someone does React incorrectly, they will inter-mingle code that could make working on it painful, but that's true of vanilla HTML/JS/CSS as well. Having developed using React for a bit now after years of using mostly vanilla JS/jQuery, I would never go back if I can help it. It's much nicer to write code that generates markup rather than code that manipulates markup.
happycodework 10y ago
Tbh how is the one concern not the Fact they use 'let'. Gross. Fun fact: types, line numbers, and BS keywords like 'let' 'var' and * *&uint32, are only constructs of the language authors mind... a visualization of how he thinks. And are completely optional to a language (given a slightly more flexible parsercompiler)
- j_r_f 10y ago
  You are saying that in JavaScript var is made up and not to use it..?
mercer 10y ago
As an aside, is anyone else a a bit worried about is the massive use of destructuring assignment and rest operators and whatnot? I see it a more in React/Redux code than anywhere else. I really like how it can reduce a number of tasks to less code, but it's the most common thing that trips me up when I read React or 'ESNext' codebases. It feels like ternary operators on steroids, with all advantages and disadvantages magnified. Perhaps I just need to get used to it.
- dclowd9901 10y ago
  It's a comfort thing, for sure. I've only started writing more with destructuring assignment recently (it's part of our code style guide at my new company), and it's doing things like forcing me not to use a different variable name for something that's already been defined. It's also forcing me to do more FP (since our stylguide also forces usage of `const`), which has actually made my code my more readable and maintainable (consistent naming, single-responsibility in functions, etc). Once you get used to the new syntax, it's a breeze to read and understand. Well, once you understand a statement like this anyway: `store => next => action => next(action);`
  - mercer 10y ago
    That's good to know. It does feel like a powerful feature that's worth mastering. I mean, despite the risk of making things complicated, I use ternary operators all over the place...

ajeet_dhaliwal 10y ago

Yes, given the tweet text I was looking for the css in the image but couldn't find it, I didn't want to bother looking for too long and figured it was just well hidden.

carlosdp 10y ago

Yea, I'm super confused on how this snippet of code is meant as evidence of un-separated concerns. He even says it contains styling, but it absolutely does not. Sure, if someone does React incorrectly, they will inter-mingle code that could make working on it painful, but that's true of vanilla HTML/JS/CSS as well. Having developed using React for a bit now after years of using mostly vanilla JS/jQuery, I would never go back if I can help it. It's much nicer to write code that generates markup rather than code that manipulates markup.

happycodework 10y ago

Tbh how is the one concern not the Fact they use 'let'. Gross. Fun fact: types, line numbers, and BS keywords like 'let' 'var' and * *&uint32, are only constructs of the language authors mind... a visualization of how he thinks. And are completely optional to a language (given a slightly more flexible parsercompiler)

j_r_f 10y ago
You are saying that in JavaScript var is made up and not to use it..?

mercer 10y ago

As an aside, is anyone else a a bit worried about is the massive use of destructuring assignment and rest operators and whatnot? I see it a more in React/Redux code than anywhere else. I really like how it can reduce a number of tasks to less code, but it's the most common thing that trips me up when I read React or 'ESNext' codebases. It feels like ternary operators on steroids, with all advantages and disadvantages magnified. Perhaps I just need to get used to it.

dclowd9901 10y ago
It's a comfort thing, for sure. I've only started writing more with destructuring assignment recently (it's part of our code style guide at my new company), and it's doing things like forcing me not to use a different variable name for something that's already been defined. It's also forcing me to do more FP (since our stylguide also forces usage of `const`), which has actually made my code my more readable and maintainable (consistent naming, single-responsibility in functions, etc). Once you get used to the new syntax, it's a breeze to read and understand. Well, once you understand a statement like this anyway: `store => next => action => next(action);`
- mercer 10y ago
  That's good to know. It does feel like a powerful feature that's worth mastering. I mean, despite the risk of making things complicated, I use ternary operators all over the place...