New type of web application using HTML, CSS and Smalltalk

I have published my first demo of a new type of webapplication based on a
tiny Smalltalk image running in the browser, acting as the JS-engine. Create
a dynamic application using Smalltalk only, with the direct manipulation
you're familiar with from Smalltalk. And ...(in the near future)... with the
same debugging capabilities. Still work in progress, but hopefully providing
an idea of what's in store.

Feel free to ask questions.

https://www.youtube.com/watch?v=qvY7R6te7go




--
Sent from: http://forum.world.st/Pharo-Smalltalk-Users-f1310670.html

Hi erik

Ok I did not hear that you were talking :)

Really great Erik. I just want to try ! ;-)

This is great to see such practical and cool uses of small images. It’s a long dream that seems happening. And of course, thanks to all people who made it possible, especially those who work on the bootstrap process and others in general (the list is too long).

Exciting time in the Smalltalk world. Feels like Renaissance to me ;-)

Cheers,
Cedrick

Hi Erik,


> I have published my first demo of a new type of webapplication based on a
> tiny Smalltalk image running in the browser, acting as the JS-engine. Create
> a dynamic application using Smalltalk only, with the direct manipulation
> you're familiar with from Smalltalk. And ...(in the near future)... with the
> same debugging capabilities. Still work in progress, but hopefully providing
> an idea of what's in store.


That demo looks very interesting! If I understand your architecture
correctly, you have a minimal image run in the browser, presumably using
a virtual machine written in JavaScript. The in-browser Smalltalk talks
to a server written in Pharo, which is the development environment for
Web applications. That all looks good.


What isn't clear to me is the autonomy of the in-browser system. Do you
need the Pharo server only for development, or also for deployment of
the final Web application?


Konrad.

Hi Konrad,

Correct, the minimal image is running on SqueakJS VM. You can find info
here: https://squeak.js.org

Interesting question regarding deployment. In my current setup you do need
the server, but it is not unrealistic to have a setup in which at some point
the client is asked to create a snapshot. The SqueakJS VM does allow this.
This snapshot could be stored somewhere as a final application. It could
even be possible to stop the communicator and remove it (as well as a few
other classes) from the image before taking the snapshot and kind of sealing
the application like that.

So it could be a way of creating standalone web applications. If that was
the thought behind the question.

I did use this mechanism of creating snapshots in an attempt to strip down a
regular Pharo image and create the small image to run inside the browser.
Until I decided that route was longer than doing the bootstrap route of
creating an image from scratch ;-).

Regards,
Erik




--
Sent from: http://forum.world.st/Pharo-Smalltalk-Users-f1310670.html

Hi Erik,

> So it could be a way of creating standalone web applications. If that was
> the thought behind the question.

Exactly. Even better, a standalone application that could be hosted on
a plain static server, since all the code would run client-side.

> I did use this mechanism of creating snapshots in an attempt to strip down a
> regular Pharo image and create the small image to run inside the browser.
> Until I decided that route was longer than doing the bootstrap route of
> creating an image from scratch ;-).

That's also something I have been wanting to look at... why are days so
short?  ;-)

Konrad

Hi Konrad--

> ...Even better, a standalone application that could be hosted on
> a plain static server, since all the code would run client-side.

     E.g., https://caffeine.js.org/3d


-C

--
Craig Latta
Black Page Digital
Amsterdam :: San Francisco
[hidden email]
+31   6 2757 7177
+ 1 415  287 3547

Hi Craig,

>> ...Even better, a standalone application that could be hosted on
>> a plain static server, since all the code would run client-side.
>
>      E.g., https://caffeine.js.org/3d

Yes, caffeine is impressive, but also something very different from a
standard single-page Web app showing standard HTML elements and no IDE
in sight, in exchange for a small footprint.

Konrad.

Hi Craig,

I wonder if you had or could make something like this:

https://jgthms.com/web-design-in-4-minutes/

that shows the value of caffeine in a way being placed into the default dev
environment + readme doesn't.  Specifically the way the person exposes both
how to do CSS and the value/consequences of making some choices with it.  

It seems like your work would be really useful to me as a person that writes
web apps in Smalltalk but I have no idea what "extra" I can do with it.  I
see  I  can tie in a lot of JS functionality while using a Smalltalk IDE in
the browser.  I'm not sure what to do with that beyond what I already know
how to do with emacs and pharo or gemstone.  

Like a carpenter walking into a shop with end mills and lathes and welders
and piles of raw steel in all shapes and sizes. Probably someone can do
something cool with all that stuff but I'm afraid I'd just learn to make the
same tables and bookshelves and bed frames I already know how to make with
wood and miss the steel's inherent potential.  

I've watched the youtube presentation and navigated through the impress
presentation  on your site and it too quickly introduces tons of concepts of
what you can do but nothing about why anyone should want to do those things
or how to put them together into something a user would use once a developer
has made something.  


I also think the dynamic nature of what you're making is cool but it seems
like it adds another level of difficulty in making things comprehensible
to/usable for/accessible by end users.


Its clear something is there I just have no idea how to unlock the value for
myself or current users and/or theoretical future users.  


Hope this helps in some way

Paul


Craig Latta wrote
> craig@

> +31   6 2757 7177
> + 1 415  287 3547





--
Sent from: http://forum.world.st/Pharo-Smalltalk-Users-f1310670.html

> I've watched the youtube presentation and navigated through the impress
> presentation  on your site and it too quickly introduces tons of concepts
> of
> what you can do but nothing about why anyone should want to do those
> things
> or how to put them together into something a user would use once a
> developer
> has made something.  

Oh, you are already feeling the Smalltalk community spirit.

That is a professor effect when everyone will be every day extoll and pitch
how Smalltalk is cool, but nobody does not do any text or video blogging
with etudes and reasoning how to use this magic for newbies, and why ever
you need to use it at all in place of mainstream tools and languages already
have and were documented anything you can imagine (except the Smalltalk
interactivity and its memory persistence). The most fun you'll get with
trying to make work of external libraries, that's the special feel of
dropping dozens of errors due to incompatibility with your system.



--
Sent from: http://forum.world.st/Pharo-Smalltalk-Users-f1310670.html

Ahh.  Apologies.   I don't think I understand your point. Are you saying
Smalltalkers habitually make obscure/cool things with no documentation and
leave their coolness to make their case for adoption rather then helping
people adopt them with documentation &  other help?  Or something else?


I wasn't trying to be insulting of what he's done just to point out that the
change of understanding between my conception of "the web" as it is today
and his example of an alternate approach/worldview was steeeeep. Its clearly
a lot and impressive.

In the 3:36 video he shows how caffeine.js is usable, enables the use in the
browser of

live-coding
loading js frameworks
manipulating js frameworks
aframe.io
WebXR
AR
VR
2D projections of a 3D space
normal Morphic on SqueakJS
MorphicJS with normal Squeak
HTML replication of the 4 pane code browser
remote interaction between instances of caffeine (e.g. on other machines)
GUI & backend
javascript <-> Smalltalk two way AST parsing
running in Node.js vs the browser
Web Workers
injecting code into node.js instances
6DOF headsets
Non AR, non 6DOF headsets
Speech control of caffeine
WebMIDI to play a middle C
Caffeine control of every tab in your browser (btw can I control your bank
account's tab from my caffeine.js app you're running?)

and implies that doing so is valuable.  Each of those are complex domains to
understand let alone the value of tying them all together.  

After watching it and reading about it (and things like Shaker) and trying
it I just have no idea how to apply it to problems I'm aware of and if there
was a "training wheels" demo then maybe I'd come to a better understanding.
Or I'd learn about problems I'm not even thinking about because I have no
tools for them.  


To me it gives the impression of "you too can work on cars:
https://youtu.be/aHSUp7msCIE?t=21 see?" without the "these are wrenches,
this is a nut and a bolt, when you use them together you can do this, which
enables you to ...." part

I know making and teaching are different skills both with their own
difficulties.  

My main point was he could use his tool to lead a person along a path that
shows how to adopt his tool rather than leave a person in the dev
environment with an open readme. And have that be the first impression and a
nice exposition of its flexibility and power.




ponyatov wrote




--
Sent from: http://forum.world.st/Pharo-Smalltalk-Users-f1310670.html

> [Caffeine is] something very different from a standard single-page Web
> app showing standard HTML elements and no IDE in sight, in exchange
> for a small footprint.

     It depends what you do with it. Caffeine can interact with the web
browser and other JavaScript frameworks just as any JS framework can. I
have other demos showing mainstream SPAs and UIs, using WebComponents,
VueJS, plain old DOM elements, etc.


-C

--
Craig Latta
Black Page Digital
Amsterdam :: San Francisco
[hidden email]
+31   6 2757 7177
+ 1 415  287 3547

Hi Paul--

> I wonder if you had or could make something like this:
>
> https://jgthms.com/web-design-in-4-minutes/
>
> that shows the value of caffeine in a way being placed into the
> default dev environment + readme doesn't.

     Yes indeed, I expect to produce such material.

> It seems like your work would be really useful to me as a person that
> writes web apps in Smalltalk but I have no idea what "extra" I can do
> with it.

     The extra thing is writing web apps in a livecoding style, from
within a web browser. I wanted this for my own web app development, as
an alternative to the mainstream edit-build-run cycle.

> I've watched the youtube presentation and navigated through the
> impress presentation on your site and it too quickly introduces tons
> of concepts of what you can do but nothing about why anyone should
> want to do those things or how to put them together into something a
> user would use once a developer has made something.

     Right, that presentation is just a bunch of demos of works in
progress, showing some things that are possible. They're meant to
inspire the viewer to imagine what she might do with those abilities,
rather than convince the viewer to adopt anything yet.

> I also think the dynamic nature of what you're making is cool but it
> seems like it adds another level of difficulty in making things
> comprehensible to/usable for/accessible by end users.

     Ultimately, I think making most of the external tools and build
steps unnecessary, and enabling direct manipulation, will make things
more comprehensible.

> Its clear something is there I just have no idea how to unlock the
> value for myself or current users and/or theoretical future users.

     I think it's just the classic value proposition of having a runtime
environment in which further development and debugging can occur. For
me, the greatest value is being to fix a problem at a point that took a
long time to reach, then just continuing the usage session (retaining
all that built-up state) rather than starting over. In highly
interactive environments like VR, this is critical.


-C

--
Craig Latta
Black Page Digital
Amsterdam :: San Francisco
[hidden email]
+31   6 2757 7177
+ 1 415  287 3547

Hi,

It took a bit longer than planned, but my code can be found online.
https://github.com/ErikOnBike/CodeParadise

Interested to hear your experience. Please add issues on Github if you
encounter problems.

Cheers,
Erik




--
Sent from: http://forum.world.st/Pharo-Smalltalk-Users-f1310670.html