This approach definitely has a lot of value for specific use cases. Specifically to get MVP done in a fast way. When you need to scale out, you can still add a SPA later on.
If you combine the approach of WebSockets + dom patching with postgres pg_notify you get some real magic :) In the new IHP framework we provide something like that. We call it Auto Refresh: https://ihp.digitallyinduced.com/Guide/auto-refresh.html
Auto Refresh is activated with a function call inside a controller action, like this:
The only difference to a normal IHP action is that it has the `autoRefresh` call in front of the do-block.
Once activated IHP will automatically track all tables your action is using e.g. in `SELECT * FROM ...` queries. Once the action sends a response IHP will start watching for any kind of `INSERT`, `UPDATE` or `DELETE` statement to all the tables used by your action using pg_notify.
When the page is rendered a small JavaScript function will connect back to the IHP server using a WebSocket connection.
Whenever an `INSERT`, `UPDATE` or `DELETE` happens to the tables used by your action IHP will rerun your action on the server-side. When the generated HTML looks different than the HTML generated on the initial page load it will send the new HTML to the browser using the WebSocket connection. The JavaScript listening on the WebSocket will use the new HTML to update the current page. It uses morphdom to only touch the parts of your current DOM that have changed.
Here's how this looks in the real world: https://twitter.com/digitallyinduce/status/13207288333943808... <- This view has no app-specific Javascript. The auto refresh is enabled using a single function call and the framework takes care of all the technical details.
Some use cases where this really shines:
- interactive dashboards (e.g. showing the current status of job queue)
- simple user chat systems (you can send messages using normal form submission, as long as auto refresh is enabled this works like a SPA)
- building a twitter clone, the feed will automatically add new content as it's added to the database
We're using this approach in production since last year and it saves an incredible amount of development time.
If you combine the approach of WebSockets + dom patching with postgres pg_notify you get some real magic :) In the new IHP framework we provide something like that. We call it Auto Refresh: https://ihp.digitallyinduced.com/Guide/auto-refresh.html
Auto Refresh is activated with a function call inside a controller action, like this:
The only difference to a normal IHP action is that it has the `autoRefresh` call in front of the do-block.Once activated IHP will automatically track all tables your action is using e.g. in `SELECT * FROM ...` queries. Once the action sends a response IHP will start watching for any kind of `INSERT`, `UPDATE` or `DELETE` statement to all the tables used by your action using pg_notify.
When the page is rendered a small JavaScript function will connect back to the IHP server using a WebSocket connection.
Whenever an `INSERT`, `UPDATE` or `DELETE` happens to the tables used by your action IHP will rerun your action on the server-side. When the generated HTML looks different than the HTML generated on the initial page load it will send the new HTML to the browser using the WebSocket connection. The JavaScript listening on the WebSocket will use the new HTML to update the current page. It uses morphdom to only touch the parts of your current DOM that have changed.
Here's how this looks in the real world: https://twitter.com/digitallyinduce/status/13207288333943808... <- This view has no app-specific Javascript. The auto refresh is enabled using a single function call and the framework takes care of all the technical details.
Some use cases where this really shines:
- interactive dashboards (e.g. showing the current status of job queue)
- simple user chat systems (you can send messages using normal form submission, as long as auto refresh is enabled this works like a SPA)
- building a twitter clone, the feed will automatically add new content as it's added to the database
We're using this approach in production since last year and it saves an incredible amount of development time.