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.

Transcript

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