Online slideshow / Live-coding examples / Starter kit
The slideshow was designed for a 2 TV-screens and 1-projector setup, positioned next to each other, simultaneously displaying 3 diapositives for every slide.
The above online version will display the diapositives individually, one after each other – so they might sometimes lack a bit of context in that mode.
If you discovered this slideshow while navigating the web, looking for a tutorial on Web Components, you might be interested in the Live-coding examples and their READMEs, which contain a full transcript of our performance: they will walk you thru creating and using Web Components, step-by-step.
Would you have a question, a suggestion, noticed an error, or a request for an enhancement about the slides and/or the live-coding examples, feel free to open an issue.
-
Geneva Web meetup, 11.03.2019, 12h–14h
https://www.meetup.com/fr-FR/GenevaWeb/events/258787967
http://techup.ch/2700/genevaweb-a-primer-on-web-components
- Web Software Developers / Architects / Project Managers
- Web Fundamentals Enthusiasts
- Web Designers
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.
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 Firebase, while explaining the fundamentals of Web Components and its ecosystem.
At 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.
-
Foundation of Web Components:
· What they are? Custom Elements, Shadow DOM, Templates, Modules
· How to create, use and publish them
· Lit-Element Templates and Data bindings -
Dataflows of Web Components:
· Fetching data
· Vanilla data bindings: « data in via attributes, data out via events » -
The Ecosystem of Web Components:
· Understand the Polymer project
· Navigate WebComponents.org and discover its main collections
· Understand Material Design and A11Y
- Progressive Web Apps Starter Kit
- A glimpse of Google Firebase.
Yves and Olivier Lange are running Le Petit Atelier de Génie logiciel sàrl (https://petit-atelier.ch), 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 to 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, OFROU / Estavayer-le-Lac, 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 happily craft the apps, setup the systems for you and train your users!