Ha, that was click bait, I don't understand any of this. I have one semester of Java under my belt, that's it. Let us dive in and dissect whatever React & LitElement are.
I can say with 99% confidence that these both involve Javascript. I can also responsibly speculate that they are both open source. From what I have read/watched it appears that they both are ?good? for creating web components. I have played around with both React & LitElement. I didn't have fun, so it wasn't really playing. Let's see how poorly I understand these.
As someone with an absolute basic understanding of coding, I found the tutorial for LitElement to be more beneficial for me. I was overwhelmed with the react tutorial. React jumps right in with making a god damn tic tac toe game, that's next level gaming/coding that I wasn't ready for. While, yes I am sure the basics got covered with the React tutorial, I liked that LitElement just showed me the basics, without anything too advanced like tic tac toe. I still felt like an idiot reading both pages, but we fully embrace that and move on.
From what I can tell, it seems like you need React to develop web components. React utilizes virtualDOM. The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation." check that out here The virtual DOM eliminates the need to manually update the DOM when you are building something. Also, the virtualDOM is not the shadowDOM. The shadowDOM is not the shadow realm from Yu-Gi-Oh! React says that, "The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs." I would say React is good for building and LitElement is good for designing. LitElement, which is a part of Polymer, which is a Javascript library, is being used for resigning Youtube, Google, and Google Earth. Pretty much anything Google owns has elements of Polymer in it, so check your DNA.
Another difference is that React has a framework, while LitElement has a library. I am a little confused by this. If you go on React's website they have a huge banner that has "Javascript library" in it. This website says React is a library not a Framework. However, Jermel on quora.com (who has 15+ years of software development) says that evidence points to it clearly being a framework. Thankfully, I couldn't find any disputes that LitElement was a library. Frameworks and libraries are both reusable code that you can use. They can help you solve problems, and it looks like they can keep your code cleaner and more organized.
There are some differences between a framework and a library. One has books that no one reads. A library looks like its much more fluid. You have more choices. A framework is much more ridged and doesn't allow for as much user control. There is a term called "inversion of control" You are in charge of how the application flows with a library, but the framework is in control of the flow. Check out more of this here. There is a good analogy that a library is building your own house at Ikea, you pick everything. A framework is like a contractor and blue prints building your house, much less control. 
Obviously, the level of control you have is going to be important to what you can do. It is a good idea to know if a library or framework will better suit your project.
I found a speed test online, which shows LitElement was 30% faster than React. I read the article and did not fully understand what and how they were testing, but hey 30% is a decent margin of victory, congrats LitElement.
If you would like to watch me talk about this click <-there
Top comments (0)