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/development/inprogress/">http://www.newlisp.org/downloads/develo ... nprogress/">http://www.newlisp.org/downloads/development/inprogress/



(1) https://github.com/kripken/emscripten/wiki/Tutorial">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/development/inprogress/newlisp-js.zip">http://www.newlisp.org/downloads/develo ... isp-js.zip">http://www.newlisp.org/downloads/development/inprogress/newlisp-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">https://github.com/kripken/emscripten/wiki/FAQ



Also the list of demo is quite impressive:



https://github.com/kripken/emscripten/wiki">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 Expand


<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">https://github.com/replit/jsrepl#standard-input-hacks

(reached from https://github.com/replit/repl.it#replit">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/">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;

[/list]
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://jsfiddle.net/ , http://ace.c9.io/#nav=about">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/">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/development/inprogress/newlisp-js.zip">http://www.newlisp.org/downloads/develo ... isp-js.zip">http://www.newlisp.org/downloads/development/inprogress/newlisp-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/development/inprogress/newlisp-js.zip">http://www.newlisp.org/downloads/develo ... isp-js.zip">http://www.newlisp.org/downloads/development/inprogress/newlisp-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 Expand


   <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/docs/Web/JavaScript/Reference/Global_Objects/eval">https://developer.mozilla.org/en-US/doc ... jects/eval">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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://jsfiddle.net/ , http://ace.c9.io/#nav=about">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/">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