Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

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

537 Aufrufe

Veröffentlicht am

Presentation of IWST16, Prag

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×