25
Reef Ajax the way it should be viernes 8 de octubre de 2010

Reef - ESUG 2010

Embed Size (px)

DESCRIPTION

Reef is a AJAX/Javascript framework for Seaside, works in Pharo and Gemstone Smalltalk

Citation preview

Page 1: Reef - ESUG 2010

ReefAjax the way it should be

viernes 8 de octubre de 2010

Page 2: Reef - ESUG 2010

Who am I?

• Esteban Lorenzano, 38

• In the community since 2007

• Started “Smallworks” with two friends, to work on Smalltalk projects (Mostly).

• Other community projects: Mars, SqueakDBX, Gofer Project Loader

viernes 8 de octubre de 2010

Page 3: Reef - ESUG 2010

Seaside is cool...

For all the reasons you already know

So, why we need another tool?

viernes 8 de octubre de 2010

Page 4: Reef - ESUG 2010

So, what’s Reef?

Javascript/Ajax component framework for Seaside

viernes 8 de octubre de 2010

Page 5: Reef - ESUG 2010

The problem

We want to provide a transparent model, where all the diferent kinds of interactions are

handled the same way.

viernes 8 de octubre de 2010

Page 6: Reef - ESUG 2010

Architecture

Dispatcher at client side handles browser-to-smalltalk interaction.

Browser

Dispatcher

Server

Page

viernes 8 de octubre de 2010

Page 7: Reef - ESUG 2010

Architecture

• Uses jQuery

• First version uses both: prototype and jQuery, but that was ugly and fortunately deprecated

viernes 8 de octubre de 2010

Page 8: Reef - ESUG 2010

Architecture

• “Some kind” Model-View-Controller

• but, as Seaside, Reef components has view-controller at the same place.

viernes 8 de octubre de 2010

Page 9: Reef - ESUG 2010

Architecture

• You can add any component (with any complexity) as a Seaside component.

• call #asComponent

viernes 8 de octubre de 2010

Page 10: Reef - ESUG 2010

Relax moment

viernes 8 de octubre de 2010

Page 11: Reef - ESUG 2010

Component model

• You create your components

• by extending a REContainer (can be REPanel, REForm, etc.)

• or creating a widget structure inside a Seaside component.

• Right now, just those widgets I needed... but extensible any time.

viernes 8 de octubre de 2010

Page 12: Reef - ESUG 2010

Demo

viernes 8 de octubre de 2010

Page 13: Reef - ESUG 2010

Conventions

• Buttons should trigger an action, not a form submission. (#callback:)

• Forms should allow triggering (#trigger, #triggerThenDo:)

• Form widgets also

• Just panels can be refreshed (#refresh, #refreshThenDo:)

viernes 8 de octubre de 2010

Page 14: Reef - ESUG 2010

Demo

viernes 8 de octubre de 2010

Page 15: Reef - ESUG 2010

Using callbacks

• Simple callbacks. It fires a “dispatch” action, which is a simple “jQuery load” (but you don’t do it).

• Client callbacks. Generates a jQuery script, which is executed in the browser.

• Page callbacks. It renders a new page.

viernes 8 de octubre de 2010

Page 16: Reef - ESUG 2010

Demo

viernes 8 de octubre de 2010

Page 17: Reef - ESUG 2010

Context

• Some times you need to force some behavior, and you need to know if you are inside a Reef callback or a normal callback.

• REContext

• #isInContext

• #inPage:, #inClient:

• Example: REComponent>>#answer renders a new page

viernes 8 de octubre de 2010

Page 18: Reef - ESUG 2010

Demo

viernes 8 de octubre de 2010

Page 19: Reef - ESUG 2010

Relax moment

viernes 8 de octubre de 2010

Page 20: Reef - ESUG 2010

Decorations

• Just like Seaside, your components can be decorated to add behavior

• Unlike Seaside, you can decorate widgets too. It allows elegant adding of plugins.

• Numeric format on text field

• Date format on text field

viernes 8 de octubre de 2010

Page 21: Reef - ESUG 2010

Demo

viernes 8 de octubre de 2010

Page 22: Reef - ESUG 2010

Plugins

• You can easily add jQuery plugins, just need to find the right insertion point

• Most of the times they can be added to existing widgets through decorations (e.g. RETextField>>#beDate)

viernes 8 de octubre de 2010

Page 23: Reef - ESUG 2010

No more demos

viernes 8 de octubre de 2010

Page 24: Reef - ESUG 2010

What’s next?

• Add more components

• Getting some feedback from the community

• Please, use it!

viernes 8 de octubre de 2010