First Name: Vladimir
Last Name: Degen
youtube: https://youtu.be/sZRAG7L1DgI
Title: AppeX and JavaScript Support Enhancements in Cincom Smalltalk™
Type: Talk
Abstract:
JavaScript is the de facto language of the web, while Smalltalk is a premier language for developing powerful and innovative programs. AppeX, featured at
ESUG in past years, continues to evolve as a tool for bringing these two languages together in a simple and natural way to support the development of
complex web applications. AppeX is a very lightweight and flexible modern web application framework in Cincom Smalltalk. With AppeX, users get the most
current web technologies like HTML5, JavaScript, Ajax, JSON, XHR, etc. AppeX is open and uses any preferred JavaScript libraries, as well as automatic
session management. AppeX allows users to manage Smalltalk and JavaScript code within Cincom Smalltalk and also provides browser support for JavaScript,
which allows users to search senders/implementers and parse JavaScript literals.
In this talk, Vladimir Degen will explain and demonstrate some recent, interesting features of AppeX, including editing arbitrary JavaScript code from
within AppeX, and the ability of AppeX to "task" web browsers to do such things as utilizing JavaScript libraries and functionally testing and scripting
websites from within Smalltalk.
Bio:
Vladimir Degen, a senior software engineer, has been with Cincom Systems, Inc. now for three years. Vladimir is a valuable member of the Protocols team
responsible for network protocols, security and web application development components of the Cincom Smalltalk™ Foundation. With Cincom® ObjectStudio® and
Cincom® VisualWorks® both built on the same Foundation, this engineering group is responsible for critical improvements that enhance both products.
Specifically, Vladimir combines his experience in Smalltalk and JavaScript to enhance the web application development components in Cincom Smalltalk.
Vladimir will be discussing the latest AppeX and JavaScript Support Enhancements in Cincom Smalltalk.
Vladimir first decided that there must be something better than Basic to create wargame simulations back before entering college. Unfortunately the
internet back then just wasn't what it is today, and he remained oblivious of Smalltalk while pursuing his other love, physics, and into the early 90's,
when he first heard talk of Smalltalk from a fellow contract programmer in SAS. Eager to make up for lost time, he's spent most of his professional life
since then working with Smalltalk, and also (more recently), as a JavaScript developer. A few years ago he found an opportunity at Cincom to combine
working with Smalltalk and JavaScript and has been doing so from his home in Maryland up to the present time.
Apart from work, Vladimir has engaged in various martial arts (most recently Kung Fu and Kunst des Fechtens),
%in Stilfontein+277-882-255-28 abortion pills for sale in Stilfontein
AppeX and JavaScript Support Enhancements in Cincom Smalltalk
1. The 25th Annual European
Smalltalk User Group ConferenceSeptember 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 #ESUG17
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 #ESUG17
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 #ESUG17
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 in AppeX is good way to hone your JavaScript skills while
leveraging the Smalltalk IDE.
• See 3 previous ESUG presentations on AppeX, including
https://www.slideshare.net/esug/2014-0817esug2014appe-x
@cincomsmalltalk #ESUG17
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, including AppeX 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 #ESUG17
8. Proprietary & Confidential
Ok, a Bit of the Inheritance Hierarchy
JavascriptCode
JavascriptObject GenericJavascript
JavascriptArray,etc ApplicationClient JavascriptClosure
This talk
@cincomsmalltalk #ESUG17
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 within AppeX.
• 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 #ESUG17
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 #ESUG17
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 #ESUG17
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 #ESUG17
15. Proprietary & Confidential
JavascriptClosure – Code 1
This is how it looks like in JavaScript:
Object.defineProperty(AppeX.PersonClosure.prototype,'say
Goodbye',
{value: function sayGoodbye(){
this.say('Goodbye', this.getIsWhispering());
},
enumerable: false, writable: true
});
@cincomsmalltalk #ESUG17
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 #ESUG17
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 JavaScript Code 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 #ESUG17
21. Proprietary & Confidential
JavaScript Closure and Generic JavaScript - 2
• Putting your JavaScript into AppeX 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 #ESUG17
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 #ESUG17
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 #ESUG17
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 #ESUG17
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 #ESUG17
28. Proprietary & Confidential
Non-Intrusive Testing
• 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 #ESUG17
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 #ESUG17
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 #ESUG17
31. Proprietary & Confidential
Demos
Order of display:
• First an AppeX example opened and exercised manually:
HelloLocalized.
• Then automated.
• Finally, all of them automated.
@cincomsmalltalk #ESUG17
32. Proprietary & Confidential
Conclusions
• GenericJavascript increases flexibility of coding different types of
applications in AppeX 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 #ESUG17
33. Proprietary & Confidential
Contact Us
Suzanne Fortman
Director of Smalltalk Global Operations
sfortman@cincom.com
@SuzCST (Twitter)
Arden Thomas
Product Manager
athomas@cincom.com
@ArdenTCST (Twitter)
Vladimir Degen
vdegen@cincom.com
@cincomsmalltalk #ESUG17