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

91–100 of 206 posts

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

#91

Post by onion2k »

userbinator wrote: post #24

I’ve never worked as a professional frontend developer, so even though I’ve been writing HTML/CSS/JS for 15 years for little side projects, all of the projects have been pretty small I'm pretty much the same, and one thing I've noticed which continues to both amuse and sadden me is the fact that those whose main focus is not web development often make better sites/pages than "professional" developers. I once rewrote,…

The only way your comparison works is if your point is "Framework driven apps are never good". I've lost count of the number of times I've pointed out that a good vanilla JS is always going to be better than a bad framework driven app. One is a good app and the other is a bad app. It's obvious, and therefore not a useful comparison.

The valid, useful test is whether or not a good vanilla JS app can be better than a good framework driven app.

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

#92

Post by dmitriid »

runarberg wrote: post #39
dmitriid wrote: post #18

Earlier quoted context omitted.

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 operat…

You just spent three paragraphs describing how NodeList is different, including a reference to a non-existent operator. Nice.

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

#93

Post by irrational »

I’ve been doing web development for more than 23 years. I’ve pretty much stuck to vanilla JS that entire time (though I did use jquery during the worse of the browser incompatibility years). I keep meaning to learn some of the newer libraries but never get around to it since vanilla JS does everything I want it to do and I already know it. I wonder if I would be as surprised by what libraries like Vue can do as this person is about vanilla JS.

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

#94

Post by rimliu »

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"

And now we witness everyday spaghetti code written on the top of some framework and each noodle is wrapped five times in a needless abstraction.

There is nothing preventing you to write nice and clean code in plain JS.

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

#95

Post by z3t4 »

triceratops wrote: post #30
userbinator wrote: post #24

I’ve never worked as a professional frontend developer, so even though I’ve been writing HTML/CSS/JS for 15 years for little side projects, all of the projects have been pretty small I'm pretty much the same, and one thing I've noticed which continues to both amuse and sadden me is the fact that those whose main focus is not web development often make better sites/pages than "professional" developers. I once rewrote,…

I'm sorry to say this, but it's not a problem with the newfangled stuff. I think you just don't work with very good frontend devs. Which isn't surprising honestly - it has the lowest barrier for entry of any programming specialization (I started there myself).

I think its a problem with selling. People want to sell. So out with the old, in with the new. Lets revive some of the trends from the 70's. Or lets rewrite all this code to use classes. Sell more books and courses. Hate on all solutions that dont require out products. Are you still writing plain old JS? In order to be pro you need to use these frameworks... Its all marketing. Trying to argue is like standing on a train track and argue a train to stop. The train will just continue. And plenty of people wanting to be on the hype train.

Second problem is that buyers are not result focused. Few companies understand that they pay for these cool frameworks every time a user visit their website. They pay with 15% less conversion, or lower user satisfaction.

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

#96

Post by rimliu »

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…

If someone uses framework because they would write spaghetti code without it, I guarantee that they still write spaghetti code, just served in the framework provided boxes.

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

#97

Post by wruza »

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…

You may be interested in re:dom then. It does no “vdom”, “mount/components” part is optional, and its functionality is aligned with $E, with some extensions. I did not use it in my projects yet, but it worked pretty well in experiments.

https://redom.js.org/#elements

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

#98

Post by onion2k »

irrational wrote: post #93

I’ve been doing web development for more than 23 years. I’ve pretty much stuck to vanilla JS that entire time (though I did use jquery during the worse of the browser incompatibility years). I keep meaning to learn some of the newer libraries but never get around to it since vanilla JS does everything I want it to do and I already know it. I wonder if I would be as surprised by what libraries like Vue can do as this…

Not a Vue example but have a look at https://github.com/drcmda/reactanoid

It's an Arkanoid clone (bat and ball game) written in React, with react-three-fibre for WebGL, zustand for state management, and use-cannon for physics. The full version is about 250 lines and there's also a simplified version that weighs in at 60 lines (not including the library code obviously). It runs at a solid 60FPS on a very basic laptop.

Doing the same thing in vanilla JS, using the same libraries (or alternatives) would be a lot more work, and would end up with the exact same result. That's the point with a well written framework-driven app - when you use something like React or Vue you should be aiming to get the same end result as a vanilla JS app, but with much less effort. The cost to the user should really only be a slightly bigger download.

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

#99

Post by PetahNZ »

goranmoomin wrote: post #66
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…

A bit more minified/modern version of this that I'm using: function $e(t='div',p={},c=[]){ let el=document.createElement(t); Object.assign(el,p); el.append(...c); return el; } var $t=document.createTextNode.bind(document); That's 173 bytes not minified, might be useful for someone. Interestingly, the function names are exactly the same - I guess people think similarly :-)

Isn't clarity better than bytes. We can always running through a minifier at build time.

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

#100

Post by pcr910303 »

PetahNZ wrote: post #99
goranmoomin wrote: post #66

Earlier quoted context omitted.

A bit more minified/modern version of this that I'm using: function $e(t='div',p={},c=[]){ let el=document.createElement(t); Object.assign(el,p); el.append(...c); return el; } var $t=document.createTextNode.bind(document); That's 173 bytes not minified, might be useful for someone. Interestingly, the function names are exactly the same - I guess people think similarly :-)

Isn't clarity better than bytes. We can always running through a minifier at build time.

A minifier is better, but I find that snippet of code clear enough for personal use (el is element, t is tag, p is props, and c is children).

The small bytes also mean that for simple sites I can just copy paste it before transitioning to a real setup.

Post reply on HN