Single page webapplications

0 %
100 %
Information about Single page webapplications

Published on February 26, 2014

Author: ronaldharmsen



Slides from a small free workshop

Single Page Applications @ronaldhamsen

• • • • 13:00 – 14:15 Introduction SPA 14:15 – 15:30 Break 15:30 – 15:45 Practice! 15:45 – 16:00 Q&A

Wikipedia: A single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application.

• More responsive UI / UX • “Application like” interaction • Distributed computing (offloading rendering tasks to the client) • Ability to go offline • Less data traffic • Back/forward button work as expected?

2005 - The term single-page application was coined by Steve Yen 2003 – Article: Inner-browsing extending the browser navigation paradigm (MDN) 2002 - Self-Contained website at with the same goals and functions (Stuart Morris)

• DOM manipulation: Viewmanagement, Templating • Managing state • Databinding • Data-access / Calling services • Modules and application composition • Testing

• Showing and hiding elements (views) • Templating EJS } Hogan.js

• Originally managed by page (url) • Backbutton in browser? • Integration with google analytics? • How to handle in SPA? • But also: credentials, sessions etc.

• <url>/#somestate -> <url>#somesecondstate window.onhashchange = function () { // do something } • window.location.hash (beware ie6 and 7) • jquery.hashchange.js (Ben Alman)

• • • • • window.history.back() window.history.forward() window.history.pushState(stateObj,title,url) window.history.replaceState(stateObj, title, url) window.onpopstate gives back state on page back/forward jquery.pathchange.js

• Dependencies in code on frameworks + take a look at hot towel by John Papa

Ideas: “Build a simple time tracking app. Date, description, number of hours” “Create a simple CRM simpel. Contacts, history of events per contact.” Tips: Use bootstrap! Choose a framework: Durandal or Angular, or start with jQuery. Focus on front-end, never mind the database, rest-services etc.

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Single-page application - Wikipedia, the free encyclopedia

A single-page application (SPA) ... Migrating Multi-page Web Applications to Single-page Ajax Interfaces (Delft University of Technology): ...
Read more

ASP.NET - Single-Page Applications: Build Modern ...

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.
Read more

ASP.NET Single Page Application | The ASP.NET Site

ASP.NET Single Page ... The ASP.NET and Web Tools 2012.2 Update ships a new template for building single page ... In traditional web applications, ...
Read more

Manning | Single Page Web Applications

About the Technology. Web 1.0: Sites request pages from the server one at a time. Each interaction with a page means another round-trip. Slow, awkward, and ...
Read more

Single Page Web Applications: Michael Mikowski ...

Kommentar: Versand sofort! Mängelexemplar! eigentlich ist das Buch neu, jedoch weisen das Cover und der Buchschnitt ( 3 Seiten sind von der Druckerei her ...
Read more

1. Modern web applications: an overview - Introduction

1. Modern web applications: an overview. Why do we want to write single page apps? The main reason is that they allow us to offer a more-native-app-like ...
Read more

Single-page-Webanwendung – Wikipedia

Als Single-page-Webanwendung ... Migrating Multi-page Web Applications to Single-page Ajax Interfaces Delft University of Technology (englisch)
Read more

Single page apps in depth - Introduction

Single page apps in depth a.k.a Mixu's single page app book. This free book is what I wanted when I started working with single page apps.
Read more ...

Tolle Angebote bei eBay für . Sicher einkaufen.
Read more

Best Single Page Websites | Web Design Inspiration

Awesome Single page Website Designs for Inspiration. Selection of Awwwards winning Single page websites, designed to showcase one main idea
Read more