jixee-getting-started-react

in Resources

What is React.js and Why Should You Care?

React-Jixee-Blog

Software development is constantly evolving as we seek to create frameworks and tools for ultimate efficiency.  Here at Jixee, we value the importance of staying up-to-date on current trends and are continuously learning, especially with the buzz around new libraries like React.js, which is creating quite the stir in the developer community.   ‘Isomorphic Apps’ is a term that’s been thrown around quite a bit lately, leading us to wonder: is this just a phrase someone created for effect or could these new frameworks be a real game changer?

Why Should You Keep Up With React.js?

Pace of change in the development world moves at high velocity, but the fact is it’s never going to slow down as paradigms of the past may not scale in the present, and certainly not the future.  There will always be a new program, tool, or language to learn — and rightly so.  New innovations are seeking to give users a simpler, more efficient way to work for developers and clients alike, and with the Facebook team maintaining React, you can be sure it’s not going anywhere anytime soon.  These modern web frameworks are offering valuable implementations by enabling reusable UI components, virtual DOM, and one-way reactive data flow; tools that could ultimately revolutionize your workflow.

What is React.js?

React is, as stated by Facebook, the makers themselves: “A Javascript Library for Building User Interfaces”.  Features of React are innovative in optimization of time and efficiency, particularly in creating UI.

jixee-getting-started-react

UI

Reusable UI components is essentially where the delineation ‘isomorphic’ comes into play.  Put simply, it means that the same code can be used on client and server.  With this feature, customized components can be used for both without having to re-render.  It also allows rendering with Node.js on the server, in turn creating faster user interactions and UI updates on the client side.

Virtual DOM

React does the ‘V’ in MVC differently than most frameworks by operating on a virtual DOM.  Using a virtual DOM speeds up the browser by accounting for the difference between the future modifications, and the present state DOM requests are minimized.  React streamlines the process by batching changes into one update and modifying in one clean sweep.   As with many other JavaScript frameworks, you are freed from constant DOM updates.

One-way Data Binding

This is an important difference in the framework of React vs. similar frameworks such as Angular.js, and is a pivotal feature in keeping UIs consistent.  Instead of fighting the language with two-way abstractions, React uses one-way data flow to make everything much easier to follow.  Whereas two-way data binding models allow data to flow back and forth between modules and directions, React eliminates this problem making it much easier to reason about.

What is Useful/Important to Know?

Facebook-React

Initially, it’s easy to look at React and think it’s only popular because Facebook made it, but that’s not entirely the case. React has some proven merit in the framework jungle.  Efficiency is key, and React’s virtual DOM feature lends itself to major performance boosts with one-step DOM updates. Instead of Shadow DOM, virtual DOM gives you the ability to compartmentalize components and use them throughout, which is a major plus for productivity.  Virtual DOM is also great for SEO, because React.js runs on the server and returns it to the browser as a web page.

It’s important to note that React.js uses a special syntax called JSX, a feature that allows you to mix JavaScript and HTML.  Designers who are more comfortable with CSS and HTML may have an aversion to this, but it’s actually a smart way for designers and developers to collaborate if both can adapt and use this feature to their advantage.  You can still write purely in Javascript, but embracing code with a little HTML sprinkled in, and eliminating the linking process is pretty useful.

In promoting their framework, they state, “ React makes no assumptions about the rest of your technology stack… try it out on a small feature in an existing project”.  This allows you to try React out on a portion of an existing project, offering an incentive to check it out on a small scale without shifting over your entire stack.  Huge tech companies like Facebook, Instagram, and Airbnb are jumping on the React bandwagon, yet the framework is still quite scalable.

Isomorphic apps are no longer just a word, they are increasingly applicable in today’s development landscape.  It’s a compelling new trend that offers new solutions to workflow problems, and delivers the best of both worlds for server and client.  The scalability is also there; if it can work for monstrous servers like Instagram’s, it’s bound to perform reliably for smaller user bases as well.  It’s a refreshing way to look at development, and the trend is probably here to stay — at least until the next wave of innovation takes hold.

  • http://noeticforce.com noeticforce

    Nice briefing on react! Let us see what react native has in store : )