Jaki tutorial lub po prostu jak zabrać się za pisanie interpretatora danego języka?

Generalnie od dłuższego czasu zastanawiam się nad tym, jak zabrać się za coś, co mogłoby przypominać np. edytory w3schools, w których można pisać kod html, css oraz javascript. Czy wie ktoś może (oczywiście poza znajomością owych technologii) od czego trzeba zacząć?
No bo np. zastanawiam się jak ogarnąć coś takiego, że w edytorze (przeglądarkowym) wpisuję:

  //jakiś fajny kod javascript, html oraz css.

i teraz po kliknięciu "uruchom" otrzymuję jakiś efekt działania kodu (nie wiem) czerwonego diva z tekstem powiedzmy.
Anyone?

finito napisał(a):

Czy wie ktoś może (oczywiście poza znajomością owych technologii) od czego trzeba zacząć?

Chyba nie "technologie" są fundamentem, to raczej słowko z pogranicza marketingu, ale solidne podstawy teoretyczne, w tym teoria języków programowania.
Ze studiów nie wszystko pamiętam, ale chciałem w sposób "naiwny" zbudować kompilator, to się nigdy nie zbliżyło, drugie podejście po jeszcze niecałym semestrze teorii, a nawet po jego początku - było błyskawiczne i skuteczne.

Jeśli się charakteryzujesz jako tzw praktyk, moze lepszym celem będzie zintegrowanie się z istniejacym projektem (interpretera języka programowania, html itd) ... ale to tez ogromne dzieło

@ZrobieDobrze: Sory, ale mam lekki "confuse";-) Z jednej strony piszesz o solidnych podstawach teoretycznych, a z drugiej piszesz o byciu praktykiem.
Nie wiem co inni na to, ale zaraz po utworzeniu wątku doszedłem do wniosku, że to chyba trochę tak jak z samolotem. W ytube są tysiące filmów o tym jak ile razy człowiek próbował "pofrunąć" do góry jakąś maszyną i nie mógł za żadną chorobę ażż przyszedł kiedyś moment, że się udało. No i teraz mamy: parkotki, helikoptery, boingi, transportowe oraz inne. Czyli pewnie po prostu będę musiał przebić się przez 100 nie udanych prób, aż w końcu mi się uda.

Tzn. chcesz pisać interpreter, edytor czy odpalać podany przez użytkownika kod JSowy na stronie?

To są 3 rzeczy, które mogą, ale nie muszą iść w parze.

1. Jeśli chcesz napisać własny interpreter, to proponowałbym jakiś prostszy język niż JS, który ma ponad 800 stron specyfikacji. Coś ze składnią asemblera czy lispa jest łatwo zrobić. Poza tym są jakieś książki o tym np. tutaj dostępna online https://craftinginterpreters.com/contents.html

2. jeśli chcesz mieć edytorek kodu na stronie, to dobra jest biblioteka CodeMirror (to daje ci edytorek tylko z podświetlaniem składni, a nie do uruchamia kodu). https://codemirror.net/

3. jeśli chcesz odpalać po prostu kod JS/HTML/CSS, to mógłbyś zrobić umieścić taki kod w iframe wraz z odpowiednimi atrybutami, żeby zrobić piaskownicę: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe podobnie robi jsFiddle. Chociaż ja bym się tu najpierw przyjrzał, na ile to będzie skuteczna piaskownica.

@LukeJL: Tak, tylko mnie chodzi o zrobienie całkowicie "od zera" edytora, do którego będzie można pisać kod np. html, css oraz javascript, oraz
bez żadnych gotowych bibliotek dostępnych w sieci. A tak na prawdę to się zastanawiam czy da się zbudować edytor (oparty na html, css i js) do wyświetlania obok edytora efektu działania kodu. No właśnie. To łatwe nie będzie. Ale kto mówi o tym, że to ma być łatwe.
Czyli po prostu chciałbym zrobić coś takiego jak edytor w3school, tylko po prostu po swojemu oraz z całkowicie moimi "bajerami".
Ale ten iframe to się zastanowię. Pytanie tylko czy można to zrobić inaczej. No ale ten iframe to już coś. Dzięki;-)

https://craftinginterpreters.com/contents.html

A tak na prawdę to się zastanawiam czy da się zbudować edytor (oparty na html, css i js) do wyświetlania obok edytora efektu działania kodu

Jak to? Nie rozumiem.

Tak, tylko mnie chodzi o zrobienie całkowicie "od zera" edytora, do którego będzie można pisać kod np. html, css oraz javascript, oraz
bez żadnych gotowych bibliotek dostępnych w sieci.

Ile miesięcy/lat jesteś w stanie poświęcić na ten cel?

Jak to? Nie rozumiem.

Zapewnie chodzi o to że jak będzie pogrubiona czerwona czcionka to ma się wyświetlać jakiś tekst z pogrubioną czerwoną czccionka.

LukeJL napisał(a):

A tak na prawdę to się zastanawiam czy da się zbudować edytor (oparty na html, css i js) do wyświetlania obok edytora efektu działania kodu

Jak to? Nie rozumiem.

Czy widziałeś kiedyś np to? https://www.w3schools.com/js/tryit.asp?filename=tryjs_statements

Tak, tylko mnie chodzi o zrobienie całkowicie "od zera" edytora, do którego będzie można pisać kod np. html, css oraz javascript, oraz
bez żadnych gotowych bibliotek dostępnych w sieci.

Ile miesięcy/lat jesteś w stanie poświęcić na ten cel?

Hmm, mądre pytanie;-) Tzn. generalnie chodzi mi o to, by zrobić coś nie na zasadzie "wklej libkę, ustaw parametry i samo zadziała", bo w taki
sposób to działały rozszerzania np do jQuery, że wystarczyło dać linkę do jQuery, potem plugin i było po sprawie.
Mnie chodzi raczej o to, by "jednak" się przy tym trochę na pracować.

scibi_92 napisał(a):

Jak to? Nie rozumiem.

Zapewnie chodzi o to że jak będzie pogrubiona czerwona czcionka to ma się wyświetlać jakiś tekst z pogrubioną czerwoną czccionka.

No mniej więcej. Jednak żeby dodatkowo nie mieszkać, to może prosty przykład:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test
Mamy edytor, mamy html, css i możemy jeśli chcemy dorzucić także javascript. Tylko ja bym po prostu chciał zrobić coś podobnego, ale z moimi zdefiniowanymi przeze mnie różnymi "bajerami".

edit: Podsumowując, jak się za coś takiego zabrać? Jakiego języka użyć? Bo nie wydaje mi się, aby mądrym było napisanie w javascript'cie edytora do pisania aplikacji javascriptowych. Chociaż kto wie? Kto to powiedział: "Dajcie mi odpowiednią dźwignię a podniosę ziemię";-)
edit2: Zauważyłem (tak na marginesie) że w linku tego edytora w3school jest "asp", co może być jakąś podpowiedzią.
edit3: Rany, co ja za głupoty gadam. Jeśli dało się napisać Node.js do pisania apek w js, to dlaczego miałoby się
nie dać zrobić edytora w js do pisania kodu w js.
edit4: Dość ciekawe, przed chwilą znalazłem coś takiego.
Co sądzicie? https://dotnettutorials.net/lesson/interpreter-design-pattern/

edit2: Zauważyłem (tak na marginesie) że w linku tego edytora w3school jest "asp", co może być jakąś podpowiedzią.

Backend (to, co się odpala na serwerze i gdzie może być to ASP) to oddzielna sprawa od frontendu (to, co się odpala w przeglądarce).

Co do tej strony w3school, to jak wejdziesz w dev toolsy, to widać, że oni użyli CodeMirror jako edytora, a sam wynik pokazują w iframe.

Podsumowując, jak się za coś takiego zabrać? Jakiego języka użyć? Bo nie wydaje mi się, aby mądrym było napisanie w javascript'cie edytora do pisania aplikacji javascriptowych.

Przecież od dawna się to robi.

edit: Podsumowując, jak się za coś takiego zabrać?

Zależy, co jest twoim celem. Po co chcesz to zrobić.

Inaczej się robi coś, jeśli masz konkretny cel praktyczny, inaczej się robi dla celów edukacyjnych itp.

@finito: Nie wiem, jak zaawansowane programy potrafisz pisać.
Ale oprócz podejścia z podanego przez Ciebie linku (https://dotnettutorials.net/lesson/interpreter-design-pattern/), gdzie jest wyraźnie wskazane, że Gram­mar is sim­ple, oraz z podanego wcześniej linku (https://craftinginterpreters.com/contents.html), gdzie jest zastosowane klasyczne podejście przy użyciu tokenizera — proponuję podejście generalne, przy użyciu tekstowego opisu składni, które kiedyś wymyśliłem.

Klasycznie, w celu wykonania się programu tekstowego potrzebujesz

1. podzielić program tekstowy na tokeny (https://craftinginterpreters.com/scanning.html)
2. zinterpretować drzewo tokenów na podstawie gramatyki języka (https://craftinginterpreters.com/representing-code.html)

Moje podejście jest następujące:

1. sparsować program tekstowy na podstawie tekstowego pliku opisu składni (gramatyka lewostronna)
2. interpretować program na podstawie kolejno otrzymywanych entities z tego opisu składni (struktura drzewiasta)

W takim podejściu można swobodnie zmieniać opis składni, poprawiając tylko nazwy w programie parsera, a nie zajmować się zmianą programu parsera przy każdej zmianie składni.

Użycie parsera jest w skrócie opisane tutaj: https://ocq430.wixsite.com/website/post/parser-plik%C3%B3w-tekstowych-text_syntax-cx
Przykładowe pliki opisu składni wyglądają tak: https://github.com/overcq/oux-web-srv/blob/master/conf.syntax , https://github.com/overcq/oux-web-srv/blob/master/html.syntax
Przykładowa interpretacja (ale bez budowania drzewa) pliku konfiguracyjnego jest tutaj: https://github.com/overcq/oux-web-srv/blob/master/conf.cx (procedura E_conf_I_read)
Natomiast parser jest tutaj: https://github.com/overcq/oux/blob/master/module/base/text-syntax.cx (procedura E_text_syntax_Q_state_I_parse)

Na początku takie podejście może wydawać się trudniejsze, ale zauważ, że podałem przykłady interpretacji pliku konfiguracyjnego i dokumentu html w programie, który już działa. Może da się to przepisać na inny język programowania...

Ja bym powiedzial ze bardziej ksiazka.
Najnowsze na rynku to ta dla Go:
https://interpreterbook.com/
https://compilerbook.com/

Poza tym:
https://www.amazon.com/Crafting-Interpreters-Robert-Nystrom/dp/0990582930

Masz tutaj playliste

finito napisał(a):

@ZrobieDobrze: Sory, ale mam lekki "confuse";-) Z jednej strony piszesz o solidnych podstawach teoretycznych, a z drugiej piszesz o byciu praktykiem.
Nie wiem co inni na to, ale zaraz po utworzeniu wątku doszedłem do wniosku, że to chyba trochę tak jak z samolotem. W ytube są tysiące filmów o tym jak ile razy człowiek próbował "pofrunąć" do góry jakąś maszyną i nie mógł za żadną chorobę ażż przyszedł kiedyś moment, że się udało. No i teraz mamy: parkotki, helikoptery, boingi, transportowe oraz inne. Czyli pewnie po prostu będę musiał przebić się przez 100 nie udanych prób, aż w końcu mi się uda.

Jak piszę o tzw. praktyku, czasem używam cudzyslowoów , to chodzi o gościa który klika kod (często mało stylowy, mało wydajny a najczęściej spagetti), i ma wywalone na teorię.
Tym sie różni od leniwego studenta lat początkowych (który ma "problem z teorią"), że udowodnił sam sobie szkodliwość wszelkiego wykształcenia teoretycznego, argumentami "przecież działa", "jeszcze tylko", anegdotki z innych branż itp

Właśnie zerknąłem w twoją historię, jest dokładnie taka, jaką sobie wyobrażałem.

Więc na twoim guru, czyli Youtube, powinieneś stworzyć inny wątek "Czy jest jakiś tuturial albo jak zacząć budować rakietę Saturn V"

Moja rada: zrób szybko prototyp tego, co chcesz zrobić np.
Możesz użyć biblioteki CodeMirror do tego żeby osadzić edytorek z podświetlaniem składni. Możesz użyć iframe, żeby zrobić „stronę w stronie” i wrzucić tam kod HTML/CSS/JS napisany przez użytkownika.

To ci zajmie pewnie z kilka dni i później będziesz mógł myśleć co dalej. Czy to będziesz jakoś rozbudowywał czy może zrobisz to samo, ale od zera.

Bo zrobienie tego, co chcesz niby zrobić (edytor + interpreter JS od zera) zajęło by pewnie z kilka lat, i wszystko byłoby dobrze, gdybys faktycznie wiedział, co chcesz zrobić (a jakbyś miał uprzednie doświadczenie w podobnych rzeczach to już w ogole byłoby super), natomiast dyskutując tu z tobą nie jestem przekonany, ze wiesz, czego chcesz i na co się porywasz. Masz przed oczami wynik końcowy, ale trochę jak osoba nietechniczna (trochę jak klient z ambitnym zleceniem, który rzuca technicznymi terminami, które gdzieś wyczytał, ale nie zdaje sobie sprawy, jak bardzo jest to trudne, żeby zrobić dokładnie tak, jak wymyślił)