Introduction to Web Components in Angular & (P)react
EVENT INFO
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:
1
Cover the basics of the Web Components standard
2
Explain how Web Components interact with Web Applications
3
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:
1
Demonstrate how to create and use Web Components within React apps
2
Showcase Web Components developed for clients
3
Explain the lifecycle of Web Components
4
Explore advanced features such as Shadow DOM, slots, event handling, and custom events
5
Help you decide if Web Components are the right solution for your project
6
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:
1
Demonstrate how to create and use Web Components within Angular apps
2
Show how to compile an Angular Component into a Web Component
3
Draw similarities between Angular Components (inputs and outputs) and Web Components (attributes and events)
4
Show an example of an Angular widget from a client’s app in action
