Download to read offline
![MyCounterBrowserApp
MyCounterBrowserApp>>initialize
super initialize.
counter := MyCounter new.
controller := MyCounterController new.
controller counter: counter.
controller countDisplay: self countDisplay.
self resetButton addEventListener: #click block: [ controller reset ].
self incrementButton addEventListener: #click block: [ controller increment ]](https://image.slidesharecdn.com/20170331smalltalk-170426103842/85/Smalltalk-29-320.jpg)
![PjTranspiler
PjTranspiler convertToJs:[ 1+1 ] .
jsString := PjTranspiler convertToJs:[ [ 1+ 1 ] ].
jsString := PjTranspiler convertToJs:[:x | x + 1 ].
jsString := PjTranspiler convertToJs:[ [:x | x + 1] value:2 ].
PjTranspiler convertToJs: MyCounter.
Smalltalk JavaScript](https://image.slidesharecdn.com/20170331smalltalk-170426103842/85/Smalltalk-35-320.jpg)
![MyCounterBrowserAppTest
MyCounterBrowserAppTest>>testClickOnIncrementButtonIncreasesCountAn
dUpdatesDisplay
1 to: 10 do: [ : expectedCount |
incrementButton click.
self assert: countDisplay innerHTML equals: expectedCount asString
]](https://image.slidesharecdn.com/20170331smalltalk-170426103842/85/Smalltalk-38-320.jpg)
![MyPharoCounterBrowserAppTest
MyCounterBrowserAppTest subclass: #MyPharoCounterBrowserAppTest
instanceVariableNames: ''
classVariableNames: ''
package: 'PharoJS-Demo-Tests'
MyPharoCounterBrowserAppTest>>currentApp
^ self evalBlock: [MyCounterBrowserApp currentInstance]](https://image.slidesharecdn.com/20170331smalltalk-170426103842/85/Smalltalk-42-320.jpg)
![PjBridge
bridge := PjBridge startOn: 9001 title:'test'.
bridge clientTitle.
bridge evalBlock: [1+2].
bridge evalBlock: [|x| x := 6 * 7].
bridge loadClass: MyCounter.
bridge evalBlock: [
|counter|
counter := MyCounter new.
counter increment.
counter count.].
bridge stop.
JavaScript Interpreter](https://image.slidesharecdn.com/20170331smalltalk-170426103842/85/Smalltalk-43-320.jpg)
Uploaded bySho Yoshida
今時なウェブ開発をSmalltalkでやってみる?
The document provides a detailed overview of a project involving Smalltalk and Pharo, specifically a web application called 'mycounter' that allows users to increment and reset a counter. It includes code snippets for the model, controller, and view components, alongside integration testing for functionality. Additionally, it outlines how to use a JavaScript transpiler to convert Smalltalk code into JavaScript.
More Related Content
今時なウェブ開発をSmalltalkでやってみる?
- 1. S H OY O S H I D A S O R A B I T O I N C Smalltalk ? 3 1 M A R C H 2 0 1 7
- 2.
- 3.
- 4. https://fossbytes.com/most-loved-and-most-hated-programming-languages/ Which Are TheMost Loved and Most Hated Programming Languages | 2017
- 5.
- 7.
- 9. Develop in Pharo,Run on Javascript
- 10. PharoJS • https://pharojs.github.io/ • http://smalltalkhub.com/#!/~noury/PharoJS •ESUG 2015 • Pharo JavaScript
- 11.
- 13.
- 14. • Smalltalk Allthe Time & Everywhere PharoJS
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. Gofer it smalltalkhubUser: 'noury'project: 'PharoJS'; configurationOf: #PharoJS ; loadBleedingEdge.
- 22. C O DE + T E S T M O D E L Pharo Pharo counter := MyCounter new. counter count. counter increment. counter count.
- 23. C O DE + T E S T I N T E G R AT I O N
- 24. C O DE + T E S T I N T E G R AT I O N MyCounterController MyCounterBrowserApp Model Controller
- 25. C O DE + T E S T I N T E G R AT I O N MyCounterController MyCounterBrowserApp Model Controller
- 26. MyCounterController Object subclass: #MyCounterController instanceVariableNames:'counter countDisplay' classVariableNames: '' package: 'PharoJS-Demo'
- 27. MyCounterController MyCounterController>>increment self counter increment. selfupdateDisplay MyCounterController>>reset self counter reset. self updateDisplay MyCounterController>>updateDisplay self countDisplay innerHTML: self counter count
- 28. MyCounterBrowserApp PjFileBasedBrowserApp subclass: #MyCounterBrowserApp instanceVariableNames:'counter controller' classVariableNames: '' package: 'PharoJS-Demo'
- 29. MyCounterBrowserApp MyCounterBrowserApp>>initialize super initialize. counter :=MyCounter new. controller := MyCounterController new. controller counter: counter. controller countDisplay: self countDisplay. self resetButton addEventListener: #click block: [ controller reset ]. self incrementButton addEventListener: #click block: [ controller increment ]
- 30. MyCounterBrowserApp MyCounterBrowserApp>>incrementButton ^ self domElementAt:'incrementButton' MyCounterBrowserApp>>resetButton ^ self domElementAt: 'resetButton' MyCounterBrowserApp>>countDisplay ^ self domElementAt: 'countDisplay'
- 31. MyCounterBrowserApp MyCounterBrowserApp>>(class)appClasses <pharoJsSkip> ^super appClasses, {MyCounter.MyCounterController} MyCounterBrowserApp>>(class)appJsSubFolder ^'js' JavaScript
- 32. C O DE + T E S T I N T E G R AT I O N MyCounterController MyCounterBrowserApp Model Controller MyCounterBrowserApp setUpAppFolder. MyCounterBrowserApp appFolder. HTML
- 33. C O DE + T E S T I N T E G R AT I O N <!DOCTYPE html> <meta charset="utf-8" /> <head> <title>MyCounter</title> </head> <body> <div class="container"> <div id="countDisplay" class="countText">0</div> <button id="resetButton" class="resetButton">Reset</button> <button id="incrementButton" class="incrementButton">Increment</button> </div> <script language="javascript" type="text/javascript" src="js/index.js"></script> </body> </html> HTML
- 35. PjTranspiler PjTranspiler convertToJs:[ 1+1] . jsString := PjTranspiler convertToJs:[ [ 1+ 1 ] ]. jsString := PjTranspiler convertToJs:[:x | x + 1 ]. jsString := PjTranspiler convertToJs:[ [:x | x + 1] value:2 ]. PjTranspiler convertToJs: MyCounter. Smalltalk JavaScript
- 36. MyCounterBrowserAppTest PjWebAppTestCase subclass: #MyCounterBrowserAppTest instanceVariableNames:'application countDisplay incrementButton resetButton' classVariableNames: '' package: 'PharoJS-Demo-Tests'
- 37. MyCounterBrowserAppTest MyCounterBrowserAppTest>>setUp super setUp. application :=self currentApp. countDisplay := application countDisplay. resetButton := application resetButton. incrementButton := application incrementButton. MyCounterBrowserAppTest>>currentApp self subclassResponsibility
- 38. MyCounterBrowserAppTest MyCounterBrowserAppTest>>testClickOnIncrementButtonIncreasesCountAn dUpdatesDisplay 1 to: 10do: [ : expectedCount | incrementButton click. self assert: countDisplay innerHTML equals: expectedCount asString ]
- 39.
- 40. T E ST P O R TA B I L I T Y
- 41. MyPharoCounterBrowserAppTest MyCounterBrowserAppTest subclass: #MyPharoCounterBrowserAppTest instanceVariableNames:'' classVariableNames: '' package: 'PharoJS-Demo-Tests' MyPharoCounterBrowserAppTest>>currentApp ^MyCounterBrowserApp start.
- 42. MyPharoCounterBrowserAppTest MyCounterBrowserAppTest subclass: #MyPharoCounterBrowserAppTest instanceVariableNames:'' classVariableNames: '' package: 'PharoJS-Demo-Tests' MyPharoCounterBrowserAppTest>>currentApp ^ self evalBlock: [MyCounterBrowserApp currentInstance]
- 43. PjBridge bridge := PjBridgestartOn: 9001 title:'test'. bridge clientTitle. bridge evalBlock: [1+2]. bridge evalBlock: [|x| x := 6 * 7]. bridge loadClass: MyCounter. bridge evalBlock: [ |counter| counter := MyCounter new. counter increment. counter count.]. bridge stop. JavaScript Interpreter
- 44. • PharoJS Smalltalk •Pharo JavaScript