React.js is great
I’ve been using React for just over a year now, in small little projects and in large undertakings like our front-end at Beagle. I spend a lot of time on Hacker News where a lot of people are already on the bandwagon, so when I talk to tech people just around me in real life, I remember that React is still the new kid on the block in web dev, and a lot of people who see it get quickly turned off by some key design features that seem questionable at first glance. So I wrote a long rant to exude my giddy excitement about React. Hopefully I’ll convince you that it’s worth trying out.
I initially intended for this to be a short post, but it evolved to a manifesto. In the first few paragraphs, I talk about why the React architecture is just inherently good, and leads you to build great apps. In the next section I discuss the ecosystem of React and the tools that help you write amazing apps. Finally, I quickly discuss two new technologies that emerged from the React community that promise to change the way we write client applications (both web and native).
Why I think React is an awesome, well-designed library
Components are great because they can totally encapsulate an entire chunk of user interface. Using just the concepts of props and state, a component will completely wrap up the functionality and appearance of a logical chunk of UI. Then your React app is just an arrangement of your components. You write components that contain other components, and components that just have “primitive” base components: divs and spans.
Ok, but maybe you fundamentally believe that appearance and business logic should just be decoupled, put in different files. I felt this way this too, but I was quickly converted. With React you have the appearance of the component right next to the code that determines how it looks. If you structure your project right, you’ll have different files for each component, and when something looks wrong, you know exactly which file to go to. If you want to add new functionality, you go to the parent component, break it down, add a new sub-component, or just change the elements of an existing component.
<li> for each element in an array, you don’t need to look up the syntax of
ng-repeat. You just write a
for loop. If you want your button to be blue if it is enabled and red if it is disabled, you don’t need to look up the syntax for an “if” – you just use an
So up to this point, I’ve described some inherent benefits that arise out of the principles of React:
- Components provide a great way of thinking about the total design of your app;
- Having a component’s visual description and business logic in the same file makes it very easy to understand;
But now I’ll talk about some indirect benefits that I’ve reaped from using React!
How a React tool chain takes your app to the next level
The list of great tools goes on and on. I promised earlier I’d talk about CSS in React! One tool that I’m very excited about is CSS Modules, which lets you write CSS like normal, but programmatically generates class names so that you don’t have to worry much about naming issues, selector specificity, and any unintended style cascading. Another great tool is ESLint preprocessors that hook into your compile-time workflow effortlessly. With such an epic tool chain, you can tweak the hell out of your compile process. Toss in a minifier/dead-code eliminator for free. Add global variables that let you define environments and build features that will be available in
DEV but hidden (and removed once minified) on
PROD. You can have a preprocessor find small assets on your page and inline them in the page to save a small request. The possibilities go on and on!
React is also inspired by many functional programming paradigms. It is considered to be declarative, because you just describe what the component is, and let the library take care of how to draw the component. In learning React, I’ve had some great exposure to some simple functional programming paradigms (map/filter, composition, immutable data structures), which have vastly improved the quality and appearance of my code. The functional idea of one-way “reactive” flow of data has also inspired the Flux architecture which goes hand-in-hand with React. The concepts of Flux have been reduced and refined into an extremely beautiful library called Redux, which leverages immutable data. Apart from being simply and easy to get, Redux has great performance implications for React apps, lets you modify your data store code with the live-reloading paradigm, and even offers developer tools that let you time-travel through the various states of your application’s data.
Here’s a quick summary of the awesome ancillary benefits of the React developer experience:
- React includes a quick sell on functional programming concepts that makes you a better programmer;
- React encourages setting up a sophisticated tool chain that gives you:
- Ability to write amazing code using really awesome features;
- Developer tools that let you travel through time;
- The Flux architecture which makes it easy to manage complex application data;
- Being part of an amazing community that is on the forefront of front-end development.
Next steps with React
I’m not done. I know, I know, this has already gone on way too long. But I also wanted to talk about two other amazing React ecosystem technologies that are truly mind-blowing.
The first technology is GraphQL, which is a very cool protocol for client data fetching. It’s really a competitor to REST, in that a) it concerns the design of the back-end that serves data, and b) that it is designed to make it easier for client developers to get data from the server. GraphQL lets you write queries that look like nested JSON. Then the server responds with data in exactly the shape you asked for. So you don’t really need to worry about structuring your REST endpoints anymore – GraphQL lets you ask for exactly the data you need, no more and no less. Facebook says that they don’t even need to write versioned APIs anymore, because each iteration of the client app just requests new data from GraphQL without having to deprecate anything that serves unneeded data. Then, Facebook came out with Relay, which efficiently couples GraphQL queries to React components. Now, you have files that specify the behaviour, appearance, and data requirements of a user interface component!
That’s it! Wow. This post turned out to be far longer than I anticipated. I think there’s a lot to talk about when it comes to React. It is inherently very well designed. Its tool chain is an accessible entry point that lets you build a very streamlined and awesome developer environment. Its community is full of smart people which keep React on the frontiers of web development, and you’ll get to ride (or push) that wave. GraphQL and React Native are incredibly innovative, and let you develop next-level applications for all platforms.
If you’re still not sold, I highly recommend you take 45 seconds to read Why React? If you’re curious to dive in and start coding, Thinking in React is an amazing but very simple tutorial.
I hope that at the very least, my enthusiasm for React might inspire you to give it an honest try. I think that if you try it, you’ll very quickly see how it can take your client development to new heights. I’m always excited to talk about React – please feel free to reach out to me if you’re curious about anything!