Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mocks, Proxies, and Transpilation as Development
Strategies for Web Development
Dave Mason & Noury Bouraqadi
Ryerson Unive...
Web Development
Server side
Seaside
Aidaweb
Illiad
SST
Client side
Javascript et al
SqueakJS
Amber, MySmalltalk, S8
PharoJ...
Development á la PharoJS
1 Native Pharo Testing
build models
test/debug in full Pharo
2 App with Remote UI
open a bridge t...
Demo
1 testBrowserButton
2 | button flag |
3 button := document createElement: ’button’.
4 button
5 id: ’who’;
6 innerHTML...
1 Received: document._createElement_("button")
2 Sent: {"proxy":"$_1"}
3 Received: $_1._id_("who")
4 Sent: {"basic":"who"}...
Translation Challenges
DoesNotUnderstand
undefined/null vs. nil
non-local returns
unfortunate JS/DOM inheritance
optimizin...
Translation Incompatabilities
Until/Unless implemented in ECMAScript ??
Number stack
Characters as String
become:
weak arr...
Performance
8 / 13
Simple Expressions
CAmber Chrome FAmber Firefox NodeJS Pharo Safari SqueakJS
100
101
102
103
104
milliseconds
add-1 add-ex...
Return expressions
CAmber Chrome FAmber Firefox NodeJS Pharo Safari SqueakJS
101
102
103
104
milliseconds
cond-return nonl...
Loop expressions
CAmber Chrome FAmber Firefox NodeJS Pharo Safari SqueakJS
101
102
103
104
105
106
milliseconds
repeatLoop...
Conclusions
if you want perfect semantics, use SqueakJS
if you want web-browser based development, consider Amber
if you w...
Questions?
@pharojs
http://pharojs.org
13 / 13
Upcoming SlideShare
Loading in …5
×

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

529 views

Published on

Presentation of IWST16, Prag

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Mocks, Proxies, and Transpilation as Development Strategies for Web Development Dave Mason & Noury Bouraqadi Ryerson University École Mines, Douai 1 / 13
  2. 2. Web Development Server side Seaside Aidaweb Illiad SST Client side Javascript et al SqueakJS Amber, MySmalltalk, S8 PharoJS 2 / 13
  3. 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. 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. 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. 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. 7. Translation Incompatabilities Until/Unless implemented in ECMAScript ?? Number stack Characters as String become: weak arrays resumable exceptions 7 / 13
  8. 8. Performance 8 / 13
  9. 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. 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. 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. 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
  13. 13. Questions? @pharojs http://pharojs.org 13 / 13

×