Frontend JS framework?


(Daniel Hollands) #1

I’m sure the answer to this is probably very subjective, and different people will have different preferences - but I figure it’s worth asking all the same…

… as a Rails developer looking to get into frontend SPA development, what framework would you recommend?

I have very little experience in this area, and often hear people talking about React this, or Angular that, using yarn for package management, and webpack for god-knows-what, but as you can probably tell, I’m not fully sure what any of it really is, or how it can fit into what I’m trying to achieve.

I’m pretty standard so far as rails development goes, and am happy enough using its views and other presentation features, but I’ve got ambition to learn API development, and figure I need something to consume the API, hence the question above.

Sorry if I’m asking anything silly, but I’m really out of touch with the client side world, and need a quick catch me up to figure out what’s going on.

Cheers.


(Jon) #2

I asked a related question not so long back.

My current view is that the JS ecosystem is already too complicated, and still in flux, so anyone used to settled and mature ecosystems (in other languages) will already need to adjust their expectations.

I had a quick look at the Vue documentation, and chatted to someone who was using it. It looks way simpler than Angular and React, and when I have a chance to do some JS, I think Vue will be the first on my list to try. Paraphrased, my interlocutor said:

React was written by very clever people who believe that every problem needs to be code-golfed to perfection

I tried a bit of React, and I agree! I am not averse to going back to it, but simple is good.


(Andy Wootton) #3

There’s an Angular Meetup at 1000 Trades next Tuesday. I discovered this from an analogue board in the gents. I’ll now go and check if it’s on the calendar.

It is, and twice on Wednesday :-/


(Daniel Hollands) #4

I get a bit confused by React and Vue, because I understand they’re different than Angular and Ember in that they’re trying to solve a different problem?

From what I understand, the latest hotness is components? And React is built around them - but I don’t really understand what any of that means.

In any case, I’m happy to take the path of least resistance, so if that means Vue, that’s a good enough recommendation for me. Thanks.


(Jim Seconde) #5

I have found my first foray into a proper frontend framework using vue to actually be very enjoyable. I think it’s ability to scale from an eight line hello world to a massive SPA is pretty nice.

I think the main thing I take away from using it is that unlike most other JS I’ve encountered so far, it actually makes sense to me!


(Jon) #6

I’m only dimly aware of the differences, but the way I see it:

  • You have full-fat frameworks like Angular that you build upon, and which are hard to retrospectively add to a jQuery app. Generally converting an old app requires a “big bang” change. Does not play so well with other frameworks.
  • You have component frameworks like React that you can add piecemeal to either a new app or an existing app. These are much easier to mix with your legacy JS.

I’m not sure where Vue lies on this scale, but the docs emphasise how easy it is, like jQuery: add the link to Vue on a CDN and get coding (see here).


(Daniel Hollands) #7

I notice in their promo materials they’re calling themselves a progressive web app, which they define as being able to add to your existing codebase where needed, rather than taking over the whole thing.

Which is an approach that works for me.

I think my next step is to find some rails-specific tutorials - the more I can learn it within the context that I already understand, the better.


(Jon) #8

If such tutorials are out there, that’s cool, but I think these frameworks are meant to be back-end agnostic. Your data is pushed and pulled using an API, and if you are just playing around, you can supply API answers using static JSON text files if you want.


(Alex Russell) #9

they’re calling themselves a progressive web app, which they define as being able to add to your existing codebase where needed

Btw a progressive web app (PWA) is a very specific thing with a specific meaning (more about offline support, service workers, etc., see here), so it’s surprising they’re giving that meaning.

That said, Vue and React can both be used as part of a PWA. But also they can both be used in the way Vue describes (just “mounting” into pieces of a page). I use it like that in a few projects, as well as an SPA (single page app) whereby React runs the whole show.

As for @halfer’s comments earlier about Vue being “just include the CDN and go”, yes this is true, but to really get the most out of Vue you’re likely to want to do the whole shebang with Babel, Webpack, etc. Also FWIW React can do the same thing (but, again, it’s better when it’s its own thing and compiled with Babel, etc.).

From my experience, Vue is easier to pick up the absolute fundamentals than React - to get something going, Vue is a little more intuitive. However, once you get to global state stuff, I find React+Redux simpler than Vue+Vuex (but I knew Redux before even looking at Vue and Vuex).

I don’t know Angular so can’t talk about it, sorry.


(Daniel Hollands) #10

I get that, for sure, but I’m hoping to learn about building an API at the same time, so it makes some amount of sense to me if I can do both at once.


(Nick Goodall) #11

Amen to that. And did someone say flux?!

@LimeBlast one benefit to React is that you get an almost-instantly transferable skill to React Native, and for someone who doesn’t want to learn Swift or Java that’s been a blessing for mobile dev.

Angular has something similar with Ionic (*shudders*), but as web wrapper (vs native) it’s behind from the start. Never tried Vue so I can’t comment, but I’ve heard good things. Still, it’d be nice to use Rails again someday…

If you wind up doodling with React let me know! :slight_smile:


(Daveyon Mayne) #12

It’s nice to know JavaScript (JS), and how to “connect” with it with some sort of API to give your users a more modern experience; mainly where things are instant before the eye, without a page refresh (let’s omit ajax for a sec).

There are many to choose from. I’ve first started with PolymerJS 0.5 before knowing about React, Ember or Angular. It’s funny how PolymerJS and Angular are from the same “father”.

Which one?

I cannot stress that you should, in your free time, try all of 'em for yourself. Start off with the ones that has the easiest of documentation to follow and has more online community support. I went mental in my days trying to launch a side project. I’ll write about that once I improve my grammar :wink:

If you go the React/Vue route, steer clear away from their state management (React: Redux, Vue: Vuex). This will get a bit too complex at the start. Take the time to understand their use case and understand what goes underneath the hood. Note that when you go JS for an API/SPA, you will need to know about authentication tokens. Again, do not try to go that route, keep the focus on the actual JS :wink:


(Will Parker) #13

My recommendation is Vue. I think it’s the quickest one to learn and is the simpliest to get started with. Finding the right tutorials is always the part I find hardest.

You should checkout vuecasts.com. It’s a long video series (written by the guy behind laracasts - Laravel tutorial video website). The whole vuecasts series looks like it’s free too which is incredible. That will start you from hello world all the way up to more complex stuff. It is missing the routing stuff though as he assumes you’re using a laravel backend for routing but you can easily go off and find more resources for that later down the road.

Good luck though - let me know how you get on.


(Jon) #14

Curious, I wonder why that is? I recently pondered whether to get a LaraCasts subscription for a few months, since I was bidding for Laravel roles without commercial experience. Last I checked it was 15USD per month, which isn’t bad if the material is of good quality.


(Daniel Hollands) #15

Back before I moved across to Ruby, I subscribed to Laracasts for a year - absolutely worth it.


(Matthew Somerville) #16

Vue calls itself a progressive framework, not a progressive web app, FWIW. Which is nice, especially if you actually take it by its word and make something actually progressive and not some client-only single-page app that will be a blank screen on my phone and I’ll just move on :slight_smile: (Which you could be at an advantage with as a Rails developer, unless you also want to get into isomorphic JS…)


(Alex Russell) #17

Ahh okay that makes sense.

But yeah, React can also do it like this. Maybe not quite so “automatically” as Vue, but it’s still pretty easy (ReactDom.render(<SomeComponent />, document.getElementById('some-place')) and variations thereon)