+

{lambda {www} way} Alain Marty Engineer Architect Villeneuve de la Raho, France

[email protected]

ABSTRACT The {lambda way} project is a web application allowing a collaborative work between authors, web designers and coders for creating and sharing rich documents on the web. This open application, free of any external dependencies is simply built on two engines , {lambda tank}, a tiny wiki built as a thin overlay working on top of any modern web browser, and {lambda talk}, a small purely functional programming language unifying authoring, styling and scripting in a single and coherent syntax. In this document we will forget {lambda tank} and give a quick and progressive introduction to the language, {lambda talk}.

KEYWORDS • Information systems~Wikis • Theory of computation~Regular languages • Theory of computation~Lambda calculus • Software and its engineering~Functional languages • Software and its engineering~Extensible Markup Language

INTRODUCTION « There are hundred of wiki engines and hundred of languages! Why yet another wiki and another language nobody will ever want to use? » A wiki[1] is a web application which allows collaborative modification, extension, or deletion of its content and structure. Following the first wiki created in 1995 by Ward Cunningham[2] hundred of wikis have moved us fom simple consumers to creators of shared informations. The best known of wikis is Wikipedia, full of rich documented pages written by authors supposed to be neither web designers nor coders. Wikis come generally with rather rudimentary and heterogeneous syntaxes to enter, enrich and structure texts. At the lowest level documents are created using HTML/CSS syntax. But writing HTML/CSS code being rather complex and at least tiresome, intermediate syntaxes, for instance Markdown[3], have been created to make things a bit easier. Everything works well but the underlying code quickly becomes a rather obfuscated text, difficult to write, read, edit and maintain. In fact, the Markdown syntax is not intended for writing rich documents. Works have been done to build enhanced syntaxes, true languages, in order to unify writing, styling and coding, for instance CURL[4], LML[5], Scribble[6], SXML[7], LAML[8], Pollen[9] ... But these tools are definitively devoted to coders, not to web designers and even less to authors, making difficult - if not

impossible - a true collaborative work. Hence the {lambda way} project! Built on two engines, {lambda tank}, a tiny wiki easy to install as a thin overlay on top of any web browser, and {lambda talk}, a small functional language unifying writing, styling and scripting in a single and coherent prefixed notation, the {lambda way} project proposes a solution making easy the collaborative creation of rich documents by authors, web designers and coders. In the following paper we introduce {lambda talk} and give a few examples of what can be done with it. Texts will be written in a code editor window and results will be displayed in a view window, the wiki page.

1. WORDS This is how we say "Hello World" in {lambda talk}:

Hello World

Hello World

code

view

Yes, it's amazingly simple compared to other languages[20], In {lambda talk} words are written as in any standard text or spreadsheet editor and don't need to be escaped between quotes. When you have to apply some style, say bold style, to mouse selected words, you must forget mouse selection and any B key. There is no [B, I, U] keys in {lambdatalk}! In fact, these keys are nothing but commands applying some style to selected words. And you will apply a style "FOO" to a sequence of selected words like this: ... some words before    {FOO selected words}      some words after ... As an example, this is how the bold style can be applied to a sequence of selected words:

Hello {b brave new} World

Hello brave new World

code

view

As you can see, it's nothing but a shorthand notation for the standard HTML syntax "Hello < u >brave new< /u > World". {lambda talk} doesn't reinvent the wheel! As in HTML syntax, expressions can be nested, allowing commands to be composed:

{b Hello {sup World, {sub is {sup there {sub anybody {sup out {sub there {sup ???}}}}}}}}

code

Barcelona Pavilion | Mies van der Rohe The Maxwell's equations of Architecture

Hello World, is there anybody out there 

??????

view

You are in the holy world of nested prefixed expressions.

2. STYLES The set of HTML tags is not infinite. Thanks to CSS rules this set can be extended ad libitum. For instance you could want to apply the red color to words like this:

{div {@} Hello World }

Hello World

code

view

Or display a picture and its legend like this: code {div {@} {img {@ src=" data/brussels/mies_pav.jpg" width="100%"}} Barcelona Pavilion | Mies van der Rohe{br}The Maxwell's equations of Architecture }

Sounds familiar to any web designer, inside the @ command/container - @ is for "attribute" - you can simply copy/paste chunks of standard HTML/CSS code. But it's a bad practice to mix structure and style!, as smart web-designers know and we are going to see how {lambda talk} can help us to bring a clear separation between them.

3. NUMBERS Some words can be seen as numbers on which a full set of commands can operate making it a pocket calculator

{+ 1 2 3} {+ 1 {* 2 3} 4} {sqrt 2} {sqrt {+ {* 3 3} {* 4 4}}}

6  11  1.4142135623730951  5

code

view

For instance, the expression {sqrt {+ {* 3 3} {* 4 4}}} is successively replaced by {sqrt {+ 9 16}}, then by {sqrt 25} and finally by 5, which is the hypotenuse of a right angle triangle [3,4]. You are entering the marvelous world of mathematics.

4. CONSTANTS You can put all the "ugly" constant HTML/CSS stuff under a name and call it later. For instance you can define the name red and apply it later on different words:

{def RED span {@}}

view

{{RED}Hello World} {{RED}Goodbye World}

code

view

view

RED 

COLOR 

Hello World  Goodbye World

Hello World  Hello World  Hello World

Similarely you could give a name, ie BARCELONA, to the messy HTML/CSS stuff defining the previous picture and simply write {BARCELONA} to display it. You can give math expressions a name, provided they are evaluable:

{def Φ {/ {+ 1 {sqrt 5}} 2}} {def 1*2*...*100 {* {serie 1 100}}}

code

{def HYPO {lambda {a b} {sqrt {+ {* a a} {* b b}}}}}

code

{HYPO 3 4} {HYPO 1 1}

{Φ} {1*2*...*100}

Φ  1*2*...*100 

We have seen that the expression {sqrt {+ {* 3 3} {* 4 4}}} is evaluated to 5, the hypotenuse of a right angle triangle [3,4]. Using a function we can delay the evaluation of {sqrt {+ {* a a} {* b b}}} containing undefined arguments a and b until they get their values:

view

1.618033988749895  9.33262154439441e+157 We will see below how the Golden Ratio Φ is related to the Fibonacci's numbers. Thanks to constants a friendly web designer or coder can help you to hide HTML/CSS code under a name, externalize it in another wiki page behaving as a library, extending the concept of CSS stylesheet and opening a way towards more powerful capabilities.

view

HYPO  5  1.4142135623730951

The name hypo is nothing but an alias to {lambda {a b} {sqrt {+ {* a a} {* b b}}}} and it's rather easy to understand that {hypo 3 4} is first replaced by {{lambda {a b} {sqrt {+ {* a a} {* b b}}}} 3 4}, where a and b will be replaced by 3 and 4, leading to this evaluable expression {sqrt {+ {* 3 3} {* 4 4}}}, finally replaced by 5, as we have seen before. Mixing text and numbers is easy, provided you take some care:

5. FUNCTIONS We have seen how to define a name as a constant applying a given color to some words. Defining a name waiting for future unknown colors would open an infinity of choices. We can do that using a function, created with lambda and named with def. This is how we can replace the previous constant cyan by a function color: code {def COLOR {lambda {myColor} span {@}}}

{{COLOR red}Hello World} {{COLOR green}Hello World} {{COLOR blue}Hello World}

{def ADD {lambda {:a :b} {b :a+:b {sup is equal to} {u {+ :a :b}}}}}

code

{ADD 3 4} {ADD 5 6}

   ADD  i

view

lt

3+4 is equal to 7  5+6 is equal to 11 You must know that, when a function is called, every occurences of its arguments are replaced in it's body by the given values. In this function, prefixing by a colon the arguments, {:a :b}, prevents the unwanted replacement of equal by equ3l. It's a good thing to escape arguments everytime. For a total security, it would be better to escape arguments between two colons, :a: and :b:, with the added benefit of enlighting them as local variables, to be compared with global constants called like this {Φ} or {1*2*...*100}. It's a matter of choice. If you like mathematics, you can define more complex functions, for instance fibonacci numbers using a tail-recursive algorithm code {def FIBO {def FIBO.rec {lambda {:a :b :c} {if {< :c 1} then :a else {FIBO.rec :b {+ :a :b} {- :c 1}} }}} {lambda {:n} {FIBO.rec 0 1 :n} }}

The 75{sup th} Fibonacci's number is: {FIBO 75} The 30 first Fibonacci's numbers are: {map FIBO {serie 1 30}} ...

   FIBO 

view

The 75th Fibonacci's number is:  2111485077978050  The 30 first Fibonacci's numbers  are: 1 1 2 3 5 8 13 21 34 55 89  144 233 377 610 987 1597 2584  4181 6765 10946 17711 28657  46368 75025 121393 196418  317811 514229 832040 ...

With three special forms, [def, lambda, if] and a good set of Math operators {lambda talk} can help us to explore Math objects. In fact, {lambda talk} is not lost in an empty space and, as a dwarf on the shoulders of a giant it takes benefit from the powerful functionalities of modern web browsers.

6. THE WEB

Web browser give for free HTML/CSS, SVG, the DOM and Javascript. On these powerful tools the initial reduced set of two special forms [lambda, def] is extended to nine [lambda def if let macro script style  require quote|'] and the dictionary is populated with more than 200 built-in functions DICTionary: (228) [ debug, browser_cache, lib, eval, apply, , =, =, not, or, and, +, ­, *, /, %, abs, acos, asin, atan, ceil, cos, exp, floor, pow, log, random, round, sin, sqrt, tan, min, max, PI, E, date, serie, map, reduce, equal?, empty?, chars, charAt, substring, length, first, rest, last, nth, replace, cons, cons?, car, cdr, cons.disp, list.new, list, list.disp, list.null?, list.length, list.reverse, list.first, list.butfirst, list.last, list.butlast, array.new, array, array.disp, array.array?, array.null?, array.length, array.in?, array.get, array.item, array.first, array.last, array.rest, array.slice, array.concat, array.set!, array.addlast!, array.push!, array.sublast!, array.pop!, array.addfirst!, array.unshift!, array.subfirst!, array.shift!, array.reverse!, array.sort!, @, div, span, a, ul, ol, li, dl, dt, dd, table, tr, td, h1, h2, h3, h4, h5, h6, p, b, i, u, center, hr, blockquote, sup, sub, del, code, img, pre, textarea, canvas, audio, video, source, select, option, object, svg, line, rect, circle, ellipse, polygon, polyline, path, text, g, mpath, use, textPath, pattern, image, clipPath, defs, animate, set, animateMotion, animateTransform, br, input, iframe, mailto, back, hide, long_mult, turtle, drag, note, note_start, note_end, show, lightbox, minibox, editable, forum, lisp, BN.DEC, BN.new, BN.+, BN.­, BN.*, BN./, BN.%, BN.pow, BN.compare, BN.negate, BN.abs, BN.intPart, BN.valueOf, BN.round, BN.fac, numero, radicand, quotient, quotient_line, matrix, int_s, int_a, int_b, sig_s, sig_a, sig_b, QUOTIENT, SIGMA, PAREN, castel.interpol, castel.sub, castel.point, split_gd, castel.split, castel.build, svg.frame, svg.dot, svg.poly, RED, Φ, 1*2*...*100, COLOR, HYPO, ADD, FIBO.rec, FIBO, TREE, p0, p1, p2, p3, TITLE, ref, back_ref, space, COLUMNS, codeview ] 

making {lambda talk} a true usable programmable programming language, extensible on demand.

6.1. web documents Thanks to the set of HTML/CSS functions we can structure texts with titles, paragraphs, lists, tables, ... and apply complex styles in a single and coherent syntax. The current wiki page uses plenty of these functions and can generate an Academic paper in ACM format, directly from the browser.

6.2. SVG graphics {lambda talk} comes with a set of SVG primitives allowing to define and display graphics. You will have noticed that the ratio of the last two Fibonacci's numbers, {/ 832040 514229} = 1.6180339887482036 is very close to the Golden Ratio, Φ = {/ {+ 1 {sqrt 5}} 2} = 1.618033988749895. Let's build a Golden Rectangle using the turtle built-in primitive which feeds the SVG polyline's points attribute: code {def GR {def GR.square {lambda {:d} M:d T90 M:d T90 M:d T90 M:d T90}} {def GR.spiral {lambda {:d :n} {if {< :n 0} then else {GR.square :d} M:d T90 M:d {GR.spiral {* 2 {fibonacci :n}} {- :n 1}} }}} {lambda {:n} {GR.spiral 0 :n} }}

{svg {@ width="100%" height="800px"} {polyline {@ points=" {turtle 0 780 0 {GR 13}}" stroke="#fff" fill="#888"}} }

GR 

view

As another example we can sketch trees using the Lindenmeier, L-system[10] {def TREE    {lambda {:e :s :k :a :b}    {if { TREE  {svg {@ width="540px" height="540px"}   {polyline     {@ points="        {turtle 400 590 180         {TREE 5 200 {/ 2 3} 40 4}}"       fill="transparent"       stroke="red" stroke­width="1"}}   ...  }

 {tache 6 façades 135 165}   {tache 7 doublages/cloisons 150 180}   {tache 8 eau/elec/chauff 15 30}   {tache 8 eau/elec/chauff 180 210}   {tache 8 eau/elec/chauff 300 330}   {tache 9 revêtements_intérieurs 240 270}   {tache 10 peintures 270 300}   {tache 11 finitions_TCE/reprises 300 345}   {tache 12 réceptions_TCE 330 360}  }  to get

We can even draw bezier curves using lib_decasteljau[11] {def p0 {cons 150 80}}  ­> p0 = (150 80)  {def p1 {cons 200 150}} ­> p1 = (200 150)  {def p2 {cons 50 250}}  ­> p2 = (50 250)  {def p3 {cons 200 250}} ­> p3 = (200 250)  {svg {@ width="300px" height="300px"}   {svg.dot {p0}} {svg.dot {p1}}   {svg.dot {p2}} {svg.dot {p3}}      {polyline    {@ points="{castel.build      {list.new {p0} {p1} {p2} {p3}}       ­0.3 1.1 {pow 2 ­5}}"        stroke="red" stroke­width="3"       fill="transparent"}}    {polyline    {@ points="{castel.build       {list.new {p2} {p1} {p3}}       ­0.1 0.6 {pow 2 ­5}}"        stroke="green" stroke­width="3"       fill="transparent"}}   } 

6.3. using libraries Finally, here is a quick oversight of some applications/extensions using libraries stored in the wiki:

other

• with lib_BN we can play with big numbers {pow 2 500} ­> 3.273390607896142e+150  {BN.pow 2 500} ­>  327339060789614187001318969682759915221664 204604306478948329136809613379640467455488 327009232590415715088668412756007100921725 6545885393053328527589376 • with lib_MathLT we can use a set of functions to display maths without MathML[12]

(

∂ψ ih  (x,t) =  mc2α0 ­ ihc  ∂t

Σ αj ∂x∂ j ) ψ(x,t) 3

j=1

• with lib_spreadsheet we can embed a spreadsheet[13] understanding {lambda talk} expressions

Architects can easily create Gantt plannings[#]. You write {svg {PLANNING 600 260 #ffe 105}   {tache 1 travaux_TCE 0 210}   {tache 1 travaux_TCE 240 330}   {tache 2 gros­oeuvre/mac/vrd 0 90}   {tache 2 gros­oeuvre 300 330}   {tache 3 charpente 90 120}   {tache 4 couverture/étanchéité 120 135}   {tache 5 ouvertures/fermetures 105 135}   {tache 5 ouvertures/fermetures 300 315} 

• with lib_3D and lib_ray we can do more intensive computations like vectorial 3D geometries and ray-tracing

In {lambda talk} replacements of simple forms {first rest} are made through a window built on a single Javascript line working on a single regular expression[18]

All these examples can be tested in the {lambda way}'s workshop.

7. IMPLEMENTATION Imagine a machine understanding this question replace "fruit" and "unknown"        in "The color of fruits is unknwon."        by "apple" and "green" and returning The color of apples is green.

while (code != (code = code.replace(    /\{([^\s{}]*)(?:[\s]*)([^{}]*)\}/g,     apply     // the replacement   ))) ;      // do nothing following the syntax of a language created by Stephen Cole Kleene[19], another student of Alonzo Church. This is what Ward Cunningham wrote about this implementation: « I was surprised that the technique worked so well in so many cases. I knew that regex are highly optimized and the cpus themselves optimize sequential access to memory which the regex must have at its core. [..] Yes, this has at its heart the repeated application of a text transformation. The fact that it is repeated application of the same transformation makes it exceptional. [..] Repeated application of Regular Expressions can perform Touring Complete computations. This works because the needed "state" is in the partially evaluated text itself. » All is said!

{lambda talk} is such a replacement machine where this question is formulated using this slightly different syntax:

These regular expressions are also at the heart of lambdas which are nothing but small machines to replace words by other words. Lambdas use arguments as regular expressions to successively {{lambda {fruit unknown}             The color of fruits is unknown.}   replace occurences found in the function's body by the given values. For instance           apple green}

This is exactly the syntax we have been using in the previous sections. This syntax is freely inspired by the {λ calculus}[14] created in the 1930s by Alonzo Church and uses the LISP Sexpressions introduced by John McCarthy in the 1950s[15] and used by all its dialects[16]. From a theoretical point of view, a {lambda talk} expression can be reduced to three elements 1 word: any character(s) except spaces and  curly braces, {}  2 abstraction: {lambda {words} expression}  3 application: {expressions1 expression2} A word is not evaluated, an abstraction is a special form evaluated to a word bound to an anonymous function and an application is a simple form recursively evaluated to words from inside out. The way the heart of {lambda talk} is implementaed is very close to the process translated in the 1930s by a student of Alonzo Church, Alan Turing[17], into the shape of an hypothetic machine made of a window and an infinite stripe.

{{lambda {fruit unknown}            The color of fruits is unknown.}            apple green}  ­> {{lambda {unknown}             The color of apples is unknown.}            green}  ­> The color of apples is green. It's partial application made easy, nothing magic there! Everything could be done by hand, at least theoretically or, more seriously, can be coded and tested on any modern web browser, thanks to {lambda tank}. Nothing but words, a single special forms, lambda, and a dictionary initially empty! With such an implementation and this reduced set of rules we have built the foundations of a Turing complete programming language.

CONCLUSION The heart of {lambda way} is built on a 30kb PHP file and a 60kb JS file free of any external dependancies. And more, {lambda talk} can be used out of {lambda tank} and embedded in any other environment. The JS code is small and can be read, edited and improved by any coder, it's just plain Javascript. The {lambda way} project is a free software under the GNU GPL licence, and its 100kb archive is easy to download & install on any web host provider running PHP.

The best example of a collaborative web application could be the current wiki page built on a handfull of small {lambda talk} user functions and CSS rules. {lambda talk} keeps writing rich structured and dynamic web documents Small & Simple. First you, the author, insert your ideas, what you think, as it comes to you. Yes it's not exactly WYSIWYG, you can't select words with the mouse and click on some button [B] to boldify them. You have to write code in a text editor frame and see the result in a viewer frame. But it's in real time and you code at a minimal level, with a handful of simple textual commands closely related to HTML/CSS. Later you will be able to enrich the document by yourself or helped by a cute web designer or a smart coder. This collaborative creation is made possible because the author, the web designer and the coder share the same consistent code. The coder will define on demand new functions to make things easier, closer to your needs and web design requirements. And so your documents will always be sustainable, easy to edit, improve and publish, from everywhere, on every systems and every devices, free from any proprietary or/and obfuscated tools. This was the goal of the {lambda way} project and it's exactly how the current wiki page was created. Alain Marty -- 2018/03/02

REFERENCES [1] The Wiki way:  http://dl.acm.org/citation.cfm?id=375211  [2] Ward_Cunningham:  http://ward.asia.wiki.org/view/testing­ microtalk   [3] Markdown Syntax:  https://help.github.com/articles/basic­ writing­and­formatting­syntax/  [4] http://epsilonwiki.free.fr/lambdaway/? view=curl  [5] http://epsilonwiki.free.fr/lambdaway/? view=LML  [6] http://docs.racket­lang.org/scribble/  [7] http://epsilonwiki.free.fr/lambdaway/? view=SXML  

[8]  http://people.cs.aau.dk/~normark/laml/pape rs/web­programming­laml.pdf  [9] http://docs.racket­lang.org/pollen  [10] Lindenmeier L­system:  https://en.wikipedia.org/wiki/L­system  [11] de Casteljau:  https://en.wikipedia.org/wiki/De_Casteljau %27s_algorithm  [12] MathML google­subtracts­mathml­from­ chrome: https://www.cnet.com/news/google­ subtracts­mathml­from­chrome­and­anger­ multiplies/  [13] Simon_Peyton_Jones:  https://www.microsoft.com/en­ us/research/people/simonpj/#  [14] A Tutorial Introduction to the Lambda  Calculus (Raul Rojas): http://www.inf.fu­ berlin.de/lehre/WS03/alpi/lambda.pdf  [15] LISP:  http://www.cs.utexas.edu/~cannata/cs345/Cl ass%20Notes/06%20Lisp.pdf  [16] SCHEME: Arold Abelson and Gerald J.  Sussman. 1996. Structure and  Interpretation of Computer Programs (2nd  ed.). MIT Press, Cambridge, MA, USA.  [17] Turing machines implemented in  JavaScript   http://www.turing.org.uk/book/update/tmjav ar.html  [18] Regular Expressions:  http://blog.stevenlevithan.com/archives/re verse­recursive­pattern  [19] S. C. Kleene, “Representation of  events in nerve nets and finite automata”,  in: C. Shannon and J. McCarthy, (eds.)  Automata Studies, Princeton University  Press, NJ, 1956, 3–41.  [20] Rosetta:  https://www.rosettacode.org/wiki/Hello_wor ld/Text {λ way2} v.20170929