React v15.5.0
facebook.github.io
facebook.github.io
I'll also toss out my usual reminder that I keep a big list of links to high-quality tutorials and articles on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of good info on more advanced topics. Finally, the Reactiflux chat channels on Discord are a great place to hang out, ask questions, and learn. The invite link is at https://www.reactiflux.com .
[0] https://www.youtube.com/watch?v=ZCuYPiUIONs
[1] https://github.com/markerikson/react-redux-links/blob/master...
Just wanted to express my admiration for her work and gratitude for making this information public, available, and free.
... I found Lin's style of speaking very difficult to listen to. I appreciate the professionalism of the approach (if that's what it is), but if only by a small margin (perhaps 10-20%), I found her speaking too slow to the point that I wanted to skip forward constantly and would have found it difficult to pay attention to in person. :/
Perhaps this might be about the structuring of information as well (I'm familiar with much of what's being talked about). That said however, I've historically found that when listening to really good speakers, I find it easy to sit and have explained to me things that I already know well - so I'm not sure what's happening here.
But I suck, this talk was great, she's a really good speaker, thanks for weirdly convincing me to watch this
I don't mind if "so" starts a sentence as long as it really means "therefore" but most of Lin's instances don't qualify.
Her "so" affliction is really pretty low compared to most public speakers, but it is there.
Their migration strategy is great for larger actively developed applications. Since Facebook is actually using React, they must have a migration strategy in place for breaking changes. Since breaking anything has such a big impact on the parent company, it makes me feel like I can trust em.
Heck, most of the items in this list of changes won't surprise anyone that's been following the project. Now there's less magic (e.g. React.createClass with its autobinding and mixins), and less React-specific code in your app (e.g. react-addons-update has no reason to live as a React addon when it can clearly live as a small standalone lib).
<template>
<div>
<h2>{{ title }}</2>
</div>
<template>
<script>
export default {
data() {
return {
title: "Hello world"
}
}
}
</script>
export default ({title}) => (
<div>
<h2>{title}</h2>
</div>
)
Also wish someone would explain the draw of ES6 classes. React is about composition, not inheritance. Have never seen a `React.Component` extended.
The composition is usually in the form of higher order components. It's very simple to wrap a function with another one, with more or different functionality. Classes just make it equally as simple when the wrapped component has its own state to manage.
Point is, nobody really cares whether they're ES6 or createClass, because nobody's actually doing inheritance. It's just that we JS devs like to stay on the bleeding edge, and we like to think that we're converging on standards even if that's a silly dream.
Example: show a spinner for 1 second before displaying.
const F = (props) => <div>{props.content}</div>;
class C extends React.Component {
state = { initial: "state" };
render = () => <div>{this.state.initial}</div>;
}
function delayWithSpinner(WrappedComponent) {
return class extends React.Component {
state = { showSpinner: true };
stop = () {
this.setState({ showSpinner: false });
}
render() {
return this.state.showSpinner
? <Spinner duration={this.props.duration} onCompletion={this.stop}/>
: <WrappedComponent {...this.props}/>
}
}
}
// exactly the same composition pattern for
// both classes and functions.
const SlowC = delayWithSpinner(C);
const SlowF = delayWithSpinner(F);> At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.
[0]: https://facebook.github.io/react/docs/composition-vs-inherit...
You can "autobind" with this notation:
myMethod = () => {
}
but it doesn't look as good as myMethod() {} and you have to remember this EVERY TIME you add a method.
Also, you never need to use the constructor in React. Just do: state = {} in the body of the class. You may need babel presets #918718$$&ééàdi for it to work though.
Prototypes and prototype inheritance are features of prototype based systems.
PropTypes' deprecation is not difficult to handle, but the removal of createClass means one of two things for library maintainers:
(1). They'll depend on the `create-class` shim package, or,
(2). They must now depend on an entire babel toolchain to ensure that their classes can run in ES5 environments, which is the de-facto environment that npm modules export for.
I'm concerned about (2). While we are probably due for another major shift in what npm modules export and what our new minimum browser compatibility is, the simple truth is that most authors expect to be able to skip babel transcompilation on their node_modules. So either all React component authors get on the Babel train, or they start shipping ES6 `main` entries. Either way is a little bit painful.
It's progress, no doubt, but there will be some stumbles along the way.
It's the app that should compile all the code to run in the target environment if needed. This is what we've done in the new Polymer CLI / polymer-build: we compile all dependencies but only if necessary.
That's debatable, particularly when you factor in bugs. However, even if they did, it seems unwise to assume that all relevant users for all or even most projects will be on the latest evergreen browsers. Several large groups, including business users on IE and mobile users on slightly older devices, probably won't be.
I know there's a certain type of web developer who would love for everyone to have updated their browser within the last five minutes so all the new toys are available universally, but that has never been the nature of web development. Deliberately breaking major infrastructure is just going to make JS development even more screwed up than it already is.
Which leads me to wonder: are developers that are so willing to advocate breaking compatibility with older browsers actually deploying real sites that have normal representative user audiences? Or is this an insular group of developers mostly making things for each other?
So while there's still likely an insular group at play, it's not limited to just developers.
IE11 is a different case entirely, though. Almost everything still gets significant traffic on that platform, and in the business world supporting it is pretty much essential. Not much ES6 support there, though.
Still though, it's hard to adopt a policy that axes even just 1% of your customer base just for the sake of easier development cycles when alternate options exist.
Then, I don't understand the rest of the argument. Open Source software has simply won in the marketplace, mostly because of it's openness, rarely because of it's price.
Example: Operating Systems, which is the rare beast where an actual closed-source competitor still exists. Yet the Windows marketshare on the server is around 10%, and I doubt that it's the price that encourages all those Unicorns to chose Linux. Databases are a similar story.
> Neither of these necessarily implies writing or maintaining ideal tools to support web development more widely
It doesn't necessarily do that, but in the case of Google specifically, it does: they need the open web as a platform to compete against the "walled gardens" of Apple and Facebook. Their interests happen to be aligned with those of web developers, which is why Chrome has revitalised browser competition, easily beating the laser-focused team at Mozilla.
> Unfortunately, because so much of the influence is now concentrated with so few organisations or even individual people
The influence is spread out far wider today than it was at the time where Microsoft and Flash were able write APIs without asking anybody.
But, more importantly, I'm unsure what you want? A version of React that supports IE 6 and lynx? They have that, it's called XHTML 1.0 Transitional.
You might like to take a look at the history of Babel (formerly 6to5) as one prominent counter-example. For several years, much of the web development community has been relying on a great tool that was originally written by one talented young amateur.
Open Source software has simply won in the marketplace, mostly because of it's openness, rarely because of it's price.
Chrome being prominently advertised every time anyone visited a Google site using another browser probably didn't hurt. Being installed by default on the most popular mobile OS also didn't hurt. If openness were all it took, Firefox would surely still be a more prominent player.
It doesn't necessarily do that, but in the case of Google specifically, it does: they need the open web as a platform to compete against the "walled gardens" of Apple and Facebook.
Google wants people to use the Web because it makes its money primarily from advertising on web sites. It is in Google's direct financial interest to support the part of the Web ecosystem that in turn supports advertising. That typically doesn't include, for example, corporate intranets, or embedded UIs in network-connected devices, or academic sites, which are three big areas where web technologies are widely used but stability and long-lasting content are more highly valued.
Their interests happen to be aligned with those of web developers, which is why Chrome has revitalised browser competition
Writing as a professional web developer who often works in those other areas I mentioned, Chrome hasn't revitalised browser competition. On the contrary, it's become the new IE from the old browser wars. A lot of the new functionality only works properly in Chrome, and often it's not reliable even there because of the frequent updates that change behaviour and/or introduce regressions. There's no real concern about proper standardisation or compatibility or longevity any more.
But, more importantly, I'm unsure what you want?
I want the fundamental tools on which much of the ecosystem now relies not to break everything that predates a standard that is less than two years old and still not fully supported across many active browsers. In this case, that means being able to install packages from NPM with a reasonable expectation that they will not require a substantial extra build process to be used.
Obviously no-one contributing NPM packages has any obligation to respect that. It's not as if we're all paying for their openly licensed work. I just think the community as a whole will otherwise suffer yet more overheads getting infrastructure set up instead of actually getting useful work done.
If there's no Good chosen, then it all gets crufty and full of tech debt. So someone else thinks they can do better, and starts developing a replacement. In order to get traction, though, they need to make it Free and develop it Fast, so after a while they start taking a few short-cuts, and round we go again.
I have faith that it'll settle down eventually, but until then...
But how does that apply to Chrome, or React? Is there any indication that Chrome carries more technical debt than, say IE7? Similarly, in what way does Facebook need people to adopt React, and would that matter enough to accept such compromises? Is there any indication that their code quality is inferior to <pick whatever commercial js library you want>?
And if this is the complaint about churn, that, at this time would be older than our js stack if it were true: React came out in 2013, it's four years old. Before that, most people probably used JQuery, which came out in 2006, i. e. 11 years ago. Is learning a new library every five years too much, considering this is one of the most dynamically evolving ecosystems of technology?
To extend it further, this is why you should be very careful who you give credit to in the JavaScript ecosystem. If you're trying to build anything robust and potentially long-lived, relying on anything but the largest and most established dependencies is usually unwise, and even then relying on any any aspect that isn't in mainstream use is a risk.
Now, I'll admit, I've dev'd against React and deployed with preact-compat as a build sub for size... but a couple times back to React for broader support, and it really didn't save on speed anyway.
React is hands down the first web tech I've used (out of dozens of platforms and toolkits over the years) that just made sense. Not everything I agree with, and would love some adjustments. All the same, more often than not, it does what I expect, and I definitely can't say that of most of the rest.
As to jQuery, I think it's a great idea, was and still is in a lot of ways. I do wish they'd just drop their XHR, and Promise implementation at this point... but the selection library + eventing is cool and easier to grasp to this day, despite going without it for about 2 years now. There are cases where it was just nice, and still is.
I'm actually fine with JSX, imho it's better having some XML in my JS than it ever was having weird DSL in templates in JS.
Recently, I updated the browser support docs for my employer, and was surprised to note that IE11 is now the oldest browser with standard vendor support, so everybody on older versions of IE is either working for a company with specific extended support contracts with Microsoft, or they are running with no support at all.
Make sure to state "For security reasons" policies always have that even when it's not true, or bad security, because most people don't question it.
Sure, google.com probably needs to support IE 6. For my own business, I'm not willing to make compromises for browsers below 2%. That currently means Safari 10, Chrome 56, and IE 11. And IE 11 is really stretching it by now–next time it gets in my way, I'll give people a reason to upgrade.
Now I don't have "enterprise" customers, and it's a rather small business. For anything medium-size up, the calculus changes, and probably makes it worthwhile. But at some point, these mystical "enterprises" really have to get their act together and stop dragging technology back to 2006.
But, I'm not arguing that web sites should only serve ES6 to browsers, only that packages should be distributed as ES6 and the app should be responsible for compilation.
No, it isn't. For a lot of web developers, two of those aren't major browsers at all and you've missed the 800lb gorilla. You're also ignoring older versions of mobile browsers, the current Firefox ESR, and at least one other browser that has a larger market share than several of the above in parts of Asia, among other things.
But, I'm not arguing that web sites should only serve ES6 to browsers, only that packages should be distributed as ES6 and the app should be responsible for compilation.
And consequently, the entire community has to start incorporating a heavyweight build process that relies on third party tools just to use modules from the de facto standard package repository, and everyone also has to take extra time checking the exact requirements for every module they directly or indirectly depend on to make sure their build process supports it. In an ecosystem with absurd levels of microdependencies, which is certainly what we have today in JS world, the last thing we need is moving goalposts on the basic assumptions that everyone makes. This sort of thing is exactly why proper, long-lived standards are important as the foundation of a productive development ecosystem.
Not sure the 800lb gorilla you're referring to, but maybe UC Browser? That thing is so odd it's difficult to know what it supports, and it's not supported in nearly any popular CI service. I'm sure all kinds of things are broken on it, but you can still compile your app to ES5.
And ES6 _is_ a proper long lived standard. I'm not sure what would be more standard.
Compiling dependencies is not that heavyweight, especially when there is no configuration. Babel and TypeScript are fast. The results can be cached, it can be done on the fly for dev servers. Requirements shouldn't need to be checked - I'm not advocating for distributing code using decorators or class properties, nor modules (which without the HTML spec on module specifiers isn't a fully functional spec anyway) just plain ES6.
ES5 and ES6 classes cannot coexist on the same proto chain. Compiling to ES5 prevents things like mixins being usable against ES6 superclasses, so you force all dependents to be ES6. If you're going to force one way or the other, force in the future direction where there's still the option to compile the whole app to the older version of JS. ES5 classes can't extend subclassable built-ins like Array, Promise, Set, Map, HTMLElement, Error, etc. ES5 is now mostly slower than the equivalent ES6, it also doesn't minify as well as ES6.
Are you kidding? she/he is talking about IE.
IE11, older FF and Chrome, and especially older mobile devices with older Webkit based browser (Android and iOS)
Messy.
EDIT: I should add, that I didn't want to say that I completely disagree with the change to remvoe this api entirely on twitter to the maintainers. I am sure they get enough crap from people.
Personally I am more concerned about keeping my team building cool features than updating react. This has led to us having two distinctly non-interoperable code bases, one with react 0.12 and one with react 14-15. This makes me worried that now we will have a third with react >15.
I think we can all agree that many of the ideas, while not new, were revolutionary to front-end web developers. And that is what I love about working in this stack. But other than these ideas, the projects themselves are just stumbling along trying to catch up with some perceived "modern" way of coding, and it is the dev teams and projects that suffer.
Maybe you could explain how this is the same thing?
That said, the two are very different tools. Buble appears to be essentially string manipulation (which Babel does to occasionally with babel-template) built on top of Acorn. It's much simpler but there are a lot of useful transformations you simply can't do with that approach.
Edit: After some further looking into the project, I have to say that it seems like it would nice & easy to use for simple transformations, like the aforementioned React.createClass -> class Foo extends React.Component. However, you have to keep in mind that code that is not spec-compliant will break in mysterious ways perhaps months or years into the future. It may not be worth it, despite the ease.
`yarn install babel-cli babel-preset-es2015; ./node_modules/.bin/babel --presets es2015 <sources> -d <out-dir>` is not particularly difficult.
Since you already recognized you know nothing about Buble can you please stop making absurd claims about THINGS YOU DON'T KNOW?
What are specs, by the way? I don't care if Buble isn't following stupid specs. Browser vendors will change these specs a million times, Babel will follow up with new versions with a thousand breaking changes and require you to install a ton of packages, clean old packages, erase your hard disk and kill your neighbours. Buble will just keep working.
In fact, Flow allows us to confidently implement APIs that would just be cumbersome otherwise; we can use complex string keys for UI actions, rendered templates, etc., and make Flow actually enforce them via its $Keys<T> helper. This has the incredible effect of making it a type error if you try to execute an action that doesn't exist.
Cumbersome APIs become easy with Flow, and that's just scratching the surface of its utility on any sufficiently-complex JS project. It's nothing but wins for your development team.
TS is great too. Honestly, either way is a giant leap forward.
Besides, Flow has a very ambitious target of delivering types for APIs which were not written with types in mind at all. I thought I'd be able to recreate some of the Elm's type safety with Flow, but that's just not possible and I doubt it'll ever be. But then again, these two projects have very different objectives.
I don't want to start a "JavaScript is bad" flamewar, but it's sad that there is an entire class of problems that we as software developers are solving, where simple type checking seems amazing
For example:
The utility types in https://flow.org/en/docs/types/utilities/ can be used to great effect to express things like "A type of the keys of T, but values passed through this function" or "A type that is the difference of these two maps".
In practice, this helps me write things like React Components that take some of their props from the root store via context, and the rest of their props directly, and for Flow to actually know which is which just by reading the code (no explicit typedefs!), override root store props as needed (so long as I don't change their types), and throw a type error if I miss or misdefine one. Awesome.
* absolutely no any types or other imprecise types, no files skipped, no lines skipped, etc * every single piece of external data (API requests, reading from localstorage/IndexedDB, etc) is explicitly validated to make sure it exactly conforms to expectations * all dependencies are also typed to the same standard (not just some type definitions slapped on top of an npm module, those could easily be wrong and often are)
Probably some are. But none of mine are, sadly. And I don't think I'm in the minority.
Regarding third party libraries, with prop types you are effectively writing your own bindings to the parts of those libraries that happen to go through your props, except you fail far away from where the error is produced.
Prop types are also a very ad-hoc solution to a very general problem. Why are props for UI components especially deserving of type checking? What about the rest of your application code? Event your components' state is not worthy of type checking?
With JS or typed-JS languages like Typescript or Flow you will never get full type safety (Flow is better at safety than TS if you're interested). For me the solution is to either go 80% of the way for 20% of the effort with those languages, or go full Scala.js or something that is actually type safe. And the latter has many goodies like https://github.com/lihaoyi/autowire to make API calls typed.
Besides, some of that broken JSON data might never even be passed through proptypes (e.g. if that data lives only in a component's state).
Also, there are compile-time solutions to this in some compile-to-JS languages, e.g. like https://github.com/lihaoyi/autowire for Scala.js
(Unfortunately it's not working with React Native, but I hope that's fixed soon: https://github.com/brigand/babel-plugin-flow-react-proptypes...)
EDIT: Thanks to namuol, I just discovered flow-runtime: https://codemix.github.io/flow-runtime
This looks amazing!
EDIT 2: flow-runtime also doesn't work with React Native: https://github.com/codemix/flow-runtime/issues/17
That's a shame. I might see if I can fix it, otherwise I'll just stick with compile-time checks for now.
I've found more bugs that way that more than offset the extra time spent writing types and being a little bit more verbose to keep flow happy.
The minor annoyances are around the edge cases. Like eslint/flow throws propType errors when using props that were dereferenced from `this.props.someObject`. But you can just write the longer version `this.props.someObject.whatever` and everything's fine.
class MyComponent extends React.Component {
state: Object;
constructor(props) {
super(props);
this.state = {
foo: 1, // no type error
};
};
}
Anyone have experience with this sort of thing?
Is create-react-class smart enough to determine whether the version of React it is augmenting already implements createClass to prevent bundle size bloat?
class HelloWorld extends React.Component {
}I'm not convinced ES6 classes are better than components created the old way.
First, the lack of autobinding callback functions for child props is not ideal. I don't even have to think about it with createClass, and it requires at least one extra step with ES6. It's less convenient.
Second, I don't think HOCs are necessarily easier to reason about than mixins in many situations. React is already quite deficient in its own testing utilities (esp. when it comes to functional stateless components and HOCs such that I'd recommend everyone use enzyme), and testing a multi-wrapped HOC can be a PITA whereas whereas a component with multiple mixins is simpler to reason about in comparison. What I care about is testing the output of a component; I don't want to have to understand the internal structure of a component in order to test it in a shallow manner.
Id love to see an argument as to why they are better, but I haven't seen anything convincing. Plus our app uses a ton of non-invasive mixins and the upgrade away from them would complicate the app and make testing way more complicated.
Think about the reasons jQuery and WordPress were popular, despite performance issues, they JUST WORKED for people. React is the jQuery of vdom projects, don't try to make it the something it is not.
And by this logic, we shouldn't use JSX either.
I think the complaints you have are valid but should be solved by js, not react.
For better or worse, there are many ways to make pseudo-classes using Javascript. Is prototype configurable? Writable? Enumerable? What about the properties of prototype? Are they configurable? Enumerable? Writable? And there are still people who clobber the default prototype, killing its `constructor` and changing the above.
And that's just one level. When it comes to calling super constructors and super methods, things get much wilder.
I've come to terms with the view that ES6 classes are just a way for us to move on with our lives. We do a common thing in a common way, and never think for a second about what subclassing approach to use, what method is compatible with what other method, and whether it's implemented correctly.
Yes, you need a build step to target older browsers. But you needed a dependency anyway, to support whatever ad-hoc method you were using.
I never used mixins, but I agree that HoC's present a special problem for testing.
I use coffeescript classes as components without any problem and that inserts an "extends" function into every compiled .js-file that has a class.
I suspect people that need ES5/ES6 compatibility that currently rely on React.createClass as a peer dependency can switch to maintaining their own createClass function local to the project. Suboptimal, but not a lot of code.
class Foo extends Component {
bar = () => {
// ...
}
}constructor(props) { super(props); this.func = this.func.bind(this); }
Is better if you care about performance.
Mixins don't compose safely and were always kind of a hack.
HOCs are also kind of a hack, but at least they behave predictably (i.e. they do compose).
I don't really get the argument that React lacks testing infra. I know a lot of people say this but no one has talked me through an example yet.
It's sad to see how new generation can't learn lessons of the past.
https://facebook.github.io/react/docs/composition-vs-inherit...
>So What About Inheritance?
>At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.
We dislike inheritance as much as you do, but we also dislike ad hoc class systems that have worse performance.
```
interface State {}
interface ISomeComponentProps {
title: string;
tooltip?: string
....
@ReduxConnected
export class SomeComponent extends React.Component<ISomeComponentProps, State> {
....
```
I mean, creating a new type of brush for painters is ok, but I don't see the need for forcing them to redo their old paintings with the new type of brush in order to keep them visible..
IMHO Coffeescript and some other to Javascript transpilers are still a much better language than the entire Babel ES5/ES6/ES7 thing. But for some reason my free choice here is in jeopardy. The community apparently has chosen for Babel and are now happily nihilating things that are not compatible with that.
In my opinion this is not only irresponsible, but very arrogant as well.
Although I do understand and can write higher order components, I still write and use small mixins in projects because it works for me. I also use createClass because I enjoy the autobinding and don't like the possibility to forget calling super.
Now I need to explain my superiors why this warning is shown in the console, making me look stupid using deprecated stuff. And I need to convince them why I need to spend weeks rewriting large parts of the codebase because the community thinks the way I write is stupid. Or I can of course stick to the current React version and wait until one of the dependencies breaks.
It would be really great if library upgrades very, very rarely break things. Imagine if all the authors of the 60+ npm libs I use in my apps are starting to break things this way, for me there is no intellectual excuse to justify that.
And I believe there should be a better way to prepare your users for a major version upgrade (React 15 -> 16) than to update the current branch with all kinds of deprecation warnings. Even if a library - as popular as React - doesn't plan to provide lifetime support for any major because they like to to move fast, I understand that, it's simply not okay to ruin older branches this way, madly assuming everyone is surely going to upgrade to React 16 in the immediate future.
Ideally, I'd imagine there could be a separate optional package that adds these warnings dynamically. If that's not possible technically, then an optional build flag would be nice. Or two separate releases: react-15.5.0 and react-15.5.0-upgrade-support. Even better: go back to semver, and treat major upgrades as optional for the first 6 months. This allows other libraries like routers and style libs to catch up, so app devs can upgrade even more smoothly.
Maybe after all, DX is about when to provide helpful errors and warnings. And when not to?
I totally understand why the ES6 community likes it. It lets you write very Rubyish code and has lots of ergonomics for developers who don't want to have to think through the kinds of problems that functional programming forces you to think through. It's a push towards the Rails declarative aesthetic and away from functional/imperative. Declarative programming makes you feel like a wizard, until you have to debug something and then you feel like you don't know how to code at all. I've come to terms with the fact that the majority of JavaScript developers like this change.
But as libraries slowly drift out of compatibility with the older Node-style of programming, there comes a point where it's really a completely new language.
I think we're in for a fork of the community. Maybe there can be one runtime, but I think we're going to start seeing an alternative to NPM that allows developers to have an opinion about what JavaScript is.
Don't use classes. Don't use promises. Can't comment on what you said about async since it's literally nonsensical.
There is no fork coming, or if there is, it will only be used by a tiny portion of the community who thinks they are brilliant because they can "think through" functional programming problems but don't understand what role async calls play in modern development.
Not sure what's wrong with what I said about async? it's a new keyword in ES2017. It's a difficult to use control structure that doesn't do anything you couldn't do with callbacks. What part of "modern programming" do you need Async for?
I don't think I'm brilliant for being able to think through basic functional programming concepts. Actually the opposite... I think you need to be very smart to understand and debug promises, that's why they are bad. I like callbacks because they don't require me to be smart.
Maybe I'm smart for knowing I'm shooting my future self in the foot when I write code that requires smarts, but that's a little convoluted. The reason I care is because the ES6 community sold out beginners by adding all of this syntactic sugar. Javascript used to be a good beginner language.
I think that changed recently in Chrome, at least.
Going to set aside some hours on Saturday to upgrade our React version.
I recently started to go in with functional components where I don't need life-cycle events such as componentDidMount. Does anyone know if React is planning to make optimizations for code structured in this way?
They just removed some addons in master that many third party packages rely on, including material-ui. Hopefully these other popular packages can be ready to go with the changes when the fiber release hits.
npm install react@next react-dom@next --save
Unlike real web components, React components are brittle since React does not have the equivalent of Shadow DOM.
But modelling React into web components makes about zero sense. The spec started many years ago and it is utterly outdated and useless. Web components aren't event components, they are pluggable templates. They expose all the problems and issues that React has already solved. While web components are dependent on vendor policies and specs, yet do a fraction of what a React component does, React is already out there serving apps to mobile, desktops, shell console, watches and so on - because it is what web components should have been.
https://facebook.github.io/react/docs/web-components.html
There's also more opinionated integrations like https://www.npmjs.com/package/skatejs-react-integration.
And of course you can do it the other way around too.
I've definitely wired up JSX createElement implementations that handle attributes and events properly. My preference is for Polymer-style naming: `on-*` for event handlers, `$` suffix for attributes and everything else is a property. Others who've done this use special `attributes` and `events` properties.
React has grown so powerful it isn't even just about the browser any longer. It runs everywhere. The browser has finally become a dumb pipe, something it should always have been. Web components are trying to reverse that, but you'd be ignoring innovation if you fell for it.
The extensible web is about low-level access. Web components go against everything that stands for. They're again pushing a bad vision that was decided on almost 10 years ago by people sitting in a closed room trying to interfere with how we write apps, resulting in a useless spec that adds complexity and weight. That spec btw took years of pushback against Apple and other vendors that weren't even interested in web apps rivalling their native stores. They have eventually given it green light because the spec is so tame it won't threaten a native app in a hundred years.
React on the other hand isn't much more than a simple idea:
const Component = ({ text }) => <span>{text}</span>
const Another = () => <Component text="hi there" />
The W3C has the worst kind of track record, don't expect anyone to fall for all this hand waving for "standards," no one is that naive anymore. If a spec doesn't perform it gets discarded and by this point we already know web component don't.
function App(params) { const component = new React.Component(params);
component.lifeCycleMethod = function() {...};
component.render = function() {...};
function privateMethod() {...}
return component;
}http://javascript.crockford.com/private.html
https://addyosmani.com/resources/essentialjsdesignpatterns/b...
Be aware that memory usage can quickly balloon with this pattern, because the GC needs to keep alive anything referenced from inside the closure, including closure objects for the private methods for each individual instantiation of the component. With normal prototypal inheritance, there's only one function object per class; that's the upside of the explicit 'this'. This (and inability of early debuggers to inspect closure variables, which has since been fixed) were what killed this technique in the 2000s.
[Edit: parent post was edited to remove the code sample. I'll keep this up since apparently people are finding it informative, but be aware that I'm replying to the code sample that used to be in the parent comment, not anything in the article.]
I'm pretty sure Crockford still pushes this. https://weblogs.asp.net/bleroy/crockford%E2%80%99s-2014-obje...
It does eat up more memory, but as Crockford says, memory is cheap. It's not likely that it'll cause a problem.
Classes are good. Classes express concrete taxonomies of concrete things in ways that most developers can understand.
I think we should be happy that JS is flexible enough that adding "class" to the language is almost purely syntactical: it clarifies and makes semantic a bunch of otherwise boilerplate "Foo.prototype.blah" code that you see in so many non-trivial JS apps.
Classes simplify things IMO.
The reasons they give are that 1) you should favor composition and delegation over classical inheritance 2) classes keep you from using and understanding closure and other functional patterns and 3) you just get a lot of really weird behavior when trying to use classes in JS which results in a lot of confusion and wasted time, especially for those who don't have 10 years of experience under their belt.
Edit: Here's Simpson's take: https://github.com/getify/You-Dont-Know-JS/blob/master/this%...
Long term, the React team plans to investigate concepts like "stateful functional components", but until then, classes are the most straightforward way of having lifecycles. The existence of ES6 classes is based on the wide range of third-party "class" implementations across the JS ecosystem, so clearly there was a desire to have them available. Since they're available, React is using them.
Huh? Why? React.createClass({}) is/was pretty straightforward. What is more straightforward about classes? All I see is more code.
There are three major differences between `createClass` and React.Component:
- Autobinding
- Mixins
- Custom class system vs one that's built into the language
Autobinding is the most useful aspect, but there's a variety of ways to deal with it: use the Class Properties syntax and write methods as arrow functions, use one of the many autobind utilities in a constructor, write your own base class that extends React.Component and do autobinding in its constructor, etc.
Mixins are now a discouraged approach for writing React code. If you still want to use mixins in React components, there's some "compat component" classes on NPM, or you could use a non-React-specific method of applying mixins.
And finally, deprecating a custom class implementation means that it's one less thing the React team has to maintain, and the lib size is that much smaller.
That said, I tent to follow more functional patterns for workflows (prefer Redux and similar extension), but for some components the class syntax is usually nicer. Most components are probably best served as simple render methods though.
I recently (5 minutes ago) discovered 'flow-runtime' [1], which gives you the best of both worlds. It automatically generates PropTypes from your Flow types, as well as checking all of your other types at run-time.
http://justinfagnani.com/2015/12/21/real-mixins-with-javascr...
It's purely defensive, they'll only revoke your license if you sue them for patent infringement. And they only revoke the patent-grant of React as far as I can tell, not your license to use it (and there aren't any patents related to React as far as the internet claims).
The 15.5 announcement does thank several people for "transferring ownership of package names", so I'm guessing that may be one of them.
Two APIs moved from one package to another. That's all. I understand it can be frustrating but there is no big change to learn here.
Your code will still work in 15, and we print warnings telling exactly what to do to prepare for 16. And we provide tools to automate this change for your existing code.
Also, most webdev is pretty throwaway, which means it's totally fine to get yourself out of trouble with piles of unmaintainable hacks. It'll all get rewritten in a new framework du jour two years from now, anyway.
If you want people to always ignore warnings, this is how you go about it.
They gave you tools to automatically fix any new warnings that came from this. I honestly don't know how they could have made it any easier.
I don't think its too bad, just saying that the tool doesn't solve the problem for everyone.
Not interested in either? Then don't upgrade.
[1] - fixes enumerated here: https://facebook.github.io/react/blog/2017/04/07/react-v15.5...
The next step would be certification, of course. Certified expert in this particular mess of hundred of dependencies and half-a-dozen tools like Babel.
Let's say that there is a law that any over-hyped project eventually would end up somewhere in the middle between OO-PHP and J2EE. Otherwise how to be an expert front-end developer?
Google's responsive design looks like the last tiny island of sanity.