WDE08 Designing for interaction with Ajax

•

1 like•1,143 views

Satoshi Kikuchi

Web Directions East08 presentation sildes Presentation by Jeremy Keith

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/

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.

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 ImprovementLance Zhang

Jarv.us Showcase — SenchaCon 2011Chris Alfano

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

Matt Raible

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.

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

Foresee　見極めること

Satoshi Kikuchi

私たちの周りには日々、新しい技術がでてきては消えていきます。ともすると、自分が習得に時間をついやした言語がきえてしまうこともあります。また情報も、自分がブログがIT記事で読んだことが、間違っていたりと何が本当なのかわかりません。皆さんも、そんな経験はないでしょうか？では、私たちは残る技術や正しい情報を見極めることができるでしょうか？そのコンセプトと実例をおみせします。

Responsive Web Design　HTML5勉強会

Satoshi Kikuchi

Similar to WDE08 Designing for interaction with Ajax

Bulletproof Ajax

2tique

Bulletproof Ajaxadactio

Explaining Ajaxadactio

Netapp Michael Galpinrajivmordani

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 Aspnet4rsnarayanan

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 ImprovementLance Zhang

Jarv.us Showcase — SenchaCon 2011Chris Alfano

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

Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...

Ramesh Iyer

In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.

Neuro-symbolic is not enough, we need neuro-*semantic*

Frank van Harmelen

Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”. All of this illustrated with link prediction over knowledge graphs, but the argument is general.

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...

UiPathCommunity

💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™: See how to accelerate model training and optimize model performance with active learning Learn about the latest enhancements to out-of-the-box document processing – with little to no training required Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath. Speakers: 👨‍🏫 Andras Palfi, Senior Product Manager, UiPath 👩‍🏫 Lenka Dulovicova, Product Program Manager, UiPath

PHP Frameworks: I want to break free (IPC Berlin 2024)

Ralf Eggert

In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development. This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Sri Ambati

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024

Tobias Schneck

As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other? Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.

Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...

Product School

The Art of the Pitch: WordPress Relationships and Sales

Laura Byrne

Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes? All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.

From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...

Product School

IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx

Abida Shariff

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

Product School

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

James Anderson

Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management. The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM). Speakers: Bob Boule Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle. Gopinath Rebala Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

DanBrown980551

Do you want to learn how to model and simulate an electrical network from scratch in under an hour? Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)! During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook. PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides: - A fully editable and extendable library for grid component modelling; - Visualization tools to display your network; - Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses; The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well. What you will learn during the webinar: - For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills; - For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.

Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality

Inflectra

In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring. Learn about: • The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks. • Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective. • Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification. • Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process. Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.

ODC, Data Fabric and Architecture User Group

CatarinaPereira64715

Key Trends Shaping the Future of Infrastructure.pdf

Cheryl Hung

Bits & Pixels using AI for Good.........

Alison B. Lowndes

How world-class product teams are winning in the AI era by CEO and Founder, P...

Product School

Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...

Thierry Lestable

Knowledge engineering: from people to machines and back

Elena Simperl

Recently uploaded (20)

Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...

Neuro-symbolic is not enough, we need neuro-*semantic*

Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...

PHP Frameworks: I want to break free (IPC Berlin 2024)

GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024

Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...

The Art of the Pitch: WordPress Relationships and Sales

From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...

IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...

Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality

ODC, Data Fabric and Architecture User Group

Key Trends Shaping the Future of Infrastructure.pdf

Bits & Pixels using AI for Good.........

How world-class product teams are winning in the AI era by CEO and Founder, P...

Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...

Knowledge engineering: from people to machines and back

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