Presentation is loading. Please wait.

Presentation is loading. Please wait.

INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Ken Wilner VP of Technology Progress Software.

Published byMarcia Pearson Modified over 7 years ago

Similar presentations

Presentation on theme: "INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Ken Wilner VP of Technology Progress Software."— Presentation transcript:

1 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Ken Wilner VP of Technology Progress Software

2 © 2006 Progress Software Corporation2 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue UI Choice Today? Desktop App Vs. Web App

3 © 2006 Progress Software Corporation3 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Rich Internet Applications Today  Zimbra http://demo2.zimbra.com/zimbra/mail  Google Maps http://maps.google.com  OpenEdge http://localhost/.....

4 © 2006 Progress Software Corporation4 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Desktop App vs. Browser App. Reach Rich Traditional Desktop Client Traditional Browser Client AJAX Client Gartner, Rich Internet Applications Are the Next Evolution of the Web, May 4, 2005

5 © 2006 Progress Software Corporation5 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Traditional Browser-based Application Time user activity process request request HTML user activity process request request HTML user activity Browser Server Server-based Processing

6 © 2006 Progress Software Corporation6 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Application Model Time Browser Server AJAX Engine process data request requestdata user activity event user activity event user activity event user activity event datarequest1 N-tier-based Processing request2 data

7 © 2006 Progress Software Corporation7 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks and Libraries  For the Enterprise  Conclusion

8 © 2006 Progress Software Corporation8 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX in a Nutshell  Architectural design pattern for building Rich Internet Applications (RIA)  Coined by Jesse James Garrett of Adaptive Path in 2005  Asynchronous JavaScript and XML Not necessarily asynchronous Not necessarily XML Absolutely JavaScript  Browser behaves like a desktop client  Works with most browsers – some differences

9 © 2006 Progress Software Corporation9 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Technologies  JavaScript General purpose programming language that runs in a browser Aka JScript aka ECMAScript  Cascading Style Sheets (CSS) Reusable styles for defining look of a Web page Script based or JavaScript settable  Document Object Model (DOM) XML parser Built-in document object allows widget-tree walker  XMLHttpRequest Communicate with a Web Server without a refresh Synchronous and asynchronous

10 © 2006 Progress Software Corporation10 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Traditional Browser-based vs. AJAX User Interface Web Server Backend Business Application HTTP(params) HTML(data)/CSS Browser Server Traditional User Interface AJAX Engine Web Server Backend Business Application HTTP (data) Transport Object JavaScript call HTML/CSS/data Browser Server AJAX

11 © 2006 Progress Software Corporation11 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Request Processing and OpenEdge Web Server Web Services Adapter\ WebSpeed AppServer/ WebSpeed Browser AJAX Engine XMLHttpRequest CustNum Submit function callback() {…} 1 6 7 5243

12 © 2006 Progress Software Corporation12 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Simple AJAX Code Demo

13 © 2006 Progress Software Corporation13 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks  For the Enterprise  Conclusion

14 © 2006 Progress Software Corporation14 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Data Binding Models  HTML Snippet  JavaScript  Encoded String  JSON – JavaScript Object Notation  XML  Web Services

15 © 2006 Progress Software Corporation15 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Data Binding Demo

16 © 2006 Progress Software Corporation16 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Data Binding Models

17 © 2006 Progress Software Corporation17 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks  For the Enterprise  Conclusion

18 © 2006 Progress Software Corporation18 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Frameworks and Libraries XMLHttpRequest Remoting Toolkits Dojo,JSON-RPC,Prototype, Zimbra UI Widgets Dojo, Prototype, Backbase, Zimbra, ActiveWidgets, TurboWidgets, Yahoo UI Low Level Effects Dojo, Rico, Scriptaculous Development Environment and Tools Ajax Toolkit Framework Backbase Community Edition JackBE General Interface MS Atlas JavaScript Utilities Prototype Dojo

19 © 2006 Progress Software Corporation19 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Dojo  UI Low Level Affects Animation affects Drag and drop Fade in/out  UI Widgets Tabs Trees Menu Combo box Comprehensive JavaScript Toolkit – largely undocumented

20 © 2006 Progress Software Corporation20 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Dojo  JavaScript Utilities Object inheritance and manipulation Strings Request timeouts Type checking Dom manipulation Data Structures Crypto JSON serialization/deserialization  Remoting Cross-browser XMLHttpRequest handling Comprehensive JavaScript Toolkit – largely undocumented

21 © 2006 Progress Software Corporation21 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Prototype Demo

22 © 2006 Progress Software Corporation22 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Prototype  Cross-browser XMLHttpRequest handling  Utility Routines Object creation and inheritance Array manipulation String manipulation  Simplified DOM API

23 © 2006 Progress Software Corporation23 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Prototype Demo

24 © 2006 Progress Software Corporation24 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Scriptaculous  Effects Library Size Position Transparency  Drag and Drop Library

25 © 2006 Progress Software Corporation25 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Prototype Demo

26 © 2006 Progress Software Corporation26 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks  For the Enterprise  Conclusion

27 © 2006 Progress Software Corporation27 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX For the Enterprise  Object-oriented library  Standard widgets Datagrid Tabs Tree Combo Etc.  Simple XML binding or record sets make ideal for Web services and Prodatasets ActiveWidgets

28 © 2006 Progress Software Corporation28 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX for the Enterprise Demo

29 © 2006 Progress Software Corporation29 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Agenda  Concepts and Technologies  Data Models  Frameworks  For the Enterprise  Conclusion

30 © 2006 Progress Software Corporation30 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue AJAX Tools That You Want to Know!!!!  Firefox Dom Inspector  Firefox Firebug https://addons.mozilla.org/addon.php?id=1843  Eclipse Ajax Toolkit Framework http://www.alphaworks.ibm.com/tech/ajaxtk  Eclipse Web http://www.eclipse.org/webtools

31 © 2006 Progress Software Corporation31 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Resources  Web Sites http://www.ajaxian.com/ http://www.ajaxinfo.com/ http://www.ajaxpatterns.org/ http://www.ajaxfreaks.com http://developer.yahoo.com/yui/index.html  Books Pragmatic Ajax Ajax in Action Ajax for Hackers  Just Google for AJAX AJAX Javascript XMLHttpRequest -> 1.8M hits

32 © 2006 Progress Software Corporation32 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue In Summary  AJAX – rich UI for the Web  Start small – technology still immature  Moving your application to OpenEdge® Reference Architecture and SOA will get you ready for AJAX  You can use with OpenEdge today  Looks to tools and frameworks to help you out – still evolving  Start learning now!!!

33 © 2006 Progress Software Corporation33 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Questions?

34 © 2006 Progress Software Corporation34 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Thank you for your time

35 © 2006 Progress Software Corporation35 INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue

Download ppt "INNOV-16: Rich User Interface for the Web???? AJAX to the Rescue Ken Wilner VP of Technology Progress Software."

Similar presentations

University of Virginia 1 Modern Web Application Development Overview of some newer web applications methods Web 2.0 Ajax fundamentals Ruby on Rails.

University of Virginia 1 Modern Web Application Development Overview of some newer web applications methods Web 2.0 Ajax fundamentals Ruby on Rails.
9. AJAX & RIA. 2 Motto: O! call back yesterday, bid time return. — William Shakespeare.

9. AJAX & RIA. 2 Motto: O! call back yesterday, bid time return. — William Shakespeare.
6/3/2015eBiquity1 Tutorial on AJAX Anubhav Kale (akale1 AT cs DOT umbc DOT edu)

6/3/2015eBiquity1 Tutorial on AJAX Anubhav Kale (akale1 AT cs DOT umbc DOT edu)
© 2007 IBM Corporation IBM Emerging Technologies Enabling an Accessible Web 2.0 Becky Gibson Web Accessibility Architect.

© 2007 IBM Corporation IBM Emerging Technologies Enabling an Accessible Web 2.0 Becky Gibson Web Accessibility Architect.
Google Web Toolkit Dudeanu Ermoghen Ib ă nescu Diana Melinte Laurenţiu-Ionuţ Petrişor Ionuţ C ă t ă lin.

Google Web Toolkit Dudeanu Ermoghen Ib ă nescu Diana Melinte Laurenţiu-Ionuţ Petrişor Ionuţ C ă t ă lin.
Cloud Computing Lecture #7 Introduction to Ajax Jimmy Lin The iSchool University of Maryland Wednesday, October 15, 2008 This work is licensed under a.

Cloud Computing Lecture #7 Introduction to Ajax Jimmy Lin The iSchool University of Maryland Wednesday, October 15, 2008 This work is licensed under a.
Web 2.0 with AJAX Students : LASC Ioana KELEMEN Csilla POP Dan Adrian CIOBANU Dumitru Daniel Project leader : Ahmed RHIAT.

Web 2.0 with AJAX Students : LASC Ioana KELEMEN Csilla POP Dan Adrian CIOBANU Dumitru Daniel Project leader : Ahmed RHIAT.
© 2006 by IBM 1 How to use Eclipse to Build Rich Internet Applications With PHP and AJAX Phil Berkland IBM Software Group Emerging.

© 2006 by IBM 1 How to use Eclipse to Build Rich Internet Applications With PHP and AJAX Phil Berkland IBM Software Group Emerging.
Chapter 6 DOJO TOOLKITS. Objectives Discuss XML DOM Discuss JSON Discuss Ajax Response in XML, HTML, JSON, and Other Data Type.

Chapter 6 DOJO TOOLKITS. Objectives Discuss XML DOM Discuss JSON Discuss Ajax Response in XML, HTML, JSON, and Other Data Type.
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server.

Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server.
The Easiest Way to Write Web Applications Jordi Sastre IT Architect, PSC May 2012.

The Easiest Way to Write Web Applications Jordi Sastre IT Architect, PSC May 2012.
RIA Introduce Comparison among several technology.

RIA Introduce Comparison among several technology.
JavaScript & jQuery the missing manual Chapter 11

JavaScript & jQuery the missing manual Chapter 11
1 Ajax. 2 What’s Ajax? AJAX is a combination of a few technologies that has come together in the past few years AJAX used to be an acronym for Asynchronous.

1 Ajax. 2 What’s Ajax? AJAX is a combination of a few technologies that has come together in the past few years AJAX used to be an acronym for Asynchronous.
CS 4720 RESTfulness and AJAX CS 4720 – Web & Mobile Systems.

CS 4720 RESTfulness and AJAX CS 4720 – Web & Mobile Systems.
Philly.NET Hands-on Labs JAVASCRIPT SERIES. July 9: JavaScript Syntax Visual Studio ◦Projects ◦Editors ◦Debugging ◦Script blocks ◦Minification and bundling.

Philly.NET Hands-on Labs JAVASCRIPT SERIES. July 9: JavaScript Syntax Visual Studio ◦Projects ◦Editors ◦Debugging ◦Script blocks ◦Minification and bundling.
May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Build Great Web Application 'Fast and Easy'

May 16 – 18, 2007 Copyright 2007, Data Access Worldwide May 16 – 18, 2007 Copyright 2007, Data Access Worldwide Build Great Web Application 'Fast and Easy'
Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1.

Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1.
Yahoo! User Interface (YUI) Library Natly Mekdara.

Yahoo! User Interface (YUI) Library Natly Mekdara.
Ajax Runtime Toolkits IBM Emerging Technologies. What is an AJAX Toolkit/Framework? An AJAX Toolkit/Runtime is more than just XMLHTTPRequest Should includes:

Ajax Runtime Toolkits IBM Emerging Technologies. What is an AJAX Toolkit/Framework? An AJAX Toolkit/Runtime is more than just XMLHTTPRequest Should includes:

Similar presentations

Ads by Google