Can I convert a React app into a vanilla Web Component!?!

⏳ Timestamps

00:00 - Intro
00:45 - Lean Web Club
02:00 - Rendering the Initial UI
09:27 - Build Game Play
23:15 - Track Game History
57:55 - Conclusion

[davidluhr]

This is a great demonstration of the value of writing vanilla JavaScript:

When you write framework code, you improve your skills in the framework. When you write vanilla JavaScript, you improve your skills in JavaScript as a whole.

Sure, you use some vanilla JavaScript in React, but it's a narrower slice. Even if you create solutions that can React solve in its own way, your solution is tailored to your specific needs and context, and you gain more transferable knowledge along the way.

[rebelmachine]

This is a great showcase of how easy/simple web components are compared to React. I would love to see more direct comparisons like this project!

[svivian]

“I like to use const for everything”
*immediately changes const to let*
😆

[kanaillaurent]

Thank you I like that. This is how I work too with webcomponents: TDD on the browser when the webcomponent is not very complicated. Also I used to store the state in the DOM too but I've changed my method because I've founded that it's more complicated in a complex application. Now i store the state of the whole application in a centralized object (a little bit like redux does). Unfortunately I don't have the observation (subscribe and dispatch) mecanism yet in place but I'm working on it.

[dovh]

Van JS is a good alternative too.

I was thinking for the history creating a square custom element and then storing all that information in there and then looping through the custom elements to update any history. Like `square.removeHistory(3)` Where 3 would be the history index. And when adding a value you can do `square.setValue('X', historyIndex)`.

Something like that. Then you have a different class handling a lot of the things.

[IainSimmons]

Great video!

I'd love to see more of these types of videos, comparing JS framework code to regular light DOM HTML web components!

One thing about your app logic... Can you not just use the fact that the next move alternates between X and O and whether the index of the history is odd or even to determine what it should be?

And can you just remove the list items and history with an index higher than the clicked one, in handleJumpTo?

[gianbattistamaricosu]

a tabs system with web components would be very useful

[terrencemoore]

Amazing video idea. I always wondered how different making custom web components are to react implementations

[ke]

JavaScript owes you, mentor. Then so does the community. Thanks for keeping me in check.

[frumbert]

You could build a tic tac toe using html, no javascript. Lots of files though, one for each state the board could be in. Clicking a cell links to the hpertext file representing the new state. Inherent history/undo as well. That way it could even work on the Lynx browser.

[TimFegan]

Very interesting. I like how simple you made this look. I was wondering if it would beneficial to make more components as one would tend to do in React. So, even though the Square is basically just a button, it does have state of ' ', 'X' or 'O'.
Or on the other hand, from the way you explain Web components before where wrap vanilla HTML in the HTML file with a Web Component, could you take most of the HTML out of the component and place it into the vanilla HTML section.

[cloudpuncher]

How did you write the Custom Element innerHTML in the constructor? I get an error unless I attachShadow and write the shadowRoot innerHTML....