Meteoroid

Towards a real MVC for the Web

Lautaro Fernández Santiago RoblesAndrés Fortier Stephane DucasseGustavo Rossi Silvia Gordillo

(lfernandez@lifia.info.unlp.edu.ar)(srobles@lifia.info.unlp.edu.ar)(andres@lifia.info.unlp.edu.ar)(stephane.ducasse@inria.fr)(gustavo@lifia.info.unlp.edu.ar)(gordillo@lifia.info.unlp.edu.ar)

Web: To Infinity And Beyond!

•Cheaper & Faster•Lots of services are provided via Web

•Mail•Home banking•Collaborative editors•Social networks•E-Commerce•Etc.

•Present on any device

Web evolution

Beginning•Request/response•Static information

Now the Web is more complex, requiring •Complex models•Dynamic information•More interaction client/server•Client’s updates from the server

without the request

For the last one a new approach is needed

Comet

•A way to push data from the server into Web browsers

•Umbrella of technologies•JavaScript•Ajax•Streaming

•Browser-dependent hack

Request/Response mechanism

Comet

mechanism

Comet (cont.)

•Not an standard (yet)•Common technique for all browsers

• Waiting cursor issues• Throbber issues• Status bar issues

•Best techniques for browsers

Forever IFrame

XMLHttpRequest

Server-Sent Events

ActiveX + IFrame

(others)

Understanding some background

Seaside

•Framework to build Web applications•Characteristics:

•Nesting components •Hot debugging and recompilation•Multiple control flow •Stack reification for call and answer•Action callbacks

•Etc.

Model-View-Controller

•Model•Independent from Views

•View•Displays Model information

•Controller•Processes events

Announcements

•It is an observer framework simpler and more powerful than legacy frameworks

•Triggers robust objects instead of symbols, which make the concrete observer behaviour much easier

Vs.

self change: #value with: aValue

self announce: (ValueAnnouncement with: aValue)

Value Models

•General idea•Holds a model•Understands #value and #value:•Notifies its dependents when its value changes•Simple, standard

• Useful for widgets•Widgets access the value independently of the model•Uniform way to access the value

Meteoroid

•Framework to create Live Web applications•Combines

•Comet concept•Seaside features•Announcements•MVC pattern•Value Models

Meteoroid Layers

•Meteoroid is divided in different layers•Every layer provides

•More functionality•More abstraction

JavaScript Layer

•Bottom Layer, less abstraction•Provides

•A Comet connection•Message #pushScript: aScript•DOM manipulation

self pushScript: 'alert(“Hello World”);'

Demo

Announcement Layer

 More abstraction•Through MVC this layer will handle the dependencies•Add & remove View-Model dependencies automatically•Messages to update and insert JavaScript automatically

MeteoroidComponent>>initializeself on: ValueChangedAnnouncement         of: self model         update: 'someDOM_ID'         callback: [:html :announcement :announcer|

html text: announcer value        ]

Demo

Web Value Model Layer

•Combines•Announcement layer•HTML widgets•Value Models 

•Allows to create Web apps like Desktop apps

Web Value Model Layer (cont.)

•WebValueModel•ValueModel Wrapper•Allows to use #change: and #announce:

•Updateables Widgets•Access a Value Model•Value Model notifies a WebValueModel which updates

the web widget 

Demo

Demo

That’s all,Thanks!