Predix Design System: Components that work in your framework and everywhere else too
Illustrations by Tali Marcus, Design Technologist, Predix Design System
If you build or use web applications, you’ll notice they all share similar building blocks. And that’s a good thing. We don’t need to reinvent user experiences that already work.
At GE Digital, we have created a set of UI components that can be dropped into any web application so teams don’t have to build the same stuff again and again. They can focus instead on delivering the distinctive features their users need. These components are the core of the Predix Design System, a collection of web components that work across browsers and front-end frameworks to accelerate development of industrial internet applications on the Predix platform. Check out some neat interactive demos on the Predix UI website.
You already know how to use web components
The front-end development landscape is changing incredibly fast. Every week, new tools and frameworks rise up as old ones fade. This rapid evolution is part of what makes the web great — it is constantly pushed, prodded, and pulled to fulfill new use cases and user needs. The downside of this constant change is developer fatigue. Keeping up with new skills and making technology choices that will be supported for the lifetime of a project is harder than ever before.
We made Predix UI using web components standards so developers can start using our building blocks with minimal ramp-up. They look and work like standard HTML tags. You configure each component with attributes (like the `src` in <img src=”picture.jpg”/>) and listen for updates through DOM events.
Web components work everywhere you need them to
Web components are part of the web platform. The major browser vendors — Microsoft, Apple, Mozilla, and Google — have committed to the web component standards for all future versions of their web clients.
Our team tests and explicitly guarantees support for the last two major releases of Chrome, Firefox, Safari, and Edge (including IE11). With the webcomponentsjs polyfills, our components are very likely to work in older releases too.
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
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.)
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
If you don’t know which framework to choose, use our starter kit
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.
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.
- Mess with demos and read more about Predix UI on our website
- Read Rob Dodson’s “The Case For Custom Elements: Part 1” and “Part 2” for some great technical and architecture info on custom elements, one half of the web component standards
- Read about px-vis, Predix UI’s charting framework designed to visualize millions of streaming data points for industrial internet application