Difference between revisions of "Component"

From BC$ MobileTV Wiki
Jump to: navigation, search
 
Line 64: Line 64:
  
 
=== "Living" Style Guides ===
 
=== "Living" Style Guides ===
 +
 +
* Air B&B: https://www.freecodecamp.org/news/adding-some-air-to-the-airbnb-style-guide-3df40e31c57a/<ref>How to Set Up Airbnb Style Guide: https://enlear.academy/how-to-set-up-airbnb-style-guide-82413ea6c5f2</ref>
 +
* Netflix: https://www.youtube.com/watch?v=LtrXwX81CPE
 +
* Uber: https://baseweb.design/components/dnd-list/ | https://eng.uber.com/introducing-base-web/
  
 
<ref>A Maintainable Style Guide: http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html</ref>
 
<ref>A Maintainable Style Guide: http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html</ref>

Latest revision as of 21:24, 27 June 2022

WebComponents logo

WebComponents are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

WebComponents are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.


Specifications


Custom Elements

[1] [2]


Shadow DOM

[4]


Templates


CSS modules

[5] [6] [7] [8]

EXAMPLES


Design Systems

[10] [11] [12] [13] [14]

"Living" Style Guides

[16] [17] [18] [19]


Component Catalogs

[20] [21] [22] [23]



Tools

Libraries

[29] [30] [31]

Design Systems

[32]


Resources


Tutorials

[35] [36] [37]

[38] [39] [40] [41] [42] [43] [44] [45]


External Links

[54] [55] [56] [57] [58]


References

  1. The Case for Custom Elements -- Part 1: https://medium.com/dev-channel/the-case-for-custom-elements-part-1-65d807b4b439
  2. The Case for Custom Elements -- Part 2: https://medium.com/dev-channel/the-case-for-custom-elements-part-2-2efe42ce9133
  3. Shadow DOM polyfill: https://www.webcomponents.org/polyfills/shadow-dom/
  4. Shadow DOM CSS Cheat Sheet: https://web.archive.org/web/20141205183548/https://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/
  5. An Introduction to CSS-in-JS -- Examples, Pros & Cons: https://webdesign.tutsplus.com/articles/an-introduction-to-css-in-js-examples-pros-and-cons--cms-33574
  6. "Styled Components" project: https://styled-components.com/ | DOCS | SRC (React/web & ReactNative/mobile styling framework)
  7. Aphrodite framework: https://github.com/Khan/aphrodite(framework-agnostic "CSS-in-JS" with support for server-side rendering, browser prefixing, and minimum CSS generation)
  8. Inline CSS at Khan Academy - Aphrodite: https://blog.khanacademy.org/inline-css-at-khan-academy-aphrodite/
  9. Okta launches its new open-source design system with a focus on accessibility: https://techcrunch.com/2021/02/04/okta-launches-its-new-open-source-design-system-with-a-focus-on-accessibility/?guccounter=1
  10. The State of Design Systems (2020): https://material.io/blog/research-state-of-design-systems-2020
  11. Avoiding the Pitfalls of "Nested Components" in a Design System: https://css-tricks.com/nested-components-in-a-design-system/
  12. The Era of Design Systems Is Gone: https://onchky.medium.com/the-era-of-design-systems-is-gone-f61f97cd8e86
  13. Documentation—the Key to a Successful Design System: https://xd.adobe.com/ideas/principles/design-systems/documentation-key-to-successful-design-system/
  14. Design Systems: https://xd.adobe.com/ideas/principles/design-systems/
  15. How to Set Up Airbnb Style Guide: https://enlear.academy/how-to-set-up-airbnb-style-guide-82413ea6c5f2
  16. A Maintainable Style Guide: http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html
  17. CSS specificity -- main things you should know: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
  18. CSS Specificity for "poker" players: https://carl.camera/?id=95
  19. Specificity Calculator: https://specificity.keegan.st
  20. Salesforce "trailhead" - Build Lightning Web Components (E-learning module): https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-components
  21. Salesforce -- LWC "Design System" - Date Picker example: https://www.lightningdesignsystem.com/components/datepickers/
  22. Salesforce -- Developer Quick Takes - explaining the "Shadow DOM": https://www.youtube.com/watch?v=K5i9zMzVlzM
  23. Salesforce -- Developer Quick Takes - Custom Elements & HTML Templates: https://www.youtube.com/watch?v=6rK3AyxE-54
  24. What is the Polymer project: (Google's OSS reference implementation of WebComponents)
  25. Ionic -- App Showcase (major applications developed in Ionic): https://showcase.ionicframework.com/apps/top
  26. Ionic 4 tutorial -- Mastering Web Components in Ionic 4: https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4
  27. ExtWebComponents - Early Access is Now Available: https://www.sencha.com/blog/extwebcomponents-early-access-is-now-available/
  28. Sencha Roadmap Update – September 2019: https://www.sencha.com/blog/sencha-roadmap-update-2019/ (ExtJS-WebComponents the path forward for Sencha)
  29. 9 Web Components UI Libraries You Should Know in 2019: https://blog.bitsrc.io/9-web-component-ui-libraries-you-should-know-in-2019-9d4476c3f103
  30. 7 Tools for Developing Web Components in 2019: https://dev.to/giteden/7-tools-for-developing-web-components-in-2019-1ld6
  31. My first Svelte component on NPM — and why it’s a big deal: https://medium.com/@u_glow/my-first-svelte-component-on-npm-and-why-its-a-big-deal-c4568f52de97
  32. Applitools - Roadmap to Testing a Design System – by Marie Drake (WEBINAR): https://applitools.com/blog/roadmap-testing-design-system/
  33. Polyfills and Transpilation for Your Custom Elements: https://alligator.io/web-components/polyfills-transpilation/
  34. Should you build a reusable “Component Library”?: https://mcapoz.medium.com/should-you-build-a-reusable-component-library-4e7df72413d7
  35. Complementarity of React and Web Components: https://www.webcomponents.org/community/presentations/complementarity-of-react-and-web-components-at-reactjs-conf
  36. How to Build Faster with Reusable UI Components in React: https://codeburst.io/how-to-build-faster-with-reusable-ui-components-in-react-482397dec818 (an overview from a co-founder of "Bit" component catalog)
  37. How to Achieve Reusability with React Components: https://medium.com/walmartglobaltech/how-to-achieve-reusability-with-react-components-81edeb7fb0e0
  38. Integrate Web Components with Your Vue.js App: https://alligator.io/vuejs/vue-integrate-web-components/
  39. How to use Web Components in Vue: https://vaadin.com/learn/tutorials/using-web-components-in-vue
  40. Vue.js -- Single File Components: https://vuejs.org/v2/guide/single-file-components.html
  41. vue.js components - WebComponents wrapper: https://github.com/vuejs/vue-web-component-wrapper
  42. Create Web Components with Vue.js: https://dev.to/aumayeung/create-web-components-with-vue-js-2bb0
  43. Agile Design Systems in Vue: https://www.vuemastery.com/conferences/vueconf-2018/agile-design-systems-in-vue-miriam-suzanne
  44. Custom Elements support: https://vuegwt.github.io/vue-gwt/guide/advanced/custom-elements.html
  45. Composing with Components: https://v3.vuejs.org/guide/introduction.html#composing-with-components
  46. Distributed Event-based Communication for Web Components: https://www.researchgate.net/publication/305208920_Distributed_Event-based_Communication_for_Web_Components | DEMO
  47. WebComponents in PROD: https://news.ycombinator.com/item?id=17297065
  48. Lightning Inter-Component Communication Patterns: https://developer.salesforce.com/blogs/developer-relations/2017/04/lightning-inter-component-communication-patterns.html
  49. Inter-Component Communication with Aurelia: https://sean-hunter.io/2016/10/23/inter-component-communication-with-aurelia/
  50. Making Web Components Work: https://engineering.mixpanel.com/2018/06/12/making-web-components-work/
  51. How to communicate between Web Components (native UI)?: https://stackoverflow.com/questions/55001211/how-to-communicate-between-web-components-native-ui
  52. Five reasons why Web Components could complement JavaScript frameworks: https://medium.com/javascript-in-plain-english/could-web-components-actually-compliment-javascript-frameworks-5-reasons-why-i-think-so-971eee82ee85
  53. How to communicate between Components: https://www.freecodecamp.org/news/how-to-communicate-between-components-b48ef70bf913/
  54. Try a legacy Web Components 1.0 example: http://jsbin.com/roripoveku/edit?html,output
  55. Comprehensive set of high-quality web components for common user interface patterns: https://github.com/basic-web-components/basic-web-components
  56. OC components examples, covering the most common use cases: https://github.com/opencomponents/oc-components-examples
  57. OpenTable - Open Components: https://github.com/opentable/oc
  58. Open components as microservices in the front-end world: https://conferences.oreilly.com/velocity/devops-web-performance-eu-2015/public/schedule/detail/44289
  59. Writing a hello world WebComponent: https://apimeister.com/2017/06/03/writing-a-hello-world-web-component.html

See Also

Widgets | RIA | SPA | AEM | HTML/CSS/JS | HTML5#WebComponents | Web | Design | A11Y