Getting Started with Teradata Covalent UI and Angular
By Engineering Team October 23, 2016 10 mins read
At Gistia, we use Covalent UI, a powerful open-source UI Platform by Teradata. Built on Angular & Angular Material Design, it combines design language with a powerful web framework.
But where does it fit in the development life-cycle? Every day. Software companies strive to improve their products. As developers, engineers, and managers, we are faced with challenging decisions such as coming to terms with app architecture, delivering new features, fixing a bunch of annoying bugs and structuring the team to accomplish our goals.
We don’t complain. We love it!
In fact, thanks to thousands of open source projects, writing code has never been easier. There are premade packages you can simply pull in to projects. Coders no longer need to reinvent the wheel.
But there are a few fundamental questions, which still need answered when starting any new project:
Which framework should I use?
How should our app be structured?
How can I ensure consistent UI across our products?
Scaffolding tools such as Yeoman have had a huge impact on the way developers structure their applications. Not only does it help speed up decisions and setup, but also reduces the boilerplate code that wastes so much time.
Still, we face the fact that not all these generators are maintained and updated regularly.
For instance, when new technologies are released, you need to wait for your team to get over the learning curve. On top of that, you need to make challenging architecture, design and style decisions.
Wouldn’t it be so much easier if someone else did all that redundant work for you?
There’s a new kid on the block!
1. Teradata Covalent Covalent UI
Teradata aims to help companies increase efficiencies and make better decisions using the power of data. Teradata provides solutions for Data Warehousing Analytics and Marketing Analytics.
So what? Why should we care about Teradata Covalent UI?
Because the UX team at Teradata has put in a great amount of effort to create Covalent UI – the answer to most of your Angular design questions.
a. What is Teradata Covalent UI?
Covalent is a UI platform that wraps with Angular and Angular Material projects. It reduces redundant and boilerplate code, allowing you to focus, rather than configure.
Covalent UI integrates powerful development tools and frameworks by adding its own custom components on top of it.
The style guides and design patterns put forth by Covalent UI help you write better code and waste less time thinking about solutions to common development challenges.
Covalent UI follows Atomic Design Principles, which means it is built with modular design. It uses smaller components such as buttons (atoms) and inputs to create larger components such as forms (molecules).
The Covalent bonds are the molecule on top of Angular Material components.
(read that again…)
b. Why Use Teradata Covalent UI?
Become as DRY (don’t repeat yourself) as possible.
As of today (this could change in the future) Angular Material v2 doesn’t have any demo application to get you started. You can either spend many hours trying to piece things together or avoid the confusion alltogether by skipping to the easy part and start with the Covalent Quickstart application.
But that’s not all…
Create consistent UI for apps using Covalent UI by following the Material Design Spec.
Having a team actively maintaining an abstraction like Covalent means no more worrying about drastic changes (if any) in the Angular Material Project. Thanks to this UI platform, you only need to change your UI when you want to.
c. Why Material Design?
Material Design continues to grow everyday as countless companies are implementing prescribed design patterns into their applications.
Some may argue that implementing Material Design makes an application look like Google, this is far from the truth.
Innovation ultimately shines through with every new design framework (think about “960 grid” and “Bootstrap”). That’s what we can expect with Material Design.
We look at Material Design as a native SDK for the web. The advantages outweigh branding concern. A major plus is that your designers, developers and users are familiar with the Material Design spec.
What does this mean for you? You get to stop wasting time on an intricate onboarding process. Allowing users to intuitivley get around the application you create.
d. Should You Use Covalent UI?
Every out of the box solution has a major downside – reduced control over the underlying code.
Even though Covalent is just a UI platform, it makes a lot of decisions for you in terms of the way your app is structured – its opinionated.
If you want a consistent user interface which does not require too much customization, Covalent is definitely something you should consider. It will save you and your team a great amount of time.
On the other hand, if you intend to build complex applications that involve a lot of custom UI and you plan to design your own testing environment, Covalent may not be the most appropriate option.
Without further ado, let’s get started with our first Covalent app.
2. Covalent UI Quickstart Project
Getting started is extremely easy. Let’s run this code on our command line.
npm to install all the required packages.
# Install global dependencies
npm i -g angular-cli typescript tslint protractor
# Clone the Quickstart repo
git clone https://github.com/Teradata/covalent
# Install the project dependencies
# Delete the original git repository
rm -rf .git/
What did we just do?
First, we globally installed –
1. Angular CLI – This is a command line interface, allowing us to create Angular components, directives, pipes, etc. That means means dealing with less boilerplate code.
3. TSLint – This checks our TypeScript code and makes sure that we don’t have syntax errors or readability errors.
Then, we cloned the Covalent UI git repo and installed the dependencies.
Finally, we deleted the local git repo so we can create our own.
Covalent UI gives us a demo app that’s ran right out of the box with
To see all the features, run the mock api in another shell with
npm run start-api.
Now that you can play around with your demo app, let’s look under the Covalent hood.
3. Style Guide and Design Patterns
The Style Guide documentation is great. It covers the basics from the Google’s Material Design spec such as adding a logo and selecting colors and typography.
The magic lies in the tools Covalent ships along with the core UI platform.
- Iconography – library of 750+ material icons.
- Utility styles – these include a long list of CSS classes that are great for most common uses such as adjusting sizing, font-size, padding and margins. You can think of these as the subatomic particles in the atomic structure of each Covalent atom.
- Resources – these are design templates that you can hand over to your designer to create static mockups. This allows the designers and developers to communicate with the same UI language creating a seamless transition from design to production.
Covalent also prescribes a few design patterns for creating different types of material cards and dialog boxes. You can explore these patterns in more detail here.
4. Layout Options
Teradata Covalent UI ships with four different layouts. You can use these for your entire application or vary them per section.
Layout with toolbar and side navigation drawer that is triggered by the overflow button.
The Nav List layout includes an embedded list on the left side of the page as well as a side navigation drawer triggered by the overflow button.
This view displays a large card that sits nicely over the toolbar.
The manage list view is just like the nav list view with the addition of a toolbar.
a. Flex Box
The Angular Material Project doesn’t inherently have the flexbox layout system (unlike Angular Material v1). The Teradata team has ported the flexbox layout system giving us more control over our application layout.
In a nutshell, the flex layout system gives us the power to dynamically alter the width, height and display order of elements. This results in a better responsive layout thanks to better use of available space.
You can read more about the flexbox module if you’d like to learn more about what Covalent layout positioning is built on.
Here’s an example displaying four children elements in a single row.
<div flex>child 1</div>
<div flex>child 2</div>
<div flex>child 3</div>
<div flex>child 4</div>
The flex layout system can be used to create responsive layouts too.
<div layout="row" layout-padding>
<div flex-gt-xs="40" flex-md="50">child</div>
<div flex-gt-xs="30" flex-md="20" flex-lg="10">child</div>
The code above creates a row with 3 children whose size is adjusted by the parent as per the flex values passed (for small medium and large screens).
You can read more about the flexbox layout system in the Angular 1 Material Project docs.
5. Teradata Covalent UI Components
Covalent UI components are the icing on this Covalent UI cake. The components include those of the Angular Material Project and more built by the Teradata team.
These include components able to handle file uploads, data tables, code highlighting and a lot more.
Covalent components need a post of their own so we won’t be going into too much detail here. You can read more about Covalent components here.
Covalent is great for small to medium scale projects where you’re looking to get your Angular app up and running quickly.
However, it is not the best solution for large projects that require complex custom UI elements.
On the other side of the spectrum, Covalent might be overkill for simple Angular apps.
Let’s end this article with a quote from Kyle Ledbetter – UX Architect at Teradata
“Teradata UX will need to extend Angular-Material for our enterprise products. When we do so, we will follow the official Material Design spec to the letter of the law. You get the benefit by gaining these in Covalent!”
This means that your UI code will stay updated and bug-free!