Introduction to Web Components in Angular & (P)react


Learn how to create Web Components and implement them in popular frontend frameworks 

Web Components can help you simplify your frontend development workflow and promote code reuse and maintainability. However, their adoption is still low. In this Talk, you’ll learn about the capabilities of Web Components and how to effectively use them in your frontend projects. We’ll go over the advantages and the practical aspects of creating and implementing Web Components within popular frontend frameworks Angular and (P)react. This is also an opportunity to learn from our experiences as we show you how we’ve used them in client projects to tackle specific challenges.

Web Components 101

Filip Voska

JavaScript Team Lead @ Infinum

Filip is a JavaScript engineer with almost a decade of experience. A couple of years ago, he took on a leadership role and has since guided a team of skilled Angular engineers in overcoming both technical and non-technical work challenges. His experience with Angular led him to learn more about Web Components, and he’s ready to share that knowledge with you. Outside of work, Filip finds joy in gaming, tinkering with his PC, listening to music on HiFi gear, and spending quality time with his family. If you need an icebreaker to start a conversation with Filip, just ask him about his preferred mechanical keyboard switch. 

In this introductory talk, Filip will:


Cover the basics of the Web Components standard


Explain how Web Components interact with Web Applications


Demonstrate how to create a simple Web Component

(P)react Web Components

Dejan Mancheski

JavaScript Engineer @ Infinum

Dejan is a dedicated JavaScript engineer with over three years of hands-on experience, specializing in the React framework. Throughout his career, he’s worked on various projects, from building user-friendly apps and solutions for telecommunications companies to optimizing processes in the banking sector. Over the past months, he had the chance to work with Web Components in the React ecosystem and explore their possibilities. Now, he’s ready to share his discoveries and practical tips with you. When the workday is done, Dejan swaps the screen and code for gym equipment.

Vedran Serenčeš

JavaScript Engineer @ Infinum

An expert JavaScript engineer, Vedran has over five years of experience in developing applications and smashing bugs using React, Next.js, and React Native. He has developed apps for multiple industries, including marketing, healthcare, finance, logistics, and education. The only thing he loves more than clean and readable code (seriously, format your imports!) is Crossfit. ‘WOD’ is now his favorite abbreviation, right after ‘JS’, of course.

In this lecture, Dejan and Vedran will:


Demonstrate how to create and use Web Components within React apps


Showcase Web Components developed for clients


Explain the lifecycle of Web Components


Explore advanced features such as Shadow DOM, slots, event handling, and custom events


Help you decide if Web Components are the right solution for your project


Share practical advice based on their hands-on experience

Angular Web Components

Ivan Mitrić

JavaScript Engineer @ Infinum

A JavaScript engineer with over a decade of experience, Ivan is a strong advocate for streamlining complex processes, always looking for ways to make the developer experience as seamless as possible. When he’s not developing apps, you’ll likely find him hosting board game nights for his friends. If he’s in the mood for a little competition, he’ll opt for Catan, Root, or Everdell. For cooperative fun, he prefers Arkham Horror, Betrayal at House on the Hill, or Dead of Winter.

In this lecture, Ivan will:


Demonstrate how to create and use Web Components within Angular apps


Show how to compile an Angular Component into a Web Component


Draw similarities between Angular Components (inputs and outputs) and Web Components (attributes and events)


Show an example of an Angular widget from a client’s app in action