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.
My main issue with development is components are supposed to be reusable, but in frameworks, all of my code eventually gets deprecated by the framework. Meanwhile, that one lazy load function I wrote in vanilla JS has lasted 10 years hahha. I'm really glad I found this channel!
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?
For a moment I was puzzled by the 'is-filled' attribute thinking that it just showed whether a square was filled or not. But looking at the code I understood that the attribute actually represented the character being stored in the square.
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.
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.
The reason I don't do that is because, frankly, I think the "react way" of building most UI is bad. It adds a LOT of extra complexity under the guise of scalability and simplicity.
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.
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.
@@gomakethings Thanks for the reply.... it appear that you can (in chrome) only if you put the after the Custom Element lest you get this error .."Uncaught DOMException: Failed to construct 'CustomElement': The result must not have children"... .For whatever reason it will append to a shadowRoot or append during the during the Custom Element upgrade. You can just do it with connectedCallback() no issues but it would be nice to just create elements and pass in data in the constructor..
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.
Thanks for the kind words, David!
My main issue with development is components are supposed to be reusable, but in frameworks, all of my code eventually gets deprecated by the framework. Meanwhile, that one lazy load function I wrote in vanilla JS has lasted 10 years hahha. I'm really glad I found this channel!
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!
Happy to keep creating them. Really appreciate the kind words!
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?
I plan to keep making them. Thanks so much!
For a moment I was puzzled by the 'is-filled' attribute thinking that it just showed whether a square was filled or not. But looking at the code I understood that the attribute actually represented the character being stored in the square.
Amazing video idea. I always wondered how different making custom web components are to react implementations
Just tried making a web component without using the shadow dom, it worked great!
@@terrencemoore8739 Thanks for the kind words, and that's AWESOME to hear!
a tabs system with web components would be very useful
EXCELLENT suggestion!
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.
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.
The reason I don't do that is because, frankly, I think the "react way" of building most UI is bad. It adds a LOT of extra complexity under the guise of scalability and simplicity.
@@gomakethings Good point.
“I like to use const for everything”
*immediately changes const to let*
😆
He might have misspoke, I remember in one newsletter he said he used let for everything, so he might have got them switched up
Oh shit, I totally misspoke. I meant to say "I like to use let for everything."
That hilarious, actually! 😂😂😂
JavaScript owes you, mentor. Then so does the community. Thanks for keeping me in check.
Cheers KB!
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.
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.
I absolutely love HTML-only stuff like that. And I totally see it. Links, with a few dozen HTML files for the various combinations that could exist.
How did you write the Custom Element innerHTML in the constructor? I get an error unless I attachShadow and write the shadowRoot innerHTML....
The source code is in the description. Maybe you're doing something that is a little off?
I do it all the time. Never run into an issue before.
@@gomakethings My bad, u cant append elements to a CE inside the constructor but you can to the shadowRoot...
@@cloudpuncher4615 You can do that, too. Here's a demo: gist.github.com/cferdinandi/39774222f289c2d6eee22282350e0eea
@@gomakethings Thanks for the reply.... it appear that you can (in chrome) only if you put the after the Custom Element lest you get this error .."Uncaught DOMException: Failed to construct 'CustomElement': The result must not have children"... .For whatever reason it will append to a shadowRoot or append during the during the Custom Element upgrade. You can just do it with connectedCallback() no issues but it would be nice to just create elements and pass in data in the constructor..