4 ms·

> For instance I have yet to see an easy and simple to use (and as such maintainable) functional widget and gui library. Like react?

quacker 10y ago
My impression of react is that it's very object oriented. Defining reusable, stateful components is classic OO design. Now, I don't have much experience with React so maybe someone can explain why it should be considered "functional".
- acemarke 10y ago
  React is an interesting mix of functional and OO. It's OO, in that the primary approach for defining components is class-based, and components have state and lifecycles. It's functional, in that the render methods are expected to be pure functions based on component state and props, and simply output a description of what the UI should look like as a result. Also, as a whole, React definitely pushes you to view the system in terms of composition, state transformations, and pure functions, rather than imperative "toggle this, add that, update the other thing".
  - TheOtherHobbes 10y ago
    Maybe we need a new tag: OOF. Or possibly FOO.
- jaegerpicker 10y ago
  Not sure why people have that impression. It doesn't fundamentally do any OO things. You don't inherit from the react components. Maybe you could make an argument for encapsulation but even that is shaky in JavaScript. Most it only uses prototypes as object for namespacing and to organize the api better since JS lacks good namespacing syntax.
- danek 10y ago
  It depends on how you use React. You can use it in a stateful, OO way. Or you can use it in a more functional way. A good example of how to use React in a functional manner is the Redux framework (basically you don't use the stateful parts of React and treat your components as a tree of pure render functions). http://redux.js.org/ http://redux.js.org/
olmo 10y ago
ReactComponent are also very OO, just the render function is functional
Illniyar 10y ago
Is this same react where your components keep internal state (called state) and every component must be created by extending a base class?
- MindPenguin 10y ago
  Conceptually, components have state, but it's all managed by react, so you only ever write pure functions. Granted, depending on how you update state in event handlers and lifecycle methods, you will need to think about state a lot, but this is an unavoidable fact of UI programming. > every component must be created by extending a base class This is an implementation detail, instead of ES6 classes you can also use React.createClass(), which might as well be named React.createComponent(). These "classes" can't be inherited from.
  - jaegerpicker 10y ago
    Also, now in react (as of 0.14 with stateless function components) you can define components as pure functions that return a jsx dta structure to the render function. IE (coded by memory quickly syntax may be wonky): const test_component = () => { return <H1>Blah!</H1>; } <test_component/>
  - Illniyar 10y ago
    Conceptually is nice. All react code I've seen or wrote of even the most trivial systems have components (and more then a few) that override lifecycle methods - which is by almost definition OO's polymorphism. Buy even if you could write every component with the stateless style it doesn't change the fact that your framework/GUI-library is using OO extensively and in it's fundamental concepts, I think that makes it OO, you seem to disagree.
    - MindPenguin 10y ago
      It's not "overriding" lifecycle methods, it's passing lifecycle methods to a component factory function.
- 10y ago

quacker 10y ago

My impression of react is that it's very object oriented. Defining reusable, stateful components is classic OO design. Now, I don't have much experience with React so maybe someone can explain why it should be considered "functional".

acemarke 10y ago
React is an interesting mix of functional and OO. It's OO, in that the primary approach for defining components is class-based, and components have state and lifecycles. It's functional, in that the render methods are expected to be pure functions based on component state and props, and simply output a description of what the UI should look like as a result. Also, as a whole, React definitely pushes you to view the system in terms of composition, state transformations, and pure functions, rather than imperative "toggle this, add that, update the other thing".
- TheOtherHobbes 10y ago
  Maybe we need a new tag: OOF. Or possibly FOO.
jaegerpicker 10y ago
Not sure why people have that impression. It doesn't fundamentally do any OO things. You don't inherit from the react components. Maybe you could make an argument for encapsulation but even that is shaky in JavaScript. Most it only uses prototypes as object for namespacing and to organize the api better since JS lacks good namespacing syntax.
danek 10y ago
It depends on how you use React. You can use it in a stateful, OO way. Or you can use it in a more functional way. A good example of how to use React in a functional manner is the Redux framework (basically you don't use the stateful parts of React and treat your components as a tree of pure render functions). http://redux.js.org/ http://redux.js.org/

olmo 10y ago

ReactComponent are also very OO, just the render function is functional

Illniyar 10y ago

Is this same react where your components keep internal state (called state) and every component must be created by extending a base class?

MindPenguin 10y ago
Conceptually, components have state, but it's all managed by react, so you only ever write pure functions. Granted, depending on how you update state in event handlers and lifecycle methods, you will need to think about state a lot, but this is an unavoidable fact of UI programming. > every component must be created by extending a base class This is an implementation detail, instead of ES6 classes you can also use React.createClass(), which might as well be named React.createComponent(). These "classes" can't be inherited from.
- jaegerpicker 10y ago
  Also, now in react (as of 0.14 with stateless function components) you can define components as pure functions that return a jsx dta structure to the render function. IE (coded by memory quickly syntax may be wonky): const test_component = () => { return <H1>Blah!</H1>; } <test_component/>
- Illniyar 10y ago
  Conceptually is nice. All react code I've seen or wrote of even the most trivial systems have components (and more then a few) that override lifecycle methods - which is by almost definition OO's polymorphism. Buy even if you could write every component with the stateless style it doesn't change the fact that your framework/GUI-library is using OO extensively and in it's fundamental concepts, I think that makes it OO, you seem to disagree.
  - MindPenguin 10y ago
    It's not "overriding" lifecycle methods, it's passing lifecycle methods to a component factory function.
10y ago