newLISP in a browser

[Lutz]

newLISP can now be compiled to JavaScript using the Emscripten SDK (1) and it runs fastest in a Chrome browser but also runs in the Firefox browser (turns out Firefox is faster edited: 2014-1-4)

The default newlisp-js.html generated has different windows for input and output with the input popup-box only about 25 characters wide. So a better front end would have to be written in JavaScript and HTML to either simulate a console REPL or make the input box bigger and integrated into the page (2). The newlisp-js.js has a size of about 2.3 MB and is loaded by newlisp-js.html of 4K size.

For bandwidth reasons and because it’s not yet a finished product, I don’t want to install the file on the newlisp.org website. But if some JavaScript expert here on the board wants to take this up as a project, I can send the files to that person by email.

A 'makefile_emscripten_utf8' with more info in the header section can be found in the source distribution here:

http://www.newlisp.org/downloads/develo ... nprogress/

(1) https://github.com/kripken/emscripten/wiki/Tutorial
(2) I wonder if there is JS code from other applications, which could be used.

[bairui]

You're tireless, Lutz! Awesome.
newLISP deserves a lot more attention; perhaps this move to the browser will help?

One thought I just had for this is to convert the newLISP manual example code segments into embedded, runable, modifiable, interactive learning tools.

[Lutz]

newlisp-js.js, newlisp-js.html and newlisp-js.html.map are zipped together here:

http://www.newlisp.org/downloads/develo ... isp-js.zip

See README.txt inside

[HPW]

Hello Lutz,

Thanks for creating this interesting new option.

I wonder why the Emscripten-generator/auhor decided to make a popup-promt as the input-element.
Not easy to understand the HTML and js logik and interaction.
I wonder that there are reference to a imageplugin and webgl in the javascript code.
It would be nice if more browsers would be supported. (IE etc.)

Regards

[HPW]

Hello,

Interesting read about emscripten:

https://github.com/kripken/emscripten/wiki/FAQ

Also the list of demo is quite impressive:

https://github.com/kripken/emscripten/wiki

Seems other programming languages are also ported to emscripten.

Regards

[HPW]

Hello,

In a second step it would be nice to get a clean and easy javascript integration.
Something like this:

Code: Select all

<input type="button" name="eval" value="Evaluate" onclick="newLispEvalString(this.form.inputbox.value);

And callback's into javascript.


Regards

[hartrock]

I wonder why the Emscripten-generator/auhor decided to make a popup-promt as the input-element.

To have synchronous input behavior should be the reason; see:
https://github.com/replit/jsrepl#standard-input-hacks
(reached from https://github.com/replit/repl.it#replit).

[hartrock]

Just a few thoughts:

(2) I wonder if there is JS code from other applications, which could be used.

I can say something about experiences I've made with development of
http://www.evolgo.de/RYT/
some time ago.
For user interaction this heavily uses jQuery and jQueryUI as tools for reaching browser compatibility (and many other libs for e.g. SVG stuff). It runs in almost all browsers (Firefox, Safari, Chrome; but probably not IE (due to SVG stuff)).
From my experiences (some time ago) I can recommend using jQuery stuff for reaching browser compatibility (instead of trying to build such a thing yourself).

For a newLISP repl a light-weight editor is needed.
Question is, how to proceed: to implement such a thing by using browser side newLISP - enriched by some Javascript interface - or choosing some free Javascript one? As more will be used from the Javascript world, as more dependencies have to be managed...
Possibly first using a free one and then going a newLISP way?

Another question is how to proceed organizationally: browser side newLISP outside the newLISP core could well be a community project; e.g. for:

• Javascript/DOM bindings,
• accessing browser storage,
• UI widgets;

to name a few.
Why? Because this could be too much for a single person doing much other stuff ;-)

[Lutz]

Initially, the goal would be a simple learning, tutoring and development environment for newLISP. We should go by little steps and start with the minimum possible:

- Implement a simple HTML editable text field for input and another HTML text field for output. Both fields stacked on top of each other or side by side. The default newlisp-js.html is only 95 lines long and 80% of it isn’t even needed and could be thrown out, for this first phase.

- Make a facility to display manual or tutoring text for a specific topic or function

- Improve the editor using JavaScript from other projects which do editor syntax highlighting like http://jsfiddle.net/ , http://ace.c9.io/#nav=about (comes with embedding instructions!) and many others. JavaScript is the only language builtin to the browser and with Document Object Model integration. So using jQuery, Bootstrap, etc. would be a natural thing.


Ps: http://www.evolgo.de/RYT/ this is incredible, wow! There is tons of stuff here, which could be used in a more advanced complex browser-based newLISP IDE.

[Lutz]

a much faster, optimized version, now best on Firefox with almost native speed:

http://www.newlisp.org/downloads/develo ... isp-js.zip

load index.html ino the browser which is a streamlined newlisp-js.html - but still with popup window input.

[Lutz]

Now with two windows, one for input and one for output:

http://www.newlisp.org/downloads/develo ... isp-js.zip

unzipping newlisp-js.zip creates a newlisp-js directory with the necessary files. See the README.txt file in the package.

Ps: now also works on Safari on OSX and IOS

[HPW]

Great, getting better and better. Exactly like my wish.
(Maybe you sould exchange the Position of Input and Output)

>>In this sandboxed JavaScript environment, File and network I/O functions
will not work.

Does any function for web access work? Like javascrpt Ajax etc.?
(Maybe (load "url") can internally use XMLHttpRequest in js to load the string from thr url and then evalstring in newlisp)

It seems also to work on IE 11 (Tested on my Win 7 tablet)!!

Is it possible to Gzip the js-lib?
I tried it but I am struggling with the gzip-support-configuration on my test-Server.
When it would work the lib would get under 500kb.

Regards

[HPW]

I changes the layout to:

Code: Select all

    <p>Input&nbsp;&nbsp;
    <textarea class="emscripten" id="input" rows="15">(println "Hello World")</textarea></p>
    <input type="button" value="eval" 
           onclick="newlispEvalStr(document.getElementById('input').value.trim())">
    <p>Output
    <textarea class="emscripten" id="output" rows="15"></textarea></p>

So the flow is: input=>eval=>output

Test on WIN Xp IE 8 does not work. Keeps endless downloading.
WIN XP with current chrome does work.

Regards

[HPW]

Is it possible to add a newlisp function to call javascript 'eval?

(jsEvalString "A valid javascript call")

https://developer.mozilla.org/en-US/doc ... jects/eval

Then we could build the javascript-call dynamicly in newlisp and do a callback to whatever is needed.

PS: Just tested the demo-html successfully on my daughters Samsung Galaxy S3 Android Handy!!

Seems that 'newlisp everyware' comes true! So great!

I had a projekt to build another xlisp-interpreter in javascript. Seems that it is no more needed. ;-)

Regards

[hilti]

- Improve the editor using JavaScript from other projects which do editor syntax highlighting like http://jsfiddle.net/ , http://ace.c9.io/#nav=about (comes with embedding instructions!) and many others. JavaScript is the only language builtin to the browser and with Document Object Model integration. So using jQuery, Bootstrap, etc. would be a natural thing.

OK...this result was one hour of work :-) -> http://newlisp.neocortex.io/
If my kids would let me do some more hacking, this IDE could be very nice.

I just combined Bootstrap, some custom CSS and CodeMirror.

Cheers
Marc

[HPW]

Hello Marc,

Nice Editor, maybe you should link the indexed doc:

http://www.newlisp.org/downloads/manual_frame.html

You may also choose better Colors. It is difficult to see selected text and the Output area.

Edit: Also tested on the Android Handy of my kids. Works fine

Regards

[Lutz]

Marc's editor looks great! When all is done, I will try to deliver a compressed version of newlisp-js-lib.js which loads faster and decompresses client-side. It should be around 500K.

newlisp-js now has a eval-string-js function. Enter any JavaScript call or statement to evaluate in the parent browser:

Code: Select all

(eval-string-js "window.prompt('Enter some text:')")

(eval-string-js "6 * 7") => "42

The statement would pop up a dialog and return the string entered.

http://www.newlisp.org/downloads/develo ... nprogress/

So now with eval-string-js anything is possible in a browser for newLISP :)

[HPW]

Hello Lutz,

Thanks again for the improvements!

You may change the sample to avoid the 'undefined' in the promp-window:

Code: Select all

(eval-string-js "window.prompt('Enter some text:','')")

Is there a max length for the return of the js-call?
If so, it would be difficult to use it for loading Lisp-sources from the web-Server.
(As long it is not supported directly in newlisp-js)

Regards

[hilti]

(eval-string-js) is very cool!

Just played around with it:

Code: Select all

(setq number (eval-string-js "window.prompt('Enter a number to divide by 2:','')"))
(setq result (div (int number) 2))
(setq alert (append "alert(" (string result) ")"))
(eval-string-js alert)

Getting the browser window height or width is easy now.

Code: Select all

(eval-string-js "$(window).height();")
(eval-string-js "$(window).width();")

I do my best in making the Browser-IDE more advanced.

[Lutz]

What browser and version are you using? I don't get any "undefined" messages when using only one parameter for the window.prompt call. I am using:

Firefox 26.0
Chrome 31.0
Safari 7.01

Also, all the code from Emscripten uses windows.prompt() with only one string argument.

Regarding the the size of the returned string from eval-string-js:
It seems that JavaScript is allocating the memory for the returned string and then is also managing it for GC. newLISP makes a copy of it and manages that copy. I tested for memory leaks when invoking eval-string-js and it seems that memory is managed well by JavaScript and newLISP for this call. I haven't tested for the max memory allowed as return value but believe, there will be no problems loading code source.

Talking about memory in general:
At this moment newlis-js-lib.js is limited to about 16MB of heap memory, which is the default Emscripten allocates and probably a sensible (conservative) choice for browser based applications. This value can be changed in a configuration file and perhaps I will bump it up to 32MB or even more. There are many other limits which can be configured before compilation and as things move along, I will experiment. At the moment I go with the defaults until we know more.

Ps: thanks for the great examples Marc. Do you also get this “undefined” message HPW is talking about? And what browser version do you run?

Ps2: I am getting a "undefined" as return value from (eval-string-js "alert(6)"), but believe this is Ok, "undefined" is simply the return value from the JavaScript alert() function in this case, perhaps in JavaScript alert is "void alert()".

Ps3: Note, that using $(window).width(); also would need jQuery installed.

[HPW]

What browser and version are you using? I don't get any "undefined" messages when using only one parameter for the window.prompt call.

Ok, it is only on IE 11.
Chrome 31 is also Ok for me without the second parameter.
But when you use it it does not hurt and you can set a default-text into the promt-window.

Regards

[HPW]

Hello,

sys-info on newlisp-js shows 203 for me.
Does it mean UTF-8 and what else?

Regards

[hilti]

Ps: thanks for the great examples Marc. Do you also get this “undefined” message HPW is talking about? And what browser version do you run?

Yes, I do.

I'm running on OSX Mavericks

1. Safari 7.01
2. Chrome 31.0.1650.63


P.S. Reddit seems to be interested, because I get some load on my server ...
http://www.reddit.com/r/lisp

[Lutz]

The second argument is now included in the example together with some other cleanup in index.html and some more instructions in README.txt:

http://www.newlisp.org/downloads/develo ... 10.5.7.zip

I am very excited about Marc's editor, which looks better each time I load it. Fortunately once the same newlisp-js-lib.js is loaded it goes pretty quick as it is cached by the browser, but there seems to be some load on your site at times.

[Lutz]

Here is a quick way to compress newlisp-js-lib.js for faster deliever, but this is only usable for delivery on HTTP 1.1 compliant web servers like Apache. It will not work when loading locally from a file or with newLISP in server mode, which only implements HTTP 1.1 partially.

On Unix compress doing:

Code: Select all

gzip newlisp-js-lib.js # this produces a newlisp-js-lib.js.gz

Now edit index.html replacing instances of newlisp-js-lib.js with newlisp-js-lib.js.gz:

Code: Select all

// replace
<script async type="text/javascript" src="newlisp-js-lib.js"></script>
// with
<script async type="text/javascript" src="newlisp-js-lib.js.gz"></script>