1.
The 25th Annual European
Smalltalk User Group
Conference
September 4, 2017
AppeX and JavaScript
Support Enhancements in
Cincom Smalltalk™
Speaker: Vladimir K. Degen

2.
Proprietary & Confidential
A Bargain
Two talks in one!
• Generic JavaScript code management in Smalltalk,
(a segue)
• JavaScript evaluation and web automation from
within Smalltalk.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

3.
Proprietary & Confidential
A Misconception
• Lots of developers, Smalltalkers included, want to get
involved in web development.
• They might think that Smalltalk and JavaScript don’t go
together well, or that the mindsets are incompatible.
• Nothing could be further from the truth!
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

4.
Proprietary & Confidential
Actually,
Smalltalk and JavaScript
go together like…
Beer and Bratwurst
Lox and Cream Cheese
Chocolate and
Peanut Butter

5.
Proprietary & Confidential
A Little Recap of AppeX
• AppeX manages your JavaScript code versioning
• It allows you to build client-side JavaScript in an Object
Oriented manner.
• In practical terms, this means defining JavaScript
“classes”, and creating “instance” methods on them.
• Take a quick look at the IDE to give a baseline for this
presentation
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

6.
Proprietary & Confidential
More Recap of AppeX
[Open the IDE, show senders/implementers etc.]
• What you write in the JavaScript function template is the JavaScript
you get in the web browser!
• Developing inAppeX is good way to hone your JavaScript skills while
leveraging the Smalltalk IDE.
• See 3 previous ESUG presentations onAppeX, including
https://www.slideshare.net/esug/2014-0817esug2014appe-x
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

7.
Proprietary & Confidential
Some Subtleties, but only Briefly
• Up until EcmaScript6, JavaScript did not have a standard for
class hierarchies and method inheritance.
• Thus many products, includingAppeX have implemented their
own class hierarchy inheritance frameworks.
• AppeX emphasizes the ApplicationClient as a delivery
mechanism of the JavaScript to the web client, with other
JavaScript delivered as external libraries.
• However the external libraries lose out on the code
management tools of AppeX.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

8.
Proprietary & Confidential
Ok, a Bit of the Inheritance Hierarchy
JavascriptCode
JavascriptObject GenericJavascript
JavascriptArray,etc ApplicationClient JavascriptClosure
This talk
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

9.
Proprietary & Confidential
And a Couple More Subtleties
• With GenericJavascript, we are easing the process of delivering
JavaScript in any form.
• And this JavaScript can be completely managed withinAppeX.
• This opens up further the possibility of easily porting
sophisticated web application code to and from AppeX,
and also to use AppeX to produce applications in any
software design style that you wish.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

10.
Proprietary & Confidential
GenericJavascript
• GenericJavascript just means code that will be displayed and
executed as written.
• The code in “initialize” will be delivered to the client as is and
executed immediately.
• The functions will appear as global functions on the client.
• Since the code is in the IDE , you get syntax highlighting, senders
and implementers and code version management.
• The markup in the comments below is so Smalltalk can parse it.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

11.
Proprietary & Confidential
GenericJavascript – Code1
// <startContents: #{AppeX.HelloScript}>
function say(aString) {
var myDiv;
myDiv = document.createElement("div");
myDiv.innerHTML = aString;
document.body.appendChild(myDiv);
}
function sayHello(){
say('Hello from sayHello');
}
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

12.
Proprietary & Confidential
GenericJavascript – Code 2
// <startInitialize: #{AppeX.HelloScript}>
document.body = document.body ||
document.createElement("body");
sayHello();
// <endContents: #{AppeX.HelloScript}>
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

13.
Proprietary & Confidential
GenericJavascript
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

14.
Proprietary & Confidential
JavascriptClosure
• A subclass of GenericJavascript which avoids creating globals.
• With JavascriptClosure, you get in addition that your code is
encapsulated in functions.
• That is, you get method and data encapsulation.
• You can also make private methods, though this is still work in
progress.
• You do *not* get class hierarchy inheritance
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

15.
Proprietary & Confidential
JavascriptClosure – Code 1
This is how it looks like in JavaScript:
Object.defineProperty(AppeX.PersonClosure.prototype,
'sayGoodbye',
{value: function sayGoodbye(){
this.say('Goodbye', this.getIsWhispering());
},
enumerable: false, writable: true
});
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

16.
Proprietary & Confidential
JavascriptClosure - Function
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

17.
Proprietary & Confidential
JavascriptClosure - Initialization
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

18.
Proprietary & Confidential
Application on the Server for the JavascriptClosure
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

19.
Proprietary & Confidential
JavaScript Closures and Generic JavaScript Scripts
• Note that the file based serving still works for these.
• However, cannot just parse and file in random JavaScript.
• We produce the code in a certain format (i.e. annotated with
comments) and file it in and parse it using the same format.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

20.
Proprietary & Confidential
JavascriptClosure and GenericJavascript - 1
• One advantage comes in how you can more naturally view and
perhaps reuse your code when the view is restricted to the single
method, but the methods are listed and grouped.
• The Smalltalk tools based browsers and code separation aids in
understandability of JavaScript as well as it does for Smalltalk.
• Suppose that you had a bunch of JavaScriptCode that was kind of
complex and maybe not optimally written. Obviously not your own
code. Might’ve been your coworkers or just something you got from
the web.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

21.
Proprietary & Confidential
JavaScript Closure and Generic JavaScript - 2
• Putting your JavaScript intoAppeX helps you to rationalize it.
You are strongly encouraged by the tools to at least identify your
functions, the scopes of your variables, your objects, in order to get
the benefit of the tools.
• You could dump all your code into a big GenericJavascript,
but that might not buy you much. So you can do this to get
your application working then refactor from there.
• AppeX encourages an iterative development style.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

22.
Proprietary & Confidential
On to the JSAutomator/JSEvaluator
• JSEvaluator uses whatever web browser is available on the
server to evaluate JavaScript from within the AppeX IDE.
• Development only, not run-time.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

23.
Proprietary & Confidential
Evaluating JavaScript in Smalltalk (sort of)
• Start the JSEvaluator Server
• Here are a few expressions that you might try in a workspace,
and comparing with the result when the JavaScript is
evaluated in a web browser console:
JSEvaluator evaluateJavaScript: '"a" + "c"'. "ac"
JSEvaluator evaluateJavaScript: ' 1 2 '. "Error"
JSEvaluator evaluateJavaScript: ‘
JSON.stringify(window.location);'.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

24.
Proprietary & Confidential
A More Practical Example, the Beautifier
• To try out JavaScript formatting using the open source
library jsbeautifier (http://jsbeautifier.org/):
a) Make a change to a JavaScript method in the
refactoring browser
b)Try Menu...Edit...Format to observe the results.
• Conclusion:We have some ideas for useful external
JavaScript libraries, perhaps you have others.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

25.
Proprietary & Confidential
Before Beautifying
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

26.
Proprietary & Confidential
After Beautifying
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

27.
Proprietary & Confidential
Website Automation
• We have a lot of web application examples that we want to
retest, naturally, during internal releases.
• We created the JSAutomator, build upon the JSEvaluator.
• A test (or automation) script is injected into the application to
be tested.
• The injected JavaScript exercises the web application's
functionality and sends results back to the Smalltalk server.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

28.
Proprietary & Confidential
Non-IntrusiveTesting
• One goal was to have a completely non-intrusive testing
mechanism that does not require one modify the “tested”
application in any way, whether the application is external or
internal.
• The JSAutomator uses a couple of techniques to achieve this goal.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

29.
Proprietary & Confidential
Injecting Code
• Ideally the JSAutomator just adds its own code libraries
(very easy when dealing with AppeX applications).
• Or:The Hammer
Inserting script tags at the end of the initial HTML document,
and then including the JSAutomator libraries.
• The downloaded code uses a couple of techniques to
manipulate the client browser, such as function wrapping and
setTimeout.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

30.
Proprietary & Confidential
Waiting for Results
• Ultimately, Smalltalk waits upon the “promise” or
expected results from the client browser.
• Internally, we’ve created a bunch of SUnit tests for our
examples. I’d like to show you a couple of those now.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

31.
Proprietary & Confidential
Demos
Order of display:
• First anAppeX example opened and exercised manually:
HelloLocalized.
• Then automated.
• Finally, all of them automated.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

32.
Proprietary & Confidential
Conclusions
• GenericJavascript increases flexibility of coding different types
of applications inAppeX while leveraging the Smalltalk IDE.
• GenericJavascript is used in the JSEvaluator, and hence the
JSAutomator.
• The JSAutomator framework has already proven useful to us for
regression testing of web applications.
• We hope you have fun with these new AppeX tools and
capabilities.
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

33.
Proprietary & Confidential
Contact Us
Suzanne Fortman
Director of SmalltalkGlobalOperations
sfortman@cincom.com
@SuzCST (Twitter)
ArdenThomas
Product Manager
athomas@cincom.com
@ArdenTCST (Twitter)
Vladimir Degen
vdegen@cincom.com
@cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.

34.
ThankYou!
Any questions?

35.
Cincom, the Quadrant Logo, Cincom Smalltalk,Cincom ObjectStudio and CincomVisualWorks
are trademarks or registered trademarks of Cincom Systems, Inc.
©2017 Cincom Systems, Inc.
All Rights Reserved