Architecture in Ajax Applications

•Transferir como PPTX, PDF•

5 gostaram•2,948 visualizações

This document summarizes best practices for architecting and optimizing Ajax applications. It discusses how application architectures have evolved from traditional MVC to a more dynamic model with code running in both the server and browser. It provides guidance on improving performance through proper markup, understanding browser specifics, optimizing network usage, caching strategies, and reducing DOM manipulation. The document emphasizes that performance must be a primary consideration in Ajax application design.

Tecnologia

Architectureof Ajax Applications Alois Reitbauer, dynaTrace Software

Whereisourcoderunning? past now Server Browser

MVC revisited View View Controller Controller Model Model Web 1.0 Web 2.0

MVC anddeployment View Controller Model Runtime (Dynamic) Load Time (Static)

Google includesspeed in ranking … Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

Theimpactof performance … Source: Jake Brutlag and Eric Schuman at Velocity 2009 …on business

Web Performance isdefinedby … ,[object Object]

.html . .png .js .css .css Browser underthehood Daten JavaScriptEngine DOM Connection Pool Connection Mgr XHR Renderer

HTTP isthelanguageofthe web … GET /index.html HTTP/1.1 Host: www.example.net HTTP/1.1 200 OK Content-Type: text/html …. Server Browser

Core principlesofnetworkusage … ,[object Object]

Content Size increases Transfer/Wait Time

Caching in Web Applications Serverside Data Cache Server providingCaching Information Cache per Client Server Proxy Cache for Many Clients Clients

Understanding HTTP headers ,[object Object]

Definesthetimestampoftheresourcedownload

Mais conteúdo relacionado

Mais procurados

Using Ajax In Domino Web Applicationsdominion

Ajax.pptMAGNA COLLEGE OF ENGINEERING

Overview of AJAXRoshith S Pai

Ajax PPTHub4Tech.com

Introduction to ajaxPihu Goel

Introduction to ajaxNir Elbaz

Ajax Presentationalaa.moustafa

Ajax PptHema Prasanth

Ajax presentationBharat_Kumawat

Ajax and PHPJohn Coggeshall

Ajax presentationengcs2008

An Introduction to Ajax Programminghchen1

Introduction to ajaxRaja V

Ajax technologySafal Agrawal

Ajax Introduction Presentationthinkphp

Ajax basicsVel004

Jquery AjaxAnand Kumar Rajana

Ajax ppt - 32 slidesSmithss25

AjaxDumindu Pahalawatta

Ajax workshopWBUTTUTORIALS

Mais procurados (20)

Using Ajax In Domino Web Applications

Ajax.ppt

Overview of AJAX

Ajax PPT

Introduction to ajax

Ajax Presentation

Ajax Ppt

Ajax presentation

Ajax and PHP

Ajax presentation

An Introduction to Ajax Programming

Introduction to ajax

Ajax technology

Ajax Introduction Presentation

Ajax basics

Jquery Ajax

Ajax ppt - 32 slides

Ajax

Ajax workshop

Semelhante a Architecture in Ajax Applications

Understanding Web Applications and Web Testing Tools - QAConfnarayanraman

Ajax to the Moondavejohnson

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI

Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin

HTML5 and Search Engine Optimization (SEO)Performics.Convonix

Javazone 2010-lift-framework-publicTimothy Perrett

MTaulty_DevWeek_Silverlightukdpe

An Introduction to Web ComponentsRed Pill Now

IE 8 et les standards du Web - Chris Wilson - Paris Web 2008Association Paris-Web

Intro to mobile web application developmentzonathen

Enhance Web PerformanceAdam Lu

Introduction to html5Muktadiur Rahman

Internet Explorer 8 for Developers by Christian ThilmanyChristian Thilmany

Robotlegs on Top of GaiaJesse Warden

DODN2009 - Jump Start SilverlightClint Edmonson

Advanced Web DevelopmentRobert J. Stein

Client-side JavaScript VulnerabilitiesOry Segal

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5Sadaaki HIRAI

phpbhuvana553

Unusual Web Bugsamiable_indian

Semelhante a Architecture in Ajax Applications (20)

Understanding Web Applications and Web Testing Tools - QAConf

Ajax to the Moon

It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える

Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers

HTML5 and Search Engine Optimization (SEO)

Javazone 2010-lift-framework-public

MTaulty_DevWeek_Silverlight

An Introduction to Web Components

IE 8 et les standards du Web - Chris Wilson - Paris Web 2008

Intro to mobile web application development

Enhance Web Performance

Introduction to html5

Internet Explorer 8 for Developers by Christian Thilmany

Robotlegs on Top of Gaia

DODN2009 - Jump Start Silverlight

Advanced Web Development

Client-side JavaScript Vulnerabilities

Familiar HTML5 - 事例とサンプルコードから学ぶ身近で普通に使わているHTML5

php

Unusual Web Bugs

Mais de Alois Reitbauer

Monitoring large scale Docker production environmentsAlois Reitbauer

Can a monitoring tool pass the turing testAlois Reitbauer

Monitoring Docker Application in ProductionAlois Reitbauer

The definition of normal - An introduction and guide to anomaly detection. Alois Reitbauer

Monitoring without alertsAlois Reitbauer

Ruxit - How we launched a global monitoring platform on AWS in 80 days. Alois Reitbauer

Microservice, Micro Deployments and DevOpsAlois Reitbauer

The Dark Art of Production AlertingAlois Reitbauer

W3C Web Performance - A detailed overviewAlois Reitbauer

The Dark of Building an Production Incident SysteAlois Reitbauer

The High Performance Web Application LifecycleAlois Reitbauer

Monitoring and Managing Java ApplicationsAlois Reitbauer

What it means to be fast in your industryAlois Reitbauer

Measuring User Experience in the BrowserAlois Reitbauer

Measuring User ExperienceAlois Reitbauer

Web Performance OptimzationAlois Reitbauer

What it means to deliver exceptional performanceAlois Reitbauer

Why you have less than a second to deliver exceptional performanceAlois Reitbauer

Measuring Performance in the BrowserAlois Reitbauer

Performance Forensics - Understanding Application PerformanceAlois Reitbauer

Mais de Alois Reitbauer (20)

Monitoring large scale Docker production environments

Can a monitoring tool pass the turing test

Monitoring Docker Application in Production

The definition of normal - An introduction and guide to anomaly detection.

Monitoring without alerts

Ruxit - How we launched a global monitoring platform on AWS in 80 days.

Microservice, Micro Deployments and DevOps

The Dark Art of Production Alerting

W3C Web Performance - A detailed overview

The Dark of Building an Production Incident Syste

The High Performance Web Application Lifecycle

Monitoring and Managing Java Applications

What it means to be fast in your industry

Measuring User Experience in the Browser

Measuring User Experience

Web Performance Optimzation

What it means to deliver exceptional performance

Why you have less than a second to deliver exceptional performance

Measuring Performance in the Browser

Performance Forensics - Understanding Application Performance

Último

Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo

08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls

Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2

How to convert PDF to text with Nanonetsnaman860154

A Domino Admins Adventures (Engage 2024)Gabriella Davis

Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsRoshan Dwivedi

IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge

Presentation on how to chat with PDF using ChatGPT code interpreternaman860154

Finology Group – Insurtech Innovation Award 2024The Digital Insurer

Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia

WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal

Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko

Boost PC performance: How more available memory can improve productivityPrincipled Technologies

The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge

Salesforce Community Group Quito, Salesforce 101Paola De la Torre

Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK

Scaling API-first – The story of a global engineering organizationRadu Cotescu

CNv6 Instructor Chapter 6 Quality of Servicegiselly40

Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik

Architecture in Ajax Applications

1. Architectureof Ajax Applications Alois Reitbauer, dynaTrace Software

2. Intro

3. Architecture?

4. The Last 7 months

5. Ajax Paradigm

6. Whereisourcoderunning? past now Server Browser

7. New applicationruntimes …

8. Architecturesarechanging … vs.

9. MVC revisited View View Controller Controller Model Model Web 1.0 Web 2.0

10. MVC anddeployment View Controller Model Runtime (Dynamic) Load Time (Static)

11. Performance

12. Google includesspeed in ranking … Source: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

13. Theimpactof performance … Source: Jake Brutlag and Eric Schuman at Velocity 2009 …on business

14.

15. Understanding Browser Specifics

16. Markup Processing

17. DOM

18. Network

19. Connectivity

20. WAN Remote Communication

21.

22. The Browser

23. .html . .png .js .css .css Browser underthehood Daten JavaScriptEngine DOM Connection Pool Connection Mgr XHR Renderer

24. Network

25. HTTP isthelanguageofthe web … GET /index.html HTTP/1.1 Host: www.example.net HTTP/1.1 200 OK Content-Type: text/html …. Server Browser

26.

27. Caching Support

28. Compression

29. Secure Communication

30. State Tracking

31. Multipart Response

32. Connection Management

33.

34. Beawareoftheconnectionlimit

35. Manydownloadsincreasewait time

36.

37. Merge Resources

38. UseSpriting

39. Content Size increases Transfer/Wait Time

40. Minify Content

41. Compress Content

42.

43. Caching in Web Applications Serverside Data Cache Server providingCaching Information Cache per Client Server Proxy Cache for Many Clients Clients

44.

45. Definesthetimestampoftheresourcedownload

46. Expires

47. Defineshowlongthisresourceis valid

48. E-Tag

49. Uniquelyidentifies a resource

50. Cache-Control

51. Definescachingstrategy

52. Last-Modified

53.

54. max-ageandExpires Browser Server GET … * Combine with E-Tag for evenmoreperformance max-age:10 Content Download Nodownload for 10 seconds

55.

56. State fromonerequesttothenext

57. Conversational State

58. State acrossseveralrequests

59. Neededfor a unitofwork

60. Session State

61.

62.

63.

64.

65. Layouting in thebrowser

66. Layoutingisdoneasynchronously

67. … but not always

68. DOM

69. The DOM isslow… … itisalwaystwocomponents youareworkingwith

70.

71. Bad – verybad - idea

72. Fragments, disconnected/hiddennodes

73. Fast, but not necesssarily fastest

74. Directlyinsert HTML

75. Adequately fast

76. Reliably fast in all browsers

77. Beawareof IE memoryleaks

78.

79.

80. Beawareofcomplexselectors

81. Avoidunnecessarylookups

82. Cache values in variables

83. Emulated vs. Native lookups

84. E.g. getElementByClassName in IE <8

85. DOM accesscausingrendering

86.

87. Your HTML decideshow fast youare <html> <head> <link rel=‘stylesheet‘ src=‘style.css‘> <scriptsrc=‘script1.js‘ defer></script> <script> // do somethingthat just blocksdownloads </script> </head> <body> Hello World! <scriptsrc=‘script2.js‘ defer></script> </body> </html>

88. Inline CSS - A real world sample * 9000 <td style="padding-left:10px; overflow: hidden; white-space: nowrap;"> = 2 MB

89. AJAX

90.

91. Retrieve an type ofcontent

92. <scriptsrc=‘app.mydomain …

93. Enabledomainsharding

94. returns JSONP

95. <imgsrc=‘beacon.mydomain ….

96.

97. Universal but slow

98. JSON

99. Native to JavaScript