Introduction To Single Page Application
9 likes11,387 views
This document provides an introduction to single page applications (SPAs). It begins with an overview of traditional websites, which have multiple pages and server-based rendering. The evolution section discusses how modern browsers, JavaScript, and HTML5 have enabled a more app-like user experience with SPAs. SPAs are defined as web apps that load a single HTML page and use AJAX and JavaScript for fluid interactions without page reloads. Benefits include faster loading and improved user experience. Challenges of SPAs include search engine optimization, initial slow loading, and maintaining browser history. The document concludes with a question and answer section.
Introduction To Single Page Application
- 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. [email protected] 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
- 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
- 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
- 26. BROWSER HISTORY SOLUTION CHALLENGES • Write JS code to handle the histories • Use HTML5 pushState
- 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