LvivCSS: Web Components as a foundation for Design System

LvivCSS: Web Components as a foundation for Design System

• 1.
  Web Components asa foundation for Design System Vladlen Fedosov, Director of R&D @Namecheap, Inc Hint: prepare your QR scanners 😉
• 2.
  Vlad Fedosov Director ofR&D @Namecheap TL;DR: ● 10 years in the industry ● Went path from Junior to Architect ● Use JS since Mootools era ● Amateur DevOps evangelist ● AWS ninja ● Was a part of the Design System kickstart at Namecheap
• 3.
  “Opening the doorfor everyone to a free and open Internet”
• 4.
  Design System concept Quickrefresh of the subject
• 5.
  Design system –What’s inside? “A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”
• 6.
  Design system –Principles ● Efficiency: Instead of repeatedly building similar components from scratch, Design Systems enable designers & developers to reuse components and thereby increase efficiency. ● Scalability: Design System is an open work process, constantly being updated and upgraded, enabling a constant self-improving flux and pushing forward in front of industry standards.
• 7.
  Design system –Principles ● Consistency: Design Systems introduce a shared set of principles and rules to build components. It becomes much easier to create consistent experiences across different platforms. ● Scale: Increased efficiency and consistency lead a company to build faster products at scale.
• 8.
  Ok, got it!But why do I need Web Components here?
• 9.
  A UI isa UI Users don’t care that one UI is built by Team A and another is built by Team B. Users don’t care if for one project the team followed a scrum process, while another project followed a kanban process. Users don’t care if React is powering this feature while Angular is powering another. “Easily one of the biggest benefits of establishing a design system is the ability to produce consistent UIs across teams and products.”
• 10.
  Technology agnostic principle Creatinga technology dependency in order to achieve a specific UI style inherently limits where that UI can go. That’s especially important for big organizations. While building a Design System in Angular, React, or Vue is quite a bit better than the too-open-ended technology agnostic approach, it has one major flaw: it only works if the rest of your company has standardized on that single framework!
• 11.
  Ways to staytechnology agnostic
• 12.
  First approach Use powerof HTML & CSS and keep JS out of scope Why not today: It’s nearly impossible to implement certain animations, transitions and design rules without use of the JS. Also complex UI components like date picker just impossible to create w/o JS.
• 13.
  Second approach Write VanillaJS in a way that it can be integrated with any framework. “Material Components for the web” approach. We use it now in production. Why not today: This approach requires high development effort from Design System creators and consumers side. Also it has issues with frameworks compatibility and Accessibility.
• 14.
  Our approach fortoday Use Web Platform APIs - Web Components
• 15.
  Web Components Do theyreally can help us to stay technology agnostic?
• 16.
  Web Components –To the rescue! <x-your-ui-component> Appearance Behaviour Accessibility </x-your-ui-component> <x-tab-group aria-label="My test tabs" inverted scrollable> <x-tab role="tab" slot="tab">Package (12)</x-tab> <x-tab-panel role="tabpanel" slot="panel">Package</gb-tab-panel> <x-tab role="tab" slot="tab">Email (345)</x-tab> <x-tab-panel role="tabpanel" slot="panel">Email</gb-tab-panel> <x-tab role="tab" slot="tab">Database (14)</x-tab> <x-tab-panel role="tabpanel" slot="panel">Database</x-tab-panel> </x-tab-group>
• 17.
  Web Components –Compatibility All major frameworks that exist nowadays fully support Web Components (only React has some issues with advanced integration). Browser support: ● IE 10–11 and Edge (Chakra based) are out of the game as they do not support Shadow DOM. ● All other browsers (Chrome, FF, Safari, iOS, Android, considering 2 latest versions) work just fine with all major techs we need. Mobile: Ionic 4 heavily uses Web Components
• 18.
  Quirks and features Ofthe Web Components
• 19.
  Server Side Rendering(SSR) It’s theoretically possible to fully render WCs at server side (and it even works for simple ones), but… There is no stable SSR implementation yet, as well as native way to represent Shadow DOM in HTML 😟 But here is good news – you can live without it (for Design System components). <good-components>hello world</good-components> // It’s shadow tree is using a slot to get text contents <bad-components></bad-components> // "hello world" is hard-coded in its shadow tree.
• 20.
  Styling Bad news: ● Somebrowsers still have an issues applying complex CSS rules ● Sharing of the common CSS rules between components is tricky ● Some other minor issues are present Good news: ● There are no issues which can’t be workarounded w/o heavy polyfills
• 21.
  Accessibility How can wecreate accessible web pages with Web Components considering that HTML tags will be custom and so will not have any semantic meaning? Fortunately there is a solution, to bring semantic back to your custom elements you just need to follow WAI-AIRA specification. So if you already take care about accessibility — no much changes here. Let’s look at the accessible slider component built with Web Components: <custom-slider min="0" max="10" value="3" role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="10" aria-valuenow="3" aria-valuetext="3" aria-label="Movie rating"></custom-slider>
• 22.
  Available tools Libraries youcan use to author your Web Components (sorted by my preference, top to bottom): ● LitElement – written by the guys from Polymer@Google. Simple & capable. Optimal choice IMO. ● Stencil – Web Components compiler plus base classes. Built by Ionic team. Has paid version that is adapted for Design Systems creation. ● SkateJS – tiny wrapper around native APIs that allows to use various renderers. Built by Trey Shugart who gave us WC SSR PoC.
• 23.
  Hmm, is thereare any examples of Design Systems built with Web Components?
• 24.
  Design Systems thatuse Web Components ● Ionic 4 UI Components ● Material Web Components @Google (pre-release) ● Helix Design System @Rackspace ● UI5 Web Components @SAP ● Others
• 25.
  Demo time 😅
• 26.
  Vlad Fedosov Director ofR&D @Namecheap, Inc [email protected] Slides: Or just scan it: bit.ly/2Nxa02s Demo: github.com/StyleT/ lvivcss19