Question to all JS Frontend Devs: What light and performant library can you recommend me today?
I'm a C++ dev who is a bit anxious about performance, load times etc. and before I stuck my nose into vanilla js, maybe there is something better/faster. I'm a total frontend noob, e.g. I heard that html tables aren't a thing anymore and that I should use divs?
My task is quite simple, I want to give the users the ability to press some buttons and drag and drop stuff around instead of modifying the URL per hand :/
So if someone could point me in the right direction, that would be awesome!

@Consolelog
Maybe I should have explained it a bit better: I display multiple tables and the ordering depends on the URL arguments (like myurl.com/table1/table3/table2/ etc). I thought it would be cool, if you could change the order of the tables by using drag & drop, instead of fiddling with the url.

@al3xst I use react which is fast and there are plugins for drag and drop and some that can also update the url without reloading so if you do reload you keep your changes.

But make sure you know the basics so you do not get all dependent on a library.

If you already have server rendered html and do not plan to rebuild it a I would use jquery, its not so hot but for changing an already existing page with minimum changes its pretty good and it also have drag and drop plugins.

I use Vue. But as the others said: You can't really use a JS framework without knowing vanilla JS.

Frontend devs don't concern themselves with petty things such as performance unless there is a library that will do it for them.

For the js just learn a lot of the vanilla before going into any frameworks like other said. Even I still uses jquery and no react or vur yet, but I still managed just fine.

For the layout, you no longer need table, learn a proper vanilla css and you probably don’t really need any of css framework. Try searching flexbox or grid for the layout while making sure to understand all of the basics.

And if it can be done by css then skip the javascript if possible

Thank you all very much for the feedback! I'll dig into vanilla js and freshen up my css/html knowledge for now than!

Vanilla js then start with Vue.js

on the topic of tables: If it actually *is* tabular data, like you mentioned in a comment, *do* use <table>s, that's what they're for. Just don't use them for layout.

(Main reason, afaik, is to tell everything non-visual (screenreaders, search bots, ...) what stuff is meant to be, as they can't judge by what you tweaked it to look like. I read, for example, that screenreaders repeat the first line, so that one knows what column one is actually in, which might turn out to be the menu, if you use <table>s for layout.)

EDIT:

on the topic of performance: I recall seeing some measurements indicating that using vanilla js tends to be 2-10 times faster than e.g. jquery. If you want to do really heavy computations, you can use Emscripten, which compiles C (and others) to WebAssembly, a binary format, which is said to be about half as fast as a native implementation. Works in recent browsers only however.

@-xlf (Can't edit anymore)

Also, much stuff jquery started out with is now built-in, also it fixes some quirks of older browsers, but if you don't need to support ie8, you should definitely be fine. (Probably even if.)

To clarify the WebAssembly thing: half as fast as native means a lot faster than js (or any js-library/framework).

Also, if you haven't heard about it: The Mozilla docs are great for vanilla front-end. (developer.mozilla.org)

@-xlf (Sorry for spamming comments, but it seems like its always taking me 6 minutes to edit)

looks like there is a vanilla Drag-and-Drop API: https://developer.mozilla.org/en-US...

(one used to need a library/self-coded solution for that, I think)

Doesn't work on mobile, apparently: https://caniuse.com/#feat=dragndrop , though the site links a polyfill. (only one feature, thus lighter than a whole framework)

if performance is your concern, you could use Rust with js bindings localy with web assembly.
https://hacks.mozilla.org/2018/04/...

or c++
https://github.com/leaningtech/...

@-xlf there is and for the mobile you could make click event to trigger the browse file

Stupid question: how could a JavaScript framework be faster than vanilla js?

@Krokoklemme by leveraging webassembly

@Krokoklemme a framework might not be able to be faster but for example react uses a lot of technics to avoid any expensive operations.

Rolling your own , you will probably not spend months trying to wrangle every ounce of performance out of it, instead focusing on your functionality.

So using a framework can give you performance you would otherwise not have time for.

Thanks @heyheni and @Voxera for the info :)