Upload File

introduction tosinglepageapplications

21
The Trusted Technology Partner in Business Innovation PASSION DISCIPLINE INNOVATION TEAMING INTEGRITY

Upload: nabeel-khan

Post on 29-Nov-2014

1.915 views

Category:

Technology


0 download

Report

DESCRIPTION

 

TRANSCRIPT

Page 1: Introduction tosinglepageapplications

The Trusted Technology Partner in Business Innovation

PASSION DISCIPLINE INNOVATION TEAMING INTEGRITY

Page 2: Introduction tosinglepageapplications

By Muhammad Nabeel

November 20, 2012

INTRODUCTION TO SINGLE PAGE APPLICATIONS

Page 3: Introduction tosinglepageapplications

ABOUT ME

• Sr. Consultant at Neudesic

• More than 12 years of experience

• Currently working on HTML5, Web API and jQuery

• Blogs at mnabeelkhan.blogspot.com

Page 4: Introduction tosinglepageapplications

AGENDA

• What is Single Page Application?

• Key features

• Pros and Cons

• Developing a Single Page Application

• Demo

• Q &A

Page 5: Introduction tosinglepageapplications

WHAT IS SINGLE PAGE APPLICATION

Rich and responsive web application that fits in a single

page providing a fluid interface by loading all necessary

code with a single page load

Page 6: Introduction tosinglepageapplications

TYPICAL WEB APPLICATION

• Has multiple pages

• Server is called multiple times during user interaction

• Typically web applications does not have offline story.

• Set established frameworks.

Page 7: Introduction tosinglepageapplications

KEY FEATURES OF SINGLE PAGE APPLICATION

• Fits on a single page

• Maintains navigation history and deep linking

• Persisting important state on the client

• Fully* loads on initial page load

• Using Asynchronous downloads of features if needed.

Page 8: Introduction tosinglepageapplications

PROS AND CONS

Page 9: Introduction tosinglepageapplications

• Fluid UI – Means better user experience

• More interactive – By the use of Async calls

• Better for perceived performance

• Separation of Concerns

• Better for mobile apps

• Offline story

PROS

Page 10: Introduction tosinglepageapplications

• Complex architecture

• Need better understanding of different JavaScript libraries

• Special attention is needed for huge applications

• Bad for Search Engine Optimization

CONS

Page 11: Introduction tosinglepageapplications

EXAMPLE OF SINGLE PAGE APPLICATIONS

• Gmail

• iCloud

• www.morphix.si

• http://fuelbrandinc.com

• http://learn.knockoutjs.com/

http://fuelbrandinc.com/
http://fuelbrandinc.com/
http://fuelbrandinc.com/
Page 12: Introduction tosinglepageapplications

SINGLE PAGE APPLICATION - ARCHITECTURE

Page 13: Introduction tosinglepageapplications

DEVELOPING A SINGLE PAGE APPLICATION

Page 14: Introduction tosinglepageapplications

• HTML 5, WebAPI, Knockout and jQuery

• Pager.js (http://oscar.finnsson.nu/pagerjs)

• ScaleApp (http://scaleapp.org/)

AVAILABLE PATTERNS AND FRAMEWORKS

Page 15: Introduction tosinglepageapplications

SINGLE PAGE APPLICATION – LIFE CYCLE

Page 16: Introduction tosinglepageapplications

LIBRARIES

• KnockoutJS – For data binding.

• upshotJS – For retrieving data from server and caching at

client side.

• Nav.js – For navigation and history management.

Page 17: Introduction tosinglepageapplications

SPA - BEST PRACTICES

• Define Goal – Preplan the sequence of web site and what

you want to achieve.

• Start with establishing a file structure

• Establish tools and libraries that are needed.

• Develop the HTML and CSS before the JavaScript

• Add JavaScript

• Inspect the HTML

• Add unit tests

Page 18: Introduction tosinglepageapplications

DEMO

Requirements

• Visual Studio 2010+

• ASP.NET MVC 4.0

• Libraries

Page 19: Introduction tosinglepageapplications

Developing a huge single page application should be like

developing multiple small pages. That is the only way you'll

be able to scale up and out the development.

DEVELOPMENT CONSIDERATION

Page 20: Introduction tosinglepageapplications

RESOURCES

• Book – Single Page Web Applications

by Josh C. Powell

• http://knockoutjs.com

• http://www.asp.net/single-page-application

http://www.asp.net/single-page-application
http://www.asp.net/single-page-application
http://www.asp.net/single-page-application
http://www.asp.net/single-page-application
http://www.asp.net/single-page-application
http://www.asp.net/single-page-application
Page 21: Introduction tosinglepageapplications

QUESTIONS AND ANSWERS

mnabeelkhan.blogspot.com


Introduction Introduction (ctnd.)

Introduction€¦ · Introduction ThisdocumentprovidesinformationabouttheIOSXEsoftwarereleasefortheCiscoNCS4201andCisco …

 · Contents INTRODUCTION Introduction

Introducción / Introduction / Introduction

Topics Introduction 1 / 3 Introduction 2 / 3 Introduction 3 / 3

Introduction to Transducers, Introduction to Transducers ... on... · Introduction to Transducers, Introduction to Transducers, Sensors and ActuatorsSensors and Actuators Introduction

Introduction to Databases: Introduction

Introduction and Thesis Introduction - …...1 Introduction and Thesis Introduction: The introduction relates the topic to the main point of the essay. The introduction is composed

An Introduction to NSAn Introduction to NS2An Introduction

1. INTRODUCTION 1.1 Introduction

Introduction | Introduction | Millennium Serials · 2018. 4. 17. · MARC Display | Print | Introduction | Millennium Serials INTRODUCTION Introduction This tutorial introduces the

General introduction 1.1 Introduction

Systems Analysis I introduction I introduction. 2Systems Analysis - Introduction Contents Introduction Introduction 3 classic phases 3 classic phases

Introduction Chapitre 1 · Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Introduction & Strategy Module Introduction & Administrative

voip-iptel-introduction-SRK1.ppt voip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-iptel-introduction-SRK1.pptvoip-ip

introduction | EinlEitung | introduction | introducción · introduction | EinlEitung | introduction | introducción En Description Operation Maintenance Safety instructions dE Benennung

Module: Introduction...Module: Introduction Page: Introduction CC0.1 Introduction Please give a general description and introduction to your organization. Providing electrical, hydraulic

CrowPiwithMineCraftPiEdition · 2 CrowPiwithMineCraftPiEdition-Introduction-MinecraftPiEdition-Introduction-Whatyouwillneed-Introduction-RunningMinecraft-Introduction

PRODUCT INTRODUCTION Company Introduction

VisionaryScancombinesarichsetofqualitycontrolandproductivi ... · Introduction Introduction VisionaryScancombinesarichsetofqualitycontrolandproductivityfeatureswithasimpleinterfacedesignedspecificallyforscanningandcodingdepositionexhib-

An Introduction to NSAn Introduction to NS2An Introduction to NS2 · 2016. 8. 26. · An Introduction to NSAn Introduction to NS2An Introduction to NS2 Textbook: T. Issariyakul and

§1.1.1 INTRODUCTION: 1. INTRODUCTION

1. Introduction 1. Introduction 1. Introduction 1 ... · Introduction 1. Introduction 1. Introduction 1. Introduction 6061B0242401. The Phone Screen From the Phone screen, you can

1. INTRODUCTION INTRODUCTION - Deusto

Introduction to Transducers, Introduction to Transducers ...engtech.weebly.com/.../more_on_transducers_sensors_actuators.pdf · Introduction to Transducers, Introduction to Transducers,

INTRODUCTIONS (LEADS) Academic introduction Creative introduction Action introduction Dialogue introduction Overarching societal statements Personal introduction

Introduction to Elasticsearch and Logstash. - KIT · PDF fileOutline 1 Introduction 2 Logstash Introduction 3 Elasticsearch Introduction 4 Conclusions Introduction Logstash ElasticsearchConclusions

Introduction Section I: Introduction

1. INTRODUCTION • INTRODUCTION • EINFÜHRUNG • INLEIDING • INTRODUCCIÓN … · 2016-12-16 · 1. INTRODUCTION • INTRODUCTION • EINFÜHRUNG • INLEIDING • INTRODUCCIÓN

 · Introduction . 6 . Contents . Introduction

Introduction 1. Introduction

An Introduction for An Introduction for Introduction for ......An Introduction for An Introduction for Introduction for TeachersTeachersTeachers . exChange, Blackburn Cathedral’s

1 Introduction t 1. Introduction to Nanotechnology - UFAMhome.ufam.edu.br/berti/nanomateriais/Introduction to Nanotechnology... · Introduction t 1. Introduction to Nanotechnology

The Sacrament of Baptism Introduction Video Introduction Video The Sacrament of Baptism Introduction Video Introduction Video