WDE08 Designing for interaction with Ajax

•

1 like•1,143 views

Satoshi Kikuchi

Web Directions East08 presentation sildes Presentation by Jeremy Keith

Technology

Communicating with the
server without refreshing
the whole page.

Microsoft IE5
Mozilla Safari Opera

XMLHttpRequest

Microsoft IE5
Mozilla Safari Opera
W3C
XMLHttpRequest

thin client

browser « » server
storage
processing

thin client

browser « » server
display storage
processing

rich client

browser « »XHR« » server
storage

rich client

browser « »XHR« » server
display storage

rich client

browser « »XHR« » server
display storage
processing

behaviour
presentation
structure

content

behaviour
presentation
structure HTML

content

behaviour
presentation CSS
structure HTML

content

behaviour JavaScript
presentation CSS
structure HTML

content

browser server
display storage
processing

browser « »XHR« » server
display storage
processing

deceptively
rich client
browser « »XHR« » server
display storage
processing

{
navigation
search
main content
browser log on form
shopping cart
footer

navigation
search
main content
browser XHR log on form
shopping cart
footer

paradox?
plan for Ajax from the start
implement Ajax at the end

pattern recognition
sign up
rate this add to cart

pattern recognition
sign upadd a comment
rate this add to cart

pattern recognition
sign upadd a comment
rate this add to cart
search results?

pattern recognition
sign upadd a comment
rate this add to cart
search results?
pagination?

feedback
what is happening?
what just happened?

conventions
status indicators
yellow fade

conventions
status indicators
yellow fade
drag’n’drop

beyond the browser
the back button
bookmarking

adactio.com

http://flickr.com/photos/julianbleecker/3867804/
http://flickr.com/photos/ferricide/501816333/
http://flickr.com/photos/mollyeh11/13664426/
http://flickr.com/photos/chuckbiscuito/161971512/

thank you
adactio.com

http://flickr.com/photos/julianbleecker/3867804/
http://flickr.com/photos/ferricide/501816333/
http://flickr.com/photos/mollyeh11/13664426/
http://flickr.com/photos/chuckbiscuito/161971512/

Similar to WDE08 Designing for interaction with Ajax

Bulletproof Ajax

adactio

Bulletproof Ajax

2tique

Explaining Ajax

adactio

Netapp Michael Galpin

rajivmordani

HTML5 and Beyond

dynamis

Better Front-end Development in Atlassian Plugins

Wojciech Seliga

Javascript under the hood

Ridhwana Khan

SSR with Quasar Framework - JSNation 2019

Razvan Stoenescu

Walther Aspnet4

rsnarayanan

Building Atlassian Connect add-ons with client-server frameworks like Express.JS and Play produces powerful add-ons, but requires hosting and database consideration. In contrast, "static" Connect add-ons are easier to write and far simpler to deploy. A static Connect add-on is simply a set of files (including an atlassian-connect.json descriptor) that are web accessible, either through a web server or via deployment to a CDN. Static add-ons have several advantages. First, infinite scalability. Why pay for CPU when you can let the user agent do the work? Second, simple persistence. Why pay for disk when you have local storage and JIRA & Confluence's persistence REST APIs? Third, extreme performance. Let a worldwide CDN serve your files from the nearest edge - it's literally impossible to compete with a static add-on when it comes to performance! Finally, easy caching. Why bother serving requests when your unchanged static files can be cached indefinitely with simple HTTP caching? In this talk I'll highlight the benefits and restrictions of static add-on architecture, and discuss the nuts and bolts of implementing a static add-on. I'll also show off the static add-on skeleton that will get your static add-on development off to a flying start.

AtlasCamp 2014: Static Connect Add-ons

Atlassian

Brunch With Coffee

Sébastien Gruhier

WHAT IS HTML5? (at CSS Nite Osaka)

Shumpei Shiraishi

How to make Ajax Libraries work for you

Simon Willison

Web Performance 101

Uri Lavi

RIAs

Jonathan Snook

Introduction to Alfresco Surf Platform

Alfresco Software

Aspnet Ajax Performance Improvement

Lance Zhang

Jarv.us Showcase — SenchaCon 2011

Chris Alfano

Building a modern web (or mobile) application requires a lot of tools, frameworks and techniques. This session shows how JHipster unites popular frameworks like AngularJS, Spring Boot and Bootstrap. Using Yeoman, a scaffolding tool for modern webapps, JHipster will generate a project that uses Java 8, SQL or NoSQL databases, Spring profiles, Maven or Gradle, Gulp.js, WebSockets and BrowserSync. It also supports a number of different authentication mechanisms: classic session-based auth, OAuth 2.0, or token-based authentication. For cloud deployments, JHipster includes out-of-the-box support for Cloud Foundry and Heroku.

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016

Matt Raible

Designing Ajax Principles And Patterns For Designing Rich Internet Appl...

Manikanda kumar

Similar to WDE08 Designing for interaction with Ajax (20)

Bulletproof Ajax

Explaining Ajax

Netapp Michael Galpin

HTML5 and Beyond

Better Front-end Development in Atlassian Plugins

Javascript under the hood

SSR with Quasar Framework - JSNation 2019

Walther Aspnet4

AtlasCamp 2014: Static Connect Add-ons

Brunch With Coffee

WHAT IS HTML5? (at CSS Nite Osaka)

How to make Ajax Libraries work for you

Web Performance 101

RIAs

Introduction to Alfresco Surf Platform

Aspnet Ajax Performance Improvement

Jarv.us Showcase — SenchaCon 2011

Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016

Designing Ajax Principles And Patterns For Designing Rich Internet Appl...

Recently uploaded

Because observability is such a broad topic – and often something we learn on the job – it can feel like there’s too much to learn at once. But you don’t have to tackle everything and can start with the basics and build from there! Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack. No matter what tooling is in place, there are still observability fundamentals that developers should know. That’s why I’ve put together a primer on the different telemetry types, when to use them, how to understand the data journey, and what to look for in time series graphs.

Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)

Paige Cruz

ERP Contender Series: Acumatica vs. Sage Intacct

BrainSell Technologies

Design and Development of a Provenance Capture Platform for Data Science

Paolo Missier

Working together SRE & Platform Engineering

Marcus Vechiato

In the dynamic field of DevOps, the quest for efficiency and productivity is endless. This talk introduces a revolutionary toolkit: Large Language Models (LLMs), including ChatGPT, Gemini, and Claude, extending far beyond traditional coding assistance. We'll explore how LLMs can automate not just code generation, but also transform day-to-day operations such as crafting compelling cover letters for TPS reports, streamlining client communications, and architecting innovative DevOps solutions. Attendees will learn effective prompting strategies and examine real-life use cases, demonstrating LLMs' potential to redefine productivity in the DevOps landscape. Join us to discover how to harness the power of LLMs for a comprehensive productivity boost across your DevOps activities.

ChatGPT and Beyond - Elevating DevOps Productivity

VictorSzoltysek

In today's digital world, trust is key to customer relationships, but keeping it is a huge challenge. Customers are well-informed and empowered, quick to change brands if their trust is broken, even if it costs them more. This puts a lot of pressure on organizations to handle trust and safety issues with great care and transparency. The challenge, however, is real. Fragmented solutions have left privacy, legal, and security teams in a perpetual cycle of catch-up, struggling to update privacy notices, manage customer data rights, and answer lengthy security questionnaires—all while trying to prove ROI to the business. It's a thankless job, filled with repetition, tedious tasks, and constant interdepartmental coordination. Combine this with fast regulatory changes and the quick evolution of AI, and it becomes overwhelming. Join this webinar to learn more about TrustArc's new innovative solution Trust Center, the only unified, no-code online hub for trust and safety information built for privacy, security, compliance, and legal teams. Trust Center streamlines your path to compliance, shortens the pre-sales cycle, and reduces both legal and regulatory risks, saving time, effort, and cost. This webinar will review: - Why companies are building unified Trust Centers for a robust privacy program. - How unified Trust Centers streamline sales cycles, ensure regulatory compliance, and reduce operational bottlenecks. - How compliance, legal, security, GRC, and privacy teams benefit from a unified Trust Center in terms of needs, pains, and outcomes. - How TrustArc Trust Center saves time and work while reducing legal, reputational, and compliance risk by effectively managing policies, notices, terms, and disclosures, and providing real-time updates on subprocessors.

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...

TrustArc

In the ever-evolving landscape of data management, Zero-ETL is an approach that is reshaping how businesses handle and integrate their data. This webinar explores Zero-ETL, a paradigm shift from the traditional Extract, Transform, Load (ETL) process, offering a more streamlined, efficient, and real-time data integration method. We will begin with an introduction to the concept of Zero-ETL, including how it allows direct access to data in its native environment and real-time data transformation, providing up-to-date information with significantly reduced data redundancy. Next, we'll take you through several demonstrations showing how Zero-ETL can deliver real-time data and enable the free movement of data between systems. We will also discuss the various tools that support all aspects of Zero-ETL, providing attendees with an understanding of how they can adopt this innovative approach in their organizations. Lastly, the session will conclude with an interactive Q&A segment, allowing participants to gain deeper insights into how Zero-ETL can be tailored to their specific business needs and how they can get started today. Join us to discover how Zero-ETL can elevate your organization's data strategy.

The Zero-ETL Approach: Enhancing Data Agility and Insight

Safe Software

In this session, we will discuss the journey of API governance from its initial, ungoverned state to the development of sophisticated models that tackle contemporary challenges. We'll explore how APIs have become essential in the intersection of business and technology, adapting to advancements and evolving needs. We'll focus on how organizations have moved from launching to monetizing APIs, using models like pay-per-use and subscriptions, and finding the right balance between technical implementation and business strategy. We'll also highlight the impact of governance on monetization strategies, especially how data security, compliance, and service quality influence pricing. Real-world examples will demonstrate the effective integration of governance with monetization, including AI's role in dynamic pricing. Looking ahead, we'll share insights into future trends in API governance and monetization, emphasizing the importance of adaptability, continuous learning, and innovation.

API Governance and Monetization - The evolution of API governance

WSO2

Ivanti’s Patch Tuesday breakdown goes beyond patching your applications and brings you the intelligence and guidance needed to prioritize where to focus your attention first. Catch early analysis on our Ivanti blog, then join industry expert Chris Goettl for the Patch Tuesday Webinar Event. There we’ll do a deep dive into each of the bulletins and give guidance on the risks associated with the newly-identified vulnerabilities.

2024 May Patch Tuesday

Ivanti

AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)

Samir Dash

Stronger Together: Developing an Organizational Strategy for Accessible Desig...

caitlingebhard1

Key topics covered: - Understanding the basics of IAM and its significance in the modern enterprise. IAM in a platformless environment - Tackling real-world issues like prioritizing frictionless yet secure user access, securing high-value APIs, integrating to business, compliance, and adapting to cloud native environments with scalable solutions - Practical demonstrations of how WSO2 products can be instrumental in deploying efficient IAM solutions - Preparing for upcoming trends and innovations in identity management

Navigating Identity and Access Management in the Modern Enterprise

WSO2

At its core, the challenge of managing Human Resources data is an integration challenge: estimates range from 2-3 HR systems in use at a typical SMB, up to a few dozen systems implemented amongst enterprise HR departments, and these systems seldom integrate seamlessly between themselves. Providing a multi-tenant, cloud-native solution to integrate these hundreds of HR-related systems, normalize their disparate data models and then render that consolidated information for stakeholder decision making has been a substantial undertaking, but one significantly eased by leveraging Ballerina. In this session, we’ll cover: The overall software architecture for VHR’s Cloud Data Platform Critical decision points leading to adoption of Ballerina for the CDP Ballerina’s role in multiple evolutionary steps to the current architecture Roadmap for the CDP architecture and plans for Ballerina WSO2’s partnership in bringing continual success for the CD

Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform

WSO2

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx

FIDO Alliance

Intro to Passkeys and the State of Passwordless.pptx

FIDO Alliance

CNIC Information System with Pakdata Cf In Pakistan

danishmna97

Retrieval augmented generation (RAG) is the most popular style of large language model application to emerge from 2023. The most basic style of RAG works by vectorizing your data and injecting it into a vector database like Milvus for retrieval to augment the text output generated by an LLM. This is just the beginning. One of the ways that we can extend RAG, and extend AI, is through multilingual use cases. Typical RAG is done in English using embedding models that are trained in English. In this talk, we’ll explore how RAG could work in languages other than English. We’ll explore French, Chinese, and Polish.

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Zilliz

Event-Driven Architecture Masterclass: Challenges in Stream Processing

ScyllaDB

How to Check CNIC Information Online with Pakdata cf

danishmna97

DBX First Quarter 2024 Investor Presentation

Dropbox

Recently uploaded (20)

Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)

ERP Contender Series: Acumatica vs. Sage Intacct

Design and Development of a Provenance Capture Platform for Data Science

Working together SRE & Platform Engineering

ChatGPT and Beyond - Elevating DevOps Productivity

TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...

The Zero-ETL Approach: Enhancing Data Agility and Insight

API Governance and Monetization - The evolution of API governance

2024 May Patch Tuesday

AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)

Stronger Together: Developing an Organizational Strategy for Accessible Desig...

Navigating Identity and Access Management in the Modern Enterprise

Less Is More: Utilizing Ballerina to Architect a Cloud Data Platform

Tales from a Passkey Provider Progress from Awareness to Implementation.pptx

Intro to Passkeys and the State of Passwordless.pptx

CNIC Information System with Pakdata Cf In Pakistan

Introduction to Multilingual Retrieval Augmented Generation (RAG)

Event-Driven Architecture Masterclass: Challenges in Stream Processing

How to Check CNIC Information Online with Pakdata cf

DBX First Quarter 2024 Investor Presentation

WDE08 Designing for interaction with Ajax

1. designing for interaction Ajax with

2. Ajax

4. Communicating with the server without refreshing the whole page.

5. speed

7. frames

8. frames iframe

9. frames iframe Flash

10. frames iframe Flash XMLHttpRequest

11. XMLHttpRequest

12. Microsoft XMLHttpRequest

13. Microsoft IE5 XMLHttpRequest

14. Microsoft IE5 Mozilla Safari Opera XMLHttpRequest

15. Microsoft IE5 Mozilla Safari Opera W3C XMLHttpRequest

16. asynchronous

17. asynchronous

18. asynchronous

19. asynchronous XMLHttpRequest

20.

21. thin client browser « » server

22. thin client browser « » server storage

23. thin client browser « » server storage processing

24. thin client browser « » server display storage processing

25.

26. rich client browser server

27. rich client browser « »XHR« » server

28. rich client browser « »XHR« » server storage

29. rich client browser « »XHR« » server display storage

30. rich client browser « »XHR« » server display storage processing

31.

32. progressive enhancement

33. content

34. structure content

35. presentation structure content

36. behaviour presentation structure content

37. behaviour presentation structure HTML content

38. behaviour presentation CSS structure HTML content

39. behaviour JavaScript presentation CSS structure HTML content

40. behaviour presentation CSS structure HTML content

41. behaviour presentation structure HTML content

42. progressive enhancement

43. progressive enhancement XMLHttpRequest

44. Hijax

45. browser server

46. browser server storage

47. browser server storage processing

48. browser server display storage processing

49. browser « »XHR« » server display storage processing

50. deceptively rich client browser « »XHR« » server display storage processing

51.

52. browser server

53. { navigation search main content browser log on form shopping cart footer

54. navigation search main content browser XHR log on form shopping cart footer

55. paradox?

56. paradox? plan for Ajax from the start

57. paradox? plan for Ajax from the start implement Ajax at the end

58. pattern recognition

59. pattern recognition sign up

60. pattern recognition sign up add to cart

61. pattern recognition sign up rate this add to cart

62. pattern recognition sign upadd a comment rate this add to cart

63. pattern recognition sign upadd a comment rate this add to cart search results?

64. pattern recognition sign upadd a comment rate this add to cart search results? pagination?

65. feedback

66. feedback what is happening?

67. feedback what is happening? what just happened?

68.

69. conventions

70. conventions status indicators

71. conventions status indicators yellow fade

72. conventions status indicators yellow fade drag’n’drop

73. beyond the browser

74. beyond the browser the back button

75. beyond the browser the back button bookmarking

76. user testing

77. adactio.com http://flickr.com/photos/julianbleecker/3867804/ http://flickr.com/photos/ferricide/501816333/ http://flickr.com/photos/mollyeh11/13664426/ http://flickr.com/photos/chuckbiscuito/161971512/

78. thank you adactio.com http://flickr.com/photos/julianbleecker/3867804/ http://flickr.com/photos/ferricide/501816333/ http://flickr.com/photos/mollyeh11/13664426/ http://flickr.com/photos/chuckbiscuito/161971512/

WDE08 Designing for interaction with Ajax

Recommended

Recommended

More Related Content

Similar to WDE08 Designing for interaction with Ajax

Similar to WDE08 Designing for interaction with Ajax (20)

More from Satoshi Kikuchi

More from Satoshi Kikuchi (13)

Recently uploaded

Recently uploaded (20)

WDE08 Designing for interaction with Ajax