Nuxeo Elements is a set of libraries of web components leveraging emerging Web standards, built upon the same goals of simplicity and pluggability. Nuxeo Elements provides the means to build custom content-centric front-end applications, while taking full advantage of the technologies under the Web Components umbrella. The main advantage of this framework-agnostic approach is that these technologies are part of the browser, thus allowing DOM to be the "framework" and HTML to define the syntax. Therefore, there's no need for external frameworks for it to work, although it should integrate with most frameworks with little effort.
Polymer pushes for a very declarative approach to building web applications with the "everything is an element" philosophy. This includes both visual and non-visual/data elements, so even non-UI elements can take advantage of data binding in a declarative way, making for very concise and clean code.
Nuxeo Elements was built with this same philosophy in mind and promotes a clear separation between data and UI elements, thus allowing developers to use any of the existing UI elements while still relying on our data elements to "bind" these to Nuxeo.
One of the most relevant data elements is
nuxeo-connection, which sets up a connection to a Nuxeo instance and encapsulates
<nuxeo-connection url="http://demo.nuxeo.com/nuxeo" username="Administrator" password="Administrator">
This element uses a "conceptual singleton" (MonoState Pattern) so once it's configured on our application with the proper
attributes, all the other elements just need to use
<nuxeo-connection/> to retrieve this "shared" instance. Since this
is a singleton, we ensure there's only one Nuxeo client shared by all the instances of our element.
There are three libraries covered by the Nuxeo Elements family, which can be explored in the Nuxeo Elements Catalog. These are:
- Nuxeo (Core) Elements (GitHub):
A library of core data elements that allows connecting to the server and enables CRUD on Nuxeo resources and the execution
of operations and queries using page providers. You can install it with npm:
$ npm i @nuxeo/nuxeo-elements
- Nuxeo UI Elements (GitHub):
Provides elements for displaying data and interacting with the user. It can be installed with npm:
$ npm i @nuxeo/nuxeo-ui-elementsNuxeo Elements is now a monorepoSince version 3.0.0, Nuxeo Elements was converted into a monorepo. The UI repository was moved into its folder with the same name.
- Nuxeo Dataviz Elements (github):
A library of data visualization elements targeted at building rich dashboards. It can be installed with npm:
$ npm i @nuxeo/nuxeo-dataviz-elements
When developing using Nuxeo Elements, make sure to set up your development environment according to the requirements described in the Nuxeo Elements repository.
Nuxeo Elements' development is supported by several tools and strategies, to keep quality, performance and security in check. Please see the Quality Assurance page for more information on this subject, and also our Custom App Tutorial for a quick introduction to development with Nuxeo Elements.