The Story of React JS Integration by Back-end Developers
Play is one of the most widespread Scala frameworks today. The experience of our engineers has shown that it is a good development tool and so we decided to use this framework in a new project. Among the project's requirements was creating a responsive frontend but it turned out that the standard Play's template engine Twirl is not powerful enough to satisfy this demand. Thus, we opted to try such modern technology as React JS.
React JS is a very popular library for views rendering developed by Facebook team. Its main advantages are lightweight implementation, speed and component approach.
The following guide describes our way of React JS integration.
Integrating React.js via script-tag
The easiest way to add React to your project is to use sbt-web plugin sbt-reactjs and insert two JS files links in the header of your page:
<script src="https://fb.me/react-0.14.7.js"></script> <script src="https://fb.me/react-dom-0.14.7.js"></script>
Pros of this approach:
- Isolation - you can integrate React to only one page at any stage of work. It will not affect your other code at all.
- Code duplication - you have to include React files in all your pages separately.
- "Dependency hell" - besides two React files, you have to hook up at least one more file with your JS-code. Moreover, you may need some other libraries and this also will add some JS-files. Eventually, connecting all these dependencies in the correct order can become a challenging task.
The given approach to React integration is excellent for getting familiar with this library. However, when it turns to production development, it would be better to have a more automated solution.
Integrating React by means of external tools
To avoid disadvantages mentioned above, we decided to use an external tool. The main advantage of such tools is that you can compile all your JS-code to one file and include it to your project in one place. In this case all dependencies are resolved automatically.
We used Gulp but you can try any other tools (e.g. Grunt). After that, the only thing left to do is to integrate Gulp to SBT. There are two ways to solve this task:
- Use SBT-plugin. For example: SBT Play Gulp Plugin.
- Write your own integration. You can take play-gulp-standalone as a start point.
- Automation - the solution is all-sufficient. You can write code and be sure that it will work on page.
- Modernity - such tools as Gulp are based on Node.js platform which provides developers with easy access to NPM (Node Package Manager). There are about quarter of a million packages in the repository of this package manager. Its community grows much faster than sbt-web's one.
- Requires configuration - it is necessary to spend some time to configure the assembling process for your project.
- Complexity - you have to learn and utilze one more tool for project assembling.
In this tutorial we have described two ways of integrating React to Play project: as a separate script tag and with the help of external tool. The main advantage of the first approach is simplicity, so it is preferred for the initial try of this technology. However, if your project requires a full-scale integration with React, we recommend to use the approach with external tool.