6 ms·

SmallJS: Smalltalk-80 that compiles to JavaScript

152 points by mpweiher 1y ago

dontlaugh 1y ago
Looks cool. Why the Romanian flag?
- amszmidt 1y ago
  Its not the Romanian flag (order of color is different).
  - Hasnep 1y ago
    On the original smalltalk balloon the red, yellow and blue are in the same order as the Romanian (and Chadian) flag, so maybe the question should have been why is it not the Romanian flag?
    - amszmidt 1y ago
      Dan Ingalls answer is much more interesting than anything I could explain ... From https://lists.squeakfoundation.org/pipermail/squeak-dev/1998-October/022354.html https://lists.squeakfoundation.org/pipermail/squeak-dev/1998... Ralph - Many times I have browsed past your article "About the Smalltalk Balloon" and been tempted to add to the little bit of history that you have there. While your link is entitled "Why a hot-air balloon is the symbol of Smalltalk," you never really answer the question. The time has come to tie up that loose end. Return with us now to those thrilling days of yesteryear, and The Real Story About the Smalltalk Balloon Everyone in our group wanted to challenge the ivory tower image in Byte's special issue on Pascal, because in fact we were all working intensely to get Smalltalk-80 out the door from Xerox at the time. The cover of that issue depicted the "land of Smalltalk" as a remote island, and that triggered a connection for me out of which was born the fanstasy of liberating Smalltalk from the ivory tower by balloon ascent. Here is the connection... My favorite book from youth was The Mysterious Island, by Jules Verne. It is the story of an engineer, Cyrus Harding, who gets blown far afield in a storm during a balloon surveillance mission in the 1860's. He ends up stranded on an island but, through ingenuity and a bit of luck, he manages to recreate most of the accomplishments and comforts of civilization on his own (with a little help from an amiable orangutan ;-). Cyrus Harding became my childhood standard for resourcefulness and the conviction that anything can be accomplished if you are clever and persistent. The fantasy of a balloon as the vehicle for Smalltalk's release stuck with me from then on. When the opportunity came to design the cover for the Byte issue on Smalltalk, I made the suggestion of the balloon lifting off from the island shown on the Pascal cover, and everyone picked up on it. Robert Tinney executed the wonderful graphic that we know so well, and the rest is history. - Dan P.S. There is a further coincidence in this particular literary allusion: It is revealed at the end of The Mysterious Island that the island is actually the base of operations for a more well-known Verne character, and that character happens also to be the childhood hero of a more well-known figure in the history of Smalltalk.
      - whimsicalism 1y ago
        unless i am missing something, this is not an answer to the question
        Smalltalker-80 1y ago
        As creator of the language and the logo...: It is not meant to be the Romanian or any other flag. It was indeed modeled after the Smalltalk balloon on the BYTE Magazine linked, but simplified into 3 'basic' colors: red, yellow (iso green) and blue, each with a slightly darker shade to make it look better. PS I own a copy of that visionairy BYTE magazine :-).
      - imglorp 1y ago
        Byte cover for reference. https://tashian.com/articles/dynamicland/byte-magazine-august-1981.jpg https://tashian.com/articles/dynamicland/byte-magazine-augus...
revskill 1y ago
Js is the best.
habedi0 1y ago
This is pretty cool!
- Smalltalker-80 1y ago
  Tnx, any questions you can also ask on the git repo.
bradrn 1y ago
See also: https://www.amber-lang.net/ https://www.amber-lang.net/
- anilakar 1y ago
  I wanted to try Smalltalk earlier and discovered Pharo, but I found it to be just one huge antipattern as everything involved a single combined toolchain/IDE/runtime virtual machine image. Amber's documentation seems to have screenshots of the very same object inspector. If I want to build a wooden chair, I don't want to start by learning to use a steel metal punch to create a panel saw first...
  - zelphirkalt 1y ago
    What exactly is the anti-pattern? Just that it is image based? There is Iceberg for exporting to git afaik. Haven't used it in depth though.
    - scotty79 1y ago
      I think long lived state is the problem. In Pharo your entire project along with its runtime, code, data and IDE is one long lived intertwined and dispersed state. I was never really sure if this is necessarily a problem or not. But today I had an interesting idea. Pharo is Factorio of programming. You are evolving living, functioning system using itself. And we know most of Factorio games end up as ad-hoc tangled mess, where new things are added rather on the side than old things being properly refactored. So if your Factorio factories are always pristine examples of order you should be fine with Pharo. If not, you might be better off with something like PHP or Fermyon Spin which have app state living no longer than a single request-response. With long lived state neatly and separately held in the database and source files.
      - cess11 1y ago
        That's kind of solved with Iceberg and Metacello, they make it easy to just grab a base image and pull in what your system needs, no need to step through the change file and figure out where to file in the stuff you filed out when you broke things. Though it's quite easy to make your application appear similar to a Factorio screen, since libraries like Roassal and Mondrian make it like a five to ten minute thing to create a custom visualisation of the involved packages. Static analysis tooling in other languages is usually not as malleable and easy to customise.
Unirely01 1y ago
[dead]
mark_l_watson 1y ago
Nice, a new update. I remember playing with both small-js and Amber a longtime ago. Very cool projects but I am not a JavaScript developer so I always had friction using both projects so I settled on Pharo. Off topic: if you like long running image based development you can also get that with some lisps, for example, SBCL with frequently writing a new core image file - easy to do and good for applications where you have a massive amount of in-memory persistent data you work with.
- wild_egg 1y ago
  The workflow for long running lisp images is really unclear to me. It's so trivial for the code in the image to get out of sync with what's on disk. Are there good tools that I'm overlooking for exploring the current image state? Smalltalk has that built-in but in CL I'm regularly loading my system into a fresh SBCL at least every couple days just because, at some point, some state is not what I expect it to be and I have no idea how to reconcile it.
  - mark_l_watson 1y ago
    The advantage to me was having persistent data in memory and stored in the image. I used a function ‘ll’ to reload all source code. I stopped using this technique when computers got faster so loading many data sources was not as consuming. Also, for my application I noticed that LispWork’s file IO ran much faster than SBCL so I used LW. Still, working with images in SBCL is a good technique. Command line utilities built as separate image files load very quickly, and then you get to write utilities in Lisp rather than bash or Python.
    - Smalltalker-80 1y ago
      You comment is more about LISP, but just to say that in SmallJS, you could write small command line utilities easily, that are started with the Node.js runtime quickly. And yes, the edit - recompile - run loop in SmallJS takes a second or two, so working from an image (with possible side effetcs) is not really necessary.
  - 1y ago
flavio81 1y ago
>SmallJS is file based, not image based, so you can develop in your favorite IDE This project is nice, however if we don't have a specific, client-side IDE for interactive development, 70% of the power of Smalltalk is gone (one of the criticisms I give to Ruby) How would one do to push changes to the web frontend (browser) without stopping the program ?
- jjk7 1y ago
  Google Chrome has a 'Workspace' feature that hotswaps code without reloading the page.
- Smalltalker-80 1y ago
  The Playground example in SmallJS actually does this a bit. You can compile arbitrary ST expressions within a running web page. Underneath HTML <script> nodes are created. But I didnt think it was worth it to create a fully live IDE. VSCode is very nice and compiling a change takes only a second or two, side effect free. :)
Smalltalker-80 1y ago
Hi all, I'm the creator of SmallJS, and was wondering why its GitGub star count had suddenly shot up :-). Feel free to ask me any any questions here. I'll try to respond to some. Here's a short presentation that has fallen off the News page: https://small-js.org/News/Why_SmallJS.pdf https://small-js.org/News/Why_SmallJS.pdf
- em-bee 1y ago
  i have been trying to find an example how to run a site without build tools. i understand the playground can interpret smalltalk code in the browser, so i think there might be a way. i would like the smalltalk code be loaded from files into the browser and interpreted/compiled there, without writing the resulting js back, but just running it in the browser.
  - Smalltalker-80 1y ago
    The ./Playground project in the repo does that (taking ST source from a HTML text area). But you could modify it to open a file. (Note that browsers cannot read arbitrary files without user interaction.) The Playground has a slightly modified version of the compiler built in to make this possible.
    - em-bee 1y ago
      i don't mean opening files from disk, but fetching them from the server. i build my site as usual, but instead of converting to js in a build step, i upload the st files to the server. the html in the browser then loads the compiler and fetches the st files from the server, passes them to the compiler and runs them
      - Smalltalker-80 1y ago
        I see. Then you would first have to have (make) a server that serves up *.st source files throug a REST api. Then you would modify the ./Playground project to fetch the files from your server in stead of from the TextArea. This is done in the PlaygroundApp.evaluate method.

152 points by mpweiher 1y ago

dontlaugh 1y ago

Looks cool. Why the Romanian flag?

amszmidt 1y ago
Its not the Romanian flag (order of color is different).
- Hasnep 1y ago
  On the original smalltalk balloon the red, yellow and blue are in the same order as the Romanian (and Chadian) flag, so maybe the question should have been why is it not the Romanian flag?
  - amszmidt 1y ago
    Dan Ingalls answer is much more interesting than anything I could explain ... From https://lists.squeakfoundation.org/pipermail/squeak-dev/1998-October/022354.html https://lists.squeakfoundation.org/pipermail/squeak-dev/1998... Ralph - Many times I have browsed past your article "About the Smalltalk Balloon" and been tempted to add to the little bit of history that you have there. While your link is entitled "Why a hot-air balloon is the symbol of Smalltalk," you never really answer the question. The time has come to tie up that loose end. Return with us now to those thrilling days of yesteryear, and The Real Story About the Smalltalk Balloon Everyone in our group wanted to challenge the ivory tower image in Byte's special issue on Pascal, because in fact we were all working intensely to get Smalltalk-80 out the door from Xerox at the time. The cover of that issue depicted the "land of Smalltalk" as a remote island, and that triggered a connection for me out of which was born the fanstasy of liberating Smalltalk from the ivory tower by balloon ascent. Here is the connection... My favorite book from youth was The Mysterious Island, by Jules Verne. It is the story of an engineer, Cyrus Harding, who gets blown far afield in a storm during a balloon surveillance mission in the 1860's. He ends up stranded on an island but, through ingenuity and a bit of luck, he manages to recreate most of the accomplishments and comforts of civilization on his own (with a little help from an amiable orangutan ;-). Cyrus Harding became my childhood standard for resourcefulness and the conviction that anything can be accomplished if you are clever and persistent. The fantasy of a balloon as the vehicle for Smalltalk's release stuck with me from then on. When the opportunity came to design the cover for the Byte issue on Smalltalk, I made the suggestion of the balloon lifting off from the island shown on the Pascal cover, and everyone picked up on it. Robert Tinney executed the wonderful graphic that we know so well, and the rest is history. - Dan P.S. There is a further coincidence in this particular literary allusion: It is revealed at the end of The Mysterious Island that the island is actually the base of operations for a more well-known Verne character, and that character happens also to be the childhood hero of a more well-known figure in the history of Smalltalk.
    - whimsicalism 1y ago
      unless i am missing something, this is not an answer to the question
      - Smalltalker-80 1y ago
        As creator of the language and the logo...: It is not meant to be the Romanian or any other flag. It was indeed modeled after the Smalltalk balloon on the BYTE Magazine linked, but simplified into 3 'basic' colors: red, yellow (iso green) and blue, each with a slightly darker shade to make it look better. PS I own a copy of that visionairy BYTE magazine :-).
    - imglorp 1y ago
      Byte cover for reference. https://tashian.com/articles/dynamicland/byte-magazine-august-1981.jpg https://tashian.com/articles/dynamicland/byte-magazine-augus...

revskill 1y ago

Js is the best.

habedi0 1y ago

This is pretty cool!

Smalltalker-80 1y ago
Tnx, any questions you can also ask on the git repo.

bradrn 1y ago

See also: https://www.amber-lang.net/ https://www.amber-lang.net/

anilakar 1y ago
I wanted to try Smalltalk earlier and discovered Pharo, but I found it to be just one huge antipattern as everything involved a single combined toolchain/IDE/runtime virtual machine image. Amber's documentation seems to have screenshots of the very same object inspector. If I want to build a wooden chair, I don't want to start by learning to use a steel metal punch to create a panel saw first...
- zelphirkalt 1y ago
  What exactly is the anti-pattern? Just that it is image based? There is Iceberg for exporting to git afaik. Haven't used it in depth though.
  - scotty79 1y ago
    I think long lived state is the problem. In Pharo your entire project along with its runtime, code, data and IDE is one long lived intertwined and dispersed state. I was never really sure if this is necessarily a problem or not. But today I had an interesting idea. Pharo is Factorio of programming. You are evolving living, functioning system using itself. And we know most of Factorio games end up as ad-hoc tangled mess, where new things are added rather on the side than old things being properly refactored. So if your Factorio factories are always pristine examples of order you should be fine with Pharo. If not, you might be better off with something like PHP or Fermyon Spin which have app state living no longer than a single request-response. With long lived state neatly and separately held in the database and source files.
    - cess11 1y ago
      That's kind of solved with Iceberg and Metacello, they make it easy to just grab a base image and pull in what your system needs, no need to step through the change file and figure out where to file in the stuff you filed out when you broke things. Though it's quite easy to make your application appear similar to a Factorio screen, since libraries like Roassal and Mondrian make it like a five to ten minute thing to create a custom visualisation of the involved packages. Static analysis tooling in other languages is usually not as malleable and easy to customise.

Unirely01 1y ago

[dead]

mark_l_watson 1y ago

Nice, a new update. I remember playing with both small-js and Amber a longtime ago. Very cool projects but I am not a JavaScript developer so I always had friction using both projects so I settled on Pharo. Off topic: if you like long running image based development you can also get that with some lisps, for example, SBCL with frequently writing a new core image file - easy to do and good for applications where you have a massive amount of in-memory persistent data you work with.

wild_egg 1y ago
The workflow for long running lisp images is really unclear to me. It's so trivial for the code in the image to get out of sync with what's on disk. Are there good tools that I'm overlooking for exploring the current image state? Smalltalk has that built-in but in CL I'm regularly loading my system into a fresh SBCL at least every couple days just because, at some point, some state is not what I expect it to be and I have no idea how to reconcile it.
- mark_l_watson 1y ago
  The advantage to me was having persistent data in memory and stored in the image. I used a function ‘ll’ to reload all source code. I stopped using this technique when computers got faster so loading many data sources was not as consuming. Also, for my application I noticed that LispWork’s file IO ran much faster than SBCL so I used LW. Still, working with images in SBCL is a good technique. Command line utilities built as separate image files load very quickly, and then you get to write utilities in Lisp rather than bash or Python.
  - Smalltalker-80 1y ago
    You comment is more about LISP, but just to say that in SmallJS, you could write small command line utilities easily, that are started with the Node.js runtime quickly. And yes, the edit - recompile - run loop in SmallJS takes a second or two, so working from an image (with possible side effetcs) is not really necessary.
- 1y ago

flavio81 1y ago

>SmallJS is file based, not image based, so you can develop in your favorite IDE This project is nice, however if we don't have a specific, client-side IDE for interactive development, 70% of the power of Smalltalk is gone (one of the criticisms I give to Ruby) How would one do to push changes to the web frontend (browser) without stopping the program ?

jjk7 1y ago
Google Chrome has a 'Workspace' feature that hotswaps code without reloading the page.
Smalltalker-80 1y ago
The Playground example in SmallJS actually does this a bit. You can compile arbitrary ST expressions within a running web page. Underneath HTML <script> nodes are created. But I didnt think it was worth it to create a fully live IDE. VSCode is very nice and compiling a change takes only a second or two, side effect free. :)

Smalltalker-80 1y ago

Hi all, I'm the creator of SmallJS, and was wondering why its GitGub star count had suddenly shot up :-). Feel free to ask me any any questions here. I'll try to respond to some. Here's a short presentation that has fallen off the News page: https://small-js.org/News/Why_SmallJS.pdf https://small-js.org/News/Why_SmallJS.pdf

em-bee 1y ago
i have been trying to find an example how to run a site without build tools. i understand the playground can interpret smalltalk code in the browser, so i think there might be a way. i would like the smalltalk code be loaded from files into the browser and interpreted/compiled there, without writing the resulting js back, but just running it in the browser.
- Smalltalker-80 1y ago
  The ./Playground project in the repo does that (taking ST source from a HTML text area). But you could modify it to open a file. (Note that browsers cannot read arbitrary files without user interaction.) The Playground has a slightly modified version of the compiler built in to make this possible.
  - em-bee 1y ago
    i don't mean opening files from disk, but fetching them from the server. i build my site as usual, but instead of converting to js in a build step, i upload the st files to the server. the html in the browser then loads the compiler and fetches the st files from the server, passes them to the compiler and runs them
    - Smalltalker-80 1y ago
      I see. Then you would first have to have (make) a server that serves up *.st source files throug a REST api. Then you would modify the ./Playground project to fetch the files from your server in stead of from the TextArea. This is done in the PlaygroundApp.evaluate method.