Reef
                                  Ajax the way it should be




jueves 16 de septiembre de 2010
Who am I?

                • Esteban Lorenzano, 38
                • In the community since 2007
                 • Starte...
Seaside is cool...


                             For all the reasons you already know
                                   ...
So, what’s Reef?


                       Javascript/Ajax component framework for
                                        ...
The problem


                    We want to provide a transparent model,
                  where all the diferent kinds o...
Architecture

                                                                Server


                                   ...
Architecture

                • Uses jQuery
                 • First version uses both: prototype and
                    ...
Architecture


                • “Some kind” Model-View-Controller
                 • but, as Seaside, Reef components has...
Architecture


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




jueves 16 de septiembre de 2010
Component model
                • You create your components
                 • by extending a REContainer (can be
       ...
Demo



jueves 16 de septiembre de 2010
Conventions
                • Buttons should trigger an action, not a form
                     submission. (#callback:)
 ...
Demo



jueves 16 de septiembre de 2010
Using callbacks

                • Simple callbacks. It fires a “dispatch” action,
                     which is a simple “...
Demo



jueves 16 de septiembre de 2010
Context
                •    Some times you need to force some behavior,
                     and you need to know if you ...
Demo



jueves 16 de septiembre de 2010
Relax moment




jueves 16 de septiembre de 2010
Decorations

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



jueves 16 de septiembre de 2010
Plugins

                • You can easily add jQuery plugins, just need
                     to find the right insertion po...
No more demos



jueves 16 de septiembre de 2010
What’s next?


                • Add more components
                • Getting some feedback from the community
          ...
Questions?




                              http://squeaksource.com/Reef




jueves 16 de septiembre de 2010
Upcoming SlideShare
Loading in...5
×

Reef. Ajax the way it should be

746

Published on

Reef -- Ajax the way it should be. Esteban Lorenzano, ESUG 2010, Barcelona

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
746
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Reef. Ajax the way it should be

  1. 1. Reef Ajax the way it should be jueves 16 de septiembre de 2010
  2. 2. 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 jueves 16 de septiembre de 2010
  3. 3. Seaside is cool... For all the reasons you already know So, why we need another tool? jueves 16 de septiembre de 2010
  4. 4. So, what’s Reef? Javascript/Ajax component framework for Seaside jueves 16 de septiembre de 2010
  5. 5. The problem We want to provide a transparent model, where all the diferent kinds of interactions are handled the same way. jueves 16 de septiembre de 2010
  6. 6. Architecture Server Browser Dispatcher at client side handles browser- Dispatcher to-smalltalk interaction. Page jueves 16 de septiembre de 2010
  7. 7. Architecture • Uses jQuery • First version uses both: prototype and jQuery, but that was ugly and fortunately deprecated jueves 16 de septiembre de 2010
  8. 8. Architecture • “Some kind” Model-View-Controller • but, as Seaside, Reef components has view- controller at the same place. jueves 16 de septiembre de 2010
  9. 9. Architecture • You can add any component (with any complexity) as a Seaside component. • call #asComponent jueves 16 de septiembre de 2010
  10. 10. Relax moment jueves 16 de septiembre de 2010
  11. 11. 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. jueves 16 de septiembre de 2010
  12. 12. Demo jueves 16 de septiembre de 2010
  13. 13. 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:) jueves 16 de septiembre de 2010
  14. 14. Demo jueves 16 de septiembre de 2010
  15. 15. 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. jueves 16 de septiembre de 2010
  16. 16. Demo jueves 16 de septiembre de 2010
  17. 17. 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 jueves 16 de septiembre de 2010
  18. 18. Demo jueves 16 de septiembre de 2010
  19. 19. Relax moment jueves 16 de septiembre de 2010
  20. 20. 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 jueves 16 de septiembre de 2010
  21. 21. Demo jueves 16 de septiembre de 2010
  22. 22. 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) jueves 16 de septiembre de 2010
  23. 23. No more demos jueves 16 de septiembre de 2010
  24. 24. What’s next? • Add more components • Getting some feedback from the community • Please, use it! jueves 16 de septiembre de 2010
  25. 25. Questions? http://squeaksource.com/Reef jueves 16 de septiembre de 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×