[Technique] Single Page Experience in Portal Pages

We can use the Turbolinks library from the Basecamp team to deliver a Single Page Like experience across multiple portal pages.
In my opinion, it was a missing piece in the adoption of portals for high scale custom web application development in the Frappe ecosystem.

Following are the steps:

  1. Create a new template file and move the scripts to head:
	{% block base_scripts %}
	<!-- js should be loaded in body! -->
	<script type="text/javascript" defer src="/assets/frappe/js/lib/jquery/jquery.min.js"></script>
	<script type="text/javascript" defer src="/assets/js/frappe-web.min.js?ver={{ build_version }}"></script>
	<script type="text/javascript" defer src="/assets/js/bootstrap-4-web.min.js"></script>
	{% endblock %}
	<script type="text/javascript" src="https://unpkg.com/turbolinks@5.2.0/dist/turbolinks.js"></script>
	{%- for link in web_include_js %}
	<script type="text/javascript" src="{{ link | abs_url }}?ver={{ build_version }}"></script>
	{%- endfor -%}

We have added the defer attribute and also added the UNPKG link of the Turbolinks library.

Now if we create any <a> tag on the same domain as this:

<a href="/target" >To route</a>

Turbolinks would automatically load this using XHR in the background and then do the routing on the client-side.

Quick Demo:

Benefits of the Approach:

  1. SEO Friendly and SSR support when you use Jinja and Simple HTML
  2. Micro frontend architecture. Use frontend frameworks where they are needed for complex UI implementations.
  3. No baggage of traditional Single Page frameworks for state management. All the business logic is on server side.
6 Likes