Front-end features

From Redazione
Jump to navigation Jump to search
Line 34: Line 34:
 
==Dynamic components==
 
==Dynamic components==
  
 +
Dynamic components are a Vue.js feature allowing to programmatically render Vue.js/Quasar framework components depending on the specific data set or application's state.
 +
In practical terms, that allows to transform specific elements in wiki pages to interactive vue.js/quasar components on the front end.
 +
This is currently implemented for the list of "frequently asked questions" list (or its equivalent) where the following "standard" mediawiki's [https://www.mediawiki.org/wiki/Manual:Collapsible_elements collapsible element] is transformed to the following components: strictly speaking they are both interactive, but because the second is a vue.js component, one could say that the second is more interactive that than the first, and the user experience reflects the same assumption.
  
  

Revision as of 07:55, 19 July 2020

The front-end side of this wiki (a streamlined single-page-application allowing an instantaneous access to set of pages) is automatically created and updated as you create, edit, move or delete pages on the back-end, and it includes the following features:

  • Server side rendering
  • Navigable table of contents
  • Dynamic components
  • Offline navigation
  • Breadcrumbs and navigation between pages
  • Hyphenation
  • Filtering of contents in multiple languages


Server side rendering

Server side rendering is the standard way how traditional static web pages or web applications are served on the web, where the page's content is computed and composed server side, even based on user-related data, and then served client side as the page load.

By contrast, a single-page-application (which allows a greater interactivity) first loads on the client and then retrieves its state, that is data from a database and user-related data.

However, by doing so, the information on the page are not present on page load, and the feeling is indeed that you are not consulting a static piece of information, but something which has to be load every time.

In order to enjoy the advantages of both technologies (and considering that the feeling to not visit a static page translates in a poor access to search engines) server side rendering allows a single page application to be processed on the server, and then served on the client precisely as a static page, and then becoming fully interactive and navigable dynamically.


Side panel with table of contents

How it works/Front-end features/Side navigation.jpg

Dynamic components

Dynamic components are a Vue.js feature allowing to programmatically render Vue.js/Quasar framework components depending on the specific data set or application's state. In practical terms, that allows to transform specific elements in wiki pages to interactive vue.js/quasar components on the front end. This is currently implemented for the list of "frequently asked questions" list (or its equivalent) where the following "standard" mediawiki's collapsible element is transformed to the following components: strictly speaking they are both interactive, but because the second is a vue.js component, one could say that the second is more interactive that than the first, and the user experience reflects the same assumption.


How it works/Front-end features/Dynamic components.jpg


Offline navigation

How it works/Front-end features/Offline navigation.jpg


Breadcrumbs and navigation between pages

How it works/Front-end features/Bottom navigation.jpg

Hyphenation

Selection of contents with multiple languages



How it works/Front-end features/Languages selection.jpg