PharoJS: Pharo-Based TDD for Javascript Applications

Noury Bouraqadi & Dave Mason
http://pharojs.org
Tutorial 
Pharo-Based TDD  
for Javascript Apps

Run on Javascript
+
Develop in Pharo
=

Tools
+
Framework
=
MIT
License

Why
•  Develop in Smalltalk all the time J
•  Portability
•  Front-end/standalone
•  Reuse existing JS libraries
•  Run-time Speed
?

Javascript 0% 100%
Development Production
100% Pharo 0%
Develop in Pharo, Run on Javascript

Javascript 0% 100%
Smalltalk classes
100% Pharo 0%
Set of classes +
entry point class

Javascript 0% 100%
Convert Smalltalk to JS
100% Pharo 0%
Only classes reachable
from the
entry point class

1. Write Tests
3. Export to JS
2. Pass the tests
Lifecycle with
Javascript 0% 100%
100% Pharo 0%

Case Study: TDD of a Physics Simulation
•  Reuse an existing JS Library
•  Testing hybrid app = Pharo + Javascript
•  Link Pharo code to JS objects including DOM
•  Pushing to production

Backlog
•  At start up 3 bodies
è 1 floor
è 2 falling rectangles
•  "Add xxx" buttons
è Adds a body
•  "Reset" button
è Removes all bodies

Write Tests 100% Pharo & 0% JS
PjWebAppTestCase subclass: #PhysicsSimTest
instanceVariableNames: ''
classVariableNames: ''
package: 'ESUG2018'

Write Tests 100% Pharo & 0% JS
PjWebAppTestCase subclass: #PhysicsSimTest
instanceVariableNames: ''
package: 'ESUG2018'
App should
run on a web
browser

Running the Tests ~50% Pharo & ~50% JS
app
Controller
engine

PhysicsSimTest>>testAppInitialSetup
self assert: app bodies size equals: 3.
Body 1
JS Object
Body 2
JS Object
Body 3
JS Object

PhysicsSimTest>>testAppInitialSetup
Instance of the
entry point class
Pharo Object

Missing
entry point class
appClass subclassResponsibility

Defining the Entry Point Class

PjFileBasedWebApp subclass: #PhysicsSim
instanceVariableNames: 'engine'
package: 'ESUG2018'
We rely on an
external HTML file

Test References Entry Point Class
PhysicsSimTest class>>appClass
^ PhysicsSim
Entry point class

Test Requests App Folder
Folder where
HTML + other files
are located

HTML File = App's View
...
<button id="resetButton" class="green">Reset</button>
<div id="simulationView"></div>
...
<script src="js/matter.js"></script>
<script src="index.js"></script>
...
Third-party
JS Library

...
...
<script src="js/index.js"></script>
...
Link to JS Code
Generated by
PharoJS

...
...
...
No Behavior!

...
...
...
No Behavior!
ID = to attach
Pharo code

Rerun Tests
PharoJS Opens
HTML file in a
web browser

Rerun Tests
PharoJS Opens
HTML file in a
web browser
No
Simulation!

Fixing the App
PhysicsSim>>initialize
super initialize.
self createAndStartEngine.
self setupAndStartRendering.

PhysicsSim>>bodies
^ engine world bodies

JS Doc/Examples Pharo Code

Fixing the App
PhysicsSim>>matterJsRoot
^ window Matter

PhysicsSim>>createAndStartEngine
| runner |
engine := self matterJsRoot Engine create.
runner := self matterJsRoot Runner create.
self matterJsRoot Runner run: runner with: engine
Proxy to
Javascript global

Fixing the App
^ window Matter

| runner |
PharoJS generated
accessor to JS
object property

Fixing the App
^ window Matter

| runner |
Calling JS method
create()

Fixing the App
^ window Matter

| runner |
Calling JS method
run(runner, engine)

Fixing the App
PhysicsSim>>setupAndStartRendering
| render simulationView |
simulationView := self elementAt: #simulationView.
render := self matterJsRoot Render create:
{#element -> simulationView.
#engine -> engine.
#options -> {#width -> 800.
#height -> 600.
#wireframes -> false.
#background -> 'transparent'}} asJsObject.
self matterJsRoot Render run: render

Fixing the App
#engine -> engine.
#height -> 600.
Finds the DOM element
with ID "SimulationView"
HTML
...
...

Fixing the App
#engine -> engine.
#height -> 600.
Create a JS Object
from a Pharo
Dictionary

Defining Literal JS Objects in Pharo
#engine -> engine.
#options -> {
#width -> 800.
#height -> 600.
#background -> 'transparent'}
} asJsObject.
{element : simulationView.
engine :engine.
options : {
width : 800.
height : 600.
wireframes : false.
background : 'transparent'}
}
Javascript code Pharo equivalent

Fixing the App
super initialize.
self createAndStartEngine.
self setupAndStartRendering.
self addInitialBodies

Bodies.rectangle(
400,
610,
810,
60,
{ isStatic: true });
Creating MatterJS Bodies

self matterJsRoot Bodies
rectangle: 400
y: 610
width: 810
height: 60
options: {
#isStatic -> true} asJsObject.
Javascript code Pharo equivalent

More features = Button Handling

HTML ID for Linking with Pharo
HTML
...
<button id="resetButton">Reset</button>
...

Write Tests for Reset Button
PhysicsSimTest>>testResetDeleteMobileBodiesOnly
self clickElementById: #resetButton.
HTML
...
...

Write Tests for Reset Button
PhysicsSimTest>>testResetDeleteMobileBodiesOnly
self clickElementById: #resetButton.
HTML
...
...
Pharo triggers event
on DOM object!

Add Behavior to HTML Button
...
self onClick: #resetButton
do: [ self matterJsRoot World
clear: engine world
keepStatic: true]

...
clear: engine world
keepStatic: true]
HTML ID

...
clear: engine world
keepStatic: true]
Pharo Block
Calling
MatterJS Library

Value
Pharo Block
Click on
HTML Button

Lifecycle with
Javascript 0% 100%
100% Pharo 0%
3. Export to JS
1. Write Tests
2. Pass the tests

Export App for Production
100% Javascript

Exported JS file
...
...

http://pharojs.org/Demo/MatterJsDemo/index.html

Open Source for the Real World
Pharo Tradition!

nootrix.com
GPS
Navigation
Zoomable
Map
Update
Markers

What Next?
•  Better support for mobile apps

•  Migrate to Pharo 7
•  Improve Code Extraction
•  Middleware for hybrid apps
This
afternoon!

Learn more about PharoJS
•  Web: http://pharojs.org
– FAQ + ...
– Thanks ESUG for the support
•  Slack: https://pharojs.slack.com/
– Discussions
•  Twitter: https://twitter.com/pharojs
– News
– Subscription to PharoJS Slack

Noury Bouraqadi & Dave Mason
Develop in Pharo
Run on Javascript
http://pharojs.org

PharoJS: Pharo-Based TDD for Javascript Applications

More Related Content

What's hot (20)

Similar to PharoJS: Pharo-Based TDD for Javascript Applications (20)

More from ESUG (20)

Recently uploaded (20)

PharoJS: Pharo-Based TDD for Javascript Applications