1. ExtJS on Rails
Michael Siebert

2. Michael Siebert
• Freelancer Ruby / Rails / JavaScript / PHP
• www.siebert-wd.de
• siebertm85@googlemail.com

3. Buzzword-Bingo!

4. Rich Internet
Applications

5. Rich Internet
Applications
Wikipedia:
„Der Begriff Rich Internet Application (RIA,
deutsch: reichhaltige Internet Anwendung)
beschreibt eine Anwendung, die Internet-
Techniken benutzt und eine intuitive
Benutzeroberfläche bietet.“

6. (c) amrufm http://flickr.com/photos/amrufm/2195019023/

9. Rich Internet
Applications

10. Rich Internet
Applications
• Anspruchsvolles UI

11. Rich Internet
Applications
• Anspruchsvolles UI
• Tastenkürzel

12. Rich Internet
Applications
• Anspruchsvolles UI
• Tastenkürzel
• Drag‘n‘Drop

13. Rich Internet
Applications
• Anspruchsvolles UI
• Tastenkürzel
• Drag‘n‘Drop
• Clientseitige Berechnungen

14. Rich Internet
Applications
• Anspruchsvolles UI
• Tastenkürzel
• Drag‘n‘Drop
• Clientseitige Berechnungen
• Geschwindigkeit

15. Javascript + HTML + CSS + Backend

16. Javascript + HTML + CSS + Backend

17. Javascript + HTML + CSS + Backend

18. Javascript + HTML + CSS + Backend

19. Javascript + HTML + CSS + Backend
Framework?

20. Javascript + HTML + CSS + Backend
Framework?
+

21. Javascript + HTML + CSS + Backend
Framework?
+

22. Javascript + HTML + CSS + Backend
Framework?
+

23. Javascript + HTML + CSS + Backend
Framework?
+

24. Javascript + HTML + CSS + Backend
Framework?

25. Javascript + HTML + CSS + Backend
Framework?

26. Javascript + HTML + CSS + Backend
Framework?

27. Javascript + HTML + CSS + Backend
Framework?

28. ExtJS?

29. ExtJS?
• JavaScript Framework

30. ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform

31. ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz

32. ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
• Rich Internet Applications

33. ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
• Rich Internet Applications
• Adobe AIR Integration (optional)

34. ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
• Rich Internet Applications
• Adobe AIR Integration (optional)
• Modularer Aufbau

35. Demo

36. Frameworks

37. Frameworks
• Adapter für

38. Frameworks
• Adapter für
• Prototype & Script.aculo.us

39. Frameworks
• Adapter für
• Prototype & Script.aculo.us
• jQuery

40. Frameworks
• Adapter für
• Prototype & Script.aculo.us
• jQuery
• YUI

41. Frameworks
• Adapter für
• Prototype & Script.aculo.us
• jQuery
• YUI
• oder nur ExtJS

42. (c) Simon Greig http://flickr.com/photos/xrrr/2321685873/

43. (c) SpAvAAi http://flickr.com/photos/spavaai/2536426227/

44. Rails?

45. Rails?
• „Normale“ Rails-Anwendung
• Views in HTML
• vereinzelt ExtJS nutzen

46. Rails?
• „Normale“ Rails-Anwendung
• Views in HTML
• vereinzelt ExtJS nutzen
• „Ganzheitlicher Ansatz“
• Anwendung komplett mit ExtJS
• Rails nur Datenlieferant

47. Kommunikation

48. Kommunikation
• XML
• Rails: collection.to_xml
• ExtJS: Ext.data.XMLReader

49. Kommunikation
• XML
• Rails: collection.to_xml
• ExtJS: Ext.data.XMLReader
• JSON
• Rails: collection.to_json
• ExtJS: Ext.data.JSONReader

50. REST!

51. Datenformate

52. Datenformate
Rails via to_json ExtJS erwartet
{
quot;resultsquot;: 2,
[{
quot;rootquot;: [{
quot;titlequot;: quot;Rails scalesquot;
quot;titlequot;: quot;Rails scalesquot;
},{
},{
quot;titlequot;: quot;Ruby scalesquot;
quot;titlequot;: quot;Ruby scalesquot;
}]
}]
}

53. Datenformate
Rails via to_json ExtJS erwartet
{
quot;resultsquot;: 2,
[{
quot;rootquot;: [{
quot;titlequot;: quot;Rails scalesquot;
quot;titlequot;: quot;Rails scalesquot;
},{
},{
quot;titlequot;: quot;Ruby scalesquot;
quot;titlequot;: quot;Ruby scalesquot;
}]
}]
}

54. Datenformate
Rails via to_json ExtJS erwartet
{
quot;resultsquot;: 2,
[{
quot;rootquot;: [{
quot;titlequot;: quot;Rails scalesquot;
quot;titlequot;: quot;Rails scalesquot;
},{
},{
quot;titlequot;: quot;Ruby scalesquot;
quot;titlequot;: quot;Ruby scalesquot;
}]
}]
}
render :json => {
:root => @posts,
:results => @posts.size
}

55. Demo

56. Plugins

57. ext_scaffold
• Scaffold Generator von Martin Rehfeld
• http://tinyurl.com/2pu4pl

58. ext_js_with_rails

59. ext_js_with_rails
• Sammlung von Helferlein

60. ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild

61. ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration

62. ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
• YUICompressor

63. ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
• YUICompressor
• div. Controller und Model-Erweiterungen

64. ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
• YUICompressor
• div. Controller und Model-Erweiterungen
• ...

65. ext_js_with_rails

66. ext_js_with_rails
• (noch) kein Release

67. ext_js_with_rails
• (noch) kein Release
• http://github.com/siebertm/ext_js_with_rails/

69. Fragen?