Login
A YetaWF site is always a single page application. All pages use the same skin, but users can use their own themes based on user settings.
When developing new controllers, views, modules, no special action needs to be taken to support single page applications as that is handled automatically by YetaWF.
Page content only (not the entire page) is dynamically replaced when navigating between pages (one Ajax server request for pane content). You create and design each page individually as it will appear to the end-user. This can be used with sites that have thousands of pages. A single page application significantly improves response time for each page, especially on mobile devices.
Single Page Sites work for anonymous and authenticated users alike.
Pages can also be defined as Static Pages (for anonymous users). This means, even though all pages of your site are a single page application, you can still define the Home page (for example) as a Static Page. This has the advantage that anonymous users arriving at your site will get a fast page load for the Home page. Once they navigate on your site, the pages will be rendered using content replacement.
Navigating from a Static Page to another page will result in simple content replacement (not a page reload). Navigating back to a static page (the Home page in this example) from a page will result in content replacement, not a page reload. In other words, a Static Page is only rendered as fully Static Page when it is initially requested. Content replacement is generally faster than a Static Page load, as all globally used JavaScript files have already been fully initialized.
All YetaWF sites are single page sites. No extra step required. Even though all pages use the same skin, you can still define page specific CSS classes (defined in Page Settings, Skin Tab, CSS Class field) which can be used to vary the look of individual pages, even significantly.
YetaWF's Single Page Sites don't have any of the Search Engine Optimization (SEO) disadvantages traditionally associated with Single Page Sites. Each link (<a> tags) within a page is a fully functional URL, backed by a real page, so bots that visit a YetaWF site can access the URL. Only end-users that click on the link will actually use the faster content offered by a single page application. Bots will simply access the URL and will receive a full page. This means that pages are indexed as if the site were a regular (non-Single Page) site.
YetaWF's Single Page Sites don't have any of the Analytics disadvantages traditionally associated with Single Page Sites. Analytics code is injected when the user navigates between page content. This means that each end-user click, navigating to another URL with the Single Page Application can be tracked by analytics.
Analytics (JavaScript) code for page requests can be defined using Admin > Settings > Site Settings, Addons tab, Analytics and Analytics (Content) field. The Analytics field defines the JavaScript that is injected when a full page is requested. The Analytics (Content) field defines the JavaScript that is injected when the user navigates between pages of a Single Page Application, which only creates an Ajax request that is normally not tracked.
Below is an example of the Google Analytics JavaScript code that is used to track all requests in a YetaWF site (see Admin > Settings > Site Settings, Addons tab), including navigation between page content.
The "Analytics" field should be set to the exact JavaScript as provided by Google, including <script> tags.
The "Analytics (Content)" field should be set to JavaScript code (without <script> tags) that is executed whenever navigation within a Single Page Application occurs. For Google Analytics this should read:
ga('send', 'pageview', '<<URL>>')The variable <<URL>> will be replaced with the actual URL being accessed.
Any modules referenced by sites, pages or modules will work as expected. As each page's content is rendered, the page's matching module references are added/removed as needed.
Any page specific CSS classes (defined in Page Settings, Skin Tab, CSS Class field) are honored for each page rendered.
Any pane can be designated as allowing merged content in a Single Page Application. The following is a sample skin that allows content merging for the Main pane, PaneSetL2_RightPane, PaneSetL2_MainPane, etc. by using the Unified parameter of the RenderPane method, set to true. Using this page definition, all modules from other pages in the Main pane, PaneSetL2_RightPane, PaneSetL2_MainPane, etc. would be merge into the page.
All skins included with YetaWF set Unified to true for most panes, except for header and footer panes.
<!-- Panes -->
<div class='container maincontainer'>
<div class='row'>
{await RenderPaneAsync("", "col-lg-12 MainPane AnyPane", Unified: true)}
</div>
<div class='row'>
{await RenderPaneAsync("PaneSetL2_LeftPane", "col-lg-4 PaneSetL2_LeftPane AnyPane", Unified: true)}
{await RenderPaneAsync("PaneSetL2_MainPane", "col-lg-8 PaneSetL2_MainPane AnyPane", Unified: true)}
</div>
<div class='row'>
{await RenderPaneAsync("PaneSet3_LeftPane", "col-lg-3 PaneSet3_LeftPane AnyPane", Unified: true)}
{await RenderPaneAsync("PaneSet3_MainPane", "col-lg-6 PaneSet3_MainPane AnyPane", Unified: true)}
{await RenderPaneAsync("PaneSet3_RightPane", "col-lg-3 PaneSet3_RightPane AnyPane", Unified: true)}
</div>
<div class='row'>
{await RenderPaneAsync("PaneSetR2_MainPane", "col-lg-8 PaneSetR2_MainPane AnyPane", Unified: true)}
{await RenderPaneAsync("PaneSetR2_RightPane", "col-lg-4 PaneSetR2_RightPane AnyPane", Unified: true)}
</div>
</div>Here are some of the reasons why navigating between URLs in a Single Page Application may still render the full page, instead of just rendering the content.
When navigating from a page with http:// to a page with https://, the page will always be rendered in full. It is recommended to use one mode only. You can force a specific mode using Admin > Settings > Site Settings, URLs tab, Enforce Security field.
When user authentication occurs, the page will always be rendered in full.
Pages are always rendered in full in Site Edit Mode.
Only <a> links that have the CSS class "yaction-link" participate in a Single Page Application. Otherwise, links without this class will simply load the full page. Links generated by YetaWF all have this class. If you create modules or module content (YetaWF.Text module) that use <a> tags, the class "yaction-link" must be added unless the link points to another site or to a local page which is not part of the Single Page Application.
On
Off