Howto make dynamic website with Processwire?

[uncle_bobson]

Im new to processwire, so I'd like to ask your advice. 

Processwire seems to be focused on static templates and websites. Is it possible to make some fields render dynamically? I haven't found any tutorials making dynamic websites in processwire.

For example lets say i want to create a webpage that describes a company, where most text on the page rarely change (static), but the page also includes a stock price ticker that changes every few seconds (dynamic). I imagine messages would be got somehow by simple http polling (or "long polling") without the need for any websockets.

(I previously made a dynamic website in C# using signalR and vuejs, without processwire. I used signalR to push dynamic updates from the backend to the frontend, and vuejs to render the website. I liked vuejs a lot.  I'm a windows application developer with little experience with frontend development, so using signalR seemed a good idea at the time. This time i would like to use processwire and avoid the signalR framework, as it seems overkill and I'm not sure how well it integrates with processwire)

Thanks,

bob

[horst]

18 minutes ago, uncle_bobson said:

I haven't found any tutorials making dynamic websites in processwire.

Hi and welcome @uncle_bobson.
A good start is to look into the DOCS section of this website, maybe starting with a tutorial or the "Getting started" part. (Depends on your skills and knowledge). Reading a bit about and deciding for a "output strategie" may help to. Also you can download the latest PW and play around a bit with the included different site profiles.

If you have additional or specific questions after that, please post and ask here again. :-)

[uncle_bobson]

1 hour ago, horst said:

Hi and welcome @uncle_bobson.
A good start is to look into the DOCS section of this website, maybe starting with a tutorial or the "Getting started" part. (Depends on your skills and knowledge). Reading a bit about and deciding for a "output strategie" may help to. Also you can download the latest PW and play around a bit with the included different site profiles.

If you have additional or specific questions after that, please post and ask here again. ?

Thanks for the reply and the welcome. 

I read about the "output strategies". As far as i can tell both the "direct output" and "delayed output" are about static rendering. The visitor to a page will have to reload the page to see any changes. 

I have managed to programatically set the field values of a page (every few seconds), from a script running on command line (using the proceswire API). 

In vuejs, changes to values in the store, cause a dynamic re-rendering of part of the page affected.

I'll have a try with storing some values in processwire fields (the ones that rarely change and therefore dont require dynamic rendering), and storing other values in the vuejs store (the ones that often change and therefore require dynamic rendering). That should work fine. I guess i was hoping there was some way for vuejs to work directly on the processwire fields themselves.

Cheers,
bob

[rick]

If I understand you correctly, you are looking to add Ajax updated section to your page. This is indeed possible, See Here for an example. If by chance you are using vanilla javascript then check out this post.

[uncle_bobson]

55 minutes ago, rick said:

If I understand you correctly, you are looking to add Ajax updated section to your page. This is indeed possible, See Here for an example. If by chance you are using vanilla javascript then check out this post.

Thanks. That is helpful. I think I'll do it that way instead.

[bernhard]

Hi @uncle_bobson and welcome,

if I understand you correctly then what you are asking it not related to ProcessWire... Or does the data come from the PW backend?

Here's a simple example of an auto-updating ProcessWire page that shows the current time taken from http://worldtimeapi.org/ (updating each 5 seconds):

// default site profile home.php
$content = <<<out
<h3>Live Data Example</h3>
<div id="livedata"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript">
function getData() {
	$.getJSON('http://worldtimeapi.org/api/ip', function(data) {
		var timestr = moment(data.datetime).format('MMMM Do YYYY, HH:mm:ss')
			+ " (" + data.timezone + ")";
		$('#livedata').text(timestr);
	});
	setTimeout(getData, 5000);
}
getData();
</script>
out;

[teppo]

SignalR apparently uses WebSockets behind the scenes to achieve a "real" push effect. I'm not at all familiar with this technology, but if you really need push (instead of polling the server periodically as in the example above — which, for the record, is in most cases quite enough), you could look into something like Ratchet (a PHP WebSocket implementation), or perhaps build that part of the site in JS and then use pretty much anything as the back-end (Node, etc.)

Anyway, you're right in assuming that ProcessWire doesn't have anything built-in for this particular need. ProcessWire provides tools for managing content; what you do with that content is not its concern, and technically "pushing the content to the client via WebSocket" is more a matter of presentation than content management ?

[uncle_bobson]

@bernhard Thanks for the code. Very helpful.

The solution to the problem looks so simple now. I'll just generate the page in processwire, and use jquery doing the rest query, for finding the correct element by id, and for updating the DOM.

I don't need to use vuejs, at all. It would just complicate matters.

 

[uncle_bobson]

17 minutes ago, teppo said:

SignalR apparently uses WebSockets behind the scenes to achieve a "real" push effect. I'm not at all familiar with this technology, but if you really need push (instead of polling the server periodically as in the example above — which, for the record, is in most cases quite enough), you could look into something like Ratchet (a PHP WebSocket implementation), or perhaps build that part of the site in JS and then use pretty much anything as the back-end (Node, etc.)

Anyway, you're right that in assuming that ProcessWire doesn't have anything built-in for this particular need. ProcessWire provides tools for publishing content online; what you do with that content is not its concern, and technically "pushing the content to the client via WebSocket" is more a matter of presentation than content management ?

@teppoThanks for the feedback. I'll just do periodic polling. Its fine. If I need quicker updates, without spamming so much, I'll just use the "long polling" hack, or signalR.

I see now that there would be no problem using signalR with processwire. My confusion was really about howto use vuejs with processwire. As both of them generate the html code for a page, they would be stepping on each other toes. I somehow thought i absolutely needed vuejs, if i was going to do any dynamic changes in the DOM. But I can generate the page with processwire, and then just use jQuery to do the dynamic updates to the DOM.

[dragan]

@uncle_bobson

Another way to achieve more or less the same thing, is to use PW's markup cache.

Perhaps not suitable if you have intervals of just seconds, but for other use-cases. Of course, that approach won't help if you expect the data to update without page-refresh. But maybe helpful if you have a lot of traffic, and want to reduce "behind-the-scenes" queries.

[teppo]

22 hours ago, dragan said:

But maybe helpful if you have a lot of traffic, and want to reduce "behind-the-scenes" queries.

This is a good point!

In one case we needed a set of "real-time" statistics displayed on all pages of a site. Though the site was internal, it was relatively heavy on traffic (lots of users reloading it all the time), and users very much depended on it being fast, as it was an integral part of their workflow. The solution we came up with was a simple cron script that pulled the data from a separate database, wrote it to a text document on the disk, and then (an equally simple) JS script that polled that text file and injected the content on the page.

Technically the solution had nothing to do with ProcessWire — just that the result was injected (via JS) within otherwise "static" content ?

23 hours ago, uncle_bobson said:

My confusion was really about howto use vuejs with processwire. As both of them generate the html code for a page, they would be stepping on each other toes.

Actually... you can always embed Vue apps within a ProcessWire generated page. In my experience Vue is pretty great for that sort of stuff in fact. But of course you don't have to do that here, and the jQuery / vanilla JS route is pretty much guaranteed to be much simpler ?