Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ESUG17: AppeX and JavaScript Enhancements in Cincom Smalltalk

148 views

Published on

A presentation about AppeX and JavaScript in Cincom Smalltalk at the 2017 European Smalltalk User Group Conference.

Published in: Software
  • Be the first to comment

  • Be the first to like this

ESUG17: AppeX and JavaScript Enhancements in Cincom Smalltalk

  1. 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. 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. 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. 4. Proprietary & Confidential Actually, Smalltalk and JavaScript go together like… Beer and Bratwurst Lox and Cream Cheese Chocolate and Peanut Butter
  5. 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. 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. 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. 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. 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. 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. 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. 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. 13. Proprietary & Confidential GenericJavascript @cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.
  14. 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. 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. 16. Proprietary & Confidential JavascriptClosure - Function @cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.
  17. 17. Proprietary & Confidential JavascriptClosure - Initialization @cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.
  18. 18. Proprietary & Confidential Application on the Server for the JavascriptClosure @cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.
  19. 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. 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. 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. 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. 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. 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. 25. Proprietary & Confidential Before Beautifying @cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.
  26. 26. Proprietary & Confidential After Beautifying @cincomsmalltalk #ESUG17COMPANY CONFIDENTIAL | ©2017 Cincom Systems, Inc. All Rights Reserved.
  27. 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. 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. 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. 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. 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. 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. 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. 34. ThankYou! Any questions?
  35. 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

×