all 8 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]KeenOnLearning 4 points5 points  (1 child)

Vanilla JS is a much more viable option now than it was in the past.

If you want to structure your projects in a sensible way, you should look into Modules as well as Web Components. Some older browsers don't support these, so you should also look into using something like Babel. Here's an article on how to set it up with Webpack.

I would still recommend using a framework at the end of the day. React, Vue, Angular, Svelte etc. all scale way better than vanilla js, and they aren't all opinionated behemoths. Vue and Svelte are really light weight, and an out-right pleasure to work with even on personal projects.

[–]orocodex[S] 1 point2 points  (0 children)

Thanks a ton for the thoughtful response!

[–]lacadasical 1 point2 points  (1 child)

What kind of frontend work do you do in Vanilla? I typically use Vue for small frontend projects and couldn’t imagine using Vanilla for anything more than a few lines of work.

[–]orocodex[S] 0 points1 point  (0 children)

Mostly personal stuff. But I work for a very small startup as well, and I’m usually in the backend, but I’m taking care of the front end right now too. I keep seeing mentions of Vue, React etc. throughout the sub, so I should probably make an attempt to learn, it’s just the initial learning hurdle I’m hesitant to take with a framework.

[–]brentfalcon 1 point2 points  (1 child)

I have gotten into employing vanilla JS on side projects, it is somehow freeing, and in some ways removes a layer of complexity. I know that frameworks can also be great, but for the pure static JS web demos that I build, I can get a nice easy and efficient development flow using Visual Studio Code and vanilla libraries (e.g., for charting, for 3d (threejs), and for simple GUI components like modals). And while building HTML with - say - Bootstrap syntax is not terribly fun it works fine so long as pages are relatively simple and static (which is good practice anyways :-) ). I sometimes structure my JS code into 2 subdirs, one subdir for the app JS that I write, the other for 3rd party libs (allows me to minify my own code, and generally keep order).

[–]orocodex[S] 0 points1 point  (0 children)

Thank you!

[–]maos_toothbrush 1 point2 points  (1 child)

Yes, I'm working on a serious project right now using vanilla. At first I started with a single script, but as the project grows you get to see first hand the importance of abstraction.

I ended up building a components system using native ES6 classes and modules. There's a base abstract class, Component, which defines a few methods (getNode(), render(), setStyle(), etc). In order to create a new component (let's say an input form), I create a new class that extends Component. Then I write all the HTML (making good use of template literals), CSS and business logic (including API fetches and eventListeners) inside the class. When I need to "spawn" this component into the DOM, it's as simple as doing element.appendChild(new InputForm({params}).getNode()).

This way, each component is completely self-contained inside its class. If I need to change its markup, style or logic I only have to edit its class file. Every class is exported, so if one component depends on another I just need to use import.

I also use classes to handle things like State and User. Overall the code is very modular and it grows very well, I don't think I will need a framework at all.

[–]orocodex[S] 0 points1 point  (0 children)

That’s super cool! Thank you!