Ext Js On Rails

2,204 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,204
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
41
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ext Js On Rails

  1. 1. ExtJS on Rails Michael Siebert
  2. 2. Michael Siebert • Freelancer Ruby / Rails / JavaScript / PHP • www.siebert-wd.de • siebertm85@googlemail.com
  3. 3. Buzzword-Bingo!
  4. 4. Rich Internet Applications
  5. 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. 6. (c) amrufm http://flickr.com/photos/amrufm/2195019023/
  7. 7. Rich Internet Applications
  8. 8. Rich Internet Applications • Anspruchsvolles UI
  9. 9. Rich Internet Applications • Anspruchsvolles UI • Tastenkürzel
  10. 10. Rich Internet Applications • Anspruchsvolles UI • Tastenkürzel • Drag‘n‘Drop
  11. 11. Rich Internet Applications • Anspruchsvolles UI • Tastenkürzel • Drag‘n‘Drop • Clientseitige Berechnungen
  12. 12. Rich Internet Applications • Anspruchsvolles UI • Tastenkürzel • Drag‘n‘Drop • Clientseitige Berechnungen • Geschwindigkeit
  13. 13. Javascript + HTML + CSS + Backend
  14. 14. Javascript + HTML + CSS + Backend
  15. 15. Javascript + HTML + CSS + Backend
  16. 16. Javascript + HTML + CSS + Backend
  17. 17. Javascript + HTML + CSS + Backend Framework?
  18. 18. Javascript + HTML + CSS + Backend Framework? +
  19. 19. Javascript + HTML + CSS + Backend Framework? +
  20. 20. Javascript + HTML + CSS + Backend Framework? +
  21. 21. Javascript + HTML + CSS + Backend Framework? +
  22. 22. Javascript + HTML + CSS + Backend Framework?
  23. 23. Javascript + HTML + CSS + Backend Framework?
  24. 24. Javascript + HTML + CSS + Backend Framework?
  25. 25. Javascript + HTML + CSS + Backend Framework?
  26. 26. ExtJS?
  27. 27. ExtJS? • JavaScript Framework
  28. 28. ExtJS? • JavaScript Framework • Cross-Browser, Cross-Platform
  29. 29. ExtJS? • JavaScript Framework • Cross-Browser, Cross-Platform • GPLv3 und kommerzielle Lizenz
  30. 30. ExtJS? • JavaScript Framework • Cross-Browser, Cross-Platform • GPLv3 und kommerzielle Lizenz • Rich Internet Applications
  31. 31. ExtJS? • JavaScript Framework • Cross-Browser, Cross-Platform • GPLv3 und kommerzielle Lizenz • Rich Internet Applications • Adobe AIR Integration (optional)
  32. 32. ExtJS? • JavaScript Framework • Cross-Browser, Cross-Platform • GPLv3 und kommerzielle Lizenz • Rich Internet Applications • Adobe AIR Integration (optional) • Modularer Aufbau
  33. 33. Demo
  34. 34. Frameworks
  35. 35. Frameworks • Adapter für
  36. 36. Frameworks • Adapter für • Prototype & Script.aculo.us
  37. 37. Frameworks • Adapter für • Prototype & Script.aculo.us • jQuery
  38. 38. Frameworks • Adapter für • Prototype & Script.aculo.us • jQuery • YUI
  39. 39. Frameworks • Adapter für • Prototype & Script.aculo.us • jQuery • YUI • oder nur ExtJS
  40. 40. (c) Simon Greig http://flickr.com/photos/xrrr/2321685873/
  41. 41. (c) SpAvAAi http://flickr.com/photos/spavaai/2536426227/
  42. 42. Rails?
  43. 43. Rails? • „Normale“ Rails-Anwendung • Views in HTML • vereinzelt ExtJS nutzen
  44. 44. Rails? • „Normale“ Rails-Anwendung • Views in HTML • vereinzelt ExtJS nutzen • „Ganzheitlicher Ansatz“ • Anwendung komplett mit ExtJS • Rails nur Datenlieferant
  45. 45. Kommunikation
  46. 46. Kommunikation • XML • Rails: collection.to_xml • ExtJS: Ext.data.XMLReader
  47. 47. Kommunikation • XML • Rails: collection.to_xml • ExtJS: Ext.data.XMLReader • JSON • Rails: collection.to_json • ExtJS: Ext.data.JSONReader
  48. 48. REST!
  49. 49. Datenformate
  50. 50. 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; }] }] }
  51. 51. 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; }] }] }
  52. 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; }] }] } render :json => { :root => @posts, :results => @posts.size }
  53. 53. Demo
  54. 54. Plugins
  55. 55. ext_scaffold • Scaffold Generator von Martin Rehfeld • http://tinyurl.com/2pu4pl
  56. 56. ext_js_with_rails
  57. 57. ext_js_with_rails • Sammlung von Helferlein
  58. 58. ext_js_with_rails • Sammlung von Helferlein • script/js_autobuild
  59. 59. ext_js_with_rails • Sammlung von Helferlein • script/js_autobuild • JSLint Integration
  60. 60. ext_js_with_rails • Sammlung von Helferlein • script/js_autobuild • JSLint Integration • YUICompressor
  61. 61. ext_js_with_rails • Sammlung von Helferlein • script/js_autobuild • JSLint Integration • YUICompressor • div. Controller und Model-Erweiterungen
  62. 62. ext_js_with_rails • Sammlung von Helferlein • script/js_autobuild • JSLint Integration • YUICompressor • div. Controller und Model-Erweiterungen • ...
  63. 63. ext_js_with_rails
  64. 64. ext_js_with_rails • (noch) kein Release
  65. 65. ext_js_with_rails • (noch) kein Release • http://github.com/siebertm/ext_js_with_rails/
  66. 66. Fragen?

×