The dev.to web application has been built on "vanilla" JavaScript for performance purposes specific to its architecture/tradeoffs, so we have not made a lot of use of libraries. But it's growing to become a sometimes-complicated app and some of the client code gets a bit spaghetti-like.
We are still going to render the core experience from the server, but interactive components on the site that are handled on the client like the follow buttons should probably be handled by a state-driven framework like React, Angular, Vue, what have you.
PreactJS is a 3kb view library meant to be a way more economical alternative to React and I think it's the right choice for us. We have experience with React on the team and it seems like a pretty clean way to handle our concerns.
Does anyone have thoughts on the matter, or know of any other libraries or blog posts we should check out that could help with this choice?
Top comments (48)
I'm currently working with Preact / Preact CLI on a project. The experience has been very positive. Having access to the React ecosystem is a huge win.
tai mu origin mu mobile lau.
While I prefer Vue, if your team will have the easiest time moving to Preact, then that counts for something.
Personally, the pace at which Vue is improving, and the official libraries like Vue Router, Vuex, makes Vue all the more attractive.
But again, all things being equal, sometimes the best tool is the one you know the best.
This is not really an impending move, so I haven't even consulted the team yet. There are more React-knowing folks on the team. I have a cursory understanding of Vue, but would have to do more research. As an outsider, I haven't had an aha moment with Vue but from what I can see, we don't really need router/state management things. We don't do any client-side routing and what I really want is the ability to make small apps-within-the-app that are pretty self-contained.
@pandyzhao you've used Vue, right?
I haven't actually used Vue; my coding bootcamp recently switched to Vue, but I finished being a TA before that happened.
Most of my framework experience is with Angular 1 and 2, but I'm indifferent to it. Happy to try out Vue.
Okay cool. Feel free to give it some thought and let me know based on what our constraints are. My gut is that it's not really meant for our type of app.
I think VueJS works great for either SPA or small features within a HTML page. You don't even need to have a complicated WebPack setup. You can import the library and start coding with no-configuration, and in ES5. You can progressively replace the vanilla js with VueJs components.
The same is true of preact. One line of JS pulls it in from pika
Vue is very self contained. It aims to be very easy to adopt in increments.
Laracasts offers a free series on Vue, and from a quick watch, you'll see how easy it is to get it working in small chunks.
And if you'll forgive the self-promotion, I have a few tutorials on Medium with some CodePens you can look at.
medium.com/vue-by-example
I've worked with Vue, and it's awesome. I've never worked with react though.
However, since you mentioned the
3kbfile-size and the fact that your team knows react, +1 for Preact πPreactJS is a fun choice. I'd say go with it. βοΈ Preact core team is also very helpful for this kind of stuff. π―
Or at least give it a Vue π
How about looking at Polymer 2.0 instead? It it built on web standards, it is fast, efficient and you can create nice reusable components with it.
Web components will work nicely together with preact so that is a good way to go too.
This is a good thought. I sometimes forget Polymer exists, but I definitely need to introduce this into our discussion.
Lots of people tend to forget Polymer exists - but I think it is built precisely to fit your case.
You may want to check Inferno too, it is faster than Preact.
Cool, I'll check it out. Thanks.
Inferno is all about performance. FB took notice so much, that the React team hired the creator of Inferno. I believe the bundle is smaller than React, but I think in terms of bundle size, Preact comes on top. the API is a drop in replacement for React 15, but for Fiber (React 16), as far as I know they are not compatible in some respects, e.g. Portals, Fragments. See github.com/developit/preact-compat....
If you're going to use it for follow buttons etc., I think it's a great choice.
No, we are explicitly not doing this. We plan to keep our basic Rails views for most of the rendered page, Preact will be responsible for rendering things like follow buttons, like buttons, personal extra data on the page, etc.
Why not use a second Node server just for SSR? That's what I'm doing. My API is written in Haskell, but I also have a Node server that prerenders HTML for the client
Isn't programming evey view twice a whole lot more work?
With docker, setting up another container you can route to is rather easy.
Maybe I will write an article about that
I like Vue as well, but I'm quite interested in Preact. I think it will boil down to the maturity of these libraries when you need to move to prod. Will all the add-ons that you're going to need be available when YOU need them? It could be that, at this point in time, Vue's ecosystem is a bit more developed than Preact's. Someone prove me wrong, tho!
I think that you've done the right thing by not jumping to a framework immediately, but I am a React Fanboy so I do think that you're hitting the point where it would make your life much easier.
Admittedly, I'm not very familiar with Preact specifically, but here are some of my thoughts on your choice that I think are worth considering. Obviously, there are many factors that only you can gauge so take everything with a handful of salt.
What is most important to you? Performance? Efficiency? Ease of Use? Dependency Independenceβ’?
At some point, you're going to scale again, so it's worth considering whether the framework's value matches your needs later down the roadmap.
If server rendering is very important to you, you should also check out Next.js if you haven't already. It's not going to be more size-efficient than Preact but it may meet all of your current needs, while preparing you for scale down the road.
Ultimately, I think that you're making the right choice to move towards a framework at this point and I think that Preact is going to put you in a better position than you are in today, but it's worth considering what your future roadmap is telling you.
I hope my ramblings provide you with valuable ponderings! Let me know what you end up going with :)
Interestingly, I think the use of Preact covers a lot of the concerns you've outlined. Preact literally uses the React API more or less and is mostly different in how it's implemented under the hood. So React-knowledgeable devs should be able to come in and be productive quickly.
React, the "fully native" version of this sort of API is probably the best choice for "sure the app's complexities aren't going to grow". That's an interesting discussion because I'm sure the complexities will grow, but we're not designed like a single page app, so complexity in the components should remain pretty localized.
Thanks for your initial input, what do you think about these things?
Ah, that makes a lot of sense, thanks for clarifying! I've never used Preact so my opinions about it are subject to scrutiny.
Yeah that makes complete sense. It's hard for me to make a concrete opinion without reading through the code base, but you are obviously adept at considering the effects of each framework.
Given what you said, I think Preact is a great choice for you. Here's where I think you'll find the greatest value from Preact: I think that it would provide you with a way to introduce React Components to your code base and allow you to migrate to React fairly painlessly if your complexities call for it. Kind of like a "try before you buy" situation. You can slowly migrate some of the spaghetti into React as you go and if you need to migrate, then it should be pretty straightforward. Hopefully this provides a different perspective on the matter!
I would take a look at MarkoJS, especially if you're rendering at the server. Because it doesn't use a DOM on the server it's really really fast.
Also love it's layered design and tons of other features. And it's really lightweight at only 11Kb and it's even faster than PReact or Inferno.
I would strongly recommend Preact from my personal experience.
P.S: I've authored a detailed blog post on Preact blog.codeinfuse.com/getting-starte...