What is SPA and what is different from a non-SAP page?

Asked

Viewed 621 times

6

Reading this other post from the OS that talks about: applications isomorphic, is commented on in a reply about SPA.

What is a Single Page Application? And what is the difference between a SPA page and a non-SAP page? What changes in performance issues and SEO issues?

terminology single-page-application

1 answer

6


A SPA (Single Page Application) is an application that does not reload the page during his lifetime.

Or because the information only fits on a page, or using customer side navigation, the browser window is never reloaded.

As Javascript became more advanced, it became possible via ajax to fetch data from the server and other services without having to reload the page with new HTML data. So frameworks like Backbone.js, React, Vue, Angular made this standard something very used.

If the application is really one-page only then you don’t need Router, but in larger applications you may even have one Router on client side to simulate page changes and using the pushState you can even change the address in the browser without having to load the page.

An example of SPA (very simple, based on a jsFiddle from Eduardo) with Vue.js would be for example:

const Principal = {
  template: '<h1>Página Principal</h1>'
}
const Secundaria = {
  template: '<h1>Página Secundária</h1>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/principal',
      component: Principal
    },
    {
      path: '/secundaria',
      component: Secundaria
    }
  ]
})

new Vue({
  router,
  el: '#app'
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/principal">Pagina principal</router-link>
  <router-link to="/secundaria">Pagina secundária</router-link>
  <router-view></router-view>
</div>

jsFiddle: http://jsfiddle.net/55ca496g/

In this example there are two components that fill the body of the page. So depending on which of the components we’re using via Router we have different parts of the application, which look like two different pages but is actually a SPA.

Browser other questions tagged terminology single-page-application

You are not signed in. Login or sign up in order to post.