SlideShare ist ein Scribd-Unternehmen logo
1 von 25
Downloaden Sie, um offline zu lesen
Reef
                                  Ajax the way it should be




jueves 16 de septiembre de 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



jueves 16 de septiembre de 2010
Seaside is cool...


                             For all the reasons you already know
                                   So, why we need another tool?




jueves 16 de septiembre de 2010
So, what’s Reef?


                       Javascript/Ajax component framework for
                                         Seaside




jueves 16 de septiembre de 2010
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
Architecture

                                                                Server


                                         Browser

                 Dispatcher at client
                 side handles browser-
                                                   Dispatcher


                 to-smalltalk
                 interaction.                        Page




jueves 16 de septiembre de 2010
Architecture

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




jueves 16 de septiembre de 2010
Architecture


                • “Some kind” Model-View-Controller
                 • but, as Seaside, Reef components has view-
                          controller at the same place.




jueves 16 de septiembre de 2010
Architecture


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


jueves 16 de septiembre de 2010
Relax moment




jueves 16 de septiembre de 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.


jueves 16 de septiembre de 2010
Demo



jueves 16 de septiembre de 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:)


jueves 16 de septiembre de 2010
Demo



jueves 16 de septiembre de 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.

jueves 16 de septiembre de 2010
Demo



jueves 16 de septiembre de 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


jueves 16 de septiembre de 2010
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
                • 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
Demo



jueves 16 de septiembre de 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)




jueves 16 de septiembre de 2010
No more demos



jueves 16 de septiembre de 2010
What’s next?


                • Add more components
                • Getting some feedback from the community
                 • Please, use it!


jueves 16 de septiembre de 2010
Questions?




                              http://squeaksource.com/Reef




jueves 16 de septiembre de 2010

Weitere ähnliche Inhalte

Ähnlich wie Reef. Ajax the way it should be

Ähnlich wie Reef. Ajax the way it should be (20)

ATICA DevOps
ATICA DevOpsATICA DevOps
ATICA DevOps
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Charla introducción a processing - 2010/09
Charla introducción a processing - 2010/09Charla introducción a processing - 2010/09
Charla introducción a processing - 2010/09
 
Presentacion cw2012
Presentacion cw2012Presentacion cw2012
Presentacion cw2012
 
An evening with...Rust
An evening with...RustAn evening with...Rust
An evening with...Rust
 
Phonegap
PhonegapPhonegap
Phonegap
 
Html5 vs Flash
Html5 vs FlashHtml5 vs Flash
Html5 vs Flash
 
Desarrollando Browser Games
Desarrollando Browser Games Desarrollando Browser Games
Desarrollando Browser Games
 
Charla ie
Charla ieCharla ie
Charla ie
 
202204-Modernizando aplicaciones legacy
202204-Modernizando aplicaciones legacy202204-Modernizando aplicaciones legacy
202204-Modernizando aplicaciones legacy
 
Screencast
ScreencastScreencast
Screencast
 
Atica Dev Ops II
Atica Dev Ops IIAtica Dev Ops II
Atica Dev Ops II
 
Conferencia-presentación Javascript
Conferencia-presentación JavascriptConferencia-presentación Javascript
Conferencia-presentación Javascript
 
Docker_K8S_lecciones_netcoreconf_2022.pdf
Docker_K8S_lecciones_netcoreconf_2022.pdfDocker_K8S_lecciones_netcoreconf_2022.pdf
Docker_K8S_lecciones_netcoreconf_2022.pdf
 
Curso node.js
Curso node.js Curso node.js
Curso node.js
 
Bienvenido a lego
Bienvenido a legoBienvenido a lego
Bienvenido a lego
 
Devops episodio 1. devOpsTnf
Devops episodio 1. devOpsTnf Devops episodio 1. devOpsTnf
Devops episodio 1. devOpsTnf
 
hjdedjknqwc
hjdedjknqwchjdedjknqwc
hjdedjknqwc
 
ljmlkbn jklbn .jkbn l.
ljmlkbn jklbn .jkbn l.ljmlkbn jklbn .jkbn l.
ljmlkbn jklbn .jkbn l.
 
Ecosistemas software para Flex
Ecosistemas software para FlexEcosistemas software para Flex
Ecosistemas software para Flex
 

Mehr von ESUG

Workshop: Identifying concept inventories in agile programming
Workshop: Identifying concept inventories in agile programmingWorkshop: Identifying concept inventories in agile programming
Workshop: Identifying concept inventories in agile programming
ESUG
 
The Pharo Debugger and Debugging tools: Advances and Roadmap
The Pharo Debugger and Debugging tools: Advances and RoadmapThe Pharo Debugger and Debugging tools: Advances and Roadmap
The Pharo Debugger and Debugging tools: Advances and Roadmap
ESUG
 
Migration process from monolithic to micro frontend architecture in mobile ap...
Migration process from monolithic to micro frontend architecture in mobile ap...Migration process from monolithic to micro frontend architecture in mobile ap...
Migration process from monolithic to micro frontend architecture in mobile ap...
ESUG
 
Analyzing Dart Language with Pharo: Report and early results
Analyzing Dart Language with Pharo: Report and early resultsAnalyzing Dart Language with Pharo: Report and early results
Analyzing Dart Language with Pharo: Report and early results
ESUG
 
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
ESUG
 
A Unit Test Metamodel for Test Generation
A Unit Test Metamodel for Test GenerationA Unit Test Metamodel for Test Generation
A Unit Test Metamodel for Test Generation
ESUG
 
Creating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic ProgrammingCreating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic Programming
ESUG
 
Threaded-Execution and CPS Provide Smooth Switching Between Execution Modes
Threaded-Execution and CPS Provide Smooth Switching Between Execution ModesThreaded-Execution and CPS Provide Smooth Switching Between Execution Modes
Threaded-Execution and CPS Provide Smooth Switching Between Execution Modes
ESUG
 
Exploring GitHub Actions through EGAD: An Experience Report
Exploring GitHub Actions through EGAD: An Experience ReportExploring GitHub Actions through EGAD: An Experience Report
Exploring GitHub Actions through EGAD: An Experience Report
ESUG
 
Pharo: a reflective language A first systematic analysis of reflective APIs
Pharo: a reflective language A first systematic analysis of reflective APIsPharo: a reflective language A first systematic analysis of reflective APIs
Pharo: a reflective language A first systematic analysis of reflective APIs
ESUG
 
Improving Performance Through Object Lifetime Profiling: the DataFrame Case
Improving Performance Through Object Lifetime Profiling: the DataFrame CaseImproving Performance Through Object Lifetime Profiling: the DataFrame Case
Improving Performance Through Object Lifetime Profiling: the DataFrame Case
ESUG
 
Pharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and FuturePharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and Future
ESUG
 
A New Architecture Reconciling Refactorings and Transformations
A New Architecture Reconciling Refactorings and TransformationsA New Architecture Reconciling Refactorings and Transformations
A New Architecture Reconciling Refactorings and Transformations
ESUG
 

Mehr von ESUG (20)

Workshop: Identifying concept inventories in agile programming
Workshop: Identifying concept inventories in agile programmingWorkshop: Identifying concept inventories in agile programming
Workshop: Identifying concept inventories in agile programming
 
Technical documentation support in Pharo
Technical documentation support in PharoTechnical documentation support in Pharo
Technical documentation support in Pharo
 
The Pharo Debugger and Debugging tools: Advances and Roadmap
The Pharo Debugger and Debugging tools: Advances and RoadmapThe Pharo Debugger and Debugging tools: Advances and Roadmap
The Pharo Debugger and Debugging tools: Advances and Roadmap
 
Sequence: Pipeline modelling in Pharo
Sequence: Pipeline modelling in PharoSequence: Pipeline modelling in Pharo
Sequence: Pipeline modelling in Pharo
 
Migration process from monolithic to micro frontend architecture in mobile ap...
Migration process from monolithic to micro frontend architecture in mobile ap...Migration process from monolithic to micro frontend architecture in mobile ap...
Migration process from monolithic to micro frontend architecture in mobile ap...
 
Analyzing Dart Language with Pharo: Report and early results
Analyzing Dart Language with Pharo: Report and early resultsAnalyzing Dart Language with Pharo: Report and early results
Analyzing Dart Language with Pharo: Report and early results
 
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
Transpiling Pharo Classes to JS ECMAScript 5 versus ECMAScript 6
 
A Unit Test Metamodel for Test Generation
A Unit Test Metamodel for Test GenerationA Unit Test Metamodel for Test Generation
A Unit Test Metamodel for Test Generation
 
Creating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic ProgrammingCreating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic Programming
 
Threaded-Execution and CPS Provide Smooth Switching Between Execution Modes
Threaded-Execution and CPS Provide Smooth Switching Between Execution ModesThreaded-Execution and CPS Provide Smooth Switching Between Execution Modes
Threaded-Execution and CPS Provide Smooth Switching Between Execution Modes
 
Exploring GitHub Actions through EGAD: An Experience Report
Exploring GitHub Actions through EGAD: An Experience ReportExploring GitHub Actions through EGAD: An Experience Report
Exploring GitHub Actions through EGAD: An Experience Report
 
Pharo: a reflective language A first systematic analysis of reflective APIs
Pharo: a reflective language A first systematic analysis of reflective APIsPharo: a reflective language A first systematic analysis of reflective APIs
Pharo: a reflective language A first systematic analysis of reflective APIs
 
Garbage Collector Tuning
Garbage Collector TuningGarbage Collector Tuning
Garbage Collector Tuning
 
Improving Performance Through Object Lifetime Profiling: the DataFrame Case
Improving Performance Through Object Lifetime Profiling: the DataFrame CaseImproving Performance Through Object Lifetime Profiling: the DataFrame Case
Improving Performance Through Object Lifetime Profiling: the DataFrame Case
 
Pharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and FuturePharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and Future
 
thisContext in the Debugger
thisContext in the DebuggerthisContext in the Debugger
thisContext in the Debugger
 
Websockets for Fencing Score
Websockets for Fencing ScoreWebsockets for Fencing Score
Websockets for Fencing Score
 
ShowUs: PharoJS.org Develop in Pharo, Run on JavaScript
ShowUs: PharoJS.org Develop in Pharo, Run on JavaScriptShowUs: PharoJS.org Develop in Pharo, Run on JavaScript
ShowUs: PharoJS.org Develop in Pharo, Run on JavaScript
 
Advanced Object- Oriented Design Mooc
Advanced Object- Oriented Design MoocAdvanced Object- Oriented Design Mooc
Advanced Object- Oriented Design Mooc
 
A New Architecture Reconciling Refactorings and Transformations
A New Architecture Reconciling Refactorings and TransformationsA New Architecture Reconciling Refactorings and Transformations
A New Architecture Reconciling Refactorings and Transformations
 

Kürzlich hochgeladen

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
FagnerLisboa3
 

Kürzlich hochgeladen (15)

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
presentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptxpresentacion de PowerPoint de la fuente de poder.pptx
presentacion de PowerPoint de la fuente de poder.pptx
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdf
 
Presentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmerilPresentación de elementos de afilado con esmeril
Presentación de elementos de afilado con esmeril
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 

Reef. Ajax the way it should be

  • 1. Reef Ajax the way it should be jueves 16 de septiembre de 2010
  • 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. Seaside is cool... For all the reasons you already know So, why we need another tool? jueves 16 de septiembre de 2010
  • 4. So, what’s Reef? Javascript/Ajax component framework for Seaside jueves 16 de septiembre de 2010
  • 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. Architecture Server Browser Dispatcher at client side handles browser- Dispatcher to-smalltalk interaction. Page jueves 16 de septiembre de 2010
  • 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. 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. Architecture • You can add any component (with any complexity) as a Seaside component. • call #asComponent jueves 16 de septiembre de 2010
  • 10. Relax moment jueves 16 de septiembre de 2010
  • 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. Demo jueves 16 de septiembre de 2010
  • 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. Demo jueves 16 de septiembre de 2010
  • 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. Demo jueves 16 de septiembre de 2010
  • 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. Demo jueves 16 de septiembre de 2010
  • 19. Relax moment jueves 16 de septiembre de 2010
  • 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. Demo jueves 16 de septiembre de 2010
  • 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. No more demos jueves 16 de septiembre de 2010
  • 24. What’s next? • Add more components • Getting some feedback from the community • Please, use it! jueves 16 de septiembre de 2010
  • 25. Questions? http://squeaksource.com/Reef jueves 16 de septiembre de 2010