Change search
ReferencesLink to record
Permanent link

Direct link
Designing and implementing an architecture for single-page applications in Javascript and HTML5
Linköping University, Department of Computer and Information Science, Software and Systems. Linköping University, The Institute of Technology.
2012 (English)Independent thesis Advanced level (degree of Master (Two Years)), 20 credits / 30 HE creditsStudent thesis
Abstract [en]

A single-page application is a website that retrieves all needed components in one single page load. The intention is to get a user experience that reminds more of a native appli- cation rather than a website. Single-page applications written in Javascript are becoming more and more popular, but when the size of the applications grows the complexity is also increased. A good architecture or a suitable framework is therefore needed.

The thesis begins by analyzing a number of design patterns suitable for applications containing a graphical user interface. Based on a composition of these design patterns, an architecture that targets single-page applications was designed. The architecture was designed to make applications easy to develop, test and maintain. Initial loading time, data synchronization and search engine optimizations were also important aspects that were considered. A framework based on the architecture was implemented, tested and compared against other frameworks available on the market.

The framework that was implemented was designed to be modular, supports routing and templates as well as a number of different drivers for communicating with a server-side database. The modules were designed with a variant of the pattern Model-View-Controller (MVC), where a presentation model was introduced between the controller and the view. This allows unit tests to bypass the user interface and instead communicate directly with the core of the application. After minification and compression, the size of the framework is only 14.7 kB including all its dependencies. This results in a low initial loading time.

Finally, a solution that allows a Javascript application to be indexed by a search engine is presented. It is based on PhantomJS in order to produce a static snapshot that can be served to the search engines. The solution is fast, scalable and easy to maintain. 

Place, publisher, year, edition, pages
2012. , 46 p.
Keyword [en]
Javascript, HTML5, SPA, Single-page application, Framework, MinimaJS, Architecture, Software, Web, SEO, Search engine optimization, testing, testability
National Category
Computer Engineering
URN: urn:nbn:se:liu:diva-85518ISRN: LIU-IDA/LITH-EX-A--12/063--SEOAI: diva2:571223
External cooperation
Valtech AB
Subject / course
Computer Engineering
2012-11-09, Donald Knuth, Linköpings universitet, 581 83, Linköping, 15:00 (Swedish)
Available from: 2012-11-22 Created: 2012-11-21 Last updated: 2012-11-22Bibliographically approved

Open Access in DiVA kB)3978 downloads
File information
File name FULLTEXT01.pdfFile size 2946 kBChecksum SHA-512
Type fulltextMimetype application/pdf

Search in DiVA

By author/editor
Petersson, Jesper
By organisation
Software and SystemsThe Institute of Technology
Computer Engineering

Search outside of DiVA

GoogleGoogle Scholar
Total: 3978 downloads
The number of downloads is the sum of all downloads of full texts. It may include eg previous versions that are now no longer available

Total: 4306 hits
ReferencesLink to record
Permanent link

Direct link