Which JS Framework??

github logo ・1 min read

I'm just about to start a new project, which will be a mobile-first website, likely with some PWA functionality (offline caching mostly), and want to try using a JS framework on top of a Rails API. I've used a tiny bit of Angular in the past, and a bit of node in serverless, so I'm pretty new to this area. I'd love to hear your experiences, pros, cons, and stories! Help me decide!

Thanks

twitter logo DISCUSS (20)
markdown guide
 

Angular fan boy chiming in. Use Vue because you can use it with Typescript, take parts of react jsx and gerally write it your way. Less learning curves more flexibility. I still love Angular though even if I can't justify it.

 

I still love Angular though even if I can't justify it.

Yes you can. Angular has a (rigid?) structure in place so all the components are already broken up into separate files. Services is a killer feature that I think does away with a lot of Redux-style complexity. Finally, you don't need to run from pillar to post looking for libraries for animations, forms, etc. And oh, TypeScript by default.

 

Given that I have written a simple decorator to use Angular style DI in Vue, you come to realize that service are not all that special at all. Centralised stores and services which are largely the same but living in a different directory. the problem I often face regardless of the framework is that I still have trouble transparently getting asynchronous data to template regardless of if I use async pipe with async await, rxjs or Vue with async computed. Furthermore vues cli makes Typescript native by just offering this profile by default, class based components feel link angular to some degree. Adding tsx to this mix makes TS development really fun, especially as class based components and decorators are a thing. I can argue that animations and form validation are covered in Vue but I can say this. Vue has a sort of tribe feel, I can find support for tsx Typescript class components from the community as easily as standard Vue. With that in mind Vue has multiple subsets and prescribed ways of doing things. The docs are actually better in Vue also. Not case closed but that's my 2 cents.

All fair points, but I like to keep the decision-making (bike-shedding?) to a minimum when picking a framework, backend or frontend. I mean, sure you can arm-twist Vue and React to use services, or Angular to use Redux, etc., out of the box, I find Angular to be a much more pleasant experience. I personally use Vue, though, because it can be used as a drop-in jQuery replacement and avoid all the unnecessary "philosophy" that React seems to bring to the table.

 

Why not try all of them yourself? I think that might be the best way to do it. I mean you can get a bunch of suggestions and feedback but if you have the time try to bootstrap at least one or two and see how they feel. I've done the route of reading posts and gathering feedback but nothing is the same as have the ability to try out the different frameworks and libraries yourself and with all of the create-your-favorite-framework bootstrap repo it should be pretty easy to get started and really get some insight.

Thats just my 2cents and check out hnpwa.com/ and just run those apps and read the source.

 

I'd recommend Vue. It's most like Angular in terms of syntax (DOM bindings and whatnot). It'll be easiest to transition into. I'd recommend reading the Vue docs on using client-side storage

Most JS framework or library will work if you're looking to create a simple app. Depends on what you're looking to do (code splitting, lots of async stuff, support IE10, etc). For example, if you need legacy support, you might want to lean on something like jQuery, handlebars, and fetch().

In terms of offline caching (and React) and ease-of-use, I'd personally recommend GatsbyJS or React-Boilerplate.

  • Gatsby is great for blogs/static websites with little changing content.
  • React-boilerplate is a nice middle ground between Gatsby and a custom setup - you skip out on Gatsby's GraphQL layer and serve content directly like NextJS -- and it's setup specifically for being PWA/offline.
 

Great suggestions, thanks! jQuery would be my usual go-to, and since we need to support older mobile devices (Blackberries even!) I might go that route in the end. But I do want to see what else is out there first. Thanks again!

 

I would also recommend Vue due to it's simplicity and excellent docs. I have used angular 1, aurelia and vue and vue is by far the best.

For pros

  • Maintainability
  • Ease of implementing complex features
  • Easy to use
  • Great docs

For Cons

  • Its a framework so performance is slow relative to vanilla
  • Typescript integration could be better (I still almost exclusively use ts with vue)
  • a few gotchas that can throw you for a loop

If extreme performance isn't a concern then vue is a great choice.

 

I would recommend doing a 'getting started' tutorial with a couple of frameworks to see what appeals to you most. I tried Vue but it wasn't for me.

I've personally found React to be more intuitive and enjoyable to work with. That said, there seems to be a lot of love for Vue out there. I can't say that I understand it (it seems rather messy to me), but it's worth trying out and making up your own mind! :)

If you decide to go with React, I recommend the following things to go with it:

I think now that the Context Api is in production, Redux is highly optional. I personally don't use it. It definitely introduces complexity, so only use it if it fits your particular use case.

I haven't used Preact. It's supposed to be very similar to React, but with a smaller footprint. Dev.to uses it! :)

 

I'm using Vue with Tsx and vuex aka a store. It's not messy at all. Equally I could do Angular things. That's why Vue, it's so damn flexible.

 

Yes, Vue seems a bit messy, but then if it's structure we're talking of, my vote goes to Angular. :)

 

If you don't have anything against templates you should give Vue a chance. The documentation it's just awesome. But the best thing in my opinion is that you can avoid the whole bundling transpile thing until it is absolutely necessary.

If you choose to go the React way (by using React or a React-like library) you could take a look at this pattern. They have real world example and everything. This is not how people use it, but still think is interesting.

 

No way to tell for sure without knowing what kind of Website it will be. Unless it is of a certain complexity, using frameworks may be too much overhead. If the user is mostly reading info, and not interacting so much, something like Lodash-Templates may be sufficent.

 
 

I want to try using a JS framework on top of a Rails API, like the post says.

 

Ideally yes you can vanilla, the job market demands it and there's no changing that.

 

Wow, way more recommendations for Vue than I would have expected! Thanks all for your feedback, I'm going to play with Vue! Cheers.

 

Oh make sure you try with a cli generator it's less boilerplate and more instant coding the app.

 
Classic DEV Post from May 6

The state of GraphQL

The report about the state of GraphQL base on the partial data gathered during the annual "The State of JavaScript" survey

Alex profile image
Platform Developer @ Grassriots Inc. Runner, dog person.

πŸ‘‹ Hey dev.to reader.

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❀️