Developing Rich Internet Applications

1. Developing Rich Internet Applications Walter Higgins

3. Definition “Rich Internet Applications (RIA) are web applications that have the features and functionality of traditional desktop applications.” – Wikipedia.org

4. RIA Technologies • JavaScript • MacroMedia Flash Player (plug-in required) • Java Applets (plug-in required)

5. Server-Side

6. Perl "When we were young, we were told that 'Everybody else is doing it' was a really stupid reason to do something. Now it's the standard reason for picking a particular software package." -- Barry Gehm

7. Perl, Python, Ruby

8. Dynamic Languages • No compilation required • Rich Object Literals • Greater Productivity • Less Code

9. Rich Object Literals (Perl) my $object = {name => ‘Walter Higgins’, dept => ‘Software Engineering’, date_of_birth => {day => 3, month => 3, year => 1971}, projects => [‘Manhattan’, ‘Guernica’] };

10. Domain-Specific Languages

11. DSLs • Languages created to solve a specific problem • Blur the line between code and data/configuration. “A DSL is all about moving up in abstraction until your code directly reflects the high-level concepts you're working in.” - Peter Harkins

12. DSL example (Rake) file 'build/dev/rake.html' => 'dev/rake.xml' do |t| require 'paper' maker = PaperMaker.new t.prerequisites[0], t.name maker.run end

13. Client-Side Technologies

14. Javascript

15. Rich Object Literals (JavaScript)(otherwise known as JSON) var object = {name: “Walter Higgins”, dept: “Software Engineering”, date_of_birth: {day: 3, month: 3, year: 1971}, projects: [“Manhattan”, “Guernica”] };

16. Unobtrusive Javascript Before: <ul> <li> <a href="#" onclick="window.open('link1.html')"> my link #1 </a> </li> <li> <a href="#" onclick="window.open('link2.html')"> my link #2 </a> </li> </ul> After: <ul id="popups"> <li> <a href="link1.html">my link #1</a> </li> <li> <a href="link2.html">my link #2</a> </li> </ul>

17. Unobtrusive Javascript // get the popups list var popupList = document.getElementById('popups'); // get all of the links in the list var popupLinks = popupList.getElementsByTagName('a'); for (var i = 0;i < popupLinks.length; i++) { // add an onclick handler for each link popupLinks[i].onclick = function(){ window.open(this.href); }; }

18. Live Tables

19. XMLHTTPRequest (Javascript’s secret sauce)

21. CSS

22. Scriptaculous (Javascript Effects Library) • Positioning (Drag & Drop) • Opacity (fade-in / fade-out effects)

23. Architecture

25. Data(Not Pages)

26. XML & JSON JSON: {status: “OK”, image: “cache/1_acdead.jpg”, uncompressed: “cache/1_acdeadWorking.jpg” } XML: <?xml version="1.0" ?> <response status=“OK”> <image> cache/1_acdead.jpg </image> <uncompressed> cache/1_acdeadWorking.jpg </uncompressed> </response>

27. Rich Enterprise Applications • Live Tables • Sortable and column-draggable tables • Lazy Combo-boxes

28. Lazy ComboBox

29. Lazy ComboBox

30. Lazy ComboBox

31. Lazy ComboBox

32. Conclusion • Dynamic languages on the server. • Think in terms of Data – not pages. • Javascript/CSS/HTML/DOM is ‘good enough’ for most applications.