Scania's Web Components Collection
The new Scania user interface is now largely supplied as ready to run web components. This means that you no longer has to develop common elements like the header, main navigation or the page footer. Filtered and sortable tables are available to use straight of the shelf as well as a lot of other components as well.
Web Components consists of several separate technologies. You can think of Web Components as reusable user interface widgets that are created using open Web technology. An existing Web Component can be used without writing much of the code, simply by adding an import statement to an HTML page. Since Web Components use new or still-developing standard browser capabilities, we are currently using Google Polymer to package the Scania components in a smart way and use their polyfills to make the components more browser independent.
We're aiming at doing weekley releases and usually the UX Library is the first site to run the latest stable version. Currently, you'll get all the latest updates by including this file on your page:
Ground-breaking improvement in Scania's reuse approach
With Custom Elements (a part of the Web Components standard) Scania developers and partner companies can use functionality "off the shelf", create new HTML tags or extend the components other developers have created.
Google Polymer is the foundation of our web components and it brings a web standards-based way to create reusable components using nothing more than JS/HTML/CSS as well as, possibly, using libraries or frameworks like Angular and React to improve them even more. The result is less code, modular code, and higher grade of reuse in our applications. Now, you can totally focus on the user experience that you actually are here to develop.
A single code base
Scania stores its custom elements and Web Components in one single master repository. This gives us a unique opportunity to make continues improvements to shared elements. If for example a date picker is improved in one place, that one will immediately be available for other applications using the Scania standard. The economic effect is that much of our IT investments within this area automatically is shared and used for improvements and core UX rather than re-inventing the wheel from scratch every single time.
In the UX Library you'll find a lot of ready to use elements and components ranging from a standalone Scania Corporate Header including our wordmark and logotype, to advanced Product Carousels and Tables with sorting, filtering and responsive utilities.
You'll find many components in the Corporate UI GitHub Repository.
Standard HTML Template
If your solution is a traditional website it is very straight forward to start using Corporate UI. Download this basic template for applications or this this basic template for public sites. Then open it in your browser to explore our custom and standard HTML elements. Then reuse code samples from Scania Bootstrap to create the user interface.
Using Corporate UI with frameworks
If you're creating an application using Angular, React or equivalent - you basically will use the same code as on the templates shown above. But there are a few things to that you must do differently.
Strong skills in Bootstrap
Since we won't be able to standardize each and every component made at Scania, you'll need to develop your core UX within your project. As we’re using the Bootstrap Grid within our components, you'll highly benefit from using it in your custom development as well. Here's a few good starting points:
Basic knowledge of Web Components and Google Polymer
Using Web Components is so easy it is almost beyond imagination. Although, you will benefit from spending some time reading up on the basic ideas. Here's a few links to start out at:
- Polymer Cheatsheet
- Why Web Components are so important
- Custom Elements v1: Reusable Web Components
- Get started with Google Polymer