workshop

user:anonymous

{require lib_mathLT lib_decasteljau lib_BN}

{TITLE}
{MENU}
{SPLASHSCREEN}
{{hide}{def SLIDES_DISPLAY none}}

{hr}
{center {{note.call abstract} START}}

{{note.content abstract}
_h2 abstract

{center {i « Où l'on montre comment une vieille théorie absconse datant des années 30 peut aider à construire un langage moderne et cohérent pour le web ! »}}

_p The '{lambda way} project is a {b web application} allowing a {b collaborative work} between authors, web designers and coders for creating and sharing {b rich & dynamic documents} on the web.

_p '{lambda way} is opensource, free of any external dependencies and simply built on two engines:
_ul '{lambda tank}, a tiny wiki - 30kb - working as a thin overlay on top of any modern web browser, and 
_ul '{lambda talk}, a small - 60kb - purely functional programming language unifying authoring, styling and scripting in a single and coherent syntax.

_p In this document we give a quick and progressive introduction to the language, '{lambda talk}.

{center {{note.call keywords} keywords}}
}

{{note.content keywords}
_h3 keywords
_ul Information systems~Wikis
_ul Software and its engineering~Extensible Markup Language
_ul Software and its engineering~Functional languages
_ul Theory of computation~Lambda calculus
_ul Theory of computation~Regular languages

{center {{note.call introduction} introduction}}
}

{{note.content introduction}
_h2 introduction
_p « {i There are hundred of wiki engines and hundred of languages! Why yet another wiki and another language nobody will ever want to use? } »

_h5 a wiki is a text editor on the web
_p A {b wiki}{ref 1} is {i a web application which allows collaborative modification, extension, or deletion of its content and structure}. Following the first wiki created in 1995 by {b Ward Cunningham}{ref 2} hundred of wikis have moved us from simple consumers to creators of shared informations. The best known of wikis is {b Wikipedia}, full of rich documented pages written by authors supposed to be neither web designers nor coders.

_h5 the Markdown syntax is not a language
_p 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 syntaxes. But writing HTML/CSS code being rather complex and at least tiresome, intermediate syntaxes, for instance {b Markdown syntax}{ref 3}, have been created to make things a little bit easier. Everything works well but the code quickly becomes rather obfuscated, difficult to write, read, edit and maintain. In fact, the {b Markdown syntax} is not intended for writing rich documents.

_h5 the quest of a language
_p Works have been done to build enhanced syntaxes, true languages, in order to unify authoring, styling and coding, for instance CURL{ref 4}, LML{ref 5}, Scribble{ref 6}, SXML{ref 7}, LAML{ref 8}, Pollen{ref 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!

_h5 the '{lambda way} project
_p Built on two engines, '{lambda tank}, a tiny {b wiki} easy to install as a thin overlay on top of any web browser, and '{lambda talk}, a small {b functional language} unifying authoring, styling and scripting in a single and coherent prefixed notation, the '{lambda way} project proposes an answer making easy the {b collaborative creation} of rich documents by authors, web designers and coders.
_p '{lambda tank} gives everyone the same small and local IDE to write code in an editor window, control the result in real time in a view window, the wiki page, save it in the distant server and make it immediately visible on the web:

{img {@ src="data/wiki_session.png" width="100%"}}

{center It's {b Simple & Small}}

_p In the following we forget '{lambda tank} and introduce '{lambda talk}, giving a few examples of {b what can be done with so little} and an idea of how it is implemented on top of any web browser.

{center {{note.call words} words}}
}

{{note.content words}
_h2 1. words
_p This is how we write sequences of words in '{lambda talk}

{{codeview 1}
Hello brave new World
1+2+3
{{codeview 2}
Hello brave new World
1+2+3
}}

_p In '{lambda talk} sequences of {b words} are written as in any standard {b text or spreadsheet editor} and not via any {b print("Hello World")} or {b (print "Hello World")} expression as it is the case in most of programming languages{ref 20}. In a standard programming language writing {b 1+2+3} displays {b 6}. In a standard spreadsheet writing {b 1+2+3} displays {b 1+2+3}, it's nothing but five characters, and we must write {b =1+2+3} to get {b 6}, we must {b prefix} the expression with the {b =} special character to get its evaluation. '{lambda talk} proposes a single and systematic {b form} to apply any command to words

{pre 
... words before {b '{FOO selected words}}  words after ...}

_p As an example of such a {b form} this is how the {b bold style} can be applied to a sequence of selected words:

{{codeview 1}
Hello '{b brave new} World
{{codeview 2}
Hello {b brave new} World
}}

_p As you can see, '{lambda talk} doesn't reinvent the wheel, it's nothing but a {b shorthand} notation for the standard HTML syntax

{pre {b Hello <b> brave new </b> World}}

_p   As in HTML syntax, forms can be nested, allowing commands to be composed:

{{codeview 1}
'{b Hello
 {sup World,
  {sub is
   {sup there
    {sub anybody
     {sup out
      {sub there
       {sup ???}}}}}}}}
{{codeview 2}
{b Hello {sup World, {sub is {sup there {sub anybody {sup out {sub there {sup ??????}}}}}}}}
}}
_p You are in the holy world of nested prefixed expressions.

{center {{note.call numbers} numbers}}
}

{{note.content numbers}
_h2 2. numbers

_p A full set of commands can operate on words seen as valid numbers making '{lambda talk} a true {i pocket calculator}

{{codeview 1}
'{b 1 2 3}  // just words
'{+ 1 2 3}  // now numbers
'{+ Hello World} // Not a Number
'{+ 1 {* 2 3} 4}  
'{sqrt 2}
'{sqrt {+ {* 3 3} {* 4 4}}}
{{codeview 2}
{b 1 2 3}
{+ 1 2 3}
{+ Hello World}
{+ 1 {* 2 3} 4}
{sqrt 2}
{sqrt {+ {* 3 3} {* 4 4}}}
}}

_p The last expression {code '{sqrt {+ {* 3 3} {* 4 4}}}} is successively replaced by {code '{sqrt {+ 9 16}}}, then by {code '{sqrt 25}} and finally by {b 5}, which is the hypotenuse of a right angle triangle {code [3,4]}.

_p You are entering the marvelous world of mathematics.

{center {{note.call styles} styles}}
}

{{note.content styles}
_h3 3. styles
_p The set of HTML tags is not infinite. Thanks to CSS rules this set can be extended {i ad libitum}. For instance you can apply the {b red} color to words like this:

{{codeview 1}
'{span {@ style="color:#f00"}
 1+2+3 {i is equal to} {u {+ 1 2 3}}
}
{{codeview 2}
{span {@ style="color:#f00"}
 1+2+3 {i is equal to} {u {+ 1 2 3}}}
}}

_p Or display a picture and its legend like this:

{{codeview 1}
'{div
 {@ style="
    text-align:center;
    padding:5px;
    font:italic 0.6em courier;"}
 {img 
  {@ src="data/brussels/nef.jpg" 
     width="100%"}}   
Sagrada Familia | Barcelona | Antonio Gaudi
}  
{{codeview 2}
{div {@ style="text-align:center; padding:5px; font:italic 0.6em courier;"}
 {img 
  {@ src="data/brussels/nef.jpg" 
    width="100%"}}   
Sagrada Familia | Barcelona | Antonio Gaudi
}
}}

_p Sounds familiar to any web designer, inside the {b @} command/container - @ is for "{b at}tribute" - you can simply copy/paste chunks of standard HTML/CSS code. Hiding behind {b names} bulky chunks of HTML/CSS can help to keep code readable.

{center {{note.call constants} constants}}
}

{{note.content constants}
_h2 4. constants
_p Using a first special form, {b '{def name words}}, we can give a name to selected parts of code. For instance:

{{codeview 1}
'{def RED span {@ style="color:#f00"}}

'{{RED}Hello World}
'{{RED}Goodbye World}
{{codeview 2}
{def RED span {@ style="color:#f00"}}

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

_p Similarely you could give a name, ie {b SAGRADA_FAMILIA}, to the messy HTML/CSS stuff defining the previous picture and simply write {b '{SAGRADA_FAMILIA}} to display it.

_p You can give evaluable math expressions a name

{{codeview 1}
'{def Φ {/ {+ 1 {sqrt 5}} 2}}   // Φ = (1+√5)/2
'{def 1*2*...*100 {* {serie 1 100}}}

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

{Φ}
{1*2*...*100}  
}}
 
_p To sum up, using the '{def name words} special form a friendly web designer or coder can help you to hide some parts of code under a name, externalize it in another wiki page behaving as a {b library} and opening a way towards {b modularization}.

{center {{note.call functions} functions}}
}

{{note.content functions}
_h2 5. functions
_p We have seen how to define a name applying a {b constant} color to some words. Defining a name waiting for future {b variable} colors would open an infinity of choices.

_p We can create {b functions} using a second special form, {b '{lambda {args} body}}. This is how we will replace the previous constant {b RED} by a function {b COLOR}:

{{codeview 1}
'{def COLOR                          // name
 {lambda {myColor}                  // arguments
  span {@ style="color:myColor;"}}} // body

'{{COLOR #f00}Hello World}
'{{COLOR #0f0}Hello World}
'{{COLOR #00f}Hello World}
{{codeview 2}
{def COLOR
 {lambda {myColor} span {@ style="color: myColor;"}}}

{{COLOR #f00}Hello World}
{{COLOR #0f0}Hello World}
{{COLOR #00f}Hello World}
}}

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

{{codeview 1}
'{def HYPO
 {lambda {a b}
  {sqrt {+ {* a a} {* b b}}}}}

'{HYPO 3 4}
'{HYPO 1 1}
{{codeview 2}
{def HYPO
 {lambda {a b}
  {sqrt {+ {* a a} {* b b}}}}}

{HYPO 3 4}
{HYPO 1 1}  // in other words √2
}}

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

_h4 Caution

_p Mixing text and numbers is easy, {i provided you take some care}. Writing

{{codeview 1}
'{def bad_ADD 
 {lambda {a b}
  {b a+b 
   {sup is equal to} 
    {u {+ a b}}}}}

'{bad_ADD 3 4} 
'{bad_ADD 5 6}

{{codeview 2} 
{def bad_ADD {lambda {a b}
 {b a+b {sup is equal to} {u {+ a b}}}}}

{bad_ADD 3 4}
{bad_ADD 5 6}
}}
 
_p leads to something wrong, isnt'it? You should write

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

'{ADD 3 4} 
'{ADD 5 6}

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

{ADD 3 4}
{ADD 5 6}
}}

_p 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 the last code, prefixing by a colon the arguments, {b '{:a :b}}, prevents the {i unwanted} replacement of {b equ{u a}l} by {b equ{u 3}l}.

_p It's a good habit to {b protect} arguments everytime. For a total security, it would be better to protect arguments between two colons, {b :a:} and {b :b:}, with the added benefit of enlighting them as functions' arguments, {b local} variables, to be compared with {b global} constants called like this {b '{Φ}} or {b '{1*2*...*100}}.

_p It's a matter of choice.

{center {{note.call recursion}recursion}}
}

{{note.content recursion}

{img {@ src="data/brussels/operators.jpg" width="100%"}}
_h2 6. recursion

{center {i To Iterate is Human, to Recurse, Divine | attributed to L. Peter Deutsch}}

_p To compute the product of the n{sup th} natural numbers, ie {b n! = 1*2*3*...(n-1)*n} we could write in a language like Javascript, a {b factorial} function built on an {b iterative} process

{pre
var fac = function(n) '{
  var r = 1;
  for (var i=2; i < n; i++)
    s = r*i;
  return r
}
}

_p or in a more simple and elegant {b recursive} process

{pre
var fac = function(n) '{
  if (n < 1) 
    return 1;
  else 
    return n*fac(n-1);
}
}

_p '{lambda talk} is a pure functional language and we write

{{codeview 1} 
'{def fac 
 {lambda {:n}
  {if {< :n 1}
   then 1
   else {* :n {fac {- :n 1}}}}}}
'{fac 6}
'{fac 21}
{{codeview 2} 
{def fac 
 {lambda {:n}
  {if {< :n 1}
   then 1
   else {* :n {fac {- :n 1}}}}}}
{fac 6}
{fac 21}
}}

_h4 fibonacci's numbers
_p The {b fibonacci} numbers are recursively defined as {b fibo(n) = fibo(n-1) + fibo(n-2} with {b fibo(0) = fibo(1) = 1}. So we would write

{pre
'{def slow_FIBO
 {lambda {:n}
  {if {< :n 2}
   then 1
   else {+ {slow_FIBO {- :n 1}} {slow_FIBO {- :n 2}}}}}}
}

_p Unfortunately, this simple and elegant definition built on a double recursive call locks computers for relative small values of {b n}, say {b n > 20} and must be replaced by a less elegant but much more efficient tail-recursive algorithm

{{codeview 1} 
'{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}} ...

{{codeview 2} 
{def FIBO
 {def FIBO.rec 
  {lambda {:a :b :i}
   {if {<  :i 1} 
    then :a 
    else {FIBO.rec :b {+ :a :b} {- :i 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}} ...
}}

_p Recursion can be fast but beware of the {b stack overflow} !

_p To sum up, with three {b 3} special forms, [{b def, lambda, if}] and a good set of Math operators '{lambda talk} can help us to explore Math objects.

_p In fact, '{lambda talk} is not lost in an empty space and, as a {b dwarf on the shoulders of a giant} it can take benefit from the powerful functionalities of modern web browsers.

{center {{note.call the_web} the web}}
}

{{note.content the_web}
_h2 7. the web

{center {@ style="background:#888"}
{img {@ src="data/brussels/bibliotheque_virtuelle.jpg" width="100%"}}
{img {@ src="data/brussels/browsers_icons.jpg" height="90"}}
{img {@ src="data/brussels/braces.png" height="90"
        style="background:#888"}}
}

_p Web browser give for free HTML/CSS, SVG, the DOM and Javascript. On these powerful tools the initial reduced set of three special forms is extended to nine {b [def lambda if let macro script style require quote|']}. The dictionary is populated with more than 150 {note_start primitives built-in functions}, making '{lambda talk} a true usable programmable programming language, extensible on demand.

{note_end {@ class="note" id="primitives"}

{pre 
{b MATHS}: 
<, >, <=, >=, =, 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, 
{b STRINGS}:
equal?, empty?, chars, charAt, substring, length, first, rest, last, nth, replace, 
{b PAIRS, LISTS}:
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, 
{b ARRAYS}:
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!, 
{b HTML/CSS}:
@, div, span, a, ul, ol, li, dl, dt, dd, table, br, 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, 
{b SVG}:
svg, line, rect, circle, ellipse, polygon, polyline, path, text, g, mpath, use, textPath, pattern, image, clipPath, defs, animate, set, animateMotion, animateTransform, 
{b OTHERS}:
debug, lib, eval, apply, input, iframe, mailto, back, hide, turtle, drag, note, note_start, note_end, show, lightbox, minibox, editable, forum, ...}
}
 
_p Let's consider a few applications.

{{note.call SVG_graphics} _h4 7.1. SVG graphics}
{{note.content SVG_graphics}

_p '{lambda talk} comes with a set of {b SVG} primitives allowing to define and display graphics.

_h5 7.1.1. the golden rectangle

_p The ratio of successive Fibonacci's numbers tends towards the Golden Ratio, {b Φ = {/ {+ 1 {sqrt 5}} 2}}, ie {b '{/ 832040 514229} = {/ 832040 514229}}. Let's build a {b Golden Rectangle} with a user-defined function using the {b turtle} built-in primitive which feeds the SVG polyline's {b points} attribute:

{{codeview 1}
'{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"}}
}
{{codeview 2}
GR
{img {@ src="data/fibonacci.png" width="100%"}}
}}

_h5 7.1.2. L-systems

_p We can sketch {b trees} using the Lindenmeier, L-system{ref 10}

{pre
'{def TREE 
 {lambda {:e :s :k :a :b}
  {if {< :s :e}
   then T-30 M:s T120 M:s T120 M:s T150
   else M:s T:a
        {TREE :e {* :k :s} :k :a :b}
        T-{+ :a :b}
        {TREE :e {* :k :s} :k :a :b}
        T:b M-:s    
}}}
-> {def TREE 
 {lambda {:e :s :k :a :b}
  {if {< :s :e}
   then {flower :s}
   else M:s T:a
        {TREE :e {* :k :s} :k :a :b}
        T-{+ :a :b}
        {TREE :e {* :k :s} :k :a :b}
        T:b M-:s }}}

'{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"}}
 ...
}
}

{img {@ src="data/brussels/turtle_20161105.jpg" width="100%"}}

_h5 7.1.3. the Hilbert's curve

_p The [[Hilbert curve|https://en.m.wikipedia.org/wiki/Hilbert_curve]] is a continuous fractal space filling curve. We build the drawing algorithm on two recursive functions calling each other

{pre
{b 1) defining two recursive functions calling each other:}
'{def left {lambda {:d :n}
 {if {< :n 1}
   then  // stop
   else T90      {right :d {- :n 1}}
        M:d T-90 {left  :d {- :n 1}}
        M:d      {left  :d {- :n 1}}
        T-90 M:d {right :d {- :n 1}}
        T90
}}}
-> {def left
 {lambda {:d :n}
  {if {< :n 1} then
   else T90      {right :d {- :n 1}}
        M:d T-90 {left  :d {- :n 1}}
        M:d      {left  :d {- :n 1}}
        T-90 M:d {right :d {- :n 1}}
        T90
}}}

'{def right {lambda {:d :n}
 {if {< :n 1}
   then  // stop
   else T-90    {left  :d {- :n 1}}
        M:d T90 {right :d {- :n 1}}
        M:d     {right :d {- :n 1}}
        T90 M:d {left  :d {- :n 1}}
        T-90
}}}
-> {def right
 {lambda {:d :n}
  {if {< :n 1} then
   else T-90    {left  :d {- :n 1}}
        M:d T90 {right :d {- :n 1}}
        M:d     {right :d {- :n 1}}
        T90 M:d {left  :d {- :n 1}}
        T-90
}}}

{b 2) defining the five first curves:}
'{turtle 10 10    0 {left 10 1}}  -> black curve
'{turtle 40 10  -90 {left 10 2}}  -> red curve
'{turtle 10 10    0 {left 10 3}}  -> green curve
'{turtle 160 10 -90 {left 10 4}}  -> blue curve
'{turtle 10 10    0 {left 10 5}}  -> grey curve

{b 3) drawing:}
'{svg 
 {@ width="330px" height="330px" 
    style="box-shadow:0 0 8px #888;"}
 {def path_style {lambda {:col :d}
      fill="transparent" stroke=":col" stroke-width=":d"}}

{path {@ d="M {turtle 10 10 0    {left 10 1}}"
               {path_style black 9}}}
 {path {@ d="M {turtle 40 10 -90  {left 10 2}}"
               {path_style red 7}}}
 {path {@ d="M {turtle 10 10 0    {left 10 3}}"
               {path_style green 5}}}
 {path {@ d="M {turtle 160 10 -90 {left 10 4}}"
               {path_style blue 3}}}
 {path {@ d="M {turtle 10 10 0    {left 10 5}}"
               {path_style grey 1}
          id="spline" }}  
 {circle 
  {@ cx="0" cy="0" r="5" 
     fill="rgba(255,255,0,0.5)" stroke="#f00"} 
  {animateMotion 
   {@ dur="100s" repeatCount="indefinite" rotate="auto"}
   {mpath {@ xlink:href="#spline"}}
  }
 }
}

}
{hr}
{center
 {svg 
  {@ width="330px" height="330px" 
    style="box-shadow:0 0 8px #888; background:#eee;
           border:1px solid grey;"}
 
 {def path_style {lambda {:col :d}
      fill="transparent" stroke=":col" stroke-width=":d"}}

{path {@ d="M {turtle 10 10 0 {left 10 1}}" 
               {path_style black 9}}}

{path {@ d="M {turtle 40 10 -90 {left 10 2}}" 
               {path_style red 7}}}

{path {@ d="M {turtle 10 10 0 {left 10 3}}" 
               {path_style green 5}}}

{path {@ d="M {turtle 160 10 -90 {left 10 4}}" 
               {path_style blue 3}}}

{path {@ d="M {turtle 10 10 0 {left 10 5}}"
               {path_style grey 1} id="spline"}}  
 
 {circle {@ cx="0" cy="0" r="5" 
            fill="rgba(255,255,0,0.5)" stroke="#f00"} 
;;  {animateMotion 
;;   {@ dur="100s" repeatCount="indefinite" rotate="auto"}
;;   {mpath {@ xlink:href="#spline"}}
;;  }
 }

}
{show {@ src="https://imgs.xkcd.com/comics/map_of_the_internet.jpg" height="320" width="450" title="IPs on the web"}}

}

_h5 7.1.4. a GANTT planning

_p This is a last example where architects can easily create {b Gantt} plannings{ref #13}. Writing

{pre 
'{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}
 {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}
}
}
_p displays

{img {@ src="data/gantt_planning.jpg" width="100%"}}

{center {{note.call web_documents} web documents}}
}

{{note.call web_documents} _h4 7.2. web documents}
{{note.content web_documents}

_p Thanks to the set of HTML/CSS functions we can structure texts with titles, paragraphs, lists, tables, pictures, ... and apply complex styles in a single and coherent syntax. The current wiki page uses plenty of these functions.

_p And more, you can forget {b MSWord} or {b LaTeK} to generate ACM formated {b academic papers} which can be directly and quickly {b PDF-printed} from the wiki page via the web browser.

{img {@ src="data/brussels/PDF_paper.jpg" width="100%" title="Academic paper, ACM US format, generated directly from the browser." style="border:1px solid #ccc"}}

{center {{note.call using_libraries} using libraries}}
}

{{note.call using_libraries} _h4 7.3. using libraries}
{{note.content using_libraries}

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

_h5 7.3.1 big numbers
_p With the {b lib_BN} library we can play with big numbers

{pre
'{pow 2 500} -> {pow 2 500}
'{BN.pow 2 500} -> {BN.pow 2 500}
}

_h5 7.3.2 math formulas
_p With the {b lib_MathLT} library - and  without MathML{ref 12} - we can use a set of '{lambda talk} functions to display {b math formulas}

{center 
{div {@ style="font:italic 1.2em georgia;"}
i{del h}{QUOTIENT 20 ∂ψ ∂t} (x,t) = {PAREN 3 (}mc{sup 2}α{sub 0} - i{del h}c {SIGMA 20 j=1 3} α{sub j}{QUOTIENT 20 ∂ ∂x{sub j}} {PAREN 3 )} ψ(x,t)}}

_h5 7.3.3 spreadsheet

_p With the {b lib_spreadsheet} library we can embed a {b spreadsheet}{ref 13} coming with a full language,'{lambda talk}

{img {@ src="data/brussels/spreadsheet_shot.jpg" width="100%" title="An integrated spreadsheet using lambda talk expressions." style="border:1px solid #ccc"}}

_h5 7.3.4 splines

_p With the {b lib_decasteljau}{ref 11} library we can draw bezier curves

{pre {@ style="position:relative; top:0; left:0;}
'{def p0 {cons 150 80}}  -> {def p0 {cons 150 80}} = {cons.disp {p0}}
'{def p1 {cons 200 150}} -> {def p1 {cons 200 150}} = {cons.disp {p1}}
'{def p2 {cons 50 250}}  -> {def p2 {cons 50 250}} = {cons.disp {p2}}
'{def p3 {cons 200 250}} -> {def p3 {cons 200 250}} = {cons.disp {p3}}

'{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"}} 
}
{svg {@ width="300px" height="300px"
        style="position:absolute;
        top:0px; left:30px;"
     }
 {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" fill="transparent" stroke-width="3"}}

{polyline {@ points="{castel.build
  {list.new {p2} {p1} {p3}} -0.1 0.6 {pow 2 -5}}" 
  stroke="green" fill="transparent" stroke-width="3"}} 
}
}

_h5 7.3.5 3D computing

_p With the {b lib_3D} and {b lib_ray} libraries we can do more intensive computations like vectorial 3D geometries and ray-tracing

{img {@ src="data/brussels/pforms_coons.jpg" width="48%" title="Coons patches built on 6 cubic spline curves with embedded regular polygons" style="border:1px solid #ccc; vertical-align:top;"}}

{img {@ src="data/brussels/d1.jpg" width="48%" title="Integrated Ray-tracing" style="border:1px solid #ccc"}}

_p All these examples can be tested in the '{lambda way}'s workshop
{center [[http://lambdaway.free.fr/|http://lambdaway.free.fr/]]}
}

{center {{note.call implementation} implementation}}
}

{{note.content implementation}
_h2 8. implementation
_p Imagine a {i machine} understanding this question

{pre
{b replace} "fruit" and "unknown" 
     {b in} "The color of fruits is unknwon." 
     {b by} "apple" and "green"
}

_p and returning

{pre
The color of apples is green.
}

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

{pre
'{{lambda {fruit unknown} 
          The color of fruits is unknown.} 
          apple green}
}

_p This is exactly the syntax we have been using in the previous sections. This syntax is freely inspired by the '{λ calculus}{ref 14} created in the 1930s by {b Alonzo Church} and uses the {b LISP} S-expressions introduced by {b John McCarthy} in the 1950s{ref 15} and used by all its dialects{ref 16}. From a theoretical point of view, a '{lambda talk} expression can be reduced to three elements

{pre
{b 1 word}: any character(s) except spaces and curly braces, {b '{}}
{b 2 abstraction}: '{lambda {words} expression}
{b 3 application}: '{expressions1 expression2}
}
_p 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.

_p The way the heart of '{lambda talk} is implementaed is very close to the process translated in the 1930s by a student of {b Alonzo Church}, {b Alan Turing}{ref 17}, into the shape of an hypothetic machine made of a window and an infinite stripe.

{img {@ src="data/brussels/turing_machine.png" width="100%"}}

_p In '{lambda talk} replacements of simple nested forms '{first rest} are made through a {b window} built on a single Javascript line

{pre
var do_eval = function( code ) '{
  while (code != (code = code.replace(regexp,eval_leaf))) ;
  return code;
};
}

_p working on a single {b regular expression}{ref 18}

{pre
var regexp = {quote /\{([^\s{}]*)(?:[\s]*)([^{}]*)\}/g};
}

_p following the syntax of a language created by {b Stephen Cole Kleene}{ref 19}, another student of {b Alonzo Church}.

_p This is what {b Ward Cunningham} wrote about this implementation: {i « 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 Turing Complete computations. This works because the needed "state" is in the partially evaluated text itself. »}

_p All is said!

_p 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 replace occurences found in the function's body by the given values. For instance

{pre
0: '{{lambda {fruit unknown}
          The color of fruits is unknown.} apple green}
1: '{{lambda {unknown} 
          The color of apples is unknown.} green}
2: '{{lambda {} 
          The color of apples is green.} }
3: The color of apples is green.

}

_p It's {b partial application made easy}, nothing magic there! At the lowest level there are nothing but words, a single special forms, {b lambda}, and a dictionary initially empty! With such an implementation and this reduced set of rules we have built the foundations of a {b Turing complete programming language}.

{center {{note.call conclusion} conclusion}}
}

{{note.content conclusion}
_h3 conclusion

{img {@ src="http://epsilonwiki.free.fr/ELS_YAW/data/2CV_boule_et_bill.jpg" width="100%"}}

_h5 small
_p 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 {b Small & Simple}, it can be read, edited and improved by any coder, it's just plain Javascript.

_h5 simple
_p The {b current wiki page}, built on a handfull of small '{lambda talk} user functions and CSS rules, is by itself an example of a {b collaborative web application}. '{lambda talk} keeps writing rich structured and dynamic web documents {b Small & Simple}. First you, the author, insert your ideas, what you think, as it comes to you. Yes it's not exactly WYSIWYG, {i you can't select words with the mouse and click on some button {b [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 standard HTML/CSS. Later you will be able to enrich the document by yourself or helped by a cute web designer or a smart coder.

_h5 collaborative
_p This {b collaborative creation} is made possible because the author, the web designer and the coder share the {b 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.

_h5 free
_p The '{lambda way} project is a free software under the {b GNU GPL} licence, and its {b 50kb} archive is easy to [[download & install|?view=download]] on any web host provider running PHP.

_p This was the goal of the '{lambda way} project and it's exactly how the current wiki page was created.

_p {i Alain Marty -- 2018/03/11 -- update 2018/05/10}

{center {{note.call references}references}}
}

{{note.content references}
_h2 references
{pre 
{back_ref 1} The Wiki way: [[http://dl.acm.org/citation.cfm?id=375211|http://dl.acm.org/citation.cfm?id=375211]]
{back_ref 2} Ward_Cunningham: [[http://ward.asia.wiki.org/view/testing-microtalk|http://ward.asia.wiki.org/view/testing-microtalk]] 
{back_ref 3} Markdown Syntax: [[https://help.github.com/articles/basic-writing-and-formatting-syntax/|https://help.github.com/articles/basic-writing-and-formatting-syntax/]]
{back_ref 4} [[http://epsilonwiki.free.fr/lambdaway/?view=curl|http://epsilonwiki.free.fr/lambdaway/?view=curl]]
{back_ref 5} [[http://epsilonwiki.free.fr/lambdaway/?view=LML|http://epsilonwiki.free.fr/lambdaway/?view=LML]]
{back_ref 6} [[http://docs.racket-lang.org/scribble/|http://docs.racket-lang.org/scribble/]]
{back_ref 7} [[http://epsilonwiki.free.fr/lambdaway/?view=SXML|http://epsilonwiki.free.fr/lambdaway/?view=SXML]] 
{back_ref 8} [[http://people.cs.aau.dk/~normark/laml/papers/web-programming-laml.pdf|http://people.cs.aau.dk/~normark/laml/papers/web-programming-laml.pdf]]
{back_ref 9} [[http://docs.racket-lang.org/pollen|http://docs.racket-lang.org/pollen/]]
{back_ref 10} Lindenmeier L-system: [[https://en.wikipedia.org/wiki/L-system|https://en.wikipedia.org/wiki/L-system]]
{back_ref 11} de Casteljau: [[https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm|https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm]]
{back_ref 12} MathML google-subtracts-mathml-from-chrome: [[https://www.cnet.com/news/google-subtracts-mathml-from-chrome-and-anger-multiplies/|https://www.cnet.com/news/google-subtracts-mathml-from-chrome-and-anger-multiplies/]]
{back_ref 13} Simon_Peyton_Jones: [[https://dl.acm.org/citation.cfm?id=1194878|https://dl.acm.org/citation.cfm?id=1194878]]
{back_ref 14} A Tutorial Introduction to the Lambda Calculus (Raul Rojas): [[http://www.inf.fu-berlin.de/lehre/WS03/alpi/lambda.pdf|http://www.inf.fu-berlin.de/lehre/WS03/alpi/lambda.pdf]]
{back_ref 15} LISP: [[http://www.cs.utexas.edu/~cannata/cs345/Class%20Notes/06%20Lisp.pdf|http://www.cs.utexas.edu/~cannata/cs345/Class%20Notes/06%20Lisp.pdf]]
{back_ref 16} SCHEME: Arold Abelson and Gerald J. Sussman. 1996. Structure and Interpretation of Computer Programs (2nd ed.). MIT Press, Cambridge, MA, USA.
{back_ref 17} Turing machines implemented in JavaScript  [[http://www.turing.org.uk/book/update/tmjavar.html|http://www.turing.org.uk/book/update/tmjavar.html]]
{back_ref 18} Regular Expressions: [[http://blog.stevenlevithan.com/archives/reverse-recursive-pattern|http://blog.stevenlevithan.com/archives/reverse-recursive-pattern]]
{back_ref 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.
{back_ref 20} Rosetta: [[https://www.rosettacode.org/wiki/Hello_world/Text|https://www.rosettacode.org/wiki/Hello_world/Text]]
}

}

{{hide}
{def TITLE
{center 
 {div {@ style="font-size:4.5em"} ze '{lambda way}}    
 {div {@ style="font-size:1.0em; letter-spacing:0.11em"} {{COLOR blue}Alain Marty Engineer Architect | Villeneuve de la Raho, France}}
{div {@ style="font-size:1.0em; letter-spacing:0.24em"} {{COLOR blue}Présentation à l' [[IMERIR|https://www.imerir.com/]], Perpignan, le 15 Mai 2018}}
}{hr}
}

{def SPLASHSCREEN
{div {@ style="position:relative; top:0; left:0;"}
{img {@ src="data/brussels/mies_pav.jpg" width="100%"}}
{center Pavillion Barcelona | Mies van der Rohe | The Maxwell's Equations of Architecture}

°°°
{div
 {@ style="position:absolute; top:10px; left:0; width:100%;
           white-space:pre-wrap;
           font:normal 2.5em times;
           text-align:center;
           color:white; text-shadow:0 0 8px #000;"}
∇.E = 0
∇.H = 0
∇^E + {QUOTIENT 10 1 c} {QUOTIENT 60 ∂H ∂t} = 0
∇^H - {QUOTIENT 10 1 c} {QUOTIENT 60 ∂E ∂t} = 0
}
°°°
}

{center
{blockquote
'{{λ {n} {{λ {g n} {g g n}} {λ {g n} {{{{λ {n} {n {λ {x} {λ {z} {z {λ {x y} y}}}} {λ {z} {z {λ {x y} x}}}}} n} {{λ {x y z} {z x y}} {λ {g n} {λ {f x} {f x}}} {λ {g n} {{λ {n m f x} {n {m f} x}} n {g g {{λ {n} {{λ {z} {z {λ {x y} x}}} {{n {λ {p} {{λ {x y z} {z x y}} {{λ {z} {z {λ {x y} y}}} p} {{λ {n f x} {f {{n f} x}}} {{λ {z} {z {λ {x y} y}}} p}}}}} {{λ {x y z} {z x y}} {λ {f x} x} {λ {f x} x}}}}} n}}}}}} g n }} n}} {λ {f x} {f {f {f {f {f x}}}}}}} -> 120
}
λ-calculus | Alonzo Church | The Maxwell's Equations of Computability
}

}

{def note.call {lambda {:id} 
  span {@ style="cursor:pointer;"
          onmouseover="this.style.color='#f00'"
          onmouseout="this.style.color='#000'"
          onclick="getId(':id').style.display =    
   (getId(':id').style.display==='none')?'block':'none';"}}}

{def note.content {lambda {:id} 
  div {@ id=":id" 
         style="display:{SLIDES_DISPLAY};
                padding:5px; margin:10px 0;
                box-shadow:0 0 8px #000;"}}}

{def MENU
{pre
 {@ id="menu"
    style="position:fixed; top:1px; left:2px;
           color:#fff; background:transparent"}
{{note.call abstract} abstract}
{{note.call keywords} keywords}
{{note.call introduction} introduction}
{{note.call words} 1. words}
{{note.call numbers} 2. numbers}
{{note.call styles} 3. styles}
{{note.call constants} 4. constants}
{{note.call functions} 5. functions}
{{note.call recursion} 6. recursion}
{{note.call the_web} 7. the web}
{{note.call implementation} 8. implementation}
{{note.call conclusion} conclusion}
{{note.call references} references}
}
}

{def codeview
 {lambda {:col} div
  {@ style="{if {= :col 1} 
   then color:black; background:#eee; 
        font:normal 1.2em courier;
   else color:#000; background:#fff; 
        font:normal 1.4em arial;
   }
   white-space:pre-wrap; 
   padding:10px 5px 5px 5px; 
   margin:10px 0 0 0;"}
   {div {@ style="font-size:0.6em; 
                  text-align:right;
                  margin:0px 0 -30px -8px;"}
   {if {= :col 1} then code else view}
}}}

{def ref {lambda {:i}
  {a {@ name="_:i" href="#:i"}{sup [:i]}} }}
{def back_ref {lambda {:i}
  {b {a {@ name=":i" href="#_:i"}[:i]}} }}
{def space {span {@ style="padding:0 10pt"}}}

}

{style 
@import url( https://fonts.googleapis.com/css?family=Quicksand
);

body {
 background:#444; 
}
#title {
 display:block; 
}
#page_view {
 font-family: Quicksand;
}
pre {
 word-wrap: break-word; 
 white-space:pre-wrap; 
 background:#eee; color:#000;
 font:normal 1.0em courier new;
 border-top:0px solid #ccc;
 border-bottom:0px solid #ccc;
 margin:2px 0; 
}
#menu a { color:#fff; }

h2, h3, h4, h5, h6 { color:#800 }

}