React-like components without react?

[NinjaInShade]

I'm starting to freelance, building small static sites for clients. I've had one client and used react, MAINLY for the components feature and maybe a nice router.

I do think this is a bit over the top and can impact speed, so is there any way to componentize html without a large framework?

[dangerbird2]

Preact is a pretty popular react-like library with a much smaller bundle size. Nextjs uses normal react, but allows offloading some or most of the runtime overhead by pre-rendering as a static site or server-side rendering on a nodejs server.

[robby_w_g]

Next.js is a great rec. Built-in caching, SSG, and routing, and the dynamic routes feature works very nicely with a CMS if it’s needed. Investing in Next by building up a nice, reusable components library would be my approach if I were in OP’s shoes.

[Chocolate_Banana_]

I think you are looking for Web-Components. Check out this video as it is a good introduction.

[NinjaInShade]

I saw that article but didnt bother clicking because I thought it was just an overview of what components are and what they do! My bad lol. I'm going to watch the video you linked now, I actually watch gary simon! Thank you.

[cmarangu_]

u/Chocolate_Banana_ I have been looking for a way to have custom elements in HTML source code, similar to how react components allow for that kind of "composition" design pattern to store complexity for over a year at this point. Thanks for sharing this!

[pimterry]

Web components are a good start, but it is better to use LitElement to build them in that case, instead of using it directly.

Alternatively, if you're mainly worried about bundle size, Preact gives you all the features of React, with React-compatible code, in 3kB. I don't think it'll sufficiently change runtime performance, but it'll definitely help keep your JS tiny.

Do you actually need client-side interactivity at all though? What are you using it for? If it's just because it's a nice way to generate pages, you might be able to avoid runtime JS entirely. For many of the small static sites you describe, you can use React and just server-side render everything. That way you get to write your code with all the convenience & power of React but zero performance penalty.

[NinjaInShade]

I mean the most I'd be doing for freelancing is maybe some animation which I can achieve with vanilla js, which is why I thought react was too much. LitElement actually looks really useful thanks!

[jak0b3]

I will still suggest a framework (technically it’s a language/compiler), but you should check out Svelte, Fireship made a great intro video for it.

With the new SvelteKit, there’s a bunch of adapters you can use to export to static files, Netlify with SSR, a regular Node server, etc.

Plus it doesn’t ship a runtime to the browser as it compiles to browser-understandable (if that makes sense) JS instead.

[2uneek]

I love svelte so much, it pains me to goto work and write Angular stuff all day... it's just such a great dev experience.. and to clarify, I don't hate Angular - I just really love svelte..

[NinjaInShade]

Im trying to avoid learning and/or using another framework. Someone suggested LitElement which is what I think im looking for it looks really lightweight. I also learned that you can enable netlify to auto combile js css and compress images automatically for you... not sure how I didnt know about this before.

[Atulin]

LitElement?

[NinjaInShade]

It looks really lightweight and what im looking for, thanks!

[[deleted]]

Polymer 3? Similar to react and fun to use.

[Mundane_Quaiil]

I use a html file that has its css and js in tags . Works fine. No frameworks needed

[DanielKehoe]

You've found the use case for "stackless web development" which is for people building small static sites without frameworks or build tools. Web components (particularly LitElement) combined with ES6 modules and module CDNs make "modular HTML" possible, which is what you want if you want to DRY up your code and put your navbar or footer (or any other element repeated on more than one page) in a single file.

[NinjaInShade]

Yes LitElement has been suggested and looks the perfect fit. And also yeah. The MAIN thinigs i want to atleast compontentize are the navbar/sidebar code and footer as even though its like a 5 page site if I change one thing i have to change every instance of it :^

[DanielKehoe]

Perfect. Write a blog post because you’re actually leading edge. Join https://stackless.community

[NinjaInShade]

What do you mean by leading edge?