The Play framework is currently one of the most widely used Scala frameworks. Our engineers have found it to be a great development tool and therefore, we decided to use it for a new project. However, one of the requirements for the project was to create a responsive frontend. Unfortunately, we found that Play's standard template engine, Twirl, was not robust enough to meet this requirement. Consequently, we decided to explore more modern technologies, such as React JS.
React JS is a popular view rendering library developed by the Facebook team. It offers many advantages, including its lightweight implementation, speed, and component-based approach. In this guide, we will describe how we integrated React JS into our project.
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:
- Simplicity.
- Quickness.
- Isolation - you can integrate React to only one page at any stage of work. It will not affect your other code at all.
Cons:
- 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.
Pros:
- 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.
Cons:
- 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.
Conclusion
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 or contact us, because we are professional React JS development company.
