| published | title | summary | keywords |
|---|---|---|---|
false |
State of JavaScript 2019 (React Portion) |
The state of JavaScript is a whitepaper the Kendo team puts out each year to highlight and discuss the changes in JS and all of the flavors of frameworks. |
JavaScript, KendoReact, Kendo UI, React, Whitepaper |
React is continuing to see growth in 2019. A pretty clear measurement is npm downloads which show numbers that indicate React is not only holding it's position as the most downloaded and used front-end framework, but continues to show continued growth. There are a lot of things I think contribute to it's usage by developers, but I believe that React's consistency over the years plays a huge part.
What sets React apart from other front-end frameworks is it's commitment to doing one thing very well. That one thing is components, their composition and managing their state. Other frameworks take a different and more all inclusive approach or try to help the developer get straight to working with the framework with minimal setup, both are features that help propel those frameworks. React, however; is laser focused on the component model. They let the developer choose their own solution for routing and data models and other acoutramonts and by doing this it makes the framework more flexible helps to create a higher rate of adoption.
React isn't really considered a framework, specifically because it chooses to focus on just the component story, but it's definitely getting some amazing features as of late that help with the application as a whole. Context API, Lazy loading, built-in state management with Hooks and things like Suspense are all recently released features that I feel get us closer to being a framework. React is good at walking that line though, and even though it's not necessarily considered a framework it directly competes with other libraries that can be considered a framework like Angular and Ember.
One of the reason React developers are so supportive of React is because of the stable nature of the project. We have seen amazing things in 2018 without a single major version bump. So many new features and changes in how the library works or how it will work in the future are all peacefully coexisting side by side.
The team follows a principle of Gradual Adoption strategy meaning that they get feedback from the community, quickly patch, fix, update and release on a persistent, timely and consistent schedule that they gain loyalty simply by building great software. Bringing more compatible options and less breaking changes is idea.
Their team members come right from the community as well, a lot of the time by being recognized as contributors and sometimes actually joining the core team. You can't build software this way without amazing community support. That is the thing I would say is the most notable quality about React and it's community. It's that relationship with the actual team building the software. This is also a common thing throughout the current front-end framework right now with Angular, Vue and even Ember seeing their community grow along with the popularity of it's framework showing a resurgence.
Another great thing about the React community is it's sheer numbers. In most major cities around the world, there are an abundance of React meetups. In the Bay Area where some technologies only have one or two meetups, React has several and that means you can attend a meetup in pretty much any part of town. There are always a lot of interesting people to meet through these meetups, I have found them to overlap with the Angular community as I see people from both camps enjoying learning about the other frameworks and attending both React and Angular meetups. In my opinion, most React developers come from JavaScript land, they typically are well versed with Node and Express and many are veterans of the industry, some even coming from the IT and Sys Admin world. Another place the React community congregates is on Reddit, where a large React community exists with a lot of unfiltered talk about React content.
Having an amazing community is essential, especially when making the decisions to move to React as your front-end development choice. I highly suggest giving React a try in 2019. It's amazingly simple to learn because of the insane amount of resources out there. You can find some of our pillars of the community releasing courses on egghead.io where React is one of the main categories for learning. YouTube can also be a great source for content at no cost and with it, a community of developers that stream live on both YouTube and Twitch.
As I mentioned, React is looked at as more of a solution to one part of the web development process and even these things I speak about that come out of the box are centered around building reusable components.
One of React's decisions early on was to use something called JSX, rather controversial at first, it's proven to be a superior form of writing HTML for React components and puts your markup right inside your JavaScript.
If JSX and React's component model could make for a brilliant model for building universal components in HTML and JavaScript. That very topic is talked about in one of the latest React Podcast episodes, saying that React could become transcendent rather than slowly decay like most frameworks by taking the component model that they have introduced and getting it added as a first class construct in browser manufacturers. They note that this is not impossible. But by doing so React could become defacto web technology and achieve transcendence!
With all of the work done around React's components and making them super simple to write using functional components and ES6 style syntax. One could see this transcendence idea come to life, but let's not get too ahead of ourselves yet, most libraries and frameworks have a shelf life of 3 to 5 years. React is knocking at that door now, the question is, will it become transcendent unlike any other frontend framework or will be phased out eventually by new frameworks like Vue?
React's range of applications is wide. You can use it for building desktop apps, mobile apps and of course web apps. Most web frameworks have a hard time breaking into this cross genre development area. Between React, React-Native and even things like Preact (a light version of React), we are seeing React gain the ability to go wherever it wants and it's because of the decisions to not strive to be a framework, it doesn't need a router, data model or anything out of the box that does not contribute to working with components. This is a major attribute of React versus it's closest competitors.
Check out for yourself and play around with the npm trends graph to see how your favorite libraries stack up. The above graph is a screenshot from npm trends where I ran one of the most common trend analysis when it comes to front end frameworks, pitting React vs Angular vs Vue against each other.
We can see that when it comes to npm downloads, React really does appear to be ahead of the pack, but this is just one metric. 2019 will be interesting with the adoption of Vue picking up and amazing stuff coming from the Angular team. In my opinion, this healthy competition is a win/win for everyone. In the past few years we have seen all of the major frameworks work with each other, but a healthy amount of competition as we know fuels innovation.
As mentioned, React has picked up a gang of support in 2018, but what I would note is that it's actually been on this steady increase since 2014. This next chart is pulled from a talk called "npm and the future of JavaScript" and shows React next to Express and Webpack. I wanted to show it's absolute growth over a longer period of time and this chart helps us to see that relative to other packages seeing similar and in some cases even more growth than React.
A great metric to follow is npm downloads for comparisons to other frameworks and I think is a good indication that React continues to be a force in the JavaScript developer community and continues to be a pick from a popularity standpoint.
I think npm stats are the best thing we have to determine the popularity of the different JavaScript front-end frameworks, but there are other surveys and polls out there that can help us understand where React has come from 2018 and where it's going in 2019. Specifically, the State Of JavaScript's 2018 survey.
This report has valuable information around JavaScript and as a professional it can aid in decision making or just make you happy 😄 or sad 😥 about your favorite framework.
No reason to be sad here though, React developers couldn’t be happier with the results. Check out the Front-end Frameworks - Overview.
We can see what frameworks are popular and used or would like to be used by the survey participant's. In the "Used it, would use again" category, React is strong, we see that other frameworks also have a good showing. I would also say that this survey must be taken with a grain of salt as I feel the data set may be heavily answered by React developers, partially due to the authors' background and the community the survey stems from. But it's still something we should take into consideration when gauging React's overall popularity and that still is a measurement many companies look at before making a decision on picking a framework or library, with good reason.
Another interesting graphic from this survey data is "Most liked aspects of React", which also helps to shine a light on areas where the users think the React team could improve upon.
I think that most issues for why developers dislike React is being addressed somehow in the minor 2018 releases (16.3 to 16.7). I spoke in Bulgaria at the DevReach 2018 conference about the improvements to React over the course of 2018 and what I think they mean for the future of React. So it’s reassuring to see that the reasons I love React are also reasons others have said they like it too.
To get a better overview of how React fared in this State of JavaScript 2018 survey, I have done a rather extensive review and given my own thoughts in a blog post titled: A React State of Mind (State of JavaScript Survey 2018)
From the earliest versions of React, there's always been a way of handling state that encouraged a one way data model. But using setState was always tricky for newcomers to React. Even after learning the ropes, it was still possible to introduce bugs when using React Core's own state solution.
Because setState is asynchronous and the fact that it causes unnecessary renders in certain situations, and for the fact that sometimes developers didn't know when to use setState vs manage state on their own, it was misunderstood and at a certain point developers would flat out stop using it.
In 2017 and 2018, React Fiber was introduced as React 16, in fact we are still on this same semver major version number now with 16.7 just recently being released. But when the version number was bumped to 16, we got an entire rewrite of the React engine and this rewrite was code named React Fiber.
Most of the information around the reason for the rewrite are jammed into several talks that took place at React Conf 2017, but this rewrite paved the way for something that I believe will change the way we write React code in 2019. The community has embraced React Hooks.
Because of the nature of React's one way data flow, and it's close relation to the library Redux, React released an alpha in November of 2018 that redefined how to work with state using the useState, useEffect and useReducer hooks and snatched a play right out of the Redux pattern. The release of React 16.8 ushered in this change in paradigm on February 6th of 2019 and is probably the most important and notable change in React that will create the biggest impact in 2019, not only in React but in JavaScript in my most humble and honest opinion.
Before the introduction of Hooks we had the concept of class components which you could use to build components that needed to manage state and have lifecycle methods and other things that could only be done in classes. One of the drawbacks to prolifically using classes in React or anywhere for that matter is how .this is treated. One would have to bind functions and do extraneous work to both provide interaction in the component as well as manage state.
We also had the idea of "functional stateless components" before React 16.8 (Stable Hooks Release) in which the functional component model provided a much more concise ES6 style syntax with the ability to get away from using the .this keyword and allowed for less ceremony and syntax in the component. It also set the scene for React components to become world class. You see, in the past, when you would create these types of functional stateless components, it typically meant that they would only receive input (props) and not manage any state. Even though you could not use React's built in state, it was obvious how powerful writing components this way could be, but for the time being the drawbacks were that you couldn't interact with React's state and you couldn't include lifecycle methods. But now that is all in the past.
To quote Cory House in a 2016 Hacker Noon Article: "React stateless functions offer the most elegant approach I’ve seen for creating a reusable component in any popular framework".
In creating Hooks the React team gave us an easy and more pure way to write components in a functional ES6 style syntax that required the developer to think more about composition. Which components will be smart, which ones dumb, which are presentational and which ones are wrappers and deal with fetching data etc. This was great to have a period of time where we were forced to think deeply about what each component did and why we would use one over the other. What you could do with the functional stateless components was minimal, but it made us aware of the possibilities and it kept you honest and promoted lean design.
With React Hooks you can now use them to tap into React state and lifecycle methods and get all the other benefits that class components gave us. The new tools to do this are: useState and useEffects, they also provided a Hook called useReducer which enables a Redux style pattern for simple UI state management. We now have an abstraction around setState() that can incorporate actions and reducers plus we can manage that internal UI state in a similar fashion to how we manage our data and it's state within our apps.
In 2018 we bore witness to a major master plan laid out release by release by the React team. It should be noted that each release was a minor release, meaning the semver in the fact that we never bump the major number of the release which is synonymous with wide breaking changes. Everything they did, they did as minor releases. This is important to note because, in order to roll out the changes that I am going to tell you about and breaking the old way of doing things, the React team ensured that each new features released were, for the most part, backwards compatible and work side by side with existing features.
We also saw an update to React's most popular CLI tool Create React App, which we covered in detail in our Hello Create React App 2.0 article back in October of 2018.
Below is the React minor releases from 2018
- 16.3 (Mar 29th, 2018) New Lifecycles and Context API
- 16.4 (May 23rd, 2018) Pointer Events
- 16.5 (Sep 5th, 2018) React Profiler and Suspense
- Create React App 2 (Oct 01, 2018)
- 16.6 (Oct 23, 2018) Lazy, Memo & contextType
- 16.7 (Dec 19, 2018) Bug fixes and patches (No Hooks yet)
The first release of 2018, we had something called Context API finally get shipped, it meant we could share data using a provider and allow a tree or group of components in our application share the same context. The initial implementation used tags that would allow you to wrap a number of components and provide them all with this context. As you can imagine this was a step in the right direction, but in complex scenarios this can start to breakdown having to wrap providers and consumer tags around areas of the code where you wanted to have access to that context.
Hooks brought us the useContext hook and overnight we all breathed a sigh of relief.
Long live Hooks, it's a revolution in React this year, if you don't believe me, wait and see. I write about all of these Hooks and show you the before and after as well as how to work with each of them in the following articles:
React Hooks - State & Effect React Hooks - Context React Hooks - Reducers
As well, if you are using the KendoReact library in your web development and are looking for a Hooks version of your favorite StackBlitz demos for KendoReact, I have a growing list of demos I have converted to use Hooks over on Dev.to: KendoReact Components (Functional Hook Style) as well as an article that encourages developers to get started with Hooks ASAP: Can I Use react Hooks yet?
The first release of 2019 was: React v16.8: The One With Hooks. With this release we no longer need to use the alpha to gain access to these new features we have been speaking about that Hooks bring to the table.
The ecosystem I think will be the biggest impact for React in 2019 because of Hooks comes this wave of operations that you can hook into, the possibilities seem endless. The most popular state management library in JavaScript is Redux, which is completely separate from React in the fact that it is framework agnostic, you can use it with Angular, Vue, React, Vanilla JS, whatever. It's one of the reasons why Redux is so popular, as well we has other tools that although not tied to React, owe their popularity to the fact that they are standard tools for most people building React applications.
GraphQL will see more adoption in 2019 and their growth is not specific to React. Look specifically for GraphQL to make a major contribution to JavaScript and become a prolific way of building APIs in 2019.
it will be a huge win for the JavaScript community and ecosystem as a whole, not just React, having tools with ties close to React but are also agnostic help to ensure extended growth outside of the React community. I think we will see a lot of adoption of these related technologies and ideas.
Hooks are already inspiring other areas of JavaScript and to be honest the concept or Hooks are not new with React. Other libraries are already using something similar.
Check out @Getify's TNG-Hooks, how to build your own React Hooks and one of the collections of Hooks on Github. Hooks is having an impact on how we can organize, write and share JavaScript.
Another area of React tht I think is the next logical progression for a lot of React developers is something called Next JS which is an amazing offering to help with server-side react. There are several crash courses on YouTube if you have not heard of it. This is a minimalist framework for rendering React on the server. Helps to automatically code split, do hot routing, file based routing and mapping of routes available.
2019 is going to be an amazing year for React.