Choosing web components to build interactive UI pieces is just like choosing CSS stylesheets to style a web app. Both technologies are part of the core web platform. Both technologies work in all modern browsers, and will keep on working far into the future. The Shadow DOM v1 and Custom Elements v1 specs guarantee consistent, long-term browser support.

We didn’t make another framework — we added to the one you already use

JavaScript frameworks like Angular, React, Ember, or Backbone make a lot of decisions for you to solve common app development problems. Predix UI, and the technology it’s built on, is not a framework. It’s set of small pieces that can fit into the framework your team chooses to build with.

Predix UI components can be dropped into Angular 2 applications alongside Angular components.

Already invested in a complex Angular codebase? Our px-vis charting components—just like all the others—can be dropped right into an existing Angular application. Just pass in some data and register event listeners to get updates when users interact with the chart. (We’d recommend Angular 2+ for the best performance. Here’s a great video from the Google team that will walk you through the data-binding and event handling specifics.)

Predix UI components are a natural fit in React applications. Their attributes-in-events-out data model makes it easy to manage state.

Like the way React and its ecosystem simplify state management? The px-map components can easily fit into a React codebase, along with the rest of Predix UI. Web components are a natural complement to React’s focus on separating apps into easy-to-maintain chunks. (Try the react-polymer library to help cut down on boilerplate when mixing Predix UI into React.)

We use Polymer, a tiny but powerful helper library that stays out of the way

Predix UI components are built with Polymer, a small JavaScript library that simplifies the process of creating and extending web components. Polymer provides a lightweight data system, a bit of data-binding syntax sugar, and some nice templating features that are usually needed when building web components.

Polymer isn’t a traditional JavaScript framework — it works alongside and within other frameworks to create a richer API for interacting with components. If you’re using Predix UI components inside another framework, you don’t really need to know what Polymer is or what it does. That’s just an implementation detail. All you need to know are the attribute, property, and event APIs necessary to use the component.

If you don’t know which framework to choose, use our starter kit

Not sure what framework to use? Start with our Polymer-based predix-webapp-starter.

You don’t have to use Polymer like a framework. But you can. And we recommend it. Google’s Polymer team has created a bunch of useful components to solve problems like routing, session storage, and state management that are usually baked into frameworks. The easiest way to start building a new app with Predix UI components and Google’s app helpers is to use the predix-webapp-starter. It takes the building blocks Polymer provides and turns them into a simple, speedy web app framework that looks and works a bit like Angular.

The starter also comes with all the nice things you’ll need to build and deploy an app on the Predix platform:

a node.js microapp that helps you connect with Predix platform backend services like the Timeseries Service and Asset Service

a set of gulp tasks you can run on the command line to serve your app during development and build it for production

a lazy-loading progressive web app architecture that ensures your app loads quickly even on slow internet connections

You pick your path. Predix UI components will be there to make it an easy one.

Use Predix UI components inside Angular apps, React apps, or Polymer-as-a-framework apps. Or use them inside a new framework that was just invented. Web components are part of the web platform.

If you don’t have an existing codebase and you’re not sure where to start, try the predix-webapp-starter. It will give you a huge leg up in deploying a web app on the Predix platform.

If you’ve already invested in a bunch of code in another framework, or if you have specific requirements that would be better served by Angular or React or something else, Predix UI is still here to help you. Jump over to our documentation site and start using the Predix UI components to speed up your work.

More reading: