Enact and Interoperability
Interoperability is very important to the Enact team. As an open source framework, it’s especially important that the components of Enact can be used in other projects and that other pieces of the broader JavaScript ecosystem can be used with Enact. The bottom line is that Enact is not a closed ecosystem — it’s simply a unified approach to creating React applications.
As such, Enact plays well with other React libraries and it’s possible to pull in many components from npm to use in an Enact project. The two most common integration scenarios are: using external packages with the Enact CLI and using Enact components with other build systems, such as create-react-app.
Using External Packages with Enact
When we first started working on Enact, create-react-app didn’t exist. Our goal to simplify working with React led us to create the Enact cli tool. This tool, similar to how create-react-app works today, allows for the easy creation, testing and maintenance of Enact projects. The Enact CLI handles all the complexity of Webpack, Babel, ESLint, Jest and a myriad of other tools that application developers often have to configure to be productive with React. We did the hard work of making sure all those pieces work together seamlessly.
The CLI supports a number of templates, including a Typescript template, to help get application developers off on the right foot. Working from a template is a great way to get started with a new app.
For most packages, a simple npm install is all that is needed to make them available within your Enact app. Our default choices for Webpack and Babel were carefully chosen to work with a wide variety of open source software.
Even a package that requires a special Webpack plugin can be used with Enact. Use the CLI eject command to copy all the configuration options to the app directory and remove it from the CLI environment. At that point, the application is under your complete control.
Using Enact with Other Build Systems
If you have an existing React application, adding Enact to it can also be straightforward. We distribute Enact on npm pre-transpiled to ES5 with CSS that does not rely on pre-processors. Enact packages are available on npm in the @enact namespace.
As an example, to install the core package, which includes our component and HOC utilities, do: npm install @enact/core. Other packages follow a similar pattern.
Our @enact/i18n package does require a special Webpack plugin to function correctly. If you wish to take advantage of internationalization using Enact, you’ll need to add the plugin to your Webpack config. Also, as @enact/moonstone depends upon it, the internationalization features won’t be available without the plugin.
The Bottom Line
As stated above, Enact is a framework built atop React and all the other tools that make up the modern JavaScript ecosystem. Interoperability is a key feature of Enact. There’s nothing about Enact that either locks you in or locks you out of the broader React community. If you find something useful, feel free to borrow it.
Finally, the best way for us to work together is to get involved. Drop by our Gitter chat or visit Enact on GitHub. We look forward to working with you!
