reef - esug 2010
DESCRIPTION
Reef is a AJAX/Javascript framework for Seaside, works in Pharo and Gemstone SmalltalkTRANSCRIPT
![Page 1: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/1.jpg)
ReefAjax the way it should be
viernes 8 de octubre de 2010
![Page 2: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/4.jpg)
So, what’s Reef?
Javascript/Ajax component framework for Seaside
viernes 8 de octubre de 2010
![Page 5: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/10.jpg)
Relax moment
viernes 8 de octubre de 2010
![Page 11: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/12.jpg)
Demo
viernes 8 de octubre de 2010
![Page 13: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/14.jpg)
Demo
viernes 8 de octubre de 2010
![Page 15: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/16.jpg)
Demo
viernes 8 de octubre de 2010
![Page 17: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/18.jpg)
Demo
viernes 8 de octubre de 2010
![Page 19: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/19.jpg)
Relax moment
viernes 8 de octubre de 2010
![Page 20: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/21.jpg)
Demo
viernes 8 de octubre de 2010
![Page 22: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/22.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/23.jpg)
No more demos
viernes 8 de octubre de 2010
![Page 24: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/24.jpg)
What’s next?
• Add more components
• Getting some feedback from the community
• Please, use it!
viernes 8 de octubre de 2010
![Page 25: Reef - ESUG 2010](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557d91ccd8b42ab00f8b4e72/html5/thumbnails/25.jpg)
http://squeaksource.com/Reef
Questions?
viernes 8 de octubre de 2010