History repeating itself.

This code looks weirdly aesthetic

@RazorSh4rk it's react and i started learningit a week agoal. It's beautiful

Hate this so much, what happened to SoC

And now consider all JS fanboys hate on PHP for its LEGACY of mixing PHP and HTML...

But now it is their 'shiny' 'new' way of doing things...

A. Update available!

B. There has to be a better way. Can't believe ES6 doesn't have something to replace this.

Glad aim not the only one to laugh at this!
Try to spend as little time working with this as possible. It will die out soon as they all did before it. Get excited for Web assembly, this is the next big change.

Vue.js can do this as well, though I think it does it a lot better. I still seperate my code out, but generally I'm writing simple Vue.js components I'll go with the all in one approach since it's usually a grand total of 40 lines of code.

Ember.js is still my preferred framework, and I love how explicit it's separation of concerns is.

@hiestaa no it's not most people won't have a use for webassembly. Its purpose is to compliment JavaScript by allowing devs to implement performance critical things in webassembly and import it like a regular js module

@dev-nope because PHP mixes things like API calls and impure functions. You can't even compare the two, React is purely the view as renderable by the browser. The separation of concerns is what's important here.

@nblackburn it still is a separation of concerns by breaking things down into components

When I first saw React and Redux I realized what this is all really about, a shift in the paradigms of programming. React + Redux is the first time that functional programming has entered mainstream. We've had functional programming available to us via Haskell and more recently Clojure for a while now but it was never very obvious how powerful functional programming could be outside of the niche that used it for more analytical type tools. Now we have things like hot reloading (https://youtube.com/watch/...) and state playback (https://youtube.com/watch/... skip to ~3min to watch the magic) thanks to immutable state.

Before you decide that React is just another flavor of the month library I encourage you to learn about the advantages that functional programming provides (https://medium.com/@cscalfani/...) and checkout Elm (http://elm-lang.org/) as well. The nice thing about React + Redux is that it gives us a way to start programming functionally, without having to learn ML style syntax like Elm and ClojureScript. Keep in mind, when Object Oriented Programming was becoming popular it was widely controversial as well and look at all it has done for us.

@dev-nope well, react does it a lot better. Not that I like it either way.

@port22 No it's not because styles, scripts and template are mangled together.

@port22 almost by definition react is the flavor of the month.

If a library only achieves what any other library achieves by a different mean it brings nothing in particular.

As developers we like to do things or way we may like em or not. But the end experience doesn't improves (on the contrary it may get worse since more libraries are required).

@port22 well I can't agree more with @nblackburn in SoC everything should be separated not only logic-wise but also structure what is happening there is logic+view mixed in the same place so no you don't actually separate it.

It will be when the code does not have any knowledge about the view, which is not the case when the template is hard coded in the component

@dev-nope the code doesn't have any knowledge about the view! The business logic and presentational logic are completely separate in React

@port22 oh, that's not what I've read.
I've read it was attempting to provide a lower level and smaller set of standard than Javascript, that can be executed more efficiently than current Javascript code (reducing the overhead of the vm)
For backward compatibility, Javascript will be implemented using this lower set of standard but then, potentially any tech other than Javascript could be used for front-end Dev as long as it compiles to this asm standard.

@hiestaa Yeah it is more efficient and offers a much faster compile target but it's meant to augment JavaScript, after all it is being developed by the creator of JavaScript, Brendan Eich

Not looking to offend but I think we found the fanboy ...

@dev-nope right, because discussing the merits of a library makes me a fanboy

@port22 no not that.. The righteous passion, speed and extend to which you go to defend said library, that makes you a fanboy 😊

@dev-nope it's not even the library I care about, its functional programming

@port22 which does not exist from yesterday, but it started getting traction in the JS world from yesterday and today everyone is 'talking about functional programming'?

@dev-nope And as someone who has been using Haskell and Clojure for years that's the best thing I could've ever hoped for. JavaScript is mainstream and now that React brings functional programming to JS it helps bridge the learning curve of FP introducing the ideas of it to the masses.

Separation of JS,CSS,HTML !== Separation of concerns...

This is what most of us fail to realize. Separating JS and CSS from HTML was what we considered separation of concerns when we were in the era of writing inline CSS and JS inside HTML files but it never truly was SOC since front-end code is written modularly (i.e. Blocks/sections/widgets). Each block has its own (usually) unique logic, styling, and markup which are all related to each other. Separating these 3 and mixing each with other blocks' JS/CSS/HTML (i.e. single CSS file for all blocks) isn't SOC... It's TANGLING OF CONCERNS!

Also, there is a huge difference between having JS & CSS inlined inside HTML and HTML & CSS inlined in JS! JS is dynamic and thus can require MUCH less code to render what the former requires and enables huge flexibility. In addition you get rid of those infamous global CSS conflicts. Take a look at libraries like Aphrodite...

P.S. I don't use react, vue, angular, or any framework at all.

@danielkalen well said

Yeah... I didn't jump on that train. What frontent framework(s) do you use if any?

I use Angularjs @blackmarket

Separation of Concerns !== Separation of technologies

Besides, that's still a separation of concerns. The render method is concerned with the view, lifecycle methods are the controller, state and props are the model.

Get over it people. Everyone has different problems to solve. React solves it by having only one/two files open for a single component, while everyone else will have at least 3

I wonder if linters for such frameworks are significantly more complex because of the mix of languages. Any thoughts guys?

@blackmarket it can be, but eslint is pretty pluggable, even the parser is pluggable. Plugins can leverage the multi-language parsing and lint the appropriate parts