Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A little bit of plain JavaScript can do a lot

jvns.ca

Post reply on HN
Print view View original

81–90 of 206 posts

Re: A little bit of plain JavaScript can do a lot

#81

Post by yesenadam »

ehnto wrote: post #76
yesenadam wrote: post #70

When starting to learn/write JS, I found a few of these basic name-shortening functions from HN's own JS very useful, and well-named: function $(id) { return document.getElementById(id); } function byClass (el, cl) { return el ? el.getElementsByClassName(cl) : [] } function byTag (el, tg) { return el ? el.getElementsByTagName(tg) : [] } function allof (cl) { return byClass(document, cl) } function hasClass (el, cl) {…

The class related functions have been made native by the classList property of elements. element.classList.has('someClass') //true if present element.classList.add('someClass') //add to element element.classList.remove('someClass') //remove from element element.classList.toggle('someClass') //remove if present, add if not present I would also argue element.querySelector and element.querySelectorAll are plenty shortha…

Thanks you! I was hoping someone would spell out the "changes from the last 5 years" mentioned elsewhere.

Re: A little bit of plain JavaScript can do a lot

#82

Post by andai »

anonytrary wrote: post #79

Here's what a "little bit" of JavaScript can't do: 1. Manage subtle browser differences 2. Store and manage reactive state 3. Manage declarative updates You can build a simplified version of React in under 100 lines of code, but that probably won't take care of subtle browser differences. A little bit of JavaScript can do a lot, but it can't do everything you need these days.

Does anyone know a 100 line react clone or tutorial? That sounds very educational.

Re: A little bit of plain JavaScript can do a lot

#83

Post by woutr_be »

anonytrary wrote: post #79

Here's what a "little bit" of JavaScript can't do: 1. Manage subtle browser differences 2. Store and manage reactive state 3. Manage declarative updates You can build a simplified version of React in under 100 lines of code, but that probably won't take care of subtle browser differences. A little bit of JavaScript can do a lot, but it can't do everything you need these days.

I don’t think the author is arguing that you have to replace your React applications with vanilla JS, but instead of using React by default, you could consider using vanilla JS.

The tree things you mentioned might be important to you for a specific project, but these are not requirements for every project. So instead, do what makes sense to you. And remember that you don’t always need a framework to achieve what you actually need.

Re: A little bit of plain JavaScript can do a lot

#84

Post by orange8 »

bbx wrote: post #60

Of course you can do quite a bit with JS. Some of the projects I’ve made You can swap CSS classes in JS. But how do you know which classes are available? You can target HTML elements in JS. But how do you know which elements are available? You can set “.innerHTML”. But how do you save the state of the application? As soon as the app grows a little bit in complexity, you’ll end up building functions to keep track of t…

> You can swap CSS classes in JS. But how do you know which classes are available?

> You can target HTML elements in JS. But how do you know which elements are available?

This assumes someone else is creating the CSS and HTML for you? Have rules or coding and naming conventions like BEM for example. That's what a framework basically is, a set of rules and conventions about how to structure an App. What you need is proper architecture, regardless of whether or not it is based on a popular framework. That's how the popular frameworks started out to begin with.

Re: A little bit of plain JavaScript can do a lot

#85

Post by felixfbecker »

austincheney wrote: post #50
wolfgang42 wrote: post #7

I agree about the nuisance of creating DOM elements. innerHTML is OK if you’re doing static content, but for anything that needs to be dynamic (untrusted input, event handlers, etc.) I have a little tiny helper library that I carry around in my head and write into projects that need it: const $T = text => document.createTextNode(text) function $E(tag, props, kids) { const elem = document.createElement(tag) for (const…

I also have custom DOM helpers I carry around with me: * getNodesByType - allows me to get things like attributes, text, and comments directly * getAncestor - allows me to get a specified element somewhere between a target element and the document.documentElement

getAncestor is built-in: element.closest() :)

Re: A little bit of plain JavaScript can do a lot

#86

Post by ehnto »

bbx wrote: post #60

Of course you can do quite a bit with JS. Some of the projects I’ve made You can swap CSS classes in JS. But how do you know which classes are available? You can target HTML elements in JS. But how do you know which elements are available? You can set “.innerHTML”. But how do you save the state of the application? As soon as the app grows a little bit in complexity, you’ll end up building functions to keep track of t…

There are other frameworks that do favour a "drop in" style of development, with native Web Components being one of them. I used Riot for this for a while, and tried native Web Components as well.

My current approach for zero dependency/build, one off UI components is:

    
        ...more HTML...
        Click Me
        
            (function() {
                var component = document.currentScript.parentNode;
                var props = component.dataset.props;
                var button = component.querySelector('.some-component__button');
                 
                button.addEventListener('click', function(){
                    ...doStuff...
                });
             })();
If it needs a global state, or is part of a larger more dynamic UI I'll start looking at a framework. But for an otherwise static website, it's so much easier to do it that way than it is to introduce an entire framework and build pipeline in order to do a handful of JS components. It's also a somewhat defensive approach, useful in legacy applications with lots of hodge podge JS going on. Generally speaking, you don't cause any problems, and don't encounter any conflicts.

I used to have a class based/web components way to do this, but I don't even bother with that anymore. You don't gain anything from introducing complexity in this circumstance.

Re: A little bit of plain JavaScript can do a lot

#87

Post by hexaga »

areoform wrote: post #49
warent wrote: post #34

Earlier quoted context omitted.

Its just a helper function to create an element, assign it some properties, and append children elements. Not very much unlike React in the API (emphasis on "interface") but of course the inner workings is as minimal as possible.

Could you explain how it does this?

I don't know much js, but it seems fairly straightforward. Here's some comments:

    // create an element with 'tag'
    const elem = document.createElement(tag)

    // copy properties into the new element one at a time
    for (const k in props) {
        elem[k] = props[k]
    }

    // append child elements one at a time
    for (const kid of kids) {
        elem.appendChild(kid)
    }

    // and that's it
    return elem
Applied recursively, you can make dom elements with very little boilerplate.

Re: A little bit of plain JavaScript can do a lot

#88

Post by rasz »

ehnto wrote: post #76
yesenadam wrote: post #70

When starting to learn/write JS, I found a few of these basic name-shortening functions from HN's own JS very useful, and well-named: function $(id) { return document.getElementById(id); } function byClass (el, cl) { return el ? el.getElementsByClassName(cl) : [] } function byTag (el, tg) { return el ? el.getElementsByTagName(tg) : [] } function allof (cl) { return byClass(document, cl) } function hasClass (el, cl) {…

The class related functions have been made native by the classList property of elements. element.classList.has('someClass') //true if present element.classList.add('someClass') //add to element element.classList.remove('someClass') //remove from element element.classList.toggle('someClass') //remove if present, add if not present I would also argue element.querySelector and element.querySelectorAll are plenty shortha…

querySelectorAll is a lot slower than old school functions. You would be tempted to say who cares, but then you load Gmail and wait 2 seconds for UI to render.

Re: A little bit of plain JavaScript can do a lot

#89

Post by z3t4 »

Never set .innerHTML ! document.createElement is very tedious. But you can hide them inside pure functions that returns your component. You could for example put the confetti button example into a function and whenever you want a confetti buttton const button = confettiButton("hurray"); body.appendChild(button); Or you could make a class and extend the Button into a confetti button.

You can then use innerText to change values. And use other DOM methods instead of redoing the innetHTML. When using function abstractions the DOM updates can be private, and you don't have to worry about innerHTML elsewhere overwriting your changes.

Basically React was invented to overcome spaghetti innerHTML, but you can solve the problem with vanilla JS too, just stop thinking about the DOM as HTML, think of it as a tree.

Re: A little bit of plain JavaScript can do a lot

#90

Post by toshk »

wolfgang42 wrote: post #7

I agree about the nuisance of creating DOM elements. innerHTML is OK if you’re doing static content, but for anything that needs to be dynamic (untrusted input, event handlers, etc.) I have a little tiny helper library that I carry around in my head and write into projects that need it: const $T = text => document.createTextNode(text) function $E(tag, props, kids) { const elem = document.createElement(tag) for (const…

To not need many custom helper functions like this I still prefer to throw in jQuery for "small" more serverside oriented projects. It gives a well documented and standardized API.
Post reply on HN