loading...

JavaScript and manipulating the DOM

twitter logo github logo ・1 min read

This may sound like a silly question but I'm going to ask anyway because it's almost affecting my learning ability. :)

Why do we use JavaScript to change HTML and CSS elements in a webpage when we can just do that in HTML and CSS? As I'm learning JavaScript and changing elements in the DOM I'm asking myself why... why would you want to randomly change text color?

My idea is that they're event based changes and more for the interaction between user and webpage? Like in an image carousel, clicking the arrows would slide in a new image.. am I on the right track with understanding?

twitter logo DISCUSS (37)
markdown guide
 

Once the page loads, there is only so much you can do to meaningfully impact the interactions with pure HTML and CSS.

When I click the ❀️ button on this post, a couple things happen:

  • We send a browser request without reloading the page, all in JavaScript, to let the server know what I just did, and to add it to the database.
  • Assuming this is all successful, we need to add a new "success" state class to the element.

Some things can be done with pure CSS and HTML but it's always going to be limited. JavaScript is a full-on programming environment loaded into your browser. You can do basically anything, including updating the DOM to your hearts content.

 

We send a browser request without reloading the page

Ask yourself whether you really need to not reload the page -- and why. For shinyness? Oh, come on.

 

There are a number of reasons why a browser request is preferable to a page reload:

  • a reload can lead to a page flash (or worse). For micro-interactions, that would be very annoying
  • a reload causes substantially more network traffic (even if some resources can be fetched from the browser cache)
  • a reload recomposes/rebuilds the page from its resources (html, css, images, ...) and inherently causes a full redraw of the page, even if e.g. only the ❀️has changed
  • a reload discards the previous page, which means that those system resources need to be cleaned up, and that they remain unavailable until that has been done

Aside from those pragmatic reasons:

  • A reload does not respect separation of concerns, since you essentially have a god-method that Does All The Things(TM) rather than confining itself to the necessary scope (such as reacting to a ❀️click).

If you absolutely need any of those UX features, why don't you just write a desktop application instead?

From the point of view of the user of the UI: because I can read and interact with the application on different laptops, PCs, tablets and smartphones, and all I need is one ubiquitous kind of application (i.e. a web browser) and my login credentials.

From the point of view of the creator of the UI: because I can create an application that people can read and interact with on different laptops, PCs, tablets and smartphones, without me needing to make and maintain separate applications for all those types of hardware.

Cross-platform development exists - and targeting different operating systems is much less error-prone than targeting different web browsers. Heck, Firefox 62 renders stuff differently than Firefox 61! And this should be "easier" to do right?

Fair enough, but that such differences in rendering typically result in having an imperfect but quite usable web app on pretty much all modern browsers (unless you're doing really fancy things). So you immediately cast a very wide net.

For cross-platform (say the latest few Windows versions, the most prevalent linux distros, OSX and IOS, android - nothing exotic), you have to actively account for each of those groups, and make sure that executables or installers are available, including distributing updates. It's perfectly doable of course, but it's very much not in the same category of effort as a web app.

it's very much not in the same category of effort as a web app.

Because you'll have to adjust your "web app" twice a year because of moving standards while your desktop application can, in theory, still be used in ten years.

 

UX, submitting a raw POST request every time you clicked πŸ’– would be incredibly annoying and reset the scroll bar back to the top, among other things

It's not annoying, it's natural. There already is a better solution if you absolutely want that: write actual desktop applications...!

the browser is a desktop application. think of your web browser similar to a game launcher. bringing my code to you in a secure environment and with automatic updates.

Makes a lot of sense. That would almost be like a video game completely reloading every time the player makes a move.

The browser is a desktop application.

The browser is not an operating system.

But please humor me: how is a web browser, a glorified document viewer that only understands one scripting language which does not even have strong typing, a "secure environment"?

There are reasons why video games are usually running natively.

"secure environment" was referring to site isolation, requiring https for many APIs, not being able to access the user's local machine, etc.

"The browser is not an operating system" but it can be. and will be in the coming future. if not now. the web has evolved.

"glorified document viewer" the web has evolved. a lot. we've done a lot in the past 30 years. with the vast majority of that change in the past 5 or so actually.

"one scripting language" it's the language of the Web, and many many things compile to JavaScript. with more things every day (the most widely used high level programming language on the planet)

"does not even have strong typing" natively. yet. but many of the compile-to-JS languages do.

"reasons why video games are usually running natively" lack of certain networking protocols (recently added as WebSocket and WebRTC) and memory constraints (most browsers crash a page if it passes 1GB in a tab, but that could easily be changed or given as a permission to the user)

"secure environment" was referring to site isolation, requiring https for many APIs, not being able to access the user's local machine, etc.

Still notably less secure than your operating system's exploit mitigation techniques.

"The browser is not an operating system" but it can be.

It cannot, since it needs a kernel at the very least.

"glorified document viewer" the web has evolved. a lot.

That might sound pessimistic, but I'm willing to call it devolved instead. People abuse the web. A lot.

"one scripting language" it's the language of the Web

Just because something is the only choice, it is not a good choice.

"does not even have strong typing" natively. yet.

I see no sign of that ever changing.

but many of the compile-to-JS languages do.

Which is irrelevant as the browser will still only see the broken result.

most browsers crash a page if it passes 1GB in a tab

And you don't see a problem with "applications" requiring more than 1 GB of RAM? Because I do.

I think the user should have more control over what the browser allows pages to do but I do think that at the end of the day, if your computer can do it, the web should be able to do it too. and no i don't see a problem with pages using more that 1GB of RAM since many games use more than 1GB and i'd love for them to come to the web. the Web has more work to do to in regards to functionality and user control but if you think that web should only be used to pass files around then there isn't much I could say to convince you we're on a good road. however, I believe that the web is the best platform for application deployment ever made even though it wasn't originally made for that 30 years ago (and can still be used for open directories). many of the services we take for granted nowadays simply couldn't exist on the web back then because internet infrastructure did not have the bandwith to support the web as an application distribution platform. but that's changed since and the browsers are catching up.

if your computer can do it, the web should be able to do it too

If you buy a computer for nothing else but using the web, that might be fine. But I don't.

I think most people like the convenience of not having to install a desktop app for every single thing they use their computers for. The space alone on that would get kind of crazy. I use my computer for a lot and a lot of the time I have a web app open.

That's the good thing: Most things people need come preinstalled with their computers, even e-mail clients. What else? Office software? A one-time installation.

The space alone on that would get kind of crazy.

A funny claim, given that web-based software (running on a headless web browser), like Visual Studio Code and Slack, makes the largest downloads today. Good desktop software is notably smaller, faster and more secure than its web equivalents.

Bring one counter-example please.

People do a lot more on their computers than just microsoft office and default email. Sometimes it's just easier to open one desktop app (the browser) and do a lot from there. The average user doesn't really care much about technical specs, they just want convenience.

Out of curiosity, why are you anti web app?

The average user doesn't really care much about technical specs, they just want convenience.

Desktop applications are convenient.

why are you anti web app?

I even dislike the term "web app". The web is not an application platform, the browser is an application. You cannot run a web browser without installing a local piece of software - so why do you think every other piece of software needs to run inside it?

"Web applications" are:

  • much more insecure than desktop applications because a web browser is a huge security risk itself (check cvedetails.com) and malvertising (thus, JavaScript) is a giant danger
  • much slower than desktop applications because interpreted code running in a sandbox running in a virtual machine running on a web browser... you get the point
  • much more resource-hungry than desktop applications because interpreted code running in a sandbox running in a virtual machine running on a web browser... you get the point
  • much less flexible than desktop applications because you're bound to one dynamic language, one description language and one style language

Honestly, "web applications" are a thing for consumers. My mother would love them. Once you care what actually happens to your computer, you should be afraid of them.

Your mileage may (and obviously does) vary.

By using Markdown. I'm pretty sure that someone wrote a web app for that if you wish ...

Ok I didn't invent web apps, no need to get upset with me... but thanks for the link.

Well we could standardize a file format for making desktop applications using HTML, CSS, and JS so that you'd just run the file with the browser of your choice, but then at that point you're making an open source jar file (which could be a good idea if done right)

those programs are big because they're packaging the whole headless browser with them which is unnecessary.

And still slow and insecure, even without it...

You would notice if I was upset ... :-)

However, 1:30 AM here. Good night. ;-)

However, 1:30 AM here. Good night. ;-)

Good night. lol, had to.

 

Thanks Ben! I guess it's about being patient, learning, and then seeing what it can do. I'm such a "why" person lol. Which I guess is what will make me a great developer.

 

Yeah, asking why a lot will indeed make you great.

But it's also a complicated craft, and the why questions go deeper and deeper and deeper, don't be afraid to always just do and let the why figure itself out as you go.

True! I just got through learning JavaScript basics so there's definitely a lot I still have to learn about it. Any tips on practicing the basics? Not quite sure what to do in that aspect. I've created some very simple things like "what's the biggest number" that my kids actually like messing around with, I've done a simple password validation function... things like that.

I have gotten a ton of mileage out of seeing things on posts or on sites or just mentioned and going "I wonder if I can do that." Even if it's a huge fail -- you can learn a ton by trying. I know I also learned a ton reinventing a billion wheels. So sort of -- how to do things super manually. How to copy an entire HTML element "by hand" with JS -- don't use any packages or helpers, just builtin browser APIs. How can you use JS to get that element, all in contents and everything, to another spot in the page? that kind of thing.

I didn't even know it was possible to recreate just in JavaScript. It's definitely a powerful language. Thanks!

You can do so many different things with the same code: desktop app, chat bot, website, Excel addin, web API... Such a wonderful gain in efficiency, collaboration and knowledge sharing that any inefficiencies of the actual code are really insignificant in comparison.

Classic DEV Post from May 29 '19

Is generalization killing creativity in the software industry?

As software gets more and more integrated into our lives, the industrialization of its crafting process becomes inevitable. But the over-generalization of software engineering can be crushing the creative side of programming.

Nicole Saunders πŸ’»πŸŒΉ profile image
Front end web developer. Striving to be a dev queen!

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❀️