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

31–40 of 206 posts

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

#31

Post by triceratops »

andrewstuart wrote: post #28

I'm an experienced React developer. I wanted to try out writing a plain vanilla JavaScript application - I enjoy plain JavaScript, it feels close to the metal. It wasn't long before I was craving an application framework that allowed me to cleanly organise and structure my application instead of it rapidly becoming a spaghetti. I also craved the ability to write small simple functions for making components. And I wan…

Pretty much this. I knew all of the things she wrote about but all I could think was "I can't imagine writing foo.classList.add and remove 100 times. That's going to create some major spaghetti code once that project grows beyond a couple of pages"

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

#32

Post by [deleted] »

triceratops wrote: post #31
andrewstuart wrote: post #28

I'm an experienced React developer. I wanted to try out writing a plain vanilla JavaScript application - I enjoy plain JavaScript, it feels close to the metal. It wasn't long before I was craving an application framework that allowed me to cleanly organise and structure my application instead of it rapidly becoming a spaghetti. I also craved the ability to write small simple functions for making components. And I wan…

Pretty much this. I knew all of the things she wrote about but all I could think was "I can't imagine writing foo.classList.add and remove 100 times. That's going to create some major spaghetti code once that project grows beyond a couple of pages"

[deleted]

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

#33

Post by bitwize »

monoideism wrote: post #12
identity0 wrote: post #5

It’s a little funny seeing vue/angular/react/whatever people discover vanilla JS. I thought classList, innerHTML, and querySelectorAll were all extremely common knowledge.

If I'm not mistaken, she's a systems programmer. More low-level stuff. She's definitely not a frontend/React/vue.js dev, as she says in the article. She's written some excellent articles on lower-level programming. But I agree that VanillaJS is not appreciated by a large number of web developers.

That's because in order to build anything of any remote sophistication, you need a framework, otherwise you are committing to maintaining an unmaintainable spaghetti mess. Just like nobody actually built Windows applications with just the Windows API -- they all used frameworks like MFC or reimplemented those frameworks in-house.

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

#34

Post by warent »

ShamelessC wrote: post #22
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…

Would you mind explaining what this does?

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.

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

#35

Post by mbrock »

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…

Funny to see because I do the exact same thing down to the parameter names, almost token-by-token identical. I usually just name the function "tag" though.

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

#36

Post by mbrock »

fiddlerwoaroof wrote: post #19
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…

Using tagged template literals the way lit-html does is the nicest JSX-substitute I’ve seen: https://github.com/Polymer/lit-html

It's pretty nice but doesn't play so nicely with editor indenting modes and stuff like that, so there are some reasons to use normal JavaScript function calls instead.

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

#37

Post by akira2501 »

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…

Instead of the loop, you can just use: Object.assign(elem, props). I found I wanted a more data-driven style that matched the element types themselves, so I use the somewhat more cumbersome:

        // data driven HTMLElement creation                                                                                                                     
        var $element = function(type, p={}) {
                let h, elem = document.createElement(type);

                if (!p || (typeof(p) !== "object")) {
                        elem.innerHTML = p || '';
                        return(elem);
                }

                h = p.attributes; delete p.attributes; if (h) for (let e of Object.entries(h)) { elem.setAttribute(e[0],e[1]) }
                h = p.classList;  delete p.classList;  if (h) for (let c of h) { elem.classList.add(c) }
                h = p.dataset;    delete p.dataset;    if (h) Object.assign(elem.dataset, h);
                h = p.style;      delete p.style;      if (h) Object.assign(elem.style,   h);
                h = p.innerHTML;  delete p.innerHTML;  if (h) elem.innerHTML = h;
                h = p.children;   delete p.children;   if (h) for (let ch of h) { if (ch) elem.appendChild(ch) }
                h = p.parentNode; delete p.parentNode; if (h) h.appendChild(elem);
                h = p.event;      delete p.event;      if (h) for (let e of Object.entries(h)) { elem.addEventListener(e[0],e[1]) }

                return(Object.assign(elem, p));
        };

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

#38

Post by blackrock »

gear54rus wrote: post #27
blackrock wrote: post #20

Instead of HTML, can’t JavaScript just be used to paint the browser canvas? You can create your text boxes, your drop downs, buttons, etc., everything that makes it a GUI application. Then you fetch your data, per the page you display, via JSON, and fill in the fields. The initial JavaScript download is heavy, but the normal usage of the web application should be quicker, as you’re only fetching the relevant data to…

You described an SPA. Fetch relevant data and render to controls. Not sure why we need canvas for that.

You are correct. I just inadvertently re-invented React.

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

#39

Post by runarberg »

dmitriid wrote: post #18
dhritzkiv wrote: post #2

More specifically, how JavaScript can do a lot in browser by interacting through the DOM API. The modernization of the DOM API in the last 5 years has done a lot to remove the need for jQuery et al, and has made building the View part of JavaScript apps much more frictionless.

You still end up re-implementing half of jQuery. Because element creation is just as much passion as it was in 1999. Because useful functions are limited or stunted compared to jQuery counterparts (querySelectorAll returns a weird object instead of an array and throws exceptions if you as as much as as look at it funny, etc.).

Either iterate through the `NodeList` with a `for ... of` loop or a `.forEach` method, or convert it to an array using `Array.from()` or `[...nodeList]`.

`NodeList` can be a live list (not `querySelectorAll` though) which has some benefits over arrays.

`NodeList` also implements `Symbol.iterator` so you can use your favorite iterator library if you need to map, filter or reduce it. And with the future pipeline operator, you’ll really don’t see a different between a standard array and a fancy structure like `NodeList`.

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

#40

Post by blackrock »

anonytrary wrote: post #23
blackrock wrote: post #20

Instead of HTML, can’t JavaScript just be used to paint the browser canvas? You can create your text boxes, your drop downs, buttons, etc., everything that makes it a GUI application. Then you fetch your data, per the page you display, via JSON, and fill in the fields. The initial JavaScript download is heavy, but the normal usage of the web application should be quicker, as you’re only fetching the relevant data to…

I think you just described the browser. While there are some efforts to do canvas-only rendering in JS, they aren't mature and are meant for specific use-cases like game boards and stock charts. For a typical website, this approach would likely have negative implications for your site's accessibility and usability; the site would also be harder to index.

That’s correct. I was thinking more along the lines of video games and interactive stock charts. But as an easier way to develop GUI applications via JavaScript.

Perhaps where the widget definitions are described via an easier, LISP like syntax, and rendered by the Framework. Kind of like Emacs Lisp.

Actually, it might have been amazing if the original Netscape browser shipped with a Emacs Lisp like scripting tool to begin with. But instead, we got JavaScript.

Post reply on HN