7 ms·

The Case for React-Like Web Components

68 points by Andrex 9y ago

pjmlp 9y ago
Quite true, I also prefer Vanilla JS and look forward to Web Components becoming more mainstream. The pure Web stack skills stay, while framework specific skills are only good until the next JS Framework hype cycle. Where are Dojo, MooTools, YUI, Promise.js now? In a couple of years React, Angular, Vue, Polymer might join them, but VanilaJS, HTML, CSS skills will stay relevant.
- macspoofing 9y ago
  Yes. The right answer is to fix JavaScript so it doesn't need 5000 frameworks that have their own spin on how to organize code.
  - Rbatista 9y ago
    fix javascript.. lol.. what makes js one of the most used languages is it's crazyness.
    - krapp 9y ago
      >what makes js one of the most used languages is it's crazyness No.. it's ubiquity in the browser alone made it one of the most used languages. Obviously, when there is only one game in town, that game is going to be popular. People hate javascript and its "crazyness" so much that the entire universe of modern web development was designed around using other languages which "compile" to it so that developers could avoid direct contact with it as much as possible. What other language gets treated like a contagion by its own users?
      - Gaelan 9y ago
        Assembly?
    - macspoofing 9y ago
      If Brainfuck was included in browsers it would be 'one of the most used languages'.
- chatmasta 9y ago
  You can learn React in a day. The API is composed of less than ten functions. To answer part of your question, Promise.js has become formalized in the ECMAScript standard, so maybe not the best example. These frameworks emerge to make it convenient to solve problems that JS does not offer an easy way to solve. I don’t see anything philosophically wrong with that; in fact, I would argue it’s a big driver of JS adoption. Prototypical inheritance makes it very easy to bend javascript to your will. If you don’t like the frameworks you don’t need to use them, but it’s going to harm your career if you actively avoid learning how to use frameworks that are deployed with increasing frequency on new projects. The other advantage of frameworks is that they provide common idioms and enforce procedural standards, both of which make working on a team more productive as everyone has the same base of understanding. They also make it easier to hire for that team. Try implementing any sufficiently complex app in vanilla JS and you’ll likely end up recreating many of the aspects of popular frameworks, except your “internal framework” will be messy, undocumented, and unique to your project, severely reducing maintainability and increasing onboarding time of new developers.
  - meesterdude 9y ago
    > You can learn React in a day. Maybe React itself, but everything else that goes into doing react development; design patterns, gotchas, testing, webpack, native and so on? That takes far longer than a day, and is what most would expect when being able to really say they "know react".
    - chatmasta 9y ago
      Agreed, but as I mentioned in my edits of the comment, you’ll likely end up needing to solve all these problems in vanilla JS as well. So it’s really a question of picking your poison. Also, many of the concepts you need to learn for proficient react development are auxiliary to react and could be applied to vanilla JS or really any UI framework. Any UI is fundamentally a state machine, and solutions to implementing it all require state management and clean separation of the presentation and data layers.
    - dictum 9y ago
- matt4077 9y ago
  These "React is just this month's JS Framework Hype" comments are really starting to look silly, considering React is coming up on 5 years. And it's not like "Vanilla JS" isn't a moving target itself.
  - cdurth 9y ago
    Very silly. If you are keeping up with the latest and greatest in JS, you have the 20 minutes to sit down and learn the basics of a framework that will make your life a bit easier. This argument will never end, code hipsters need their voices heard.
  - sebringj 9y ago
    I think its easier to say that because of the past history of moving targets with JS. The "aha" moment you get with React is it abstracts things in a very easy to understand way with JSX at its heart. You then find it quite easy to move from React Web to React Native to React VR or whatever other thing they cook up because its just simple to look at abstraction without the hairy object boilerplate that you are normally subjected to. Maybe React itself is just another flavor but the JSX paradigm is really the goodness I think more frameworks could use which cough cough was done by Microsoft a long time ago.
  - pjmlp 9y ago
    Vanila JS is part of the browser stack, a bit like UNIX and C, Java and JVM, CLR and C#, iOS and Objective-C/Swift, Android and Java,.... Those who master the platform win, regardless of flavour of the month Framework that one puts on top of it.
- rvanmil 9y ago
  Afaict vanilla js these days is much less relevant than any of the current frameworks. Is it really that big of a deal to learn a new framework/library every now and then? They're really not that hard to learn and the productivity boost is definitely worth the investment. Hype is not at all the reason they're popular.
  - DougWebb 9y ago
    The problem isn't learning the frameworks; the problem is creating code that relies on them and has to be supported for years, which may or may not be longer than the active lifespan of the framework.
- bobbby 9y ago
  VanillaJS and CSS have changed far more than React in the last few years. ES6 and CSS grids alone brought massive changes.
  - pjmlp 9y ago
    They aren't going anywhere, they are part of the browser stack. Now React, well lets seen in 5 years time.
- Vinnl 9y ago
  Regardless of whether web components would actually be a stand-in for things like React: what makes you think that integrating something in the language results in it being there to stay? If Angular 1's two-way data binding had been added to HTML proper, I'd still have moved on to a virtual DOM-based approach.
bastawhiz 9y ago
Serious question: does anyone still care about Web Components? They still don't work cross platform, they have substantial limitations, and they lack many of the important features that React and others come with by default (event handling, anyone?). For real, try to build a form with React, then try to build the same form with Web Components. It's a nightmare going from controlled inputs to manual DOM fiddling. Even just telling the parent component about the form submission means creating and dispatching your own event! Is the point of Web Components to service frameworks? I really don't see who the intended audience is, because any half decent framework is infinitely simpler to work with.
- macawfish 9y ago
  People definitely still care about Web Components. They have evolved quite a lot over the last couple years, and there are some very nice helper libraries that have come out for them (skate.js, stencil.js) I agree that state management/binding is hard, in general, but I'm sure that these Web Components helper libraries will be more and more sophisticated as time goes by. Also, isn't it pretty much standard to use redux/mobx for state management with React? Why not use these kinds of tools with Web Components? In the past I've used slots and symbols to communicate between parents and children without exposing all the guts of my components. Aside from that, there's not really any good reason I can see that React itself couldn't/shouldn't support Web Components at some point soon.
  - symlinkk 9y ago
    If Web Components are only usable with a library on top of them, what is the point of using them in the first place?
    - colordrops 9y ago
      Different libraries would then be compatible and interchangeable. You could mix and match web components using different or no frameworks on a page.
      - 9y ago
wakamoleguy 9y ago
This is OK. It compares some of the features of Web Components and React components as they stand today. Having recently used Web Components in a side project, I will say that I wish it touched more on how to give Web Components reactivity. The author touches on data binding, but doesn't really go too deeply into what will be one of the most customized (ergo hard to maintain) pieces of the VanillaJS code. Polyfills also add an interesting twist. You can use them to enable Web Components in Firefox, but they mimic shadowdom behavior imperfectly. You need to be very careful of how you use CSS in that case. Lastly, there seemed to be some gotchas in ES6 module loading a few months back. Perhaps those have been fixed. At the time, I found it hard to debug modules that failed to load. In any case, I'm always happy to see Web Components and more powerful/useful features being added to JavaScript in the browser. Frameworks like React serve useful purposes, and it's great that we have a platform that allows us to move quickly and bring new patterns to life without waiting for browsers. In the long term, though, I will always be an advocate for standards and making vanilla implementations feasible.
- Andrex 9y ago
  Believe me, I want to touch more on Web Component reactivity, but I don't have the depth of knowledge yet to really expound on it in a blog post. Happy for others to fill the gap in the meantime though. :) I definitely agree with pretty much all your points. I think it's a pretty exciting time for web dev right now.
  - wakamoleguy 9y ago
    Yeah, I wish I could call myself an expert there, too, but I've still some exploration to do before I'm really happy with how I have it set up, let alone recommending it to others. Awesome that you're here responding, though. Great post, overall! (Sorry if my points were mostly critical...I glossed over the parts I liked.)
    - Andrex 9y ago
      Haha, I always expect far worse when sending a blog post like this out there. It's the nature of the medium and I try to take it in stride. Your comment was good-natured, so no worries.
sebringj 9y ago
Don't you kind of wish they just said screw it, let's just use React for the standard and move forward. Is that wrong to say?
- colordrops 9y ago
  No, but it's also not taking into account a lot of reasons web component features exist as they do, and the flaws with react.
  - sebringj 9y ago
    Right but "flaws" is relative.
    - colordrops 9y ago
      What I'm getting at is that the reason web standards are slow is because they go through a long vetting and trade-off discussion between various stakeholders to flush out flaws and make conscious compromises. React has not gone through this process, and was created for Facebook's needs. It would need to go through the same process before becoming a standard.
dmitriid 9y ago
There's no case. Web Components are an overly-verbose under and overspecified near-monstrosity that cannot even function on its own without throwing in Polymer/Skate/whatever. "React-like" components in the article are to React what rocks are to a CNC machine. I also encourage you to count the number of problems the author mentions vs. the number of advantages.
yesimahuman 9y ago
If you want even more react-like web components, we built Stencil to use JSX and output plain web components as we move to WC's for Ionic Framework: http://stenciljs.com http://stenciljs.com
deleted 9y ago
[deleted]
petilon 9y ago
You can build Web Components using JSX using this library: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder (The lib is 200 lines, so it is almost the same as VanillaJS)

68 points by Andrex 9y ago

Quite true, I also prefer Vanilla JS and look forward to Web Components becoming more mainstream. The pure Web stack skills stay, while framework specific skills are only good until the next JS Framework hype cycle. Where are Dojo, MooTools, YUI, Promise.js now? In a couple of years React, Angular, Vue, Polymer might join them, but VanilaJS, HTML, CSS skills will stay relevant.

macspoofing 9y ago
Yes. The right answer is to fix JavaScript so it doesn't need 5000 frameworks that have their own spin on how to organize code.
- Rbatista 9y ago
  fix javascript.. lol.. what makes js one of the most used languages is it's crazyness.
  - krapp 9y ago
    >what makes js one of the most used languages is it's crazyness No.. it's ubiquity in the browser alone made it one of the most used languages. Obviously, when there is only one game in town, that game is going to be popular. People hate javascript and its "crazyness" so much that the entire universe of modern web development was designed around using other languages which "compile" to it so that developers could avoid direct contact with it as much as possible. What other language gets treated like a contagion by its own users?
    - Gaelan 9y ago
      Assembly?
  - macspoofing 9y ago
    If Brainfuck was included in browsers it would be 'one of the most used languages'.
chatmasta 9y ago
You can learn React in a day. The API is composed of less than ten functions. To answer part of your question, Promise.js has become formalized in the ECMAScript standard, so maybe not the best example. These frameworks emerge to make it convenient to solve problems that JS does not offer an easy way to solve. I don’t see anything philosophically wrong with that; in fact, I would argue it’s a big driver of JS adoption. Prototypical inheritance makes it very easy to bend javascript to your will. If you don’t like the frameworks you don’t need to use them, but it’s going to harm your career if you actively avoid learning how to use frameworks that are deployed with increasing frequency on new projects. The other advantage of frameworks is that they provide common idioms and enforce procedural standards, both of which make working on a team more productive as everyone has the same base of understanding. They also make it easier to hire for that team. Try implementing any sufficiently complex app in vanilla JS and you’ll likely end up recreating many of the aspects of popular frameworks, except your “internal framework” will be messy, undocumented, and unique to your project, severely reducing maintainability and increasing onboarding time of new developers.
- meesterdude 9y ago
  > You can learn React in a day. Maybe React itself, but everything else that goes into doing react development; design patterns, gotchas, testing, webpack, native and so on? That takes far longer than a day, and is what most would expect when being able to really say they "know react".
  - chatmasta 9y ago
    Agreed, but as I mentioned in my edits of the comment, you’ll likely end up needing to solve all these problems in vanilla JS as well. So it’s really a question of picking your poison. Also, many of the concepts you need to learn for proficient react development are auxiliary to react and could be applied to vanilla JS or really any UI framework. Any UI is fundamentally a state machine, and solutions to implementing it all require state management and clean separation of the presentation and data layers.
  - dictum 9y ago
matt4077 9y ago
These "React is just this month's JS Framework Hype" comments are really starting to look silly, considering React is coming up on 5 years. And it's not like "Vanilla JS" isn't a moving target itself.
- cdurth 9y ago
  Very silly. If you are keeping up with the latest and greatest in JS, you have the 20 minutes to sit down and learn the basics of a framework that will make your life a bit easier. This argument will never end, code hipsters need their voices heard.
- sebringj 9y ago
  I think its easier to say that because of the past history of moving targets with JS. The "aha" moment you get with React is it abstracts things in a very easy to understand way with JSX at its heart. You then find it quite easy to move from React Web to React Native to React VR or whatever other thing they cook up because its just simple to look at abstraction without the hairy object boilerplate that you are normally subjected to. Maybe React itself is just another flavor but the JSX paradigm is really the goodness I think more frameworks could use which cough cough was done by Microsoft a long time ago.
- pjmlp 9y ago
  Vanila JS is part of the browser stack, a bit like UNIX and C, Java and JVM, CLR and C#, iOS and Objective-C/Swift, Android and Java,.... Those who master the platform win, regardless of flavour of the month Framework that one puts on top of it.
rvanmil 9y ago
Afaict vanilla js these days is much less relevant than any of the current frameworks. Is it really that big of a deal to learn a new framework/library every now and then? They're really not that hard to learn and the productivity boost is definitely worth the investment. Hype is not at all the reason they're popular.
- DougWebb 9y ago
  The problem isn't learning the frameworks; the problem is creating code that relies on them and has to be supported for years, which may or may not be longer than the active lifespan of the framework.
bobbby 9y ago
VanillaJS and CSS have changed far more than React in the last few years. ES6 and CSS grids alone brought massive changes.
- pjmlp 9y ago
  They aren't going anywhere, they are part of the browser stack. Now React, well lets seen in 5 years time.
Vinnl 9y ago
Regardless of whether web components would actually be a stand-in for things like React: what makes you think that integrating something in the language results in it being there to stay? If Angular 1's two-way data binding had been added to HTML proper, I'd still have moved on to a virtual DOM-based approach.

bastawhiz 9y ago

Serious question: does anyone still care about Web Components? They still don't work cross platform, they have substantial limitations, and they lack many of the important features that React and others come with by default (event handling, anyone?). For real, try to build a form with React, then try to build the same form with Web Components. It's a nightmare going from controlled inputs to manual DOM fiddling. Even just telling the parent component about the form submission means creating and dispatching your own event! Is the point of Web Components to service frameworks? I really don't see who the intended audience is, because any half decent framework is infinitely simpler to work with.

macawfish 9y ago
People definitely still care about Web Components. They have evolved quite a lot over the last couple years, and there are some very nice helper libraries that have come out for them (skate.js, stencil.js) I agree that state management/binding is hard, in general, but I'm sure that these Web Components helper libraries will be more and more sophisticated as time goes by. Also, isn't it pretty much standard to use redux/mobx for state management with React? Why not use these kinds of tools with Web Components? In the past I've used slots and symbols to communicate between parents and children without exposing all the guts of my components. Aside from that, there's not really any good reason I can see that React itself couldn't/shouldn't support Web Components at some point soon.
- symlinkk 9y ago
  If Web Components are only usable with a library on top of them, what is the point of using them in the first place?
  - colordrops 9y ago
    Different libraries would then be compatible and interchangeable. You could mix and match web components using different or no frameworks on a page.
    - 9y ago

wakamoleguy 9y ago

This is OK. It compares some of the features of Web Components and React components as they stand today. Having recently used Web Components in a side project, I will say that I wish it touched more on how to give Web Components reactivity. The author touches on data binding, but doesn't really go too deeply into what will be one of the most customized (ergo hard to maintain) pieces of the VanillaJS code. Polyfills also add an interesting twist. You can use them to enable Web Components in Firefox, but they mimic shadowdom behavior imperfectly. You need to be very careful of how you use CSS in that case. Lastly, there seemed to be some gotchas in ES6 module loading a few months back. Perhaps those have been fixed. At the time, I found it hard to debug modules that failed to load. In any case, I'm always happy to see Web Components and more powerful/useful features being added to JavaScript in the browser. Frameworks like React serve useful purposes, and it's great that we have a platform that allows us to move quickly and bring new patterns to life without waiting for browsers. In the long term, though, I will always be an advocate for standards and making vanilla implementations feasible.

Andrex 9y ago
Believe me, I want to touch more on Web Component reactivity, but I don't have the depth of knowledge yet to really expound on it in a blog post. Happy for others to fill the gap in the meantime though. :) I definitely agree with pretty much all your points. I think it's a pretty exciting time for web dev right now.
- wakamoleguy 9y ago
  Yeah, I wish I could call myself an expert there, too, but I've still some exploration to do before I'm really happy with how I have it set up, let alone recommending it to others. Awesome that you're here responding, though. Great post, overall! (Sorry if my points were mostly critical...I glossed over the parts I liked.)
  - Andrex 9y ago
    Haha, I always expect far worse when sending a blog post like this out there. It's the nature of the medium and I try to take it in stride. Your comment was good-natured, so no worries.

sebringj 9y ago

Don't you kind of wish they just said screw it, let's just use React for the standard and move forward. Is that wrong to say?

colordrops 9y ago
No, but it's also not taking into account a lot of reasons web component features exist as they do, and the flaws with react.
- sebringj 9y ago
  Right but "flaws" is relative.
  - colordrops 9y ago
    What I'm getting at is that the reason web standards are slow is because they go through a long vetting and trade-off discussion between various stakeholders to flush out flaws and make conscious compromises. React has not gone through this process, and was created for Facebook's needs. It would need to go through the same process before becoming a standard.

dmitriid 9y ago

There's no case. Web Components are an overly-verbose under and overspecified near-monstrosity that cannot even function on its own without throwing in Polymer/Skate/whatever. "React-like" components in the article are to React what rocks are to a CNC machine. I also encourage you to count the number of problems the author mentions vs. the number of advantages.

yesimahuman 9y ago

If you want even more react-like web components, we built Stencil to use JSX and output plain web components as we move to WC's for Ionic Framework: http://stenciljs.com http://stenciljs.com

deleted 9y ago

[deleted]

petilon 9y ago

You can build Web Components using JSX using this library: https://github.com/wisercoder/uibuilder https://github.com/wisercoder/uibuilder (The lib is 200 lines, so it is almost the same as VanillaJS)