SlideShare a Scribd company logo
1 of 19
Download to read offline
2006 
Hop, a Language for 
Programming the Web 2.0 
Paper by 
Manuel Serrano, Erick Gallesio and Florian Loitsch 
Inria Sophia Antipolis 
Sophia Antipolis, Cedex, France 
Presentation by 
Christian Funder Sommerlund
About the authors - Manuel Serrano 
Papers: Lots of Hop stuff, some web stuff (HTML, CSS, 
IMAP, …), some Scheme stuff, some functional 
programming, … 
Software: Bigloo/Biglook (Scheme fork), Hop (multi-tier 
web programming), Skribe (functional programming), ...
About the authors - Erick Gallesio 
Papers: Pretty much the same as Manuel 
Software: Pretty much the same as Manuel + STklos 
(Scheme fork)
About the authors - Florian Loitsch 
Papers: Some Scheme stuff, some Hop stuff, some 
Javascript stuff, ... 
Software: Various small utility projects like compilers 
between Javascript and Scheme 
Bonus info: Now works on Dart at Google in Aarhus
Motivation 
● Interactive web applications run the world 
● … and is replacing traditional applications 
● Problem: A lot of technologies to master 
○ HTML, CSS, JS, HTTP, PHP/ASP/JSP/... 
● All invented “A long time ago, in a galaxy far, 
far away….” 
● 15-20 years of backward compatibility 
Desire for new/meaningful abstractions
Meet Hop - Introduction 
“Hop is a new higher-order language designed 
for programming interactive web applications“ 
Hop has two layers (it is “stratified”): 
● Application logic (read: server-side) 
● GUI (read: client-side) 
These are separate, but communication 
between them is possible.
Meet Hop - Points of interest 
● Hop is an abstraction of the existing techs 
● Hop is a de-facto distributed system 
● Hop is Scheme-like (you will see this soon) 
● The APIs are stratum-dependent: 
○ Main stratum: Access to files, databases, threads, … 
○ GUI stratum: Drawing stuff, user interaction, limited 
file access
Meet Hop - Simple example 
HTML: 
<HTML> 
<BODY> 
<TABLE width="100%"> 
<TD>Bulbasaur</TD> 
<TD>Charmander</TD> 
<TD>Squirtle</TD> 
</TABLE> 
</BODY> 
</HTML> 
HOP: 
(<HTML> 
(<BODY> 
(<TABLE> :width "100%" 
(<TD> “Bulbasaur”) 
(<TD> “Charmander”) 
(<TD> “Squirtle”))))
Did you notice something peculiar 
about the Hop example? 
?
Did you notice something peculiar 
about the Hop example? 
It’s code!
Meet Hop - Programming the web 
A Hop program is a program, not a markup 
document like HTML. 
Hop code: 
(<B> "Hitmonchan") 
In Java/C syntax: 
<B>(“Hitmonchan”) 
Notice that ‘<’, ‘>’ (and others) are valid in 
function names to mimic the HTML naming.
Meet Hop - Services (read: pages) 
(define-service (pokedex) 
(<HTML> …)) ;; Return list of all Pokémons 
(define-service (pokedex-pokemon pnum) 
(<HTML> …)) ;; Return info about Pokémon #pnum 
(<HTML> 
(<BODY> 
(<A> :href pokedex "Show list of Pokémons") 
(<FORM> :action pokedex-pokemon 
(<INPUT> :type "number" :name "pnum") 
(<INPUT> :type "submit" :value "Look up Pokémon"))))
Meet Hop - Stratum jumping 
The tilde character (~) “jumps” from the main 
stratum to the gui stratum: 
(<HTML> (<BODY> (<BUTTON> 
:onclick ~(alert (Pokedex.PowerCalc 25)) “Get Pika-power"))) 
PowerCalc sounds hard. Let’s do that on the 
main stratum. The dollar sign ($) jumps back: 
(<HTML> (<BODY> (<BUTTON> 
:onclick ~(alert $(Pokedex.PowerCalc 25)) “Get Pika-power")))
Meet Hop - Lambda functions 
Anonymous functions (so-called Lambda 
functions) are supported in several different 
formats. This is one of them: 
(let 
((e0 (<TR> (<TD> “Eevee evolutions:”))) 
(e1 (<TR> (<TD> “Vaporeon”))) 
(e2 (<TR> (<TD> “Jolteon”))) 
(e3 (<TR> (<TD> “Flareon”)))) 
(<HTML> 
(<BODY> 
(<TABLE> e0 e1 e2 e3))))
Meet Hop - with-hop (read: AJAX) 
So far, so good. Now to the juicy stuff for making 
modern dynamic web applications in Hop: 
(with-hop (service arg1 arg2 ...) 
[(lambda (h) ...success expression...) 
[(lambda (h) ...failure expression...)]]) 
Example using with-hop and inline lambda: 
(define-service (server-date) (current-date)) 
(<HTML> (<BODY> (<BUTTON> 
:onclick ~(with-hop ($server-date) (lambda (h) (alert h))) "Get time")))
Meet Hop - Other features 
● Object-oriented programming 
● Standard library 
● Exceptions 
● Modules 
● Multi-threading 
● Server-initiated communication 
● Event loops (read: event listeners) 
● Single-file packaging and deployment 
● ...
Conclusions 
We have seen: 
● The authors’ take on a viable way of bringing 
web development into the 21th century by... 
● unifying HTML, JS and SSS into... 
● stratified program code written in a… 
● simple functional programming language… 
● based on Scheme
Future work 
● Security (2011) 
● Debugging utilities (2014) 
● Handling network failure 
● Faster interpretation/compiling (2011) 
● Process orchestration (2014) 
● and... 
Applications
Thanks for listening + Questions 
???

More Related Content

Similar to Hop, a language for programming the web 2.0

Google Dev Day2007
Google Dev Day2007Google Dev Day2007
Google Dev Day2007
lucclaes
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 

Similar to Hop, a language for programming the web 2.0 (20)

Drupal 8 preview_slideshow
Drupal 8 preview_slideshowDrupal 8 preview_slideshow
Drupal 8 preview_slideshow
 
HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19HAXTheWeb @ Apereo 19
HAXTheWeb @ Apereo 19
 
Cassandra Summit 2014: Apache Spark - The SDK for All Big Data Platforms
Cassandra Summit 2014: Apache Spark - The SDK for All Big Data PlatformsCassandra Summit 2014: Apache Spark - The SDK for All Big Data Platforms
Cassandra Summit 2014: Apache Spark - The SDK for All Big Data Platforms
 
Better Drupal Interaction Design with Flex
Better Drupal Interaction Design with FlexBetter Drupal Interaction Design with Flex
Better Drupal Interaction Design with Flex
 
Rails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSSRails Girls - Introduction to HTML & CSS
Rails Girls - Introduction to HTML & CSS
 
Rust: Systems Programming for Everyone
Rust: Systems Programming for EveryoneRust: Systems Programming for Everyone
Rust: Systems Programming for Everyone
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Php training100%placement-in-mumbai
Php training100%placement-in-mumbaiPhp training100%placement-in-mumbai
Php training100%placement-in-mumbai
 
Fundamentals of web_design_v2
Fundamentals of web_design_v2Fundamentals of web_design_v2
Fundamentals of web_design_v2
 
4th Lecture: JSP and such
4th Lecture:  JSP and such4th Lecture:  JSP and such
4th Lecture: JSP and such
 
Yahoo compares Storm and Spark
Yahoo compares Storm and SparkYahoo compares Storm and Spark
Yahoo compares Storm and Spark
 
Javascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basicsJavascript, DOM, browsers and frameworks basics
Javascript, DOM, browsers and frameworks basics
 
Google Dev Day2007
Google Dev Day2007Google Dev Day2007
Google Dev Day2007
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
 
Programming Languages: some news for the last N years
Programming Languages: some news for the last N yearsProgramming Languages: some news for the last N years
Programming Languages: some news for the last N years
 
Current state-of-php
Current state-of-phpCurrent state-of-php
Current state-of-php
 
C Lecture
C LectureC Lecture
C Lecture
 
Finding the needles in the haystack. An Overview of Analyzing Big Data with H...
Finding the needles in the haystack. An Overview of Analyzing Big Data with H...Finding the needles in the haystack. An Overview of Analyzing Big Data with H...
Finding the needles in the haystack. An Overview of Analyzing Big Data with H...
 
The Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQueryThe Inclusive Web: hands-on with HTML5 and jQuery
The Inclusive Web: hands-on with HTML5 and jQuery
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 

More from IMDS2014 (6)

A Framework for Rule-Based Dynamic Adaptation
A Framework for Rule-Based Dynamic AdaptationA Framework for Rule-Based Dynamic Adaptation
A Framework for Rule-Based Dynamic Adaptation
 
Process-aware Web Programming with Jolie
Process-aware Web Programming with JolieProcess-aware Web Programming with Jolie
Process-aware Web Programming with Jolie
 
Scribbling Interactions with a Formal Foundation
Scribbling Interactions with a Formal FoundationScribbling Interactions with a Formal Foundation
Scribbling Interactions with a Formal Foundation
 
Pict: A programming language based on the pi-calculus
Pict: A programming language based on the pi-calculusPict: A programming language based on the pi-calculus
Pict: A programming language based on the pi-calculus
 
Service-Oriented Architectures: From Design to Production Exploiting Workflow...
Service-Oriented Architectures: From Design to Production Exploiting Workflow...Service-Oriented Architectures: From Design to Production Exploiting Workflow...
Service-Oriented Architectures: From Design to Production Exploiting Workflow...
 
Demo presentation chor
Demo presentation chorDemo presentation chor
Demo presentation chor
 

Recently uploaded

Pests of cotton_Borer_Pests_Binomics_Dr.UPR.pdf
Pests of cotton_Borer_Pests_Binomics_Dr.UPR.pdfPests of cotton_Borer_Pests_Binomics_Dr.UPR.pdf
Pests of cotton_Borer_Pests_Binomics_Dr.UPR.pdf
PirithiRaju
 
Bacterial Identification and Classifications
Bacterial Identification and ClassificationsBacterial Identification and Classifications
Bacterial Identification and Classifications
Areesha Ahmad
 
Conjugation, transduction and transformation
Conjugation, transduction and transformationConjugation, transduction and transformation
Conjugation, transduction and transformation
Areesha Ahmad
 
Discovery of an Accretion Streamer and a Slow Wide-angle Outflow around FUOri...
Discovery of an Accretion Streamer and a Slow Wide-angle Outflow around FUOri...Discovery of an Accretion Streamer and a Slow Wide-angle Outflow around FUOri...
Discovery of an Accretion Streamer and a Slow Wide-angle Outflow around FUOri...
Sérgio Sacani
 

Recently uploaded (20)

9654467111 Call Girls In Raj Nagar Delhi Short 1500 Night 6000
9654467111 Call Girls In Raj Nagar Delhi Short 1500 Night 60009654467111 Call Girls In Raj Nagar Delhi Short 1500 Night 6000
9654467111 Call Girls In Raj Nagar Delhi Short 1500 Night 6000
 
SAMASTIPUR CALL GIRL 7857803690 LOW PRICE ESCORT SERVICE
SAMASTIPUR CALL GIRL 7857803690  LOW PRICE  ESCORT SERVICESAMASTIPUR CALL GIRL 7857803690  LOW PRICE  ESCORT SERVICE
SAMASTIPUR CALL GIRL 7857803690 LOW PRICE ESCORT SERVICE
 
TEST BANK For Radiologic Science for Technologists, 12th Edition by Stewart C...
TEST BANK For Radiologic Science for Technologists, 12th Edition by Stewart C...TEST BANK For Radiologic Science for Technologists, 12th Edition by Stewart C...
TEST BANK For Radiologic Science for Technologists, 12th Edition by Stewart C...
 
Vip profile Call Girls In Lonavala 9748763073 For Genuine Sex Service At Just...
Vip profile Call Girls In Lonavala 9748763073 For Genuine Sex Service At Just...Vip profile Call Girls In Lonavala 9748763073 For Genuine Sex Service At Just...
Vip profile Call Girls In Lonavala 9748763073 For Genuine Sex Service At Just...
 
Justdial Call Girls In Indirapuram, Ghaziabad, 8800357707 Escorts Service
Justdial Call Girls In Indirapuram, Ghaziabad, 8800357707 Escorts ServiceJustdial Call Girls In Indirapuram, Ghaziabad, 8800357707 Escorts Service
Justdial Call Girls In Indirapuram, Ghaziabad, 8800357707 Escorts Service
 
Kochi ❤CALL GIRL 84099*07087 ❤CALL GIRLS IN Kochi ESCORT SERVICE❤CALL GIRL
Kochi ❤CALL GIRL 84099*07087 ❤CALL GIRLS IN Kochi ESCORT SERVICE❤CALL GIRLKochi ❤CALL GIRL 84099*07087 ❤CALL GIRLS IN Kochi ESCORT SERVICE❤CALL GIRL
Kochi ❤CALL GIRL 84099*07087 ❤CALL GIRLS IN Kochi ESCORT SERVICE❤CALL GIRL
 
Botany 4th semester series (krishna).pdf
Botany 4th semester series (krishna).pdfBotany 4th semester series (krishna).pdf
Botany 4th semester series (krishna).pdf
 
❤Jammu Kashmir Call Girls 8617697112 Personal Whatsapp Number 💦✅.
❤Jammu Kashmir Call Girls 8617697112 Personal Whatsapp Number 💦✅.❤Jammu Kashmir Call Girls 8617697112 Personal Whatsapp Number 💦✅.
❤Jammu Kashmir Call Girls 8617697112 Personal Whatsapp Number 💦✅.
 
module for grade 9 for distance learning
module for grade 9 for distance learningmodule for grade 9 for distance learning
module for grade 9 for distance learning
 
Pests of cotton_Borer_Pests_Binomics_Dr.UPR.pdf
Pests of cotton_Borer_Pests_Binomics_Dr.UPR.pdfPests of cotton_Borer_Pests_Binomics_Dr.UPR.pdf
Pests of cotton_Borer_Pests_Binomics_Dr.UPR.pdf
 
Hire 💕 9907093804 Hooghly Call Girls Service Call Girls Agency
Hire 💕 9907093804 Hooghly Call Girls Service Call Girls AgencyHire 💕 9907093804 Hooghly Call Girls Service Call Girls Agency
Hire 💕 9907093804 Hooghly Call Girls Service Call Girls Agency
 
High Class Escorts in Hyderabad ₹7.5k Pick Up & Drop With Cash Payment 969456...
High Class Escorts in Hyderabad ₹7.5k Pick Up & Drop With Cash Payment 969456...High Class Escorts in Hyderabad ₹7.5k Pick Up & Drop With Cash Payment 969456...
High Class Escorts in Hyderabad ₹7.5k Pick Up & Drop With Cash Payment 969456...
 
GBSN - Biochemistry (Unit 1)
GBSN - Biochemistry (Unit 1)GBSN - Biochemistry (Unit 1)
GBSN - Biochemistry (Unit 1)
 
Bacterial Identification and Classifications
Bacterial Identification and ClassificationsBacterial Identification and Classifications
Bacterial Identification and Classifications
 
Pulmonary drug delivery system M.pharm -2nd sem P'ceutics
Pulmonary drug delivery system M.pharm -2nd sem P'ceuticsPulmonary drug delivery system M.pharm -2nd sem P'ceutics
Pulmonary drug delivery system M.pharm -2nd sem P'ceutics
 
Conjugation, transduction and transformation
Conjugation, transduction and transformationConjugation, transduction and transformation
Conjugation, transduction and transformation
 
9999266834 Call Girls In Noida Sector 22 (Delhi) Call Girl Service
9999266834 Call Girls In Noida Sector 22 (Delhi) Call Girl Service9999266834 Call Girls In Noida Sector 22 (Delhi) Call Girl Service
9999266834 Call Girls In Noida Sector 22 (Delhi) Call Girl Service
 
Discovery of an Accretion Streamer and a Slow Wide-angle Outflow around FUOri...
Discovery of an Accretion Streamer and a Slow Wide-angle Outflow around FUOri...Discovery of an Accretion Streamer and a Slow Wide-angle Outflow around FUOri...
Discovery of an Accretion Streamer and a Slow Wide-angle Outflow around FUOri...
 
FAIRSpectra - Enabling the FAIRification of Spectroscopy and Spectrometry
FAIRSpectra - Enabling the FAIRification of Spectroscopy and SpectrometryFAIRSpectra - Enabling the FAIRification of Spectroscopy and Spectrometry
FAIRSpectra - Enabling the FAIRification of Spectroscopy and Spectrometry
 
GBSN - Microbiology (Unit 2)
GBSN - Microbiology (Unit 2)GBSN - Microbiology (Unit 2)
GBSN - Microbiology (Unit 2)
 

Hop, a language for programming the web 2.0

  • 1. 2006 Hop, a Language for Programming the Web 2.0 Paper by Manuel Serrano, Erick Gallesio and Florian Loitsch Inria Sophia Antipolis Sophia Antipolis, Cedex, France Presentation by Christian Funder Sommerlund
  • 2. About the authors - Manuel Serrano Papers: Lots of Hop stuff, some web stuff (HTML, CSS, IMAP, …), some Scheme stuff, some functional programming, … Software: Bigloo/Biglook (Scheme fork), Hop (multi-tier web programming), Skribe (functional programming), ...
  • 3. About the authors - Erick Gallesio Papers: Pretty much the same as Manuel Software: Pretty much the same as Manuel + STklos (Scheme fork)
  • 4. About the authors - Florian Loitsch Papers: Some Scheme stuff, some Hop stuff, some Javascript stuff, ... Software: Various small utility projects like compilers between Javascript and Scheme Bonus info: Now works on Dart at Google in Aarhus
  • 5. Motivation ● Interactive web applications run the world ● … and is replacing traditional applications ● Problem: A lot of technologies to master ○ HTML, CSS, JS, HTTP, PHP/ASP/JSP/... ● All invented “A long time ago, in a galaxy far, far away….” ● 15-20 years of backward compatibility Desire for new/meaningful abstractions
  • 6. Meet Hop - Introduction “Hop is a new higher-order language designed for programming interactive web applications“ Hop has two layers (it is “stratified”): ● Application logic (read: server-side) ● GUI (read: client-side) These are separate, but communication between them is possible.
  • 7. Meet Hop - Points of interest ● Hop is an abstraction of the existing techs ● Hop is a de-facto distributed system ● Hop is Scheme-like (you will see this soon) ● The APIs are stratum-dependent: ○ Main stratum: Access to files, databases, threads, … ○ GUI stratum: Drawing stuff, user interaction, limited file access
  • 8. Meet Hop - Simple example HTML: <HTML> <BODY> <TABLE width="100%"> <TD>Bulbasaur</TD> <TD>Charmander</TD> <TD>Squirtle</TD> </TABLE> </BODY> </HTML> HOP: (<HTML> (<BODY> (<TABLE> :width "100%" (<TD> “Bulbasaur”) (<TD> “Charmander”) (<TD> “Squirtle”))))
  • 9. Did you notice something peculiar about the Hop example? ?
  • 10. Did you notice something peculiar about the Hop example? It’s code!
  • 11. Meet Hop - Programming the web A Hop program is a program, not a markup document like HTML. Hop code: (<B> "Hitmonchan") In Java/C syntax: <B>(“Hitmonchan”) Notice that ‘<’, ‘>’ (and others) are valid in function names to mimic the HTML naming.
  • 12. Meet Hop - Services (read: pages) (define-service (pokedex) (<HTML> …)) ;; Return list of all Pokémons (define-service (pokedex-pokemon pnum) (<HTML> …)) ;; Return info about Pokémon #pnum (<HTML> (<BODY> (<A> :href pokedex "Show list of Pokémons") (<FORM> :action pokedex-pokemon (<INPUT> :type "number" :name "pnum") (<INPUT> :type "submit" :value "Look up Pokémon"))))
  • 13. Meet Hop - Stratum jumping The tilde character (~) “jumps” from the main stratum to the gui stratum: (<HTML> (<BODY> (<BUTTON> :onclick ~(alert (Pokedex.PowerCalc 25)) “Get Pika-power"))) PowerCalc sounds hard. Let’s do that on the main stratum. The dollar sign ($) jumps back: (<HTML> (<BODY> (<BUTTON> :onclick ~(alert $(Pokedex.PowerCalc 25)) “Get Pika-power")))
  • 14. Meet Hop - Lambda functions Anonymous functions (so-called Lambda functions) are supported in several different formats. This is one of them: (let ((e0 (<TR> (<TD> “Eevee evolutions:”))) (e1 (<TR> (<TD> “Vaporeon”))) (e2 (<TR> (<TD> “Jolteon”))) (e3 (<TR> (<TD> “Flareon”)))) (<HTML> (<BODY> (<TABLE> e0 e1 e2 e3))))
  • 15. Meet Hop - with-hop (read: AJAX) So far, so good. Now to the juicy stuff for making modern dynamic web applications in Hop: (with-hop (service arg1 arg2 ...) [(lambda (h) ...success expression...) [(lambda (h) ...failure expression...)]]) Example using with-hop and inline lambda: (define-service (server-date) (current-date)) (<HTML> (<BODY> (<BUTTON> :onclick ~(with-hop ($server-date) (lambda (h) (alert h))) "Get time")))
  • 16. Meet Hop - Other features ● Object-oriented programming ● Standard library ● Exceptions ● Modules ● Multi-threading ● Server-initiated communication ● Event loops (read: event listeners) ● Single-file packaging and deployment ● ...
  • 17. Conclusions We have seen: ● The authors’ take on a viable way of bringing web development into the 21th century by... ● unifying HTML, JS and SSS into... ● stratified program code written in a… ● simple functional programming language… ● based on Scheme
  • 18. Future work ● Security (2011) ● Debugging utilities (2014) ● Handling network failure ● Faster interpretation/compiling (2011) ● Process orchestration (2014) ● and... Applications
  • 19. Thanks for listening + Questions ???