react.js anyone

[alan]

Does anyone have strong views about react.js and ProcessWire?

I don't know react.js, I am considering using https://reactforbeginners.com/ or similar to learn more but I wonder; if react.js is arguably the V in MVC, does that mean it's not an ideal 'Lego' piece for ProcessWire? Does it by definition tread in the space occupied by ProcessWire templates? Or can/do the two work beautifully together?

Sorry if my lack of knowledge about react.js means some of the above are poor questions, I'm just curious to see what I might learn from others on this matter.

[LostKobrakai]

I'd strongly suggest you to take a look vue.js instead of react. It's considerably more friendly to beginners, but does still have all the powers react does have (not judging advanced stuff like react native). I personally also feel, that react is more targeted to a "all or nothing" usage (at least in terms of tooling), whereas with vue you can start out just by implementing small components in your site, without the need to change everything from the get-go.

[alan]

Thanks @LostKobrakai for that insight. I will certainly look at vue.js and I'm glad I asked the Q.

Edit: Nice, mostly free intro vids.

Edited September 14, 2016 by alan
Added ref to vids

[LostKobrakai]

There's a partly free series on vue 1.0 on laracasts.com, this should get you started quite well. Just be aware that the soon to be released 2.0 version does change some parts on the inter-component communication.

[alan]

Just now, LostKobrakai said:

There's a partly free series on vue 1.0 on laracasts.com, this should get you started quite well. Just be aware that the soon to be released 2.0 version does change some parts on the inter-component communication.

Thanks, just listening to Jeffrey Way there now

[elabx]

Hi! Is there a way to mix vuejs with server side rendering?

I kind of get that Vue works with templates and components, but it all seems to be done on the client side and I would like to stick to templating in Processwire and pulling straight HTML from here and there just depending on the url and replacing a div's content. Or maybe I'm choosing the wrong approach/framework? Or maybe I am missing how to use Vue to accomplish this?

A framework I found to be almost exactly what I was looking for is Senna.js but there are things I don't really like, like the way the routes have to be initialized either by the js object or through embedding <link> tags in the document, I'd rather have something like an attribute on the anchor tag (just like vue-router has v-link attribute!).

 

 

 

[LostKobrakai]

Vue 2.0 does have server side rendering, but it's only for node not php. One could however use processwire only as data provider and node only for rendering.

One could probably implement the ssr part in php as well, but it would be a lot of duplication work. And everything, which does not share templates directly is just not maintainable for anything bigger.

I'm personally using vue only for html/interface bits, which are useless without js anyways, therefore there's no need to generate it's html on the server.

[POWERFULHORSE]

On 9/18/2016 at 7:04 AM, LostKobrakai said:

Vue 2.0 does have server side rendering, but it's only for node not php. One could however use processwire only as data provider and node only for rendering.

One could probably implement the ssr part in php as well, but it would be a lot of duplication work. And everything, which does not share templates directly is just not maintainable for anything bigger.

I'm personally using vue only for html/interface bits, which are useless without js anyways, therefore there's no need to generate it's html on the server.

Interesting to see someone else using PW + Vue.js. Building components in Vue and using things like webpack and hot reloading has been kind of eye opening for me.

I've just finished a small website/shop that uses Vue to render some elements. Things like the cart made a lot of sense, calculating/updating prices as quantities are edited for example. The cart in this instance is essentially a popover and doesn't need to be rendered immediately or visible for SEO purposes, which was a primary concern with this site. Where Vue was used to render actual content, I ended up writing duplicate templates in both PHP and using Vue components (the latter overwrites the former) which is obviously not ideal.

I'm looking to eventually transition to using Vue/Vuex/Vue Router, moving away from writing PHP based templates and just using PW to expose JSON data via some kind of custom API. But as I almost exclusively build websites and not apps, things like SEO have always been a bit of a concern. I need to read a lot more about how to handle server side rendering with Vue for example.

I wonder if there are enough people here who would be interested in some kind of PW/Vue/Webpack project template for use with Vue CLI or similar?

[alan]

9 minutes ago, POWERFULHORSE said:

I wonder if there are enough people here who would be interested in some kind of PW/Vue/Webpack project template for use with Vue CLI or similar?

I may be interested if I get into vue.js (not had time to look at it yet sadly).