SlideShare a Scribd company logo

Mocks, Proxies, and Transpilation as Development Strategies for Web Development

E
ESUG

Presentation of IWST16, Prag

1 of 13
Download to read offline
Mocks, Proxies, and Transpilation as Development
Strategies for Web Development
Dave Mason & Noury Bouraqadi
Ryerson University École Mines, Douai
1 / 13
Web Development
Server side
Seaside
Aidaweb
Illiad
SST
Client side
Javascript et al
SqueakJS
Amber, MySmalltalk, S8
PharoJS
2 / 13
Development á la PharoJS
1 Native Pharo Testing
build models
test/debug in full Pharo
2 App with Remote UI
open a bridge to a JS engine (web browser)
from Pharo, in Smalltalk
access global variables like document window
access fields/functions via message sends
proxies make seamless interaction
blocks as event handlers
3 Full Client App
same code from previous step
export a Javascript file from Smalltalk code
3 / 13
Demo
1 testBrowserButton
2 | button flag |
3 button := document createElement: ’button’.
4 button
5 id: ’who’;
6 innerHTML: ’Click on this within 10 seconds or the test fails’;
7 addEventListener: ’click’ block: [: ev |
8 button innerHTML: ’Click again immediately or the test fails’;
9 addEventListener: ’click’ block: [: xev |
10 flag := true].
11 ];
12 addEventListener: #mouseover block: [: ev : this |
13 button style backgroundColor: ’yellow’
14 ] close.
15 button style backgroundColor: ’pink’;
16 height: ’2cm’.
17 document body native_appendChild: button.
18 flag := nil.
19 self assert: (window confirm: ’If you can see the pink button, accept
20 JbBridge pollFor: 10 seconds orUntil: [flag].
21 self assert: flag notNil description: ’button not clicked’.
22 self assert: (window confirm: ’Did the button turn yellow?’)
4 / 13
1 Received: document._createElement_("button")
2 Sent: {"proxy":"$_1"}
3 Received: $_1._id_("who")
4 Sent: {"basic":"who"}
5 Received: $_1._innerHTML_("Click on this within 10 seconds or the test fails")
6 Sent: {"basic":"Click on this within 10 seconds or the test fails"}
7 Received: JbLoggingEvaluatorWebSocketDelegate._default()._makeBlockClosureProxy_(false)
8 Sent: {"proxy":"$_2"}
9 Received: JbLoggingEvaluatorWebSocketDelegate._set_callback_to_($_1,"click",$_2);
10 Sent: {"basic":true}
11 Received: $_1._style()
12 Sent: {"proxy":"$_3"}
13 Received: $_3._backgroundColor_("pink")
14 Sent: {"basic":"pink"}
15 Received: $_3._height_("2cm")
16 Sent: {"basic":"2cm"}
17 Received: document._body()
18 Sent: {"proxy":"$_4"}
19 Received: $_4.appendChild($_1)
20 Sent: {"proxy":"$_1"}
21 Received: window._confirm_("If you can see the pink button, accept this and then click on the but
22 Sent: {"basic":true}
23 Received: :-$_4
24 Received: :-$_3
25 Sent: {"cb":["$_2",{"proxy":"$_5"},{"proxy":"undefined"}]}
26 Received: $_1._innerHTML_("Click again immediately or the test fails")
27 Sent: {"basic":"Click again immediately or the test fails"}
28 Received: JbLoggingEvaluatorWebSocketDelegate._default()._makeBlockClosureProxy_(false)
29 Sent: {"proxy":"$_6"}
30 Received: JbLoggingEvaluatorWebSocketDelegate._set_callback_to_($_1,"click",$_6);
31 Sent: {"remove":true,"proxy":"$_2"}
32 Received: :-$_2
33 Sent: {"basic":true}
5 / 13
Translation Challenges
DoesNotUnderstand
undefined/null vs. nil
non-local returns
unfortunate JS/DOM inheritance
optimizing numeric methods
optimizing block methods
minimizing hand-written JS code (39/304 methods)
6 / 13
Ad

Recommended

HTML5 - The 2012 of the Web
HTML5 - The 2012 of the WebHTML5 - The 2012 of the Web
HTML5 - The 2012 of the WebRobert Nyman
 
Introduction to React and MobX
Introduction to React and MobXIntroduction to React and MobX
Introduction to React and MobXAnjali Chawla
 
Intro To JQuery & ASP.NET
Intro To JQuery & ASP.NETIntro To JQuery & ASP.NET
Intro To JQuery & ASP.NETChris Love
 
javascript code for mysql database connection
javascript code for mysql database connectionjavascript code for mysql database connection
javascript code for mysql database connectionHitesh Kumar Markam
 
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXHTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXRobert Nyman
 
Integration tests with testcointainers library.
Integration tests with testcointainers library. Integration tests with testcointainers library.
Integration tests with testcointainers library. Marek Hudyma
 
5 .java script events
5 .java script   events5 .java script   events
5 .java script eventschauhankapil
 
types of events in JS
types of events in JS types of events in JS
types of events in JS chauhankapil
 

More Related Content

What's hot

Js events
Js eventsJs events
Js eventsgvbmail
 
Javascript dom event
Javascript dom eventJavascript dom event
Javascript dom eventBunlong Van
 
Windows Azure 2/8 - Recursos básicos do Windows Azure
Windows Azure 2/8 - Recursos básicos do Windows AzureWindows Azure 2/8 - Recursos básicos do Windows Azure
Windows Azure 2/8 - Recursos básicos do Windows AzureVitor Ciaramella
 
Dvwa low level
Dvwa low levelDvwa low level
Dvwa low levelhackstuff
 
Bare-knuckle web development
Bare-knuckle web developmentBare-knuckle web development
Bare-knuckle web developmentJohannes Brodwall
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScriptShahDhruv21
 
VooDoo Driver
VooDoo DriverVooDoo Driver
VooDoo DriverDevraj06
 
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVPMicrosoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVPGilbok Lee
 
006 實作小玩具功能:chrome desktop notification
006 實作小玩具功能:chrome desktop notification006 實作小玩具功能:chrome desktop notification
006 實作小玩具功能:chrome desktop notificationBruce Li
 
The War is Over, and JavaScript has won: Living Under the JS Regime
The War is Over, and JavaScript has won: Living Under the JS RegimeThe War is Over, and JavaScript has won: Living Under the JS Regime
The War is Over, and JavaScript has won: Living Under the JS Regimematthoneycutt
 
Training in Asp.net mvc3 platform-apextgi,noidaAspnetmvc3 j query
Training in Asp.net mvc3 platform-apextgi,noidaAspnetmvc3 j queryTraining in Asp.net mvc3 platform-apextgi,noidaAspnetmvc3 j query
Training in Asp.net mvc3 platform-apextgi,noidaAspnetmvc3 j queryprav068
 
Magento2&java script (2)
Magento2&java script (2)Magento2&java script (2)
Magento2&java script (2)EvgeniyKapelko1
 

What's hot (19)

Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Eu odeio OpenSocial
Eu odeio OpenSocialEu odeio OpenSocial
Eu odeio OpenSocial
 
Js events
Js eventsJs events
Js events
 
Javascript dom event
Javascript dom eventJavascript dom event
Javascript dom event
 
Windows Azure 2/8 - Recursos básicos do Windows Azure
Windows Azure 2/8 - Recursos básicos do Windows AzureWindows Azure 2/8 - Recursos básicos do Windows Azure
Windows Azure 2/8 - Recursos básicos do Windows Azure
 
Dvwa low level
Dvwa low levelDvwa low level
Dvwa low level
 
Bare-knuckle web development
Bare-knuckle web developmentBare-knuckle web development
Bare-knuckle web development
 
Client Web
Client WebClient Web
Client Web
 
Event In JavaScript
Event In JavaScriptEvent In JavaScript
Event In JavaScript
 
VooDoo Driver
VooDoo DriverVooDoo Driver
VooDoo Driver
 
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVPMicrosoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
Microsoft MVP ComCamp 2014 발표자료 / 윈도우 8.1 앱개발 새로운 API들 / 이길복, 주신영 MVP
 
Vaadin 7
Vaadin 7Vaadin 7
Vaadin 7
 
Struts Overview
Struts OverviewStruts Overview
Struts Overview
 
006 實作小玩具功能:chrome desktop notification
006 實作小玩具功能:chrome desktop notification006 實作小玩具功能:chrome desktop notification
006 實作小玩具功能:chrome desktop notification
 
Mate
MateMate
Mate
 
The War is Over, and JavaScript has won: Living Under the JS Regime
The War is Over, and JavaScript has won: Living Under the JS RegimeThe War is Over, and JavaScript has won: Living Under the JS Regime
The War is Over, and JavaScript has won: Living Under the JS Regime
 
Training in Asp.net mvc3 platform-apextgi,noidaAspnetmvc3 j query
Training in Asp.net mvc3 platform-apextgi,noidaAspnetmvc3 j queryTraining in Asp.net mvc3 platform-apextgi,noidaAspnetmvc3 j query
Training in Asp.net mvc3 platform-apextgi,noidaAspnetmvc3 j query
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
 
Magento2&java script (2)
Magento2&java script (2)Magento2&java script (2)
Magento2&java script (2)
 

Similar to Mocks, Proxies, and Transpilation as Development Strategies for Web Development

Vaadin 7 CN
Vaadin 7 CNVaadin 7 CN
Vaadin 7 CNjojule
 
20150812 4시간만에 따라해보는 windows 10 앱 개발
20150812  4시간만에 따라해보는 windows 10 앱 개발20150812  4시간만에 따라해보는 windows 10 앱 개발
20150812 4시간만에 따라해보는 windows 10 앱 개발영욱 김
 
React Native Error Reporting with Sentry
React Native Error Reporting with SentryReact Native Error Reporting with Sentry
React Native Error Reporting with SentryAmin Yazdani Salekdeh
 
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas LehtinenVaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas LehtinenCodemotion
 
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSMozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSRobert Nyman
 
SharePoint Conference 2018 - APIs, APIs everywhere!
SharePoint Conference 2018 - APIs, APIs everywhere!SharePoint Conference 2018 - APIs, APIs everywhere!
SharePoint Conference 2018 - APIs, APIs everywhere!Sébastien Levert
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it meansRobert Nyman
 
UA Testing with Selenium and PHPUnit - ZendCon 2013
UA Testing with Selenium and PHPUnit - ZendCon 2013UA Testing with Selenium and PHPUnit - ZendCon 2013
UA Testing with Selenium and PHPUnit - ZendCon 2013Michelangelo van Dam
 
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!Sébastien Levert
 
APIs, APIs Everywhere!
APIs, APIs Everywhere!APIs, APIs Everywhere!
APIs, APIs Everywhere!BIWUG
 
Pushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax WPushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax Wrajivmordani
 
The art of Building Bridges for Android Hybrid Apps
The art of Building Bridges for Android Hybrid AppsThe art of Building Bridges for Android Hybrid Apps
The art of Building Bridges for Android Hybrid AppsBartłomiej Pisulak
 
Practical MongoDB
Practical MongoDBPractical MongoDB
Practical MongoDBWill Button
 
Cross-Platform Desktop Apps with JavaScript
Cross-Platform Desktop Apps with JavaScriptCross-Platform Desktop Apps with JavaScript
Cross-Platform Desktop Apps with JavaScriptBlagoja Evkoski
 
Taking Web Apps Offline
Taking Web Apps OfflineTaking Web Apps Offline
Taking Web Apps OfflinePedro Morais
 
Voo doodriver training
Voo doodriver trainingVoo doodriver training
Voo doodriver trainingSanjeev Sinha
 
Passwords suck, but centralized proprietary services are not the answer
Passwords suck, but centralized proprietary services are not the answerPasswords suck, but centralized proprietary services are not the answer
Passwords suck, but centralized proprietary services are not the answerFrancois Marier
 

Similar to Mocks, Proxies, and Transpilation as Development Strategies for Web Development (20)

Pushing the Web: Interesting things to Know
Pushing the Web: Interesting things to KnowPushing the Web: Interesting things to Know
Pushing the Web: Interesting things to Know
 
Vaadin 7 CN
Vaadin 7 CNVaadin 7 CN
Vaadin 7 CN
 
20150812 4시간만에 따라해보는 windows 10 앱 개발
20150812  4시간만에 따라해보는 windows 10 앱 개발20150812  4시간만에 따라해보는 windows 10 앱 개발
20150812 4시간만에 따라해보는 windows 10 앱 개발
 
React Native Error Reporting with Sentry
React Native Error Reporting with SentryReact Native Error Reporting with Sentry
React Native Error Reporting with Sentry
 
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas LehtinenVaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
 
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSMozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
 
SharePoint Conference 2018 - APIs, APIs everywhere!
SharePoint Conference 2018 - APIs, APIs everywhere!SharePoint Conference 2018 - APIs, APIs everywhere!
SharePoint Conference 2018 - APIs, APIs everywhere!
 
The Open Web and what it means
The Open Web and what it meansThe Open Web and what it means
The Open Web and what it means
 
Vaadin7
Vaadin7Vaadin7
Vaadin7
 
UA Testing with Selenium and PHPUnit - ZendCon 2013
UA Testing with Selenium and PHPUnit - ZendCon 2013UA Testing with Selenium and PHPUnit - ZendCon 2013
UA Testing with Selenium and PHPUnit - ZendCon 2013
 
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
SharePoint Saturday Belgium 2018 - APIs, APIs everywhere!
 
APIs, APIs Everywhere!
APIs, APIs Everywhere!APIs, APIs Everywhere!
APIs, APIs Everywhere!
 
JavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto
JavaCro'14 - Building interactive web applications with Vaadin – Peter LehtoJavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto
JavaCro'14 - Building interactive web applications with Vaadin – Peter Lehto
 
Pushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax WPushing Datatothe Browserwith Comet Ajax W
Pushing Datatothe Browserwith Comet Ajax W
 
The art of Building Bridges for Android Hybrid Apps
The art of Building Bridges for Android Hybrid AppsThe art of Building Bridges for Android Hybrid Apps
The art of Building Bridges for Android Hybrid Apps
 
Practical MongoDB
Practical MongoDBPractical MongoDB
Practical MongoDB
 
Cross-Platform Desktop Apps with JavaScript
Cross-Platform Desktop Apps with JavaScriptCross-Platform Desktop Apps with JavaScript
Cross-Platform Desktop Apps with JavaScript
 
Taking Web Apps Offline
Taking Web Apps OfflineTaking Web Apps Offline
Taking Web Apps Offline
 
Voo doodriver training
Voo doodriver trainingVoo doodriver training
Voo doodriver training
 
Passwords suck, but centralized proprietary services are not the answer
Passwords suck, but centralized proprietary services are not the answerPasswords suck, but centralized proprietary services are not the answer
Passwords suck, but centralized proprietary services are not the answer
 

More from 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 programmingESUG
 
Technical documentation support in Pharo
Technical documentation support in PharoTechnical documentation support in Pharo
Technical documentation support in PharoESUG
 
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 RoadmapESUG
 
Sequence: Pipeline modelling in Pharo
Sequence: Pipeline modelling in PharoSequence: Pipeline modelling in Pharo
Sequence: Pipeline modelling in PharoESUG
 
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 resultsESUG
 
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 6ESUG
 
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 GenerationESUG
 
Creating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic ProgrammingCreating Unit Tests Using Genetic Programming
Creating Unit Tests Using Genetic ProgrammingESUG
 
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 ModesESUG
 
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 ReportESUG
 
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 APIsESUG
 
Garbage Collector Tuning
Garbage Collector TuningGarbage Collector Tuning
Garbage Collector TuningESUG
 
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 CaseESUG
 
Pharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and FuturePharo DataFrame: Past, Present, and Future
Pharo DataFrame: Past, Present, and FutureESUG
 
thisContext in the Debugger
thisContext in the DebuggerthisContext in the Debugger
thisContext in the DebuggerESUG
 
Websockets for Fencing Score
Websockets for Fencing ScoreWebsockets for Fencing Score
Websockets for Fencing ScoreESUG
 
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 JavaScriptESUG
 
Advanced Object- Oriented Design Mooc
Advanced Object- Oriented Design MoocAdvanced Object- Oriented Design Mooc
Advanced Object- Oriented Design MoocESUG
 
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 TransformationsESUG
 

More from 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
 

Recently uploaded

Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxMindInventory
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019VICTOR MAESTRE RAMIREZ
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20Shane Coughlan
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureHironori Washizaki
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이ssuser82c38d
 
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ..."Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...ISPMAIndia
 
The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!ISPMAIndia
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Jeffrey Haguewood
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfssuser82c38d
 
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAutokey
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Asher Sterkin
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetMatthewTHawley
 
AI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriAI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriISPMAIndia
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!Anthony Dahanne
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Dmitry Zinoviev
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash CourseRohan Chandane
 
Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!alttaskcom
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowNaoki (Neo) SATO
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...ISPMAIndia
 

Recently uploaded (20)

Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptx
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019
 
OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about Architecture
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
 
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ..."Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
"Taking an idea to a Product in Health diagnostics" by Dr. Geetha Manjunath, ...
 
The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!The Age of AI: Elevating Experiences & Delivering Customer Value!
The Age of AI: Elevating Experiences & Delivering Customer Value!
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)
 
killing camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdfkilling camp week 6 problem - maximal matrix.pdf
killing camp week 6 problem - maximal matrix.pdf
 
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdfAUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
AUTOKEYUNLOCKER-BRANDS-SUPPORT-STANDARD-VERSION.pdf
 
Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024Essence of Requirements Engineering: Pragmatic Insights for 2024
Essence of Requirements Engineering: Pragmatic Insights for 2024
 
P1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 SmartsheetP1 Inspection Types in Municity 5 Smartsheet
P1 Inspection Types in Municity 5 Smartsheet
 
AI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit BendigiriAI Product Management by Abhijit Bendigiri
AI Product Management by Abhijit Bendigiri
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash Course
 
eLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdfeLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdf
 
Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flow
 
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A..."Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
"Discovery and Delivery through Product IntelliGenAI framework" by Ramkumar A...
 

Mocks, Proxies, and Transpilation as Development Strategies for Web Development

  • 1. Mocks, Proxies, and Transpilation as Development Strategies for Web Development Dave Mason & Noury Bouraqadi Ryerson University École Mines, Douai 1 / 13
  • 2. Web Development Server side Seaside Aidaweb Illiad SST Client side Javascript et al SqueakJS Amber, MySmalltalk, S8 PharoJS 2 / 13
  • 3. Development á la PharoJS 1 Native Pharo Testing build models test/debug in full Pharo 2 App with Remote UI open a bridge to a JS engine (web browser) from Pharo, in Smalltalk access global variables like document window access fields/functions via message sends proxies make seamless interaction blocks as event handlers 3 Full Client App same code from previous step export a Javascript file from Smalltalk code 3 / 13
  • 4. Demo 1 testBrowserButton 2 | button flag | 3 button := document createElement: ’button’. 4 button 5 id: ’who’; 6 innerHTML: ’Click on this within 10 seconds or the test fails’; 7 addEventListener: ’click’ block: [: ev | 8 button innerHTML: ’Click again immediately or the test fails’; 9 addEventListener: ’click’ block: [: xev | 10 flag := true]. 11 ]; 12 addEventListener: #mouseover block: [: ev : this | 13 button style backgroundColor: ’yellow’ 14 ] close. 15 button style backgroundColor: ’pink’; 16 height: ’2cm’. 17 document body native_appendChild: button. 18 flag := nil. 19 self assert: (window confirm: ’If you can see the pink button, accept 20 JbBridge pollFor: 10 seconds orUntil: [flag]. 21 self assert: flag notNil description: ’button not clicked’. 22 self assert: (window confirm: ’Did the button turn yellow?’) 4 / 13
  • 5. 1 Received: document._createElement_("button") 2 Sent: {"proxy":"$_1"} 3 Received: $_1._id_("who") 4 Sent: {"basic":"who"} 5 Received: $_1._innerHTML_("Click on this within 10 seconds or the test fails") 6 Sent: {"basic":"Click on this within 10 seconds or the test fails"} 7 Received: JbLoggingEvaluatorWebSocketDelegate._default()._makeBlockClosureProxy_(false) 8 Sent: {"proxy":"$_2"} 9 Received: JbLoggingEvaluatorWebSocketDelegate._set_callback_to_($_1,"click",$_2); 10 Sent: {"basic":true} 11 Received: $_1._style() 12 Sent: {"proxy":"$_3"} 13 Received: $_3._backgroundColor_("pink") 14 Sent: {"basic":"pink"} 15 Received: $_3._height_("2cm") 16 Sent: {"basic":"2cm"} 17 Received: document._body() 18 Sent: {"proxy":"$_4"} 19 Received: $_4.appendChild($_1) 20 Sent: {"proxy":"$_1"} 21 Received: window._confirm_("If you can see the pink button, accept this and then click on the but 22 Sent: {"basic":true} 23 Received: :-$_4 24 Received: :-$_3 25 Sent: {"cb":["$_2",{"proxy":"$_5"},{"proxy":"undefined"}]} 26 Received: $_1._innerHTML_("Click again immediately or the test fails") 27 Sent: {"basic":"Click again immediately or the test fails"} 28 Received: JbLoggingEvaluatorWebSocketDelegate._default()._makeBlockClosureProxy_(false) 29 Sent: {"proxy":"$_6"} 30 Received: JbLoggingEvaluatorWebSocketDelegate._set_callback_to_($_1,"click",$_6); 31 Sent: {"remove":true,"proxy":"$_2"} 32 Received: :-$_2 33 Sent: {"basic":true} 5 / 13
  • 6. Translation Challenges DoesNotUnderstand undefined/null vs. nil non-local returns unfortunate JS/DOM inheritance optimizing numeric methods optimizing block methods minimizing hand-written JS code (39/304 methods) 6 / 13
  • 7. Translation Incompatabilities Until/Unless implemented in ECMAScript ?? Number stack Characters as String become: weak arrays resumable exceptions 7 / 13
  • 9. Simple Expressions CAmber Chrome FAmber Firefox NodeJS Pharo Safari SqueakJS 100 101 102 103 104 milliseconds add-1 add-expr add-y empty message empty add-1 x := x + 1 add-y x := x + y add-expr x := x + instance one message instance simpleMethod 9 / 13
  • 10. Return expressions CAmber Chrome FAmber Firefox NodeJS Pharo Safari SqueakJS 101 102 103 104 milliseconds cond-return nonlocal nonlocal-block cond-return self ten>5 ifTrue: [^#yes] nonlocal self ten>5 ifTrue: [aBlock value] nonlocal-block self ten>5 ifTrue: aBlock 10 / 13
  • 11. Loop expressions CAmber Chrome FAmber Firefox NodeJS Pharo Safari SqueakJS 101 102 103 104 105 106 milliseconds repeatLoop toDoLoop unoptLoop whileLoop repeatLoop 10 timesRepeat: [x:=x+1] toDoLoop 1 to: 10 do: [:y| x:=x+y] whileLoop [y<10] whileTrue: [y:=y+1. x:=x+y] unoptLoop b1 whileTrue: b2 11 / 13
  • 12. Conclusions if you want perfect semantics, use SqueakJS if you want web-browser based development, consider Amber if you want high performance and powerful IDE based development, use PharoJS 12 / 13