Ext Js On Rails

ExtJS on RailsMichael Siebert

Michael Siebert

• Freelancer Ruby / Rails / JavaScript / PHP

• www.siebert-wd.de

• [email protected]

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?