O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Próximos SlideShares
Crawlers and Web UI with full stack JS - PiterJS #1
Avançar
Transfira para ler offline e ver em ecrã inteiro.

Compartilhar

Introduction To Single Page Application

Baixar para ler offline

Introduction To Single Page Application

  1. 1. INTRODUCTION TO SINGLE PAGE APPLICATION WEBINAR KMS TECHNOLOGY INC. 29 | 01 | 2015
  2. 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. 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. 4. AGENDA Traditional website Evolution Single Page Application Challenges Takeaways INTRODUCTION TO SINGLE PAGE APPLICATION
  5. 5. Traditional Website INTRODUCTION TO SINGLE PAGE APPLICATION
  6. 6. COMPONENTS TRADITIONAL WEBSITE
  7. 7. SERVER-BASED APPLICATION TRADITIONAL WEBSITE
  8. 8. MULTIPLE PAGES TRADITIONAL WEBSITE
  9. 9. Evolution INTRODUCTION TO SINGLE PAGE APPLICATION
  10. 10. NOWADAYS • Modern browsers • JavaScript becomes more powerful • HTML5 - Thank God! You’re here • More focus on UX (User Experience) EVOLUTION
  11. 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. 12. Single Page Application INTRODUCTION TO SINGLE PAGE APPLICATION
  13. 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. 14. SPA – SINGLE PAGE APPLICATION SINGLE PAGE APPLICATION
  15. 15. BENEFITS SINGLE PAGE APPLICATION • No page flicker • Javascript-based rendering • Better UX • Faster interaction
  16. 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. 17. Examples INTRODUCTION TO SINGLE PAGE APPLICATION
  18. 18. HOW CAN I BUILD A SPA? SINGLE PAGE APPLICATION • Keep the principles in your mind • Use a JavaScript framework adopted the principles
  19. 19. THAT’S IT??? SINGLE PAGE APPLICATION
  20. 20. Challenges INTRODUCTION TO SINGLE PAGE APPLICATION
  21. 21. SEARCH ENGINE OPTIMIZATION CHALLENGES
  22. 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. 23. SPEED OF INITIAL LOAD CHALLENGES
  24. 24. SPEED OF INITIAL LOAD SOLUTION CHALLENGES Caching & Lazy-loading But… we can’t avoid that
  25. 25. BROWSER HISTORY CHALLENGES
  26. 26. BROWSER HISTORY SOLUTION CHALLENGES • Write JS code to handle the histories • Use HTML5 pushState
  27. 27. GOOGLE ANALYTICS CHALLENGES
  28. 28. GOOGLE ANALYTICS SOLUTION CHALLENGES Manually
  29. 29. CLIENT/SERVER CODE PARTITIONING CHALLENGES
  30. 30. CLIENT/SERVER CODE PARTITIONING - SOLUTION CHALLENGES • Use a logic-less template language • UI data binding
  31. 31. Takeaways INTRODUCTION TO SINGLE PAGE APPLICATION
  32. 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. 33. Q&A Is my website suitable to apply SPA? INTRODUCTION TO SINGLE PAGE APPLICATION
  34. 34. THANK YOU © 2013 KMS Technology
  • KseniyaPateyeva

    Nov. 25, 2019
  • Rahmathmohammad

    Jul. 9, 2018
  • d1m1

    Dec. 7, 2017
  • SamirMayekar

    Jul. 30, 2016
  • joobn

    Dec. 25, 2015
  • mjdrouin

    Nov. 18, 2015
  • SaifKassim

    Oct. 7, 2015
  • sj1233

    Mar. 23, 2015

Vistos

Vistos totais

9.390

No Slideshare

0

De incorporações

0

Número de incorporações

1.053

Ações

Baixados

398

Compartilhados

0

Comentários

0

Curtir

8

×