Download as PDF, PPTX
Uploaded byKMS Technology
Introduction To Single Page Application
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.
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Introduction To Single Page Application
![[Webinar] Test First, Fail Fast - Simplifying the Tester's Transition to DevOps](https://cdn.slidesharecdn.com/ss_thumbnails/testfirstfailfastfinal-170323164615-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Introduction To Single Page Application
- 1. INTRODUCTION TO SINGLE PAGEAPPLICATION 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 Whatis 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 PageApplication Challenges Takeaways INTRODUCTION TO SINGLE PAGE APPLICATION
- 5. Traditional Website INTRODUCTION TOSINGLE PAGE APPLICATION
- 6.
- 7.
- 8.
- 9. Evolution INTRODUCTION TO SINGLEPAGE 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 userexperience • Faster UI, more interactive • Be able to work Offline • Support multiple platforms (responsive design) Single Page Application
- 12. Single Page Application INTRODUCTIONTO SINGLE PAGE APPLICATION
- 13. SPA – SINGLEPAGE 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 – SINGLEPAGE 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 SINGLEPAGE APPLICATION
- 18. HOW CAN IBUILD A SPA? SINGLE PAGE APPLICATION • Keep the principles in your mind • Use a JavaScript framework adopted the principles
- 19. THAT’S IT??? SINGLE PAGEAPPLICATION
- 20. Challenges INTRODUCTION TO SINGLEPAGE APPLICATION
- 21.
- 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 INITIALLOAD CHALLENGES
- 24. SPEED OF INITIALLOAD SOLUTION CHALLENGES Caching & Lazy-loading But… we can’t avoid that
- 25.
- 26. BROWSER HISTORY SOLUTION CHALLENGES • WriteJS code to handle the histories • Use HTML5 pushState
- 27.
- 28.
- 29.
- 30. CLIENT/SERVER CODE PARTITIONING -SOLUTION CHALLENGES • Use a logic-less template language • UI data binding
- 31. Takeaways INTRODUCTION TO SINGLEPAGE APPLICATION
- 32. TAKEAWAYS • Remind thetraditional 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 websitesuitable to apply SPA? INTRODUCTION TO SINGLE PAGE APPLICATION
- 34. THANK YOU © 2013KMS Technology