Uploaded byESUG

PPT, PDF850 views

Meteoroid

The document discusses the development of a new MVC framework called Meteoroid for creating dynamic web applications using technologies like Comet, which allows for real-time data pushing from servers to browsers. It highlights the evolution of the web from static to complex interactions and the need for such a framework to handle these changes. Furthermore, Meteoroid incorporates elements from the Seaside framework and emphasizes a model-view-controller approach to improve web application design and interactivity.

Technology◦Education◦

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 (others) ActiveX + IFrame Server-Sent Events XMLHttpRequest

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”); '

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>>initialize self on: ValueChangedAnnouncement of: self model update: 'someDOM_ID' callback: [:html :announcement :announcer| html text: announcer value ]

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

Meteoroid

1.
Meteoroid Towards areal 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.
Web: ToInfinity 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
3.
Web evolution BeginningRequest/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
4.
Comet A wayto push data from the server into Web browsers Umbrella of technologies JavaScript Ajax Streaming Browser-dependent hack Request/Response mechanism Comet mechanism
5.
Comet (cont.) Notan standard (yet) Common technique for all browsers Waiting cursor issues Throbber issues Status bar issues Best techniques for browsers Forever IFrame (others) ActiveX + IFrame Server-Sent Events XMLHttpRequest
6.
Understanding some background
7.
Seaside Framework tobuild Web applications Characteristics: Nesting components Hot debugging and recompilation Multiple control flow Stack reification for call and answer Action callbacks Etc.
8.
Model-View-Controller Model Independentfrom Views View Displays Model information Controller Processes events
9.
Announcements It isan 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)
10.
Value Models Generalidea 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
11.
Meteoroid Framework tocreate Live Web applications Combines Comet concept Seaside features Announcements MVC pattern Value Models
12.
Meteoroid Layers Meteoroidis divided in different layers Every layer provides More functionality More abstraction
13.
JavaScript Layer BottomLayer, less abstraction Provides A Comet connection Message #pushScript: aScript DOM manipulation self pushScript: ' alert(“Hello World”); '
14.
Demo
15.
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>>initialize self on: ValueChangedAnnouncement of: self model update: 'someDOM_ID' callback: [:html :announcement :announcer| html text: announcer value ]
16.
Demo
17.
Web Value ModelLayer Combines Announcement layer HTML widgets Value Models Allows to create Web apps like Desktop apps
18.
Web Value ModelLayer (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
19.
Demo
20.
Demo
21.
That’s all ,Thanks!

Editor's Notes

#2 Hello everyone. In this presentation we are going to talk about Meteroid, which is a framework to develop seaside-based, live web applications
#3 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…
#4 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
#5 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.
#6 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.
#7 Now, we are going to explain some things that are necessary to understand how Meteoroid works.
#8 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
#9 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.
#10 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
#11 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.
#12 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.
#13 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….
#14 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.
#16 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.
#18 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.
#19 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

More Related Content

Viewers also liked

Similar to Meteoroid

More from ESUG

Recently uploaded

Meteoroid

Editor's Notes