Slide 1
Slide 1 text
Reusable
Component
Libraries
@fairaxe
Ben Sweedler
Slide 2
Slide 2 text
Ben Sweedler • He/Him
• Front-end developer
• Violinist
Slide 3
Slide 3 text
My Web Developer Journey
California
Dreams
Burnout
Rediscovering
Front-end
Slide 4
Slide 4 text
Everything Easy is Hard Again
{float: left} {display: flex} {display: grid}
• I had learned • Then I had to learn • Now I need to learn
Slide 5
Slide 5 text
Everything Easy is Hard Again
+
• I learned:
• Now I need to learn:
+
• To make this:
Slide 6
Slide 6 text
My Immediate Questions
1. Which JavaScript framework library should I use?
2. Is Bootstrap outdated?
¯\_()_/¯
Slide 7
Slide 7 text
This Talk
1. What is 1 reason people use these JavaScript frameworks?
• Components
2. Can I still make Bootstrap-looking forms?
• Reusable Component Libraries
Slide 8
Slide 8 text
JavaScript Frameworks
Single-page app development libraries
Slide 9
Slide 9 text
Making Websites
Web Page Web App
Slide 10
Slide 10 text
Page-based Web
Server gets a request Generate a page Browser renders the page
Slide 11
Slide 11 text
Singe-page Web App
Server gets a
request
Always serves the
same page
Page loads
components
Browser renders the
app
Slide 12
Slide 12 text
Singe-page Web App
• I learned this way:
<link rel="stylesheet" href=”bootstrap.css">
• Now I need to learn:
npm install angular-cli
npm install @angular/material
Slide 13
Slide 13 text
Singe-page Web App
Page Based Component Based
Slide 14
Slide 14 text
Component
A piece of a user interface
Slide 15
Slide 15 text
Components
Slide 16
Slide 16 text
Components
Slide 17
Slide 17 text
Components
Slide 18
Slide 18 text
Components
Slide 19
Slide 19 text
Components
Slide 20
Slide 20 text
Components
1. Structure
2. Presentation
3. Behavior
Slide 21
Slide 21 text
Components
1. Structure
2. Presentation
3. Behavior
Slide 22
Slide 22 text
Components
1. Structure
2. Presentation
3. Behavior
Slide 23
Slide 23 text
Components
1. Structure
2. Presentation
3. Behavior
Slide 24
Slide 24 text
Components
1. Structure
2. Presentation
3. Behavior
Slide 25
Slide 25 text
Components
1. Structure
2. Presentation
3. Behavior
Slide 26
Slide 26 text
Reusable Components
Slide 27
Slide 27 text
Reusable
Components
1. Cost-effective
2. Consistency
3. Collaboration
Slide 28
Slide 28 text
Reusable
Components
1. Cost-effective
2. Consistency
3. Collaboration
Slide 29
Slide 29 text
Reusable
Components
1. Cost-effective
2. Consistency
3. Collaboration
Slide 30
Slide 30 text
Reusable
Components
1. Cost-effective
2. Consistency
3. Collaboration
Slide 31
Slide 31 text
Reusable
Components
1. Cost-effective
2. Consistency
3. Collaboration
Slide 32
Slide 32 text
Reusable Component Libraries
Slide 33
Slide 33 text
Reusable Component Libraries
Slide 34
Slide 34 text
Same Different Name
• Reusable component library
• User interface library
• Pattern library
• Front-end framework
• Shared UI library
• Component framework
Sharing Code Sharing Design
Slide 35
Slide 35 text
Material
Design
Slide 36
Slide 36 text
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:
Slide 37
Slide 37 text
What’s Next?
Slide 38
Slide 38 text
Bootstrap
• Developed at Twitter
• Released in 2011
• “the world’s most popular front-
end component library”
Slide 39
Slide 39 text
Bootstrap
• Beautiful forms!
Slide 40
Slide 40 text
Bootstrap
VS
Slide 41
Slide 41 text
Columns Alleys
Gutters
Slide 42
Slide 42 text
Bootstrap Component Libraries
ng-bootstrap
ngx-boostrap
reactstrap
react-bootstrap
bootstrap-vue
Slide 43
Slide 43 text
Material Component Libraries
Material UI Vuetify
Quasar
angular2/material
React Toolbox
Materialize
Slide 44
Slide 44 text
More Component Libraries
ngx-lite Semantic UI React
vaadin Grommet
Element UI
Slide 45
Slide 45 text
Framework-Agnostic Component Libraries
Onesen UI
PrimeFaces
Ant Design
CoreUI
Slide 46
Slide 46 text
Corporate Component Libraries
Lightning
Polaris
Fabric UI
Atlaskit
Oragami
Clarity
Rizzo
Gestalt
Slide 47
Slide 47 text
Government Component Libraries?
• US Patent Office
• United States Web Design System
• NHS UK Frontend Library
• Australian Government Design System
Slide 48
Slide 48 text
Experiences
Choosing
1
Customizing
2
Creating
3
Slide 49
Slide 49 text
Choosing
Components
1. Website
2. GitHub
3. Install
• Aesthetics
• Dropdown Component
• Features
• Accessibility
• Internationalization
Slide 50
Slide 50 text
Choosing
Components
1. Website
2. GitHub
3. Install
• Community involvement
• Last commit date
• Readme file
Slide 51
Slide 51 text
Choosing
Components
1. Website
2. GitHub
3. Install
• Community involvement
• Last commit date
• Readme file
Slide 52
Slide 52 text
PrimeNG
Slide 53
Slide 53 text
Customizing
Components
1. Theming
2. Challenges
3. Complexity
Branding
Theme
Base Component
Slide 54
Slide 54 text
Customizing
Components
1. Theming
2. Challenges
3. Complexity
Slide 55
Slide 55 text
Customizing
Components
1. Theming
2. Challenges
3. Complexity
Slide 56
Slide 56 text
Creating
Components
1. Simple
2. Documented
Dropdowns
Slide 57
Slide 57 text
Creating
Components
1. Simple
2. Documented
Slide 58
Slide 58 text
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
Slide 59
Slide 59 text
Useful Blogs
• Bit – for component library suggestions
• blog.bitsrc.io
• bit.dev
• Inclusive Components – for accessibility tips
• www.inclusive-components.design
Slide 60
Slide 60 text
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.
Slide 61
Slide 61 text
Questions?
@fairaxe
bensweedler.com