1. INTRODUCTION TO
SINGLE PAGE APPLICATION
WEBINAR
KMS TECHNOLOGY INC.
29 | 01 | 2015

2. $ 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

3. 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

4. AGENDA
Traditional website
Evolution
Single Page Application
Challenges
Takeaways
INTRODUCTION TO SINGLE PAGE APPLICATION

5. Traditional Website
INTRODUCTION TO SINGLE PAGE APPLICATION

6. COMPONENTS
TRADITIONAL WEBSITE

7. SERVER-BASED APPLICATION
TRADITIONAL WEBSITE

8. MULTIPLE PAGES
TRADITIONAL WEBSITE

9. Evolution
INTRODUCTION TO SINGLE PAGE APPLICATION

10. NOWADAYS
• Modern browsers
• JavaScript becomes more powerful
• HTML5 - Thank God! You’re here
• More focus on UX (User Experience)
EVOLUTION

11. CHANGES
EVOLUTION
• App-like user experience
• Faster UI, more interactive
• Be able to work Offline
• Support multiple platforms (responsive design)
Single Page Application

12. Single Page Application
INTRODUCTION TO SINGLE PAGE APPLICATION

13. 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

14. SPA – SINGLE PAGE APPLICATION
SINGLE PAGE APPLICATION

15. BENEFITS
SINGLE PAGE APPLICATION
• No page flicker
• Javascript-based rendering
• Better UX
• Faster interaction

16. 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

17. Examples
INTRODUCTION TO SINGLE PAGE APPLICATION

18. HOW CAN I BUILD A SPA?
SINGLE PAGE APPLICATION
• Keep the principles in your mind
• Use a JavaScript framework adopted the
principles

19. THAT’S IT???
SINGLE PAGE APPLICATION

20. Challenges
INTRODUCTION TO SINGLE PAGE APPLICATION

21. SEARCH ENGINE OPTIMIZATION
CHALLENGES

22. SEARCH ENGINE OPTIMIZATION
SOLUTION
– 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

23. SPEED OF INITIAL LOAD
CHALLENGES

24. SPEED OF INITIAL LOAD
SOLUTION
CHALLENGES
Caching & Lazy-loading
But… we can’t avoid that

25. BROWSER HISTORY
CHALLENGES

26. BROWSER HISTORY
SOLUTION
CHALLENGES
• Write JS code to handle the histories
• Use HTML5 pushState

27. GOOGLE ANALYTICS
CHALLENGES

28. GOOGLE ANALYTICS
SOLUTION
CHALLENGES
Manually

29. CLIENT/SERVER CODE
PARTITIONING
CHALLENGES

30. CLIENT/SERVER CODE
PARTITIONING - SOLUTION
CHALLENGES
• Use a logic-less template language
• UI data binding

31. Takeaways
INTRODUCTION TO SINGLE PAGE APPLICATION

32. TAKEAWAYS
• Remind the traditional website
– HTML, JS & CSS
– Server-based application
• Introduction to SPA
• SPA principles
• Challenges
– SEO, Slow Initial Page, Browser History
– …
CHALLENGES

33. Q&A
Is my website suitable to apply SPA?
INTRODUCTION TO SINGLE PAGE APPLICATION

34. THANK YOU
© 2013 KMS Technology