2e:null 2f:["$","title",null,{"children":"A primer on Web Components | Olivier Lange | Observable"}] 34:T786,html`

Astronaut

By Poly

`35:T455,md`### About us Yves and Olivier Lange are running _Le Petit Atelier de Génie logiciel sàrl_, a software consultancy specialized in crafting _ad-hoc_ software and business analysis — that is, whenever a piece is missing, we will analyse, design with you & craft it for you: either from scratch; or integrating with legacy systems. Last two years, we helped the development team of Lombard Odier Asset Management design & create an UI App Starter Kit & Elements library, using Web Components and Polymer, which they used to rewrite 12 of their front-end apps. We've collaborated and delivered on 140 projects in the course of 18 years, for public and private organizations, such as Lombard Odier TIB & Asset Management, University of Geneva, University of Lausanne, The Graduate Institute Geneva, Pro Helvetia / Zürich, RTS / Geneva, KBL / France & Luxembourg. Business intelligence dashboards; desktop & web applications; data migration; data visualizations; digital archives; document management systems; publishing pipelines: name it and we'll hapilly craft the apps and setup the systems for you!`36:[] 32:{"id":"920e20d4bf30687c","slug":"a-primer-on-web-components","title":"A primer on Web Components","thumbnail":"1b15c8add5d1d51f5696f3a69674f420d43f8c5de8f7eac8f842a3e7ed549923","access_level":"public","create_time":"$D2019-02-08T09:38:17.091Z","update_time":"$D2019-02-08T20:40:49.914Z","view_time":null,"first_public_time":"$D2019-02-08T11:01:18.238Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"3febe0974a7138cb","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/52639e5630d4e3e4e2772fe77680883002a0b9352d8dd7a649dbcb67b1e1fb3a","tier":"starter_2024"},"version":161,"publish_version":161,"role":null,"authored":false,"authors":[{"type":"individual","id":"deea7e78e25caede","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/05f7623b298d024c8fdb05b03c59e2d52fe0349b7c85bced7cdea69e7dcb847a","tier":null}],"members":[{"type":"individual","id":"deea7e78e25caede","login":"olange","name":"Olivier Lange","avatar_url":"https://avatars-next.observableusercontent.com/05f7623b298d024c8fdb05b03c59e2d52fe0349b7c85bced7cdea69e7dcb847a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"A primer on Web Components","cells":[{"id":0,"value":"md`# A primer on Web Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`Web Components are ubiquitous and run natively on billion of devices in 2018. They allow to share and reuse functionality across web pages and apps, with the simplicity of markup — developers can create new HTML tags, beef-up existing HTML tags, or extend the components other developers have authored.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`In this 45–60 min. talk & live-coding, we will walk you thru building a static PWA (Progressive Web App) with Web Components, and Google Firestore, while explaining the fundamentals of Web Components and its ecosystem.\n\nAt the end of the talk, you should be able to start building such an app and web components yourself, deploy it within minutes, find the documentation and resources to help learn to #UseThePlatform.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`### Primary topics covered\n\n* Foundation of Web Components\n * What they are? Custom Elements, Shadow DOM, Templates, Modules\n * How to create, use and publish them\n * Web Components Best practices\n* Dataflows of Web Components\n * Retrieving and storing data\n * Vanilla data bindings: « _data in_ via attributes, _data out_ via events »\n* The Ecosystem of Web Components\n * Understand the Polymer project\n * Navigate WebComponents.org and discover its main collections\n * Understand Material Design and A11Y\n * Lit-HTML and Lit-Element\n\n### Secondary topics\n\n* Progressive Web Apps Starter Kit\n* A glimpse of Google Firebase`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"md`---\n\nThe conference was announced today 08.02 and will be given at [GenevaWeb Meetup](https://www.meetup.com/fr-FR/GenevaWeb/events/258787967/) on monday 11.03.2019. This notebook was used to communicate the synopsis to the organizer, along with a live Web Component.\n\n---\n\n### Dependencies\n\nTo forces Observable to prefetch the web component script — normally not needed, but we experienced trouble downloading the script and model at times.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"modelViewer = import( \"https://unpkg.com/@google/model-viewer@0.0.7/dist/model-viewer.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"