Published on

Meteoroid. Towards a real MVC for the Web.

Juan Lautaro Fernández, Santiago Robles, Stéphane Ducasse, Andrés Fortier, Gustavo Rossi and Silvia Gordillo.

ESUG09, Brest, France

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Hello everyone. In this presentation we are going to talk about Meteroid, which is a framework to develop seaside-based, live web applications
  • Working on web solutions has become cheaper, and even faster. Now it’s common to use a web application to do a task that has been usual to do it in a desktop program, such as web mail, collaborative tools, and so…. Also, you can find any mobile device with internet capabilities… But all of this new requirements introduced some new problems…
  • At the very beginning web pages were thought and designed to be a showcase of STATIC information only, meaning that the created page will probably never change. The idea is to always ask the server for new information through requests and then use the response, meaning that the server is not allowed to send data to the client without a client request. As time went by, those pages started to become web applications, which are more complex because of the *need of a complex and real model *persistence of information, *a better interaction with the client *and also content updates which can’t be possible with any static web page. <Click> The first three can be solved by means of a web server (to manipulate the databese for example), and ajax. <Click> But the last one can not be solved using standard HTTP because its request/response mechanism. <Click> That’s why a new mechanism like Comet is needed
  • As time went by, many approaches appeared to solve the problem of sending DATA from the server to the client, such as polling, long polling, streaming, comet, etc. Comet is an umbrella of technologies, compound of JavaScript to handle the DATA in the browser Ajax to send and receive asynchronic information and streaming, which allows the server to keep a connection open with a web browser. The idea is to have an open connection between the server and the client, to let the server send DATA whenever it wants.
  • There‘s not an standard way to open the persistent connection between the server and the client because MANY browsers consider it a security problem. For this reason, there are different ways to open the connection in every browser. The most common technique is to use a forever iframe, that’s an iframe which keeps receiving DATA. This technique works in MOST BROWSERS but it has some visual issues as: a waiting cursor the looping throbber and a status bar indicating that the page didn’t finish to load. Some browsers let you solve this visual issues using other techniques, for example, in Firefox you should use the object XMLHTTPRequest, in Opera an event technique and in Internet Explorer you can use ActiveX with Iframe.
  • Now, we are going to explain some things that are necessary to understand how Meteoroid works.
  • Maybe you all know what Seaside is, but just to be sure. Seaside is a framework to build Web applications available in many Smalltalk flavors, like Squeak, Pharo, VisualWorks… It has some interesting characteristics like every page fragment is a component, that can be nested with others components hot debugging and recompilation each component can have multiple control flows etc
  • Model view controller is another concept you may already know, so we are going to give a brief of MVC. This pattern divides your application in three parts: The Model has the business logic, the persistent data, and so. It’s independent of any view. The View displays the model information and the controller processes events (typically user actions) that may invoke changes on the model.
  • Announcements is an implementation of the observer pattern, which is necessary in the model view controller architecture It is richer than the traditional implementation which uses symbols, because in this implementation an event is a real object, and this let you add information and behavior about the event. Comparing the two code lines, it’s visible that in the first approach the #change has to be triggered using the #value symbol and attach the real value, and in the second one a new object (a ValueAnnouncement) will be used and inside of it will carry the real value
  • A widget that presents information (such as an input field or similar) relies on an auxiliary object, called a value model, to manage the DATA it presents. That is,instead of holding onto the value directly, the widget delegates this task to its value model. Thus, when the widget accepts input from a user, it stores this information in its value model. When the widget needs to be updated, it asks its value model for the information to be displayed. It has a simple and uniform protocol which allows work with widgets in a clean way.
  • Now that we have seen all these concepts, we can start talking about Meteoroid. Meteoroid is a framework that provides a way to create Live Web Applications. It combines all the concepts seen before like Announcements, Comet, ValueModels to create Web applications using the Model View Controller pattern in an easy way. Meteoroid will give you a way to connect your Model with a Seaside site, through a streamed connection so the model’s changes will be constantly updated on the web site automatically.
  • Meteoroid is divided in 3 layers that will fit different needs Every layer provides more functionality by adding tools to refresh the model’s updates in an easier way and providing more abstraction on how to made the updates Let see the layers then….
  • The first layer is the Javascript layer. In this layer a Comet connection is provided, allowing to send information from the server to the client whenever you want. However, if you want to update some part of the page, you have to manage the dependencies between the seaside component and the model and you also have to write the necessary javascript to refresh the page This layer also provides the #pushScript: message which sends pieces of Javascript to the web browser. This layer is useful for basic web applications which don’t need to have a lot of updates going on.
  • The next layer in the framework is the Announcement Layer. This layer combines the Javascript layer the Announcement framework and a Javascript library to provide more abstraction than the previous one. With this layer you can declare announcement in the Meteoroid component that will update page fragments using the Seaside style. As you can see in the code fragment, you can declare that every time some kind of announcement from an object is announced, the component has to update a DOM element. This update is done by a render block or [a message | through a selector] , which can receive as arguments the renderer, the announcement and the announcer. The most important thing this layer provides, is the absence of Javascript, now it’s possible to write updates using just the Seaside protocol Another important thing is that the dependencies between the meteoroid component and the model are automatically managed.
  • The highest layer in the Meteoroid framework is the Web Value Model layer. This layer combines the previous layer the HTML widgets and the Value models to create a set of widgets that can be used like the desktop ones.
  • This layer introduces an interesting wrapper, the WebValueModel. A WebValueModel wraps a ValueModel, adding the capability to trigger announcents besides the usual #change mechanism. <Click> Using the Announcements layer with the Web Value Models, we could build Web widgets that are automatically updated when its WebValueModel changes. To use it, you only need to choose a predefine widget , like an input field or a list…. and define the model’s aspect the widget is interested in And our framework will manage the dependencies and the updates for its own.
  • Meteoroid

    1. 1. Meteoroid Towards a real MVC for the Web Lautaro Fernández Santiago Robles Andrés Fortier Stephane Ducasse Gustavo Rossi Silvia Gordillo ( [email_address] ) ( [email_address] ) ( [email_address] ) ( [email_address] ) ( [email_address] ) ( [email_address] )
    2. 2. Web: To Infinity And Beyond! <ul><li>Cheaper & Faster </li></ul><ul><li>Lots of services are provided via Web </li></ul><ul><ul><li>Mail </li></ul></ul><ul><ul><li>Home banking </li></ul></ul><ul><ul><li>Collaborative editors </li></ul></ul><ul><ul><li>Social networks </li></ul></ul><ul><ul><li>E-Commerce </li></ul></ul><ul><ul><li>Etc. </li></ul></ul><ul><li>Present on any device </li></ul>
    3. 3. Web evolution <ul><li>Beginning </li></ul><ul><ul><li>Request/response </li></ul></ul><ul><ul><li>Static information </li></ul></ul><ul><li>Now the Web is more complex, requiring </li></ul><ul><ul><li>Complex models </li></ul></ul><ul><ul><li>Dynamic information </li></ul></ul><ul><ul><li>More interaction client/server </li></ul></ul><ul><ul><li>Client’s updates from the server without the request </li></ul></ul>For the last one a new approach is needed
    4. 4. Comet <ul><li>A way to push data from the server into Web browsers </li></ul><ul><li>Umbrella of technologies </li></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>Ajax </li></ul></ul><ul><ul><li>Streaming </li></ul></ul><ul><li>Browser-dependent hack </li></ul>Request/Response mechanism Comet mechanism
    5. 5. Comet (cont.) <ul><li>Not an standard (yet) </li></ul><ul><li>Common technique for all browsers </li></ul><ul><ul><li>Waiting cursor issues </li></ul></ul><ul><ul><li>Throbber issues </li></ul></ul><ul><ul><li>Status bar issues </li></ul></ul><ul><li>Best techniques for browsers </li></ul>Forever IFrame (others) ActiveX + IFrame Server-Sent Events XMLHttpRequest
    6. 6. Understanding some background
    7. 7. Seaside <ul><li>Framework to build Web applications </li></ul><ul><li>Characteristics: </li></ul><ul><ul><li>Nesting components </li></ul></ul><ul><ul><li>Hot debugging and recompilation </li></ul></ul><ul><ul><li>Multiple control flow </li></ul></ul><ul><ul><li>Stack reification for call and answer </li></ul></ul><ul><ul><li>Action callbacks </li></ul></ul><ul><ul><li>Etc. </li></ul></ul>
    8. 8. Model-View-Controller <ul><li>Model </li></ul><ul><ul><li>Independent from Views </li></ul></ul><ul><li>View </li></ul><ul><ul><li>Displays Model information </li></ul></ul><ul><li>Controller </li></ul><ul><ul><li>Processes events </li></ul></ul>
    9. 9. Announcements <ul><li>It is an observer framework simpler and more powerful than legacy frameworks </li></ul><ul><li>Triggers robust objects instead of symbols, which make the concrete observer behaviour much easier </li></ul><ul><li>Vs. </li></ul><ul><ul><li>self change: #value with: aValue </li></ul></ul><ul><ul><li>self announce: (ValueAnnouncement with: aValue) </li></ul></ul>
    10. 10. Value Models <ul><li>General idea </li></ul><ul><ul><li>Holds a model </li></ul></ul><ul><ul><li>Understands #value and #value: </li></ul></ul><ul><ul><li>Notifies its dependents when its value changes </li></ul></ul><ul><ul><li>Simple, standard </li></ul></ul><ul><li>Useful for widgets </li></ul><ul><ul><li>Widgets access the value independently of the model </li></ul></ul><ul><ul><li>Uniform way to access the value </li></ul></ul>
    11. 11. Meteoroid <ul><li>Framework to create Live Web applications </li></ul><ul><li>Combines </li></ul><ul><ul><li>Comet concept </li></ul></ul><ul><ul><li>Seaside features </li></ul></ul><ul><ul><li>Announcements </li></ul></ul><ul><ul><li>MVC pattern </li></ul></ul><ul><ul><li>Value Models </li></ul></ul>
    12. 12. Meteoroid Layers <ul><li>Meteoroid is divided in different layers </li></ul><ul><li>Every layer provides </li></ul><ul><ul><li>More functionality </li></ul></ul><ul><ul><li>More abstraction </li></ul></ul>
    13. 13. JavaScript Layer <ul><li>Bottom Layer, less abstraction </li></ul><ul><li>Provides </li></ul><ul><ul><li>A Comet connection </li></ul></ul><ul><ul><li>Message #pushScript: aScript </li></ul></ul><ul><ul><li>DOM manipulation </li></ul></ul><ul><ul><li>self pushScript: ' alert(“Hello World”); ' </li></ul></ul>
    14. 14. <ul><li>Demo </li></ul>
    15. 15. Announcement Layer <ul><li>  More abstraction </li></ul><ul><ul><li>Through MVC this layer will handle the dependencies </li></ul></ul><ul><ul><li>Add & remove View-Model dependencies automatically </li></ul></ul><ul><ul><li>Messages to update and insert JavaScript automatically </li></ul></ul><ul><ul><li>MeteoroidComponent>>initialize </li></ul></ul><ul><ul><li>self on: ValueChangedAnnouncement </li></ul></ul><ul><ul><li>         of: self model </li></ul></ul><ul><ul><li>         update: 'someDOM_ID' </li></ul></ul><ul><ul><li>         callback: [:html :announcement :announcer| </li></ul></ul><ul><ul><li>html text: announcer value </li></ul></ul><ul><ul><li>         ] </li></ul></ul>
    16. 16. <ul><li>Demo </li></ul>
    17. 17. Web Value Model Layer <ul><li>Combines </li></ul><ul><ul><li>Announcement layer </li></ul></ul><ul><ul><li>HTML widgets </li></ul></ul><ul><ul><li>Value Models  </li></ul></ul><ul><li>Allows to create Web apps like Desktop apps </li></ul>
    18. 18. Web Value Model Layer (cont.) <ul><li>WebValueModel </li></ul><ul><ul><li>ValueModel Wrapper </li></ul></ul><ul><ul><li>Allows to use #change: and #announce: </li></ul></ul><ul><li>Updateables Widgets </li></ul><ul><ul><li>Access a Value Model </li></ul></ul><ul><ul><li>Value Model notifies a WebValueModel which updates the web widget  </li></ul></ul>
    19. 19. <ul><li>Demo </li></ul>
    20. 20. <ul><li>Demo </li></ul>
    21. 21. <ul><li>That’s all , </li></ul><ul><li>Thanks! </li></ul>