Building an enterprise modular design system based on Bootstrap 4 and Web Components

Track: Web
Skill Level: Intermediate
Room: Room A405
Time Slot: Thu 2/23, 4:00 PM
Tags: web components , front end , html , bootstrap , modularity , design system , design , css
Presentation Link
Abstract

Based on a real life example, this live coding session will take developers through the process of architecting and developing a large scale enterprise open source design system based on Bootstrap 4 and Web Components.

We will share our experience building the next generation of PatternFly: The challenge of upgrading to Bootstrap 4, how to set up modular CSS based on Brad Frost’s Atomic Design principles and our experience implementing behaviors via Web Components.

You will learn:

  • UX Basics
  • How to structure a large CSS code base in a modular and maintainable way.
  • The advantages (and disadvantages) of using Bootstrap.
  • Difference between Bootstrap 3 and 4.
  • An introduction to Web components and it’s 4 standards: HTML Templates, Shadow DOM, Custom elements and HTML Imports.
  • How to apply them in common frameworks React and Angular.

The audience will leave the room with useful tools that will help them take their front end development projects to the next level.

Patrick Riley

Patrick considers himself a Javascript Jedi with Vulcan-like abilities. Always searching for best patterns to make his web concoctions more dynamic and extendable, he frequently plays mind tricks on fellow developers to encourage evolving web standards like web components and ES6 javascript in their code. Patrick also enjoys new web frameworks like React.js and Node.js.

When he’s not “javascripting”, he spends time sleeping, biking, and playing board games with family and friends.