Authoring HTML in a JavaScript World

Rate this content
Bookmark

 In this talk, Tony shows how an authoring and semantic HTML-first approach to JSX template work leads to more readable, maintainable, and accessible UI components. He demonstrates how to think through implementing a UI prototype in a semantic way, authoring HTML before visuals. He shows how accessible markup improves performance, reduces DOM size, minimizes time spent on CSS, and reduces cognitive load not only for developers, but also for all our users, no matter how they consume our sites and applications.

Tony Alicea
Tony Alicea
21 min
15 Nov, 2023

Comments

Sign in or register to post your comment.
  • Timothy Trimble
    Timothy Trimble
    Excellent presentation, Tony. When I went to college to get my Web Application Developer Certificate, the first semester of web development was focused on HTML and the basics of JavaScript. For me, this was easy, and I ended up helping other students get through it. It wasn't until the second semester that he introduced React and Vue. I found it very refreshing to go back to the foundations of web development. We get so focused on the tools and the plugins, that we tend to forget the layer that supports everything else. I'll be sharing this with my team.

Video Summary and Transcription

This Talk by Tony Alicia focuses on authoring HTML in a JavaScript world. The speaker challenges developers to change their approach to building React components by starting with HTML first. By authoring HTML in a semantic way, readability and maintainability can be improved. Well-authored HTML provides better understanding of content and improves accessibility. It also has performance benefits by reducing DOM size. Investing time in HTML can save time and make applications more future-proof.

1. Introduction and Background

Short description:

Hi, I'm Tony Alicia. This is Authoring HTML in a JavaScript World. I teach on Udemy, Pluralsight, Teachable, and YouTube. Connect with me on my website at TonyAlicia.dev or find me on YouTube, Twitter. Learn about The Smythe Group at TheSmytheGroup.com.

Hi, I'm Tony Alicia. This is Authoring HTML in a JavaScript World. First, a little about me. You may find me teaching on Udemy, Pluralsight, Teachable, and YouTube and I work with a company called the Smythe Group. Now, if you'd like to connect, feel free to reach out. You can find me and my courses on my website at TonyAlicia.dev. Shoot me an email, find me on YouTube, Twitter. You can go to TheSmytheGroup.com to find out about how we help dev teams become their best selves and do their best work.

2. Authoring HTML in a JavaScript World

Short description:

But this talk is Authoring HTML in a JavaScript World. I'd like to challenge you to change your way of thinking, to change your approach to how you build your React components. Let's say you get a prototype. What's the first thing that goes through your head? What are the first steps in your mind as you imagine implementing the prototype in React? Let's start thinking about HTML first. What would happen if we thought about our HTML first and then started thinking about how to make the application work and the CSS comes along for the ride as we make it look like the prototype? The entire point of authoring our HTML is to choose our HTML elements according to the information and things that are happening on the page. Now let's talk about the benefits of authoring our HTML in a semantic way and what that really looks like. HTML authoring is a skill. And it's a very learnable skill.

But this talk is Authoring HTML in a JavaScript World. And all of us, all of you that are listening, you all spend your time in JavaScript. Whether we're writing TypeScript, whether we're dealing with databases, whether we're on the server, whether we're writing tests, our life revolves around JavaScript. It's a JavaScript world. And yet there's three legs of the stool when it comes to foundational web technologies, HTML, CSS, and JavaScript.

So in this talk, I'd like to challenge you to change your way of thinking, to change your approach to how you build your React components. What I mean by that is this. Let's say you get a prototype. This is a very simplistic example. But you get a prototype, perhaps from a designer, and now you have to implement it. What's the first thing that goes through your head? What are the first steps in your mind as you imagine implementing the prototype in React? Well, it may be that you start thinking about which will be components, how the component structure will be, what the CSS will be to make the actual website or web app look like a prototype. So really, mentally, we kind of start in the CSS world. How can I make it look like the prototype? And we start in the JS world. How can I make it work? How can I make the actual app do what the prototype says it should do? And then along the way, somewhere along the road, we put in some HTML. It really is a sort of structure, a scaffold, a skeleton on which to hang a JavaScript code and CSS. And if we're writing JSX, you might say, well, I'm not writing HTML. But really, we are, because they're both being converted into the DOM. And so ultimately to the user, it's the same as if we were writing HTML. So choosing our elements is something that happens along the way. I'd like to challenge you to change your mindset and instead think about HTML first. What would happen if we thought about our HTML first and then started thinking about how to make the application work and the CSS comes along for the ride as we make it look like the prototype? Again, if we're just looking at the prototype and we're thinking about the HTML, what we're actually thinking about is what is the meaning of each of these pieces of information that we see in the prototype. If we're thinking about HTML, we're thinking about semantics and the word semantic means having to do with meaning. The entire point of authoring our HTML, and we're going to introduce that phrase when we author our HTML, when we behave as HTML authors, meaning we're choosing our HTML elements according to the information and things that are happening on the page on the screen, then we're dealing with semantics. We're authoring in a semantic way.

Now I'd like to talk about the benefits of authoring our HTML in a semantic way and what that really looks like. For starters, let's talk about learnability. We're all trying to keep up with the latest things happening in the JavaScript world. But HTML is a skill. HTML authoring is a skill. And it's a very learnable skill.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

The Good, The Bad, and The Web Components
JSNation 2023JSNation 2023
29 min
The Good, The Bad, and The Web Components
Top Content
There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.
It's Time to De-Fragment the Web
React Day Berlin 2022React Day Berlin 2022
34 min
It's Time to De-Fragment the Web
Top Content
Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks: - Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library? - Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system? - Does your team build SDKs for web frameworks, and must manually re-write them for each framework? The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.
Web Components, Lit and Santa 🎅
JSNation Live 2021JSNation Live 2021
28 min
Web Components, Lit and Santa 🎅
Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅
Immutable Web Apps
JSNation 2022JSNation 2022
20 min
Immutable Web Apps
Resolving dependencies when they are all bundled together is easy. Resolving dependencies when they are in being loaded via script tags is much more challenging. The goal of this talk is to explain how Meltwater handles dependency resolution when building native Web Component based applications that rely on packages published by many different teams.
Web Components are awesome!
JSNation 2022JSNation 2022
10 min
Web Components are awesome!
Ever wondered how by placing "video" or "audio" into your HTML, you get a media player with controls included? Or how, depending on the type attribute, "input" can be a button, a place to enter text, select a date or file, color picker and more? What if you could create your own element? The answer: Web Components! 🤯 In this talk, we’ll take a look at what Web Components are, how to make one and include it into an application.
Let's talk about Web Components
React Advanced Conference 2021React Advanced Conference 2021
32 min
Let's talk about Web Components
Before the dawn of some of the most popular frameworks (read: React and Vue), there was Web components. Web Components take one of the best parts of these frameworks (reusable components) and combine it with the best parts of web development (native browser support and not needing to set up a build process). As if that's not enough, web components allow you use the same functions across any framework.If at this point, you're wondering "If web components are so awesome, why haven't I heard about them before?", then you're in luck because that's exactly what this talk is about.In this presentation, we'll take a look at what web components are, why web components are awesome, why web components can be a pain and how we can use web components both as a standalone tool and together with frameworks.

Workshops on related topic

Web Components in Action
JSNation Live 2021JSNation Live 2021
184 min
Web Components in Action
Workshop
Joren Broekema
Alex Korzhikov
2 authors
The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc.