Introduction
Welcome to my little corner of the internet! The wonderful world of webdev is a really interesting space that I've only gotten a small taste of. The technologies contain a lot of great features that I've come to love, but they're held back by many shortcomings when it comes to onboarding. Now that I'm seven weeks into my journey, I'd like to write a brief reflection about my experiences exploring the current landscape.
What is confusing about platforms?
I think the biggest source of confusion for me was just the sheer amount of options out there. There are so many different platforms/frameworks with so many different rules and design philosophies. It's difficult to keep heads or tails of things, especially if you're jumping between them on multiple projects. Some platforms match the vanilla behaviors of our main programming languages (HTML, CSS, and JavaScript), but most end up wanting to do thing their own way with changes completely distinct from the competition. The inconsistency makes my brain melt...
How could web components and VanillaJS standards be taught in a way that is more approachable?
Both standards could benefit greatly from simply providing users with more concrete examples and thorough explanations in their documentation. A misstep of both is that they don't handhold newcomers through the setup process. The Mozilla MDN that VanillaJS relies on is a great resource with tons of useful information, but it reads like gibberish to people with no prior experience. The available web component documentation, on the other hand, just isn't populated with nearly as much content due to how new and niche the platform is. Beginners need everything explicitly explained to them. They don't know what a querySelector or a scaffold is but are expected to make use of them almost immediately.
Luckily, Vanilla JavaScript has thousands of tutorials as a benefit of its age, but web components aren't quite so fortunate. I believe that it would be helpful if these resources both offered some fully completed basic projects for new users to poke and prod. I find that being able to mess with something that already works helps a lot with early learning. Outside of tutorials, this is a great way to demonstrate exactly how different functions can typically be used for various purposes.
What did I find easiest to work with on 1st stab?
I definitely found VueJS the easiest to understand on my first attempt. I may be a bit biased because I was given the most time to learn with this framework. However, my rationale is that I liked the framework because it didn't feel too different from VanillaJS in syntax. Although it had some of its own quirks such as the heavy use of <template> tags, it felt very readable, for the most part, compared to platforms like Angular and Svelte. Web components shared in this readability advantage but lost when it came to creating JavaScript events. Many of the others required knowledge of what a DOM (Document Object Model) is and how to utilize alternate versions of it. VueJS, on the other hand, felt especially simple and allowed me to easily write standard functions with vanilla logic. For each individual webpage in VueJS, almost all the action happens within the same file, which removed the need for cross-DOM scoping.
Thinking back on the tooling. What parts were confusing? What clicked with me immediately?
I found the tooling fairly straightforward in VueJS. The HTML in it followed standard structure. Its CSS and JavaScript were also housed in pretty vanilla <style> and <script> tags. Additionally, they all accessed each other using the early methods I learned using CodePen. The one thing that threw me off initially was the <script setup> tag, since my functions only worked in the normal <script> tag.
With web components, what confused me was definitely properties in LitElement. They didn't end up being too complicated; however, I had skimmed past the part describing them in LitElement's own documentation. On the other hand, I found <slot> very easy to get a hang of. This is probably because it's pretty forgiving with incorrect implementations, meaning that it can become functional really quickly.
What additional readings did you have to do in order to make sense of things?
For the most part, official documentation, StackOverflow, and (of course) random webdev blogs were my best friends throughout my learning process. While the web component documentation was fairly lacking, Mozilla's MDN was invaluable for discovering and understanding the operations of all the vanilla languages. Alternatively, StackOverflow was excellent for coming across jury-rigged solutions to all sorts of tiny problems that were never addressed in documentation. The random blogs that I came across tended to feel much the same. I didn't actively search for them, but they'd always pop up when I was pursuing a really obscure question. It felt like striking gold whenever I got provided a functional answer on a basic webpage that hadn't been updated in 7 years! I can only imagine the aftermath if all these websites disappeared one day!
Top comments (0)