[Entwicklung] owl - Ein HTML Preprocessor

    • Beta
    • Open Source

    Es gibt 35 Antworten in diesem Thema. Der letzte Beitrag () ist von SplittyDev.

      [Entwicklung] owl - Ein HTML Preprocessor

      Abend,

      @SplittyDev und ich haben uns mal an ein neues Projekt gewagt. Das ganze war zu Beginn mehr ein Experiment,
      aber es ist doch relativ viel daraus geworden. :)

      Allgemein
      Owl ist ein HTML Preprocessor. Das heißt, dass es ermöglicht wird, einfacher, schöner und schneller zu programmieren.
      Am Ende wandelt der Preprocessor den vorgefertigten Code in validen HTML-Code um.

      Syntax
      Die Syntax von owl ähnelt einer Mischung aus HTML und C#.
      Identifier werden normal in den Code geschrieben, deren Inhalt wird in Brackets gefasst. Attribute werden in normalen Klammern
      angegeben.

      Spoiler anzeigen

      HTML-Quellcode

      1. <!doctype html>
      2. <html>
      3. <head>
      4. <title>Owl Preprocessor</title>
      5. <meta author="nikx, splitty" />
      6. <style type="text/css">
      7. .box {
      8. background-color: red;
      9. margin: 20% auto;
      10. width: 50%;
      11. height: 30%;
      12. }
      13. </style>
      14. </head>
      15. <body>
      16. <div class="box">Owl</div>
      17. <p>
      18. <a href="http://www.google.com" alt="Google">Google</a>
      19. </p>
      20. </body>
      21. </html>


      Quellcode

      1. head {
      2. title { "Owl Preprocessor" }
      3. meta ( author = "nikx, splitty" );
      4. style ( type = "text/css" ) {
      5. ".box {
      6. background-color: red;
      7. margin: 20% auto;
      8. width: 50%;
      9. height: 30%;
      10. }"
      11. }
      12. }
      13. document {
      14. div ( class = "box" ) { "Owl" }
      15. p {
      16. a ( href = "http://www.google.com", alt = "Google" ) { "Google" }
      17. }
      18. }


      Grundsätzlich bietet die Owl-Syntax aktuell kaum Vorteile gegenüber der HTML-Syntax.
      Allerdings sind mehrere nette Features in Planung, die das ganze weiter ausbauen, hierzu zählen
      beiepielsweise Imports, mehrere Elemente zusammenfassen, und einiges mehr.
      Zusätzlich arbeiten wir daran, die Anführungszeichen zu entfernen, was sich als relativ schwer
      erweist. Eine WebVersion von @Alex-Digital gibts hier: alex-digital.de/owl

      Implementiert
      • Escape-Sequenzen im Textfluss
      • Attribute und Identifier normal nutzen
      • Relativ schnelle und effiziente Umwandlung (4ms)

      Geplant
      Auch wenn oben bereits einiges genannt ist:
      • Elemente zusammenfassen
      • Anführungszeichen entfernen
      • Imports
      • Owl IDE

      Open Source
      Das gesamte Projekt ist OpenSource auf GitHub gehostet.
      Jeder, der Verbesserungsvorschläge hat, möge diese einfach ändern und bei GitHub das Projekt
      direkt updaten. Es ist anzumerken, dass dort gehostete Versionen nicht zwingend stable sind und daher
      auch mal etwas falsch laufen kann, auch wenn das die Ausnahme sein sollte.
      github.com/SplittyDev/owl (Lizenz: GNU GPL v2)

      Code Generation
      In den nächsten Tagen werde ich hier zusätzlich noch eine Software veröffentlichen, mit der sich Änderungen
      an .owl-Dateien tracken lassen, damit der Preprocessor im Hintergrund direkt eine HTML erstellen kann.
      Dadurch lässt sich owl als relativ ernste Alternative zu HTML nutzen, falls denn gewünscht.

      Bilder
      Na, was solls :)


      Kritik
      Konstruktive Kritik ist gerne gesehen. Wir würden uns Feedback wünschen, damit man das Ganze eventuell an Nutzerbedürfnisse
      anpassen kann, sodass es von einem Experiment zu einer nutzbaren und benutzten Software wird.

      Viele Grüße,
      Nikx + @SplittyDev
      "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

      Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!

      Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von „Nikx“ ()

      Das ist sicher ganz gut und auch Interessant z.b. für den Compiller bau. Aber, ich denke, dass Webseiten eher wenig damit erstellt werden bzw. von Programmierern die bereits mit html arbeiten wenig genutzt wird. Ihr solltet als Zielgruppe Einsteiger ansprechen, da es da keinen Unterschied macht, was sie lernen. Aber echt Interessant.

      Ihr solltet noch einen Decompiller bauen, der html zu owl umwandelt, denn wenn jemand owl lernt, ist es schwer ohne html kenntnisse den Quellcode zu lesen.

      nikeee13 schrieb:

      Erinnert irgendwie an Jade. Vielleicht haben die ja noch ein paar Features, von denen man sich inspirieren lassen könnte.

      Ich habe erst nach dem schreiben des owl Lexers von Jade erfahren. Die Jade Syntax gefällt mir persönlich nicht wirklich, da sie wie Python whitespace-sensitiv ist.
      Es werden natürlich noch einige Features zu owl hinzugefügt, momentan arbeiten wir z.B. an imports und besserem content management.

      Andy16823 schrieb:

      Das ist sicher ganz gut und auch Interessant z.b. für den Compiller bau. Aber, ich denke, dass Webseiten eher wenig damit erstellt werden bzw. von Programmierern die bereits mit html arbeiten wenig genutzt wird. Ihr solltet als Zielgruppe Einsteiger ansprechen, da es da keinen Unterschied macht, was sie lernen. Aber echt Interessant.

      Die Sprache und der Präprozessor sind eher weniger für Einsteiger geeignet, sondern mehr für Entwickler,
      die eine brauchbare alternative zu HTML suchen.
      Man lernt ja auch nicht SCSS bevor man CSS lernt, oder? :D

      KidRick schrieb:

      Bin schon von LESS und Sass beeindruckt aber jetzt auch HTML, bin ganz Ohr! Super Projekt :)

      Vielen Dank! :)
      Den Gedanken insgesamt finde ich sehr interessant, was jedoch fehlt ist der DOCTYPE (<!DOCTYPE html>.
      Zu dem Beispielcode (damit er HTML5 valide ist)

      Quellcode

      1. head {
      2. title { "Owl Preprocessor" }
      3. meta ( name = "author", content = "nikx, splitty" );
      4. style { /* FYI: ( type = "text/css" ) ist bei dem Tag "style" doppelt gemoppelt */
      5. ".box {
      6. background-color: red;
      7. margin: 20% auto;
      8. width: 50%;
      9. height: 30%;
      10. }"
      11. }
      12. }
      13. document {
      14. div ( class = "box" ) { "Owl" }
      15. p {
      16. a ( href = "http://www.google.com", target = "_blank" ) { "Google" }
      17. }
      18. }
      Eine coole Idee, allerdings werden HTML-Entwickler vermutlich nur ungern umsteigen.
      Ich müsst schon etwas bieten, was die Sprache deutlich von HTML abhebt und besser macht.
      Vorschläge:
      - Keine rein deklarative Nutzung, sondern auch Skripte (vgl. PHP, ASP.NET oder LESS)
      - Abkürzungen/Makros (selbst definiert evtl.)

      Ihr müsst euch entscheiden, wollt ihr ein rein syntaktisch verändertes HTML oder ein skriptbaren und anpassbaren Präprozessor entwickeln?
      So gut ich die Idee finde, im Moment bietet sie noch keine echten Vorteile zu HTML.

      Aber, weiter so! :)

      P.S.: Alleine die Unmengen an spitzen Klammern zu entfernen gefällt mir schon ausgesprochen gut ;)
      SᴛᴀʀGᴀᴛᴇ01

      slice schrieb:

      Den Gedanken insgesamt finde ich sehr interessant, was jedoch fehlt ist der DOCTYPE (<!DOCTYPE html>.
      Zu dem Beispielcode (damit er HTML5 valide ist)

      Der DOCTYPE wird von owl beim compilieren automatisch ergänzt.
      Ich werde @Nikx bitten, das im Beispiel anzupassen. Danke :)

      StarGate01 schrieb:

      Eine coole Idee, allerdings werden HTML-Entwickler vermutlich nur ungern umsteigen.
      Ich müsst schon etwas bieten, was die Sprache deutlich von HTML abhebt und besser macht.
      Vorschläge:
      - Keine rein deklarative Nutzung, sondern auch Skripte (vgl. PHP, ASP.NET oder LESS)
      - Abkürzungen/Makros (selbst definiert evtl.)

      Ihr müsst euch entscheiden, wollt ihr ein rein syntaktisch verändertes HTML oder ein skriptbaren und anpassbaren Präprozessor entwickeln?
      So gut ich die Idee finde, im Moment bietet sie noch keine echten Vorteile zu HTML.

      Aber, weiter so! :)

      P.S.: Alleine die Unmengen an spitzen Klammern zu entfernen gefällt mir schon ausgesprochen gut ;)


      PHP wird möglich sein, vermutlich in der Form ​{? echo ("Test!"); ?}.
      Über das scripten haben wir uns noch nicht so viele Gedanken gemacht, das können wir aber gerne besprechen und ggf. umsetzen.

      Dass es Momentan noch keine großen Vorteile gegenüber HTML gibt liegt teilweise daran dass das schreiben des Lexers verdammt schwer ist
      und ich mich auf diesem Gebiet noch nicht besonders gut auskenne.
      Ich werde mich aber in nächster Zeit intensiv damit befassen und versuchen, den Sprachumfang sowie die Funktionalität zu erweitern.

      Vielen Dank für dein Feedback! :)
      Zum Thema Lexikalischer Analyse und Compilerbau findet man einiges im Netz.
      Stichwort formale Sprachen mit endlichen Automaten, Syntaxbäume, Tokenizer.
      Oder schau dir mal YACC und LEX an.

      Da ihr ja eh schon auf Windows arbeitet könntet ihr auch C#, JScript, VBScript, C#, VB.NET etc. zum skripten anbieten. Eventuell sogar Javascript, ähnlich wie NodeJs.
      SᴛᴀʀGᴀᴛᴇ01

      StarGate01 schrieb:


      Da ihr ja eh schon auf Windows arbeitet könntet ihr auch C#, JScript, VBScript, C#, VB.NET etc. zum skripten anbieten. Eventuell sogar Javascript, ähnlich wie NodeJs.


      Hmm könnte man mal überlegen. Aber ich denke das passt nicht wirklich in unser Konzept.

      Zum Compilerbau: Ich habe mich schon mit Tokenizern auseinandergesetzt aber wenn man dann wirklich sowas schreibt ist es natürlich nicht so einfach.
      Ich werde mich aber natürlich noch mehr damit beschäftigen und den Compiler optimieren :)
      Hallo,

      ich könnte mich ja an eine Online-Version von owl versuchen mit CodeMirror, wenn ihr wollt :P

      Dann muss man nicht mal das Programm runterladen :D

      ~ Alex
      ~ Alex-Digital :D

      if(!Internet.VBP.Get<User>("Alex-Digital").IsOnline) this.Close(); :D
      @Alex-Digital:

      Grundsätzlich keine schlechte Idee. Da man Websiten aber generell an jedem PC mit Texteditor schreiben
      kann, und nach jedem Save auch gern mal zwischentestet, halte ich eine Online-Variante für ungeeignet.
      Jedes mal die Dateien hochladen wäre doch etwas aufwändig. Eventuell könnte man sich an einem Projekt
      wie codepen.io versuchen, was aber grundsätzlich nicht mehr in den Bereich dieses Projekts fällt.

      Falls ich irgendetwas nicht bedacht habe, darf man mich gern belehren :)
      Trotzdem vielen Dank!

      Grüße
      "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

      Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!
      unbedingt schneller ist man da durch jetzt nicht, jedoch
      gefällt die Variante.

      Schön wäre die Möglichkeit Definitionen einzubauen.

      Quellcode

      1. ​#define Critical #FF4444
      2. background-color: Critical;

      (des hab ich zwar schon iwo gesehen, glaube es war sass, aber dennoch eine sehr schöne Ergänzung)
      Wenn ich weitere Ideen hab, meld ich mich ;)

      Weiter so!
      @GimpTutWorks Wir arbeiten an genau solchen Dingen, und sie werden sicher kommen. :)
      ventuell erweitern wir owl auch um eine CSS-Version, die dann aber nicht so overkill wird wie SASS oder LESS.
      Ich bin hier der Meinung, weniger ist mehr, zu dem Thema doch bitte mal eure Meinung hierlassen.

      Webversion
      Der nette @Alex-Digital hat sich wie schon bei der Online-IDE nützlich gemacht und euch eine WebVersion
      des Owl-Preprocessors zur Verfügung gestellt. alex-digital.de/owl
      Danke dafür! :)

      Viele Grüße,
      Nikx
      "Life isn't about winning the race. Life is about finishing the race and how many people we can help finish the race." ~Marc Mero

      Nun bin ich also auch soweit: Keine VB-Fragen per PM! Es gibt hier ein Forum, verdammt!
      Ich finde die Idee mit den Scripts ziemlich gut, damit könntet ihr Html etwas dynamisches geben. Vor allem definierte Makros wären ein Traum. Statt Owl IDE würde ich euch allerdings lieber zu einen Eclipse/VS Plugin raten, da ihr dort die vorhandenen (sehr guten) Strukturen nutzen könnt.

      ThuCommix schrieb:

      Ich finde die Idee mit den Scripts ziemlich gut, damit könntet ihr Html etwas dynamisches geben. Vor allem definierte Makros wären ein Traum. Statt Owl IDE würde ich euch allerdings lieber zu einen Eclipse/VS Plugin raten, da ihr dort die vorhandenen (sehr guten) Strukturen nutzen könnt.


      Danke :)
      Wir schreiben wahrscheinlich ein gedit und SublimeText plugin mit Syntax Highlighting etc.

      Wenn das ganze größer wird schreiben wir vielleicht auch ein Eclipse Plugin aber wir gucken jetzt erstmal wie sich das entwickelt
      Evtl. wäre auch noch eine Art "Include" interessant, um einzelne Bereiche in externe Files aufzuteilen (zb. Header, Content, Footer und Mainfile in der die drei inkludiert werden).
      Path: C:\example-Page\assets\header.owl

      Quellcode

      1. head {
      2. title { "Owl Preprocessor" }
      3. meta ( name = "author", content = "nikx, splitty" );
      4. style {
      5. ".box {
      6. background-color: red;
      7. margin: 20% auto;
      8. width: 50%;
      9. height: 30%;
      10. }"
      11. }
      12. }


      Path: C:\example-Page\page-start.owl

      Quellcode

      1. #include "../assets/header.owl"
      2. document {
      3. div ( class = "box" ) { "Owl" }
      4. p {
      5. a ( href = "http://www.google.com", target = "_blank" ) { "Google" }
      6. }
      7. }

      slice schrieb:

      Evtl. wäre auch noch eine Art "Include" interessant, um einzelne Bereiche in externe Files aufzuteilen (zb. Header, Content, Footer und Mainfile in der die drei inkludiert werden).


      Mit dem neuesten Build sind includes jetzt möglich.
      Einfach #include "../assets/header.owl" in ne freie Zeile hauen und normal kompilieren :)

      Relative paths hab ich zwar nicht getestet, sollten aber ohne Probleme funktionieren.
      So ich habe den Lexer und CodeGenerator jetzt mal in das "libowl" Projekt ausgelagert.
      Wer selber was mit owl machen will kann das nun recht einfach tun.

      Desweiteren habe ich den Lexer um einige nützliche Funktionen erweitert,
      neu ist under Anderem die Möglichkeit, Code einfach zu analysieren ohne html-code daraus zu erzeugen.

      Ich habe auch angefangen am owl editor zu arbeiten,
      der auf GTK# basiert und eine live-Fehleranalyse durchführt.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „SplittyDev“ ()

      Find ich wirklich geil (erspart einem das nervige Tag getippe ;) ). Schade, dass solche Projekte nur verhältnismäßig so wenig Aufmerksamkeit bekommen.


      Opensource Audio-Bibliothek auf github: KLICK, im Showroom oder auf NuGet.