Skip to content

Instantly share code, notes, and snippets.

@rafszul
Last active November 16, 2017 10:32
Show Gist options
  • Save rafszul/423d8b144c29fc896e4aa8422d9108e9 to your computer and use it in GitHub Desktop.
Save rafszul/423d8b144c29fc896e4aa8422d9108e9 to your computer and use it in GitHub Desktop.
rationale for angular, material design and set of ui components by covalent

#Covalent

Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design). Covalent gives you a quickstart to build a modern web application UI and ensure consistency across your enterprise products. Some of Covalent's most important features include:

  • Angular-Material
  • Angular Command-line interface (CLI) for builds, deploys, testing & more.
  • Drastically simplified interface layouts (for dashboards, lists, etc).
  • Custom web components (stepper, file upload, expansion panels & more).
  • 750+ Material Design icons.
  • Style Guide with brand standards, color palettes & tips.
  • Design Patterns for consistent, reusable web components such as cards, forms, etc.
  • Testing Tools for both unit tests and end-to-end tests.
  • Quickstart app to get started right away!

We follow Atomic Design principles and apply them to Angular-Material web components. In Atomic Design, several atoms (such as buttons and inputs) form molecules (such as a search box). Our covalent bonds are the molecules that we're building on top of Angular-Material. Also, covalent bonds are liquid and conform to their container, just like our responsive layouts!

By using Covalent as a unified UI Platform there are a ton of benefits. Here are some highlights:

  • Angular-Material doesn't have a full app quickstart. Covalent does.
  • Covalent provides the Angular-Material (AngularJS) flexbox layout that was removed in Angular-Material (angular).
  • Covalent provides several custom components such as steppers & expansion panels.
  • Custom layouts & components in Covalent are developed specifically for enterprise solutions.
  • Covalent provides a selection of UI layouts out of the box.
  • Our team is continuously adding tools like Syntax Highlighting & Markdown.
  • Our team will always maintain native compatibility with Angular & Material
  • Our team will always follow the principles of the official Material Design spec.

By adopting Material Design along with Angular, we get a style guide spec that is perfectly matched with an incredbly powerful and modern web framework, all for free. Along with that, there are lots of other great benefits such as:

  • A design spec that is married to code implementation.
  • Official implementations from the the designer/developer (Google).
  • Free code implementation and updates from a continuously evolving design spec.
  • Compatability with many devices & breakpoints, from watch and mobile all the way up to fullscreen desktop.
  • Usage familiarity for users, designers & developers.
  • Focus on out-of the box accessibility.
  • Open sourced design & code.
  • Modularity that gives a natural bridge to agile development principles.
  • Inspiration, community & resources from around the world.

With any new framework, people's intial reaction is that they'll lose their company brand or identity. Consider when 960 grids came out, or Bootstrap from Twitter. Many said "all sites will look the same!". They weren't completely wrong, for a time, when adoption of these new frameworks began. However, with time, usage, and innovation, your special brand identity and uniqueness will always shine through! Also consider:

  • Material Design is being embraced across the web, and is not specific to Google anymore
  • Material Design can be thought of as a native Web SDK, similar to developing a MacOS or iOS app.
  • Onboarding users is a simpler process if design patterns are familiar.
  • Think of your favorite iOS, Android or Windows app that adheres to the OS's design. Aren’t the features more important? What woud you really consider “brand”?

We give you everything you need to quickly get started on your UI, but you have the domain knowledge and are the expert in your product. You'll need to build all the custom views, controllers & services for your product, and hook them up to your RESTful APIs. Don't worry though, we have detailed docs & tips, and there's a wealth of help on the internet (it's why we chose such a popular platform).

Covalent is a UI Platform that combines proven design language with a comprehensive web framework, built on Angular & Angular-Material (Design). Electron is a framework for creating native desktop applications with web technologies like JavaScript, HTML, and CSS. Covalent Electron is the Electron Platform to build desktop apps using Covalent and Electron

Covalent Data is a Mock API server for rapid prototyping and API standards Built on Golang Allows for quick prototyping for your Covalent Applications with an easy to mock http backend server

Why Angular... and not React/Ember/Java/etc...

The short answer: we had to pick something & we believe Angular has won the adoption war.

The longer answer: Before passing judgement if you have Angular 1.x experience, remember that Angular v2+ is a complete rewrite from the ground up. Angular moved from an opinionated framework to a sophistated platform. Angular utilizes ES2015 (previously ES6) and the power of Typescript, which results in a much more native JavaScript platform with coding paradigms & power previously reserved for backend languages. This means many more back end engineers can jump into the front end and ramp up quickly to productivity. Also there are many other benefits, such as:

  • New & exciting software to learn & advocate
  • More easily attract new hires
  • An incredibly powerful standardized CLI that is provided to us
  • More powerful IDEs for development
  • Integrated testing tools
  • Native mobile & desktop app support
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment