Web components - Service components / non-traditional components

Having transitioned from Angular, I was intrigued to explore the realm of creating vanilla Web components.

In Angular, we typically separate our code into Components (containing HTML, CSS, and some JS) and Services, which handle tasks like data retrieval and backend processes.

While I understand that Web components and a framework like Angular serve different purposes, I'm curious about how you would organize a project using them.

The resources I've come across only cover the basics of web components (Shadow DOM, template, custom HTML), without delving into creating complex enterprise applications with this technology.

My inquiry can be split into two parts:

  • What are the recommended practices for structuring an enterprise-level application with web components?
  • When working with web components, do you still separate core functionalities such as encryption, data streaming, etc., and if so, how?
javascriptarchitectureweb-component

Answer №1

My belief is growing stronger that "Web Components" can be considered a form of language construct.

The Custom Elements API, much like the Fetch API or MutationObserver API, plays a crucial role in this realm.

If you're wondering how to utilize the [name here] API for building applications, the answer lies in exploring various tools such as Lit, Hybrids, HyperHTML, Lego, and Stencil.

In the World of Development Tools

These tools have paved the way for the adoption of "Web Components," reminiscent of jQuery's dominance among web developers at one point in time.

Fast forward to today, where modern browsers fully support the Custom Elements API, eliminating the need for older toolsets.

Navigating the Modern Terrain

In the current landscape, Angular, Svelte, and Vue integrate seamlessly with the Custom Elements API, while React trails slightly behind with a 71% compatibility score based on evaluation criteria.

React's fate could mirror ECMAScript-4, a promising standard that never materialized due to lack of browser implementation, raising questions about its long-term viability.

This dynamic sets the stage for intriguing future developments:

  • Can Facebook bridge the gap in React's compatibility?

  • Will all major browser vendors embrace React (Native)?

Embracing the Future Today

For those unbound by IE11 constraints, the modern Custom Elements API offers an even playing field for development endeavors.

Prioritizing mastery of the API over reliance on flashy tools remains integral for sustainable growth in the industry.

Instead of fixating on trendy solutions, focus should shift towards maximizing the potential of the API itself.

Remember, proficiency with the Custom Elements API is akin to mastering fundamental programming concepts—it forms the foundation for any robust application architecture.

Navigating Challenges and Questions

When architecting enterprise-level applications using web components, what are the recommended best practices?

Is compartmentalization of core functionalities like encryption and data streaming essential when adopting web components, and if so, how can it be achieved effectively?

Employing Web Components mirrors working with Classes or Proxies; encapsulating logic within components while leveraging the semantic advantages offered by the Custom Elements API.

However, detrimental distractions arise when undue emphasis is placed on auxiliary tools rather than understanding and harnessing the fundamental capabilities of the API itself.

In essence, true expertise lies not in the toolset but in comprehension and utilization of the underlying technology.

Parting Thoughts

The Custom Elements API represents a significant JavaScript construct, exhibiting both strengths and limitations.

Similar to the transformative impact of Classes and Array methods, embracing this technology mandates a paradigm shift and continuous learning curve.

Advice for aspiring developers:

  • Experiment with the API like you would with core JavaScript features.
  • Begin with small projects before embarking on larger-scale applications.
  • Seek feedback from online communities such as StackOverflow Code Review.
  • Learn through trial and error, embracing mistakes as part of the learning process.
  • Ultimately, the Custom Elements API reflects a W3C standard supported across all modern browsers, ensuring longevity and relevance in the ever-evolving world of web development.

Answer №2

Having gone through a similar cycle myself and faced the same question, I found myself in the position of needing to develop an enterprise app and provide guidance to my colleagues as a solution architect. Drawing on my 20 years of experience in Web technology, I initially believed that answering this challenge wouldn't be too difficult. By opting to support "modern browsers," we quickly settled on utilizing the Web Component API. Leveraging my strong familiarity with Angular and React frameworks, we adopted a project structure and tool chain (including WebPack and Jest) that proved to be a wise choice. What started as a small library code to promote DRY practices eventually evolved into a comprehensive thin library after a year of development. Recognizing the importance of features such as data binding, state model, and integrated validation, we realized that these elements were essential for productivity. While our approach remained more concise compared to larger frameworks, it was far beyond simply a new version of jQuery. Although Web components are primarily just API calls, building everything else required significant effort built upon concepts like Proxy. This is what many smaller libraries aim to accomplish (such as Lit, Hybrids, HyperHTML, Lego, Stencil, etc.). Our final product ended up being robust and closely aligned with larger frameworks, yet compact in size (blending Angular's decorators with React's JSX). While I am enthusiastic about creating a library, I would recommend exploring one of the aforementioned options first. Also, keep in mind that future APIs may further streamline development tasks – I have confidence that ES2025 will incorporate many of these advancements.

Disclaimer: As the creator and maintainer of a similar thin library known as @nyaf, I speak from firsthand experience.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Chrome poses an issue with the placement of a button

There seems to be an issue with the button on Google Chrome. Sometimes it appears in the correct place, but upon refreshing the page, it shifts to the wrong position. This problem does not occur in other browsers: This is a specific problem related to Chr ...

javascripthtmlcssgoogle-chrome

Angular - Utilizing Mat Paginator with Multiple Tables within a Single Component

I've been struggling with an issue for quite some time now, trying to find a solution but nothing seems to be working. Currently, I am facing an obstacle while rendering five tables on the screen. The data for these tables is fetched using a GET call ...

javascripthtmlangularangular-material

What is the best way to animate a div sliding to the right, as if it is emerging from behind another div?

Alright, so I've got a div with multiple links in it. What I need is for all these links to trigger a sliding animation from the left side to the right within the same div. After my research, it seems like Jquery's animate function should be the ...

javascriptjqueryhtmlcss

The DELETE function in express.js with MySQL integration is encountering a problem where it is unable to

As I work on setting up my website, the backend utilizes express.js to send queries to a MySQL Database. However, when attempting to delete rows, no action seems to take place. function establishConnection() { return mysql.createConnection({ multipl ...

javascriptmysqlnode.jsexpress

Issue with the react-redux Provider

Whenever I run my basic program Index.js function test(state = []) { return state } const store = createStore(test); render( <Provider store = { store } > <App / > < /Provider > , document.getElementById('root') ...

javascriptreactjsreduxreact-redux

Discover how to determine the direction of a div element when utilizing the dir="auto" attribute in HTML5 with JavaScript

I'm experiencing an issue with a div that has the dir attribute set to auto. My goal is to retrieve the rendered direction using javascript After attempting div.dir, I only receive the 'auto' value. Is there a method available to detect if ...

javascripthtml

What steps can be taken to make the carousel inconsistent when relying on the assigned id in props?

I recently developed a slider with slots, but encountered an issue. The code for this component revolves around the use of IDs for each slide as prop, making it unnecessarily complex. I am convinced that there is a more straightforward way to achieve the s ...

javascriptarraysvue.jsvue-componentvuejs3

Is it possible to return to the previous page in Vue by using window.history.go(-1)?

Greetings! I am currently developing a website using Vue, but I have encountered an issue. Initially, I tried using router.go(-1) to prevent access through the address bar (e.g., from ../client/mypage to ../admin/mypage) and to redirect to the previous pag ...

javascriptvue.jsbrowserrouter

Angular: Transferring dynamic functions between parent and grandchild components

For my angular application, I am developing a versatile table component that can accept inputs for rows, columns, as well as handle various action button functions to render the table. The end result should resemble something like this: https://i.sstatic.n ...

javascriptangulareventsangular-material

What method can be used to segment data in an array while also factoring in the preceding value?

I currently have an array named targetPercentage. targetPercentage = [0,33,77,132] Is there a way to divide it into chunks of size 2 while also including the previous value? Additionally, is it possible to convert it into a JavaScript object array with c ...

javascriptarrays

What is the best way to retrieve an HTTP response within a JavaScript function once it has been received

I am looking for a solution to call a function and pass the response rendered to an express-handlebars page. Can someone guide me on how to achieve this? In my controller, I have code that renders the result to a handlebars page: return servico.obter ...

javascriptnode.jshtmlgoogle-visualizationexpress-handlebars

Is there a straightforward method to determine if any of multiple conditionals are true and return that one?

I've searched high and low for answers to my query, but haven't found any that satisfy my needs. Perhaps I'm not using the right search terms... I'm dealing with a set of checkboxes that can be either "on" or "off". When these checkbo ...

javascriptarraysobjectif-statementecmascript-6

`Inability of ngmodel to bind integer values on select element`

From the service, I will be receiving an integer as the selected value and need to send it back as an integer. Please refer to the code in this Plnkr link. <!-- Working --> <div ng-init="selectedvalue = '3'"> <select ng-model= ...

javascripthtmlangularjs

Data not showing up in *ngFor loop

component.ts file posts= []; constructor( private http:HttpClient) { http.get('https://jsonplaceholder.typicode.com/posts') .subscribe(response=>{ this.posts.push(response) console.log(this.posts) }); } Within the ...

javascriptangulartypescript

What steps should I take to ensure that the navbar is responsive and mobile-friendly?

After creating a navigation bar in an ejs file, I included it in all the files. The issue is that it looks fine on desktop view but does not respond well on mobile devices. There is some space left on the screen and it's not utilizing the entire width ...

javascripthtmlcssnode.js

substituting the deep watcher in Angular

In my application, I am working with a data object called fulldata, which consists of an array of objects. fulldata = [ {'key': 'abc', values: {.....},....}, {'key': 'efg', values: ...

javascriptangularjs

Refresh your webpage automatically without the need to manually refresh after clicking a button using AJAX in HTML and PHP!

One issue I'm facing is that the page doesn't auto-refresh, although it loads when I manually refresh it. Below you can find my HTML and AJAX code along with its database details. The Trigger Button <?php $data = mysqli_ ...

javascriptphpjqueryhtmlajax

Is there a way to retrieve localStorage setItem after an hour has passed?

When the user clicks on the close icon, the notification screen disappears. How can I display the same screen to the user again after an hour? Please provide guidance. const [hideLearningMaterialClosed, setHideLearningMaterialClosed] = useState(false) ...

javascriptreactjsnext.js

The characteristics that define an object as a writable stream in nodejs

Lately, I've been delving into the world of express and mongoose with nodejs. Interestingly, I have stumbled upon some functionality that seems to work in unexpected ways. In my exploration, I noticed that when I create an aggregation query in mongoos ...

javascriptnode.jsexpressmongoose

Steps to stop mat-spinner upon receiving Job Success/Failure Notification from the backend

I have a task that runs asynchronously and takes a long time to complete. When the task starts, I display a mat-spinner with a timeout set at 60000 milliseconds. However, we now have a notification service that provides updates on the job status. I would l ...

javascriptangulartypescriptangular-material