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:
- 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:
- SEO Friendly and SSR support when you use Jinja and Simple HTML
- Micro frontend architecture. Use frontend frameworks where they are needed for complex UI implementations.
- No baggage of traditional Single Page frameworks for state management. All the business logic is on server side.