INTRODUCTION TO SINGLE PAGE APPLICATION

WEBINAR

KMS TECHNOLOGY INC.

29 | 01 | 2015

$ WHOAMI

Nguyễn Lê Phú An

Senior Software Engineer

R&D, KMS Technology Inc.

anlpnguyen@kms-technology.com

INTRODUCTION TO SINGLE PAGE APPLICATION

An Nguyen

LET’S DESCRIBE YOURSELF

What is SPA?

I heard that before

I’m working on that

I’m a guru!

INTRODUCTION TO SINGLE PAGE APPLICATION

AGENDA

Traditional website

Evolution

Single Page Application

Challenges

Takeaways

INTRODUCTION TO SINGLE PAGE APPLICATION

Traditional Website

INTRODUCTION TO SINGLE PAGE APPLICATION

COMPONENTS

TRADITIONAL WEBSITE

SERVER-BASED APPLICATION

TRADITIONAL WEBSITE

MULTIPLE PAGES

TRADITIONAL WEBSITE

Evolution

INTRODUCTION TO SINGLE PAGE APPLICATION

NOWADAYS

• Modern browsers

• JavaScript becomes more powerful

• HTML5 - Thank God! You’re here

• More focus on UX (User Experience)

EVOLUTION

CHANGES

EVOLUTION

• App-like user experience

• Faster UI, more interactive

• Be able to work Offline

• Support multiple platforms (responsive design)

Single Page Application

Single Page Application

INTRODUCTION TO SINGLE PAGE APPLICATION

SPA – SINGLE PAGE APPLICATION

SINGLE PAGE APPLICATION

• A next evolution from traditional website

• Web apps that load a single HTML page

• SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads

SPA – SINGLE PAGE APPLICATION

SINGLE PAGE APPLICATION

BENEFITS

SINGLE PAGE APPLICATION

• No page flicker

• Javascript-based rendering

• Better UX

• Faster interaction

PRINCIPLES

SINGLE PAGE APPLICATION

• Performance matters

• Things you did on the server now live in the browser

• Render with JavaScript (library)

• Use CSS3

• Design with Offline in mind

Examples

INTRODUCTION TO SINGLE PAGE APPLICATION

HOW CAN I BUILD A SPA?

SINGLE PAGE APPLICATION

• Keep the principles in your mind

• Use a JavaScript framework adopted the principles

THAT’S IT???

SINGLE PAGE APPLICATION

Challenges

INTRODUCTION TO SINGLE PAGE APPLICATION

SEARCH ENGINE OPTIMIZATION

CHALLENGES

SEARCH ENGINE OPTIMIZATIONSOLUTION

– Client side has to optimize the keywords, tags…

– Server side has to do 2 jobs:

• Transfer data to client for SPA

• Render whole website for Search Engine bot

CHALLENGES

SPEED OF INITIAL LOAD

CHALLENGES

SPEED OF INITIAL LOADSOLUTION

CHALLENGES

Caching & Lazy-loading

But… we can’t avoid that

BROWSER HISTORY

CHALLENGES

BROWSER HISTORYSOLUTION

CHALLENGES

• Write JS code to handle the histories

• Use HTML5 pushState

GOOGLE ANALYTICS

CHALLENGES

GOOGLE ANALYTICSSOLUTION

CHALLENGES

Manually

CLIENT/SERVER CODE PARTITIONING

CHALLENGES

CLIENT/SERVER CODE PARTITIONING - SOLUTION

CHALLENGES

• Use a logic-less template language

• UI data binding

Takeaways

INTRODUCTION TO SINGLE PAGE APPLICATION

TAKEAWAYS

• Remind the traditional website

– HTML, JS & CSS

– Server-based application

• Introduction to SPA

• SPA principles

• Challenges

– SEO, Slow Initial Page, Browser History

– …

CHALLENGES

Q&AIs my website suitable to apply SPA?

INTRODUCTION TO SINGLE PAGE APPLICATION

THANK YOU

© 2013 KMS Technology