Introduction to UI Libraries

Info 253A: Frontend Web Architecture

Kay Ashaolu

You know a bit of React

• We have been delving in a lot of React code
• Learning how to build everything with Components
• One of the keys with React is understanding everything can be composed within components

Focused on functionality

• Right now we have been extremely focused on how to power your websites
• We have not sat down to learn much of the skills needed to enhance the look and feel of the website
• We are heavily relying on the original "stylesheet" of browsers to provide our look at feel...

And it looks pretty

terrible

Building Components from Scratch

• From a design perspective, right now we are building components "from scratch"
• Our components return pure HTML, CSS, and JavaScript
• Note: our CSS is being imported in our Javascript like another JavaScript file
• Note: you can import CSS into components directly

Building Components from Scratch

• In order to build beautiful components, you would need to understand HTML and CSS on a deeper level
• Remember from the beginning of the course on how there is a need to separate presentation from content
• HTML is used for the content, CSS for the presentation

Building Components from Scratch

• In React, both HTML and CSS, along with the JavaScript that powers the component are all packaged inside each component
• This requires you, the developer to not only understand how to build components, but also how to write appropriate HTML and CSS to ensure that the component will look the same no matter where you put it
• This is beyond the scope of this class

Introducing UI Component Libraries

• Another way to help divide the work is to use/implement what is called a UI Component Library
• What a UI Component Library does is that it takes a "design language" and implements a set of typical controls that you would need on a website (e.g. Input box, Button) and ensures that the look and field of that control abides by the design language

What is a design language?

• " ...used to describe the overall visual design of a digital product"
• "an amalgamation of component designs with a consistent visual aesthetic and brand, typically accompanied by usage guidelines in the form of online documentation."

What is atomic design?

• "Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:
  • Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages

This site explains it better:

• https://atomicdesign.bradfrost.com/chapter-2/

Back to UI Component Libraries

• UI component libraries provide the "atoms" and sometimes the "molecules"  as components so that you can rapidly build organisms, pages, and your application
• If you follow the documentation, you can be assured that your site will look consistent since you are using standardized tools

Gestalt - a Pinterest UI Component Library

• We'll be going over Gestalt - Pinterest's UI component library 
• You will notice the "atoms" look like Pinterest widgets
• That's because they are Pinterest widgets 😀
• Sample components: https://codesandbox.io/s/k5plvp9v8v

Questions