Simple Polymer front-end project with a Smalltalk back-end

This is an article about a Smalltalk back-end + a simple project based on a Polymer 2.0 project generated by the Polymer CLI. It is basically just a Login button which uses the Auth0 service to authenticate a user through the authentication providers of your choice (Google, Facebook, et.c.). I am not affiliated with Auth0, but I use them for all my customer projects and compared to implementing OAUTH2 oneself (I have once) it is very much recommended :)

If you’re new to Smalltalk, here’s a better article with more explanations on how things work and pointers to learning resources, please see

And of course, the Smalltalk starter articles

Why Smalltalk as a back-end, eh?

As a young teenager, I learned Object-Oriented programming while reading a BYTE magazine from 1981 which covered Smalltalk.

I only knew Basic and Z-80 Assembly language at that time, so it was a real earth-shaking experience. I spent that fall writing loads of Smalltalk code on paper (and signing up on the list to loan the Smalltalk-80 books on a nearby library when they became available). I never got to see an actual system until many, many years later when I could finally try Squeak Smalltalk on a PC, but by then I had forgot most of everything.

Still, I’ve found myself returning to Smalltalk again and again over the years, downloading the free books and trying to get back to that feeling I had so many years ago. It’s hard to describe, but in direct contrast to many things I’ve had to work on as an adult, Smalltalk was FUN and POWERFUL.

This is in my opinion the very best, especially for a beginner, but it covers everything;

I recently took a week to try to implement a small project in Smalltalk just to see if I could and I’m happy to say I very much did. It still is powerful in a fun way. This article is meant as a very simple guide for those who know some JavaScript and are interested in seeing a small example on how to use Smalltalk in a practical, modern setting.

Smalltalk was the first truly object-oriented language, and its history and creation cover quite a lot of other interesting projects and people. I truly recommend reading this essay by Alan Kay;

But it was more than a language, almost all Smalltalk systems are both IDE, debugger and target system rolled into one. There is no separation of source code text and running system. When you edit a method, it is compiled immediately. If you debug code, and make changes to a method, that change is compiled and saved immediately. These are good things.

The link to the polymer JavaScript front-end project is here;

And it looks a bit like this;

When you are logged in, you will get a user object back from the Smalltalk back-end which will contain user name and picture, which will then be shown. Please read through the Readme to make sure you create an Auth0 account and download all the dependencies. Yes, I like Sandwiches.

The back-end handles verification of the access token the front-end gets as a result of the authentication process, and uses MongoDB for user object storage, returning a session id to the client which can be stored and used to retrieve the user object again on page reload, for example (this is included in the Polymer example).

OK, so what does it look like? You spend most of the time in the system browser, which looks like this;

I’ve created a new package called ‘myservice’, which contain five classes. They’re all called MySomething, which is kind of wonky, I guess. Methods of a class are organized into groups called ‘protocols’, but can be thought of as tags, which you can filter methods on.

When you select a method, you get to edit it in the lower part of the window. I have shown the ‘initialize’ method of the class MyBackend, which is like the constructor of other languages.

I use two very useful libraries called Voyage and Teapot;

Voyage is an impressive base project for NoSQL databases with support for MongoDB and more. Teapot is a very easy-to-use Web server (and client) library (there’s apparently an even easier called Tealight, as well). As of this writing, it does not have CORS support, but it was relatively easy to add given it (and Smalltalks) flexibility.

The Smalltalk package file can be found here (and yes, you can of course export things as source code, if you want :);

What you do is this; 1) Download the file above, 2) Download Pharo Smalltalk (below) for your system, and start it, 4) Right-click inside Pharo to get a mouse menu an select Tools -> File Browser, 5) Find the file in your file system and select ‘File In’ from the tool. You will now have the package on your image.

Then follow the instructions in the class comments, which is basically to select and execute three code blocks which looks like this, to download the dependencies (VoyageMongo, for example);

Gofer it
smalltalkhubUser: ‘SvenVanCaekenberghe’ project: ‘Neo’;
configurationOf: ‘NeoJSON’;
loadStable.

Gofer it
smalltalkhubUser: ‘zeroflag’ project: ‘Teapot’; configuration;
loadStable.

Metacello new
 repository: ‘github://pharo-nosql/voyage:1.5/mc’;
 baseline: ‘Voyage’;
 load: #( mongo ).

Then you start a playground. Playgrounds are small text areas where you keep code you might want to execute again, or maybe try out if something works before adding it to your code. It’s a combination of a REPL and an interactive environment. In fact, a playground have access to the whole always-on Smalltalk system that you write your code in as well as executes it.

In the Playground write;

This declares a new local variable, and sets it to the result of sending the class MyBackend the message new (which returns a new instance). Your server is now up.

If you have downloaded the Polymer front-end project and installed all dependencies, you can now do ‘polymer serve’ from a local shell and go to the localhost url that was started. You might have to go add the url to your Auth0 client settings, which is a white-list for all urls who are allowed to log in using your auth0 client credentials.

I realize that I have only just shown some bits and pieces of Smalltalk and of the client and the server are supposed to work, but I was hoping that you might just be able to download, start and just get things working _before_ understanding everything in detail. I find that a better learning experience, but YMMV of course.