Reef - ESUG 2010

1,688 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,688
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide


  • In particular, Seaside 3.0 has a really good integration with javascript, jQuery and prototype.
    Components for Ajax
    Modelling, reusing
    Because javascript is hard, and even with great tools like Javascript and jQuery packages from Seaside, it is tricky.



  • Yes, this adds some overhead to the client/server interaction, but i think totally valuable.


  • The other way (any component can be viewed as a “view”, by calling #asView), was deprecated because I wasn’t using it, but can be back
















  • Reef - ESUG 2010

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

    ×