ExtJS on RailsMichael Siebert
Michael Siebert
• Freelancer Ruby / Rails / JavaScript / PHP
• www.siebert-wd.de
Buzzword-Bingo!
Rich Internet Applications
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.“
(c) amrufm http://flickr.com/photos/amrufm/2195019023/
Rich Internet Applications
Rich Internet Applications
• Anspruchsvolles UI
Rich Internet Applications
• Anspruchsvolles UI
• Tastenkürzel
Rich Internet Applications
• Anspruchsvolles UI
• Tastenkürzel
• Drag‘n‘Drop
Rich Internet Applications
• Anspruchsvolles UI
• Tastenkürzel
• Drag‘n‘Drop
• Clientseitige Berechnungen
Rich Internet Applications
• Anspruchsvolles UI
• Tastenkürzel
• Drag‘n‘Drop
• Clientseitige Berechnungen
• Geschwindigkeit
Javascript + HTML + CSS + Backend
Javascript + HTML + CSS + Backend
Javascript + HTML + CSS + Backend
Javascript + HTML + CSS + Backend
Javascript + HTML + CSS + Backend
Framework?
Javascript + HTML + CSS + Backend
+Framework?
Javascript + HTML + CSS + Backend
+Framework?
Javascript + HTML + CSS + Backend
+Framework?
Javascript + HTML + CSS + Backend
+Framework?
Javascript + HTML + CSS + Backend
Framework?
Javascript + HTML + CSS + Backend
Framework?
Javascript + HTML + CSS + Backend
Framework?
Javascript + HTML + CSS + Backend
Framework?
ExtJS?
ExtJS?
• JavaScript Framework
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
• Rich Internet Applications
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
• Rich Internet Applications
• Adobe AIR Integration (optional)
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
• Rich Internet Applications
• Adobe AIR Integration (optional)
• Modularer Aufbau
Demo
Frameworks
Frameworks
• Adapter für
Frameworks
• Adapter für
• Prototype & Script.aculo.us
Frameworks
• Adapter für
• Prototype & Script.aculo.us
• jQuery
Frameworks
• Adapter für
• Prototype & Script.aculo.us
• jQuery
• YUI
Frameworks
• Adapter für
• Prototype & Script.aculo.us
• jQuery
• YUI
• oder nur ExtJS
(c) Simon Greig http://flickr.com/photos/xrrr/2321685873/
(c) SpAvAAi http://flickr.com/photos/spavaai/2536426227/
Rails?
Rails?
• „Normale“ Rails-Anwendung
• Views in HTML
• vereinzelt ExtJS nutzen
Rails?
• „Normale“ Rails-Anwendung
• Views in HTML
• vereinzelt ExtJS nutzen
• „Ganzheitlicher Ansatz“
• Anwendung komplett mit ExtJS
• Rails nur Datenlieferant
Kommunikation
Kommunikation
• XML
• Rails: collection.to_xml
• ExtJS: Ext.data.XMLReader
Kommunikation
• XML
• Rails: collection.to_xml
• ExtJS: Ext.data.XMLReader
• JSON
• Rails: collection.to_json
• ExtJS: Ext.data.JSONReader
REST!
Datenformate
DatenformateRails via to_json ExtJS erwartet
[{ "title": "Rails scales"},{ "title": "Ruby scales"}]
{ "results": 2, "root": [{ "title": "Rails scales" },{ "title": "Ruby scales" }]}
DatenformateRails via to_json ExtJS erwartet
[{ "title": "Rails scales"},{ "title": "Ruby scales"}]
{ "results": 2, "root": [{ "title": "Rails scales" },{ "title": "Ruby scales" }]}
DatenformateRails via to_json ExtJS erwartet
[{ "title": "Rails scales"},{ "title": "Ruby scales"}]
{ "results": 2, "root": [{ "title": "Rails scales" },{ "title": "Ruby scales" }]}
render :json => { :root => @posts, :results => @posts.size }
Demo
Plugins
ext_scaffold
• Scaffold Generator von Martin Rehfeld
• http://tinyurl.com/2pu4pl
ext_js_with_rails
ext_js_with_rails
• Sammlung von Helferlein
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
• YUICompressor
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
• YUICompressor
• div. Controller und Model-Erweiterungen
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
• YUICompressor
• div. Controller und Model-Erweiterungen
• ...
ext_js_with_rails
ext_js_with_rails
• (noch) kein Release
ext_js_with_rails
• (noch) kein Release
• http://github.com/siebertm/ext_js_with_rails/
Fragen?
Recommended
