My perspective as a new developer

What is confusing about platforms?

Because platforms frequently have various syntax and standards, it can be challenging for new developers such as me to transition between them or learn them all, which might be confusing for inexperienced developers like me. Moreover, platforms may support web components to varying degrees, which can lead to incompatibilities.

How could web components and VanillaJS standards be taught in a way that is more approachable?

By offering clear and straightforward documentation, tutorials, and examples that show how to utilize them in practical situations, web components and VanillaJS standards could be taught in a way that is more approachable. Also, including interactive tasks and tools can aid students in understanding the topics and gaining practical experience.

What did you find easiest to work with on 1st stab? (You don't have to say web components, this is an honest take, if it was Vue cool, but justify it)

Due to the fact that web components are built on well-known web standards like HTML, CSS, and JavaScript, some developers find them to be simple to utilize. They don't need to be used with a specialist build tool or a laborious setup procedure, and can be used with any front-end framework or library, including VanillaJS. Web components are also modular, which enables reusing them across many projects and improving the organization and maintenance of the code.
Web components have also been adopted by a number of front-end libraries and frameworks, including Angular and React, giving developers extra resources and tools to work with. It might also be simpler to start using web components and construct reusable custom elements with simplicity thanks to the availability of open-source frameworks and tools like LitElement and StencilJS. In general, using web components can be a simple and practical way to build reusable web components.

Think back on the tooling. What parts were confusing? What clicked with you immediately?

HTML, CSS, and JavaScript are only a few of the online standards that are used by web components. Hence, rather than offering a new language or framework to learn, tooling for web components frequently focuses on making it simpler to design and deploy bespoke pieces. In general, VanillaJS or a specific library or tool, such LitElement or StencilJS, can be used to construct web components. These libraries can offer more features and convenience, but they can also make the development process more difficult. Developers could find the following web components tools features perplexing or difficult:

1. Web component support: Not all browsers are compatible with web components, and some browsers need polyfills or other libraries to work properly. Developers must make sure that their web components function properly on all supported browsers and hardware.

2. Build tools: To bundle and optimize the code, several libraries or tools for web components demand the use of specialist build tools like Webpack or Rollup. It can be difficult to set up and configure these tools, and it can be necessary to be familiar with other languages or frameworks like TypeScript or Babel.

3. The use of Shadow DOM: a technology that enables programmers to encapsulate the styling and behavior of a custom element, is one of the essential characteristics of web components. However, developers accustomed to dealing with conventional HTML and CSS may find it more difficult to style and operate the component when Shadow DOM is employed.

4. Testing and debugging: When used in conjunction with other front-end frameworks or libraries, web components can present new testing and debugging issues. The web components that developers create must be simple to test and debug, and they must also function effectively with other application components.

Despite these obstacles, many developers believe that web components' advantages—such as reusability, modularity, and flexibility—outweigh the limitations of using them. It is feasible to build reliable and useful web components that can be utilized across various projects and platforms with the aid of specialized tools and libraries and an understanding of the underlying web standards.

What additional readings did you have to do in order to make sense of things.

I needed to read up on the following subjects in order to understand web components:

• Shadow DOM: I had to comprehend how it functions and how it makes it possible to encapsulate styles and markup because Shadow DOM is a crucial component of web components. On the websites for Google Developers and the Mozilla Developer Network, I discovered some useful tools.

• Templates: In order to provide the markup for my unique elements, I had to learn how to use HTML templates. On the Mozilla Developer Network website, the HTML Templates area proved helpful in this regard.

Overall, the additional readings improved my understanding of the principles, characteristics, and use of web components to my projects.