Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reusable Component Libraries

Reusable Component Libraries

Reusable component libraries can help web developers build consistent UIs. In this talk, you'll learn what they are, which open-source libraries available to you, and how to use them effectively. By the end of the talk, you know some new technologies to try out for your next project.

Ben Sweedler

April 24, 2019
Tweet

More Decks by Ben Sweedler

Other Decks in Programming

Transcript

  1. Everything Easy is Hard Again {float: left} {display: flex} {display:

    grid} • I had learned • Then I had to learn • Now I need to learn
  2. Everything Easy is Hard Again + • I learned: •

    Now I need to learn: + • To make this:
  3. This Talk 1. What is 1 reason people use these

    JavaScript frameworks? • Components 2. Can I still make Bootstrap-looking forms? • Reusable Component Libraries
  4. Singe-page Web App Server gets a request Always serves the

    same page Page loads components Browser renders the app
  5. Singe-page Web App • I learned this way: <script src=”jquery.js">

    <link rel="stylesheet" href=”bootstrap.css"> • Now I need to learn: npm install angular-cli npm install @angular/material
  6. Same Different Name • Reusable component library • User interface

    library • Pattern library • Front-end framework • Shared UI library • Component framework Sharing Code Sharing Design
  7. Reusable Component Library An collection of common design elements •

    a design system • a specific CSS framework • a specific JavaScript framework • Themes • Toolkit of UI assets • Option for paid support It might have include: It might be based on:
  8. Bootstrap • Developed at Twitter • Released in 2011 •

    “the world’s most popular front- end component library”
  9. Government Component Libraries? • US Patent Office • United States

    Web Design System • NHS UK Frontend Library • Australian Government Design System
  10. Choosing Components 1. Website 2. GitHub 3. Install • Aesthetics

    • Dropdown Component • Features • Accessibility • Internationalization
  11. Choosing Components 1. Website 2. GitHub 3. Install • Community

    involvement • Last commit date • Readme file
  12. Choosing Components 1. Website 2. GitHub 3. Install • Community

    involvement • Last commit date • Readme file
  13. Creating Components 1. Simple 2. Documented • Make your own

    “Kitchen Sink” app • Comment your code! • 3rd party documentation / publishing libraries • Fractal • Pattern Lab • Astrum • Styleguidist • Storybook • Bit
  14. Useful Blogs • Bit – for component library suggestions •

    blog.bitsrc.io • bit.dev • Inclusive Components – for accessibility tips • www.inclusive-components.design
  15. Take Home Messages 1. Reusable component libraries are part of

    an ecosystem. 2. Best used for web applications that need some longevity. 3. There is a lot of variation on the terminology.