RNG (React, Next.js, GraphQL) can slay the MEAN stack

Karlo Luis Martinez
5 min readAug 26, 2017

--

The king valley stack

Technologies rise and fall, and in recent years there has been an impressive amount of open-source communities backing libraries and platforms. There are instances where a “stack” or combination of these take the industry by storm and drive a radical change and burst of innovation.

Around 2010 Node proclaimed the seat for the go-to server platform in combination with Express.js; quickly morphing into the MEAN stack. This was not without hurdles as the community split during the early years, but in 2015 they reconsolidated from the IO.js fork and became the powerhouse we now know.

The term “MEAN stack” is known as the use of MongoDB, Express, Angular, and Node. It has become the standard to build RESTful API’s and bootstrap projects for start-ups and ambitious entrepreneurs. It looks to me like the time for MEAN being king of the valley has come to a close.

Enter RNG, this is the use of React, Next.js/Node, and GraphQL as a development stack, sure, there is no MongoDB or MySQL/PHP (-M or -MP) but more on that later. The RNG stack is just as flexible and limber and provides great advantages on with the latest improvements and better standards that have come as of late.

Of course this is not to say that the MEAN stack is going to be abandoned, or figuratively slain into oblivion. There are circumstances in which making the transition would be too costly or time consuming, as one might expect. So it is fair to say that its presence will last for quite some time. But it is my belief that some form or combination of these technologies can arise and become of predominant usage for many applications.

React logo

React

Although still an up and coming in the ecosystem, early adopters of React have proven it to be incredibly powerful and a great solution for long standing problems. In many ways it took the most nagging issues of the front-end and solved them elegantly by re-engineering the DOM to what we know now as the virtual DOM. It is also one of the most sought out skills for young talent to have, so take a few hours and see for yourself what React has to offer. Currently you can setup a React App by using a pre-configured component development oriented npm module create-react-app.

Next.js logo

Next.js

In October of 2016 ZEIT open-sourced their Next.js framework (see the original post here), it runs universal (or Isomorphic) JavaScript server-rendered webapps. And let me tell you, it is beautiful! Sure, we can still use Node, but why would we do that, someone has made this so easy to work with. As of version 2.0 they included React support and a bunch of more improvements. Even more when Next3 came out mid August 2017, with no sign of stopping there. So give it a try and build something, here is a site to Start Learning Next.

GraphQL logo

GraphQL

Last in the agenda is GraphQL, this is the tougher one for me to explain, bellow is a great video that achieves this. It is a long video so if you want to keep reading feel free to watch it later.

If this is the first time you have heard of GraphQL you should know that it is a replacement layer to any and all API calls, no more routing and no more data fetching headaches. It is a fullstack developers API dream, the big game changer to make it all come together.

GraphQL was released recently, back in 2015, and has since gradually grown a solid community; there is no grasp of its potential to disrupt development processes standards for smaller teams. Sure it is just an API layer if you configure it yourself wanting to take advantage of maximum performance.

Services like Graphcool and Scaphold can certainly replace the need for a MongoDB or other database instance in the occasions. For those who have setup mongoose for MongoDB this should be close to a cake walk, given the similar schema and type structures. Although getting accustomed with traversing through the graph like data objects will take a bit of time and effort for most.

The key features for GraphQL are the query introspection, and flexible data selection. Ohh and NO API ROUTES to configure, as in zero, nada en lo absoluto. Just pick the data in the “graph nodes” and poof, call resolved.

The major selling point would also be the ability to use any storage service as long as you configure the GraphQL layer to support it.

Conclusion

The new React, Next.js, and GraphQL (RNG) stack has the potential to once again shift the JavaScipt ecosystem and arise as the prevalent stack for start-ups and tech companies to adopt for their apps. The benefits in performance and ease of front-end and back-end development collaboration are undeniable with the use of GraphQL not only as a JavaScript centric app.

What is not to like?

Side note

Small PSA, keep in mind the issues in the community with licensing as open-sourced software and communities fight for transparency and ownership of our beloved code. Especially with React and other Facebook technologies. But also don’t over-React, her pun not mine.

--

--