dschulten (8) [Avatar] Offline
#1
A more recent development in webcomponents is to use a compiler to create vanilla Javascript bundles at build time. Examples are Svelte https://svelte.technology and Stenciljs https://stenciljs.com.

Maybe that is something to consider when you get to the building chapter smilie
430326 (7) [Avatar] Offline
#2
Interesting! Thanks for sharing! This is a hard one, I totally dig the fact that it compiles down to a plain web component. I don't dig the fact that you're learning a different toolchain, though (to be fair, it's not like the toolchain isn't made up of some very common and popular pieces). The syntax and lifecycle kinda reminds me of my limited React exposure - and I've seen some demos for compiling a React component down in the same way.

I do think I want the book to focus on stuff that everyone can use without buying into a specific workflow like this - but it certainly can't hurt to mention things like this, because as much as I love working with Web Components, we'll always invent better ways on top of the core tech.

I had planned for my build chapter to focus on taking core Web Component creation and enabling them to work with older browsers that don't support the newer APIs or ES6 features. What you bring up might be a good topic for another spot in the book - I've been toying with the idea for showing competing component workflows like with React and Angular, and I have a step by step calculator React project that I converted to Web Components in the book's Github repo.

So, all thats to say, thanks! You might be just giving me more ammunition for another chapter I've been pondering
hettlage (128) [Avatar] Offline
#3
Is there a link to the step by step project already? (I've tried https://github.com/bengfarrell/webcomponentsinaction/tree/master/react_and_wc, but I could only find an index.html file there.) Thanks!
430326 (7) [Avatar] Offline
#4
Hey! I'm written a few step by step examples in the book so far, so not quite sure which one you're referring to.
I have that photo carousel from Chapter 2 on Github:

https://github.com/bengfarrell/webcomponentsinaction/blob/master/chapter2/2.3-photocarousel.html

I also have a Google Poly example in Chapter 3. This one is actually more step by step as its a bit more complicated. So I have several HTML files for this in the Chapter 3 folder:

https://github.com/bengfarrell/webcomponentsinaction/tree/master/chapter3

So far its all HTML so I can keep it simple. As I get into better ways of organizing stuff in later chapters it will look more like a proper project.

All that is to say - if you're going through, and you have different expectations on what you would find in my Github repo, I'm all ears - I haven't really talked about this with Manning yet.

That React HTML file you found is a bit old. I actually thought I had something different there. It's just a simple example of using a Web Component in React that I completely forgot I had, it's not really a project or anything. What I thought I had in there was a step by step example of converting a React Calculator app that someone else built into a Web Component. I'm not sure if I'm going to have a React comparison in the book - so the example might not make it in. However, if you're actually interested in a React example (without proper written explanation of course yet) - check out https://github.com/bengfarrell/calculator. Drill into the branches of the project - each branch is a step from start to finish of converting from React to Web Components. If its awesome or not awesome, let me know, you could help me decide if I want to make this into a chapter.

thanks!
430326 (7) [Avatar] Offline
#5
Yahhhhh....ignore all the stuff I said about chapter 2 and 3. I'm still getting used to the forums, and I didn't realize it was a continuation of a question from a while back. Oops!
hettlage (128) [Avatar] Offline
#6
Thanks for the link to the calculator project. As you asked for my opinion, here are my two cents: Having a chapter about building the calculator might be a good idea. Having a step by step guide for converting a React project probably wouldn't. I'm skeptical of the latter, as a fair share of readers might never have used React, and even if they have, they might not be overly keen on converting existing code.

Having said this, a "cheat sheet" (possibly in an appendix) for translating functionality between web components and frameworks like React (or Vue, or Angular) could be of good value. Readers who have used frameworks before might wonder whether features like declarative code, data binding (in particular with arrays) or scripts for easily creating, running and testing projects are available with web components as well (and how).

From an advertising point of view you might consider mentioning hyperhtml/lit-html in Chapter 1. Knowing that declarative code is possible with web components might help convincing web framework users that reading the book would be of value.
430326 (7) [Avatar] Offline
#7
Good suggestion on Chapter 1 for talking a bit about templating. That chapter needs some work - and even though I tried to stay far away from framework bashing, but I did have at least one reader walk away with that impression. You're giving a great obvious example of something better to drill in on. Thanks for the opinion on the calculator example! I think ill choose something like it, but I did fork that project from a react project, and if I don't mention the react aspect and how it's a continuation of that work, I feel like a bit like I'm stealing, and I'd rather build up my own example.

Great opinions, thanks again!