Nuxeo Elements

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.

Watch the related courses on Hyland University

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.

Data elements rely on Nuxeo JavaScript Client to retrieve and manipulate information from a Nuxeo platform instance via REST API, while UI elements are responsible for displaying data to the users. These data and UI elements can be combined to create more complex elements.

One of the most relevant data elements is nuxeo-connection, which sets up a connection to a Nuxeo instance and encapsulates the access to the JavaScript Client. Usage is as simple as:

<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-elements
```
Nuxeo Elements is now a monorepo
Since 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.