DEV Community

Discussion on: It's not about Web Components vs. React

Collapse
 
tvthatsme profile image
Timothy Vernon

If we are comparing Web Components to React, is there a create-react-app comparison?

Collapse
 
steveblue profile image
Stephen Belovarich • Edited

Some of the web component libraries have that sort of thing:
github.com/ionic-team/stencil-comp...
github.com/CaptainCodeman/web-app-...

FWIW you don't need a lot to get started and IMHO create-react-app serves the most general of use cases so tooling like that can be hazardous for some projects. With web components all you need is a template index.html and some JavaScript and CSS. There are some polyfills, but they are minimal. None the less a starter project would be a decent idea or a CLI with scaffolding all the better. Parcel is primed for this kind of thing, so is Webpack. Rollup is even a fantastic idea here now that it can code spilt.

Collapse
 
tvthatsme profile image
Timothy Vernon

Thanks for those links.

I was looking around this past weekend for something that supported at least the following: TypeScript, Webpack, and Hot Module Reloading to make an app using Custom Elements. I only had an hour or two so I didn't want to write the Webpack config myself 😅 I ended up bailing because I couldn't find anything that looked like it was being actively developed.

Those two libraries you mentioned, neither has been touched for some months which makes me nervous relying on something that doesn't have an active community behind it.

Until there is a better community and tooling around Web Components, I will continue to sit back and watch.

Thread Thread
 
steveblue profile image
Stephen Belovarich

I find this very interesting as someone who codes a lot of build tooling when something doesn't exist. Tools like create-react-app and Angular CLI only really serve generic use cases. The moment you want to do something else the tool doesn't you most likely have to roll your own, or extend the tool as is the case with Angular CLI.

It takes a lot of time to roll your own, so I sympathize, but if there were a tool for bundling Web Components it probably would only handle the most generic use cases.

My current workflow can be cherry picked from Readymade UI, a web component SDK I've been building just for kicks.

github.com/readymade-ui/readymade

My dev build is currently just TypeScript. I run tsc in --watch mode. In TypeScript 3.3 --watch is using an incremental watcher by default.

typescriptlang.org/docs/handbook/r...

The dev build isn't bundled, but I like that. It's fast.

The prod build uses rollup because well rollup is so easy to configure compared to anything else for me. Then I postprocess the output even more with PostHTML. PostHTML is a wonderful tool that transforms HTML templates. That's how I inlined nearly everything in the Github pages documentation for Readymade UI.

readymade-ui.github.io/readymade/

HTML Modules are coming and they will be a game changer.

Thread Thread
 
jaredmahan profile image
Jared Mahan

Have you guys taken a look at Stencil?(stenciljs.com/docs/introduction)

Thread Thread
 
steveblue profile image
Stephen Belovarich

Stencil 👍

Collapse
 
drewstaylor profile image
Drew Taylor • Edited

Yes, almost all of the major UI web component based frameworks have this. A couple examples might be:

Angular:

npm install -g @angular/cli
ng new my-app

Vue:

npm install -g @vue/cli
vue create my-vueapp

*EDIT: However, as Steve suggests, you shouldn't bloat your project unnecessarily with an application framework if all you need is just one or two simple web components.