Obsah
1. Klasická integrovaná vývojová prostředí (IDE)
3. Pískoviště pro první seznámení s vlastnostmi zvoleného programovacího jazyka a pro sdílení kódu
4. Co lze od webového pískoviště očekávat?
11. Univerzální vs. specializovaná integrovaná vývojová prostředí
15. Programovací jazyky podporované prostředím Repl.it
17. Prostředky dostupné programátorům
18. Propojení Repl.it s GitHubem
1. Klasická integrovaná vývojová prostředí (IDE)
Integrovaná vývojová prostředí (Integrated Development Environment neboli zkráceně IDE) za sebou mají již neuvěřitelných více než čtyřicet let vývoje (připomeňme si Dartmouth BASIC, prostředí Maestro I, prakticky všechny produkty firmy Borland pro vývojáře atd.) a v současnosti se jedná o programový prostředek využívaný vývojáři pracujícími s nepřeberným množstvím programovacích jazyků, a to od jazyků nízkoúrovňových (může jít o různé assemblery a makroassemblery) přes klasické kompilované (překládané) programovací jazyky typu C, C++, C#, Go, Rust či Java až po oblíbené interpretované programovací jazyky (Python, Ruby, JavaScript a TypeScript) apod. Hlavní důvod, proč velká část programátorů preferuje při své práci použití integrovaného vývojového prostředí, spočívá především v tom, že se díky IDE může celý vývoj a následné ladění aplikace urychlit a zjednodušit, což samozřejmě v důsledku vede k mnohdy výraznému zvýšení produktivity programátora.
Obrázek 1: Hlavní menu dnes již prehistorického vývojového prostředí Turbo Pascalu 1.0. Z tohoto menu se vyvolávaly jednotlivé moduly integrovaného vývojového prostředí (tedy editor, překladač atd.). Teprve později došlo k úplnému sjednocení jednotlivých částí a hlavní obrazovkou se stal samotný programátorský editor se stavovým řádkem a hlavním menu – vznikl tedy program, který se již poměrně značně podobal i moderním IDE.
Moderní integrovaná vývojová prostředí jsou většinou tvořena samostatnou aplikací vybavenou mnohdy velmi komplexním grafickým uživatelským rozhraním. Tato aplikace programátorům poskytuje nástroje určené pro správu projektů, vytváření a úpravu zdrojových kódů, refaktoring zdrojových kódů, porovnání dvou či většího množství verzí zdrojového kódu (popř. i podporu pro tvorbu a aplikaci takzvaných patchů), překlad programů a většinou taktéž podporu pro ladění přeložených programů a pro jejich profiling (tj. zjištění, ve kterých částech kódu běžící proces strávil nejvíce času, popř. spotřeboval největší množství operační paměti). Některá integrovaná vývojová prostředí navíc programátorům nabízí i rozhraní k systémům pro správu verzí – Git, ale i CVS, SVN a Mercurial apod. – většinou opět s podporou porovnání dvou či více variant zdrojových souborů či celých projektů, zobrazení jednotlivých větví atd.
Obrázek 2: Úvodní obrazovka Turbo Basicu. Jednalo se o jazyk vyvíjený v letech 1987 a 1988, takže zde firma Borland logicky použila velmi podobné (textové) uživatelské rozhraní, jaké nalezneme v té době vydaném Turbo Pascalu 4.0. Později však přestal být Turbo Basic i další podobné „nemainstreamové“ jazyky (Turbo Prolog) vyvíjen, protože se Borland orientoval na Turbo Pascal a na Turbo C (později Turbo C++).
Jednotlivá integrovaná vývojová prostředí se od sebe odlišují tím, do jaké míry jsou tyto nástroje navzájem integrovány. V některých případech totiž vývojové prostředí využívá externí aplikace (například externí programátorský textový editor, překladač, debugger, profiler), další IDE pak většinu funkcí integrují do jedné monolitické aplikace (což je dnes méně časté). Oba přístupy mají své klady, ale samozřejmě i zápory. O některých z nich se zmíníme v navazujícím textu. U některých komplikovanějších IDE dokonce můžeme najít souběžné použití obou přístupů. Příkladem je například Eclipse, kde se v případě práce s projekty vytvářenými v Javě využívá mnoho pluginů, které lze považovat za součást Eclipse (včetně interního překladače ECJ), zatímco ve chvíli, že se Eclipse vyžije pro tvorbu projektů v C a C++, používají se pro překlad či ladění externí aplikace (tím ovšem nechci ani naznačit, že by Eclipse bylo v této oblasti výrazně dobrou volbou).
Obrázek 3: Integrované vývojové prostředí Gambas se do určité míry snaží o multiplatformní realizaci klasického Visual Basicu. Gambas ukázaný na tomto screenshotu běží v Linuxu.
Dnes si popíšeme především jednoduchá a snadno použitelná „pískoviště“, zatímco sofistikovaná webová IDE budou popsána v navazujícím článku.
Obrázek 4: Další screenshot z integrovaného vývojového prostředí Gambas.
2. Webová IDE
V posledních přibližně dvou desetiletích můžeme být svědky poměrně důležité změny v IT. Jedná se o postupný přesun uživatelských aplikací od klasických desktopových aplikací s plnohodnotným (a většinou i do určité míry standardizovaným) grafickým uživatelským rozhraním k webovým aplikacím, tj. k takovým aplikacím, v nichž je uživatelské rozhraní typicky tvořeno kombinací HTML+CSS+JavaScriptu (WebAssembly se prozatím příliš neujalo) a samotná plocha aplikace je vykreslena do okna webového prohlížeče. Tento posun s sebou přináší poměrně mnoho výhod (a to jak na straně dodavatele či provozovatele aplikace, tak i na straně uživatele), ale i několik nevýhod (výkon, systémové nároky, problematika zajištění soukromí, závislost na připojení počítače k Internetu či Intranetu), nicméně se (zdá se) jedná o v dohledné době nezvratnou změnu.
Obrázek 5: Příklad aplikace typu „office“, ovšem realizované v prostředí webového prohlížeče a pochopitelně i serverového backendu (zde se konkrétně jedná o Google Doc a aplikaci Google Sheets).
Poměrně dobrým příkladem aplikací převedených do webové podoby jsou mailoví klienti, ale i celé kancelářské aplikace. Převedeny ovšem byly například i různé CADy apod. Tato změna se dotkla i integrovaných vývojových prostředí (IDE), z nichž některé se buď přesunuly na web nebo už přímo na této platformě vznikly. Použití IDE na webu má svá úskalí, ovšem přináší zajímavou možnost vyzkoušet si nový programovací jazyk bez nutnosti jeho instalace a konfigurace, což v některých případech nemusí být zcela jednoduchá záležitost. Ostatně právě z tohoto důvodu prakticky všechny webové stránky moderních programovacích jazyků (a to i těch kompilovaných) nabízí nějakou formu hřiště (playground), na němž si lze jazyk otestovat. Taktéž je mnohdy možné sdílet zdrojový kód, ponechat webové IDE, aby si kód zapamatovalo (takže lze vytvořit odkaz na demonstrační příklady dostupné online) nebo je v některých případech dokonce možné, aby se zdrojový kód stal součástí URL, což opět zjednoduší jeho sdílení (a navíc si nemusí webová aplikace nic pamatovat).
Obrázek 6: Editor schémat a diagramů realizovaný formou webové aplikace (Diagrams.net, původním jménem draw.io).
Obrázek 7: Takto vypadá rozhraní v „klasickém“ režimu nástroje GeoGebra, jenž je opět postavený na webových technologiích.
3. Pískoviště pro první seznámení s vlastnostmi zvoleného programovacího jazyka a pro sdílení kódu
V dalších kapitolách se seznámíme s některými „pískovišti“ (playground). Opět se jedná o prostředí realizované (z pohledu uživatele) ve webovém prohlížeči, ovšem na rozdíl od plnohodnotných integrovaných vývojových prostředí zde nenalezneme všechny v současnosti očekávané vlastnosti (například plnohodnotný debugger atd.). Ovšem i přesto jsou pískoviště poměrně často používána, například při výuce nebo při zkoušení vlastností programovacích jazyků. S trochou nadsázky je možné říci, že podobná pískoviště existují pro prakticky všechny moderní programovací jazyky, což je ostatně jen dobře, protože nový jazyk je možné si díky tomu velmi snadno a rychle vyzkoušet i bez nutnosti jeho instalace, konfigurace, konfigurace vývojového prostředí, konfigurace LSP (Language Server Protocol) atd. Mezi výhody mnoha pískovišť patří i možnost sdílení kódu s dalšími uživateli (většinou postačuje pouze sdílet adresu/URL s kódem).
Obrázek 8: Prostředí Quite BASICu, které se snaží o reinkarnaci klasického BASICU, ovšem ve webovém ekosystému. Jedná se vlastně o poněkud sofistikovanější pískoviště.
4. Co lze od webového pískoviště očekávat?
Prakticky všechna webová pískoviště nabízí zhruba podobné funkce. Zejména je vlastní překlad (pokud se jedná o kompilované jazyky) a i spuštění testovaného kódu izolováno od ostatních aplikací, které běží na uživatelově počítači. To je realizováno dvěma způsoby – překladem/spuštěním/interpretací v rámci webového prohlížeče (méně časté) nebo překladem a spuštěním na serveru. To mj. znamená (minimálně z pohledu uživatele) bezpečnější prostředí. Ovšem za tuto bezpečnost se pochopitelně musí zaplatit, a to konkrétně nemožností přistupovat k lokálnímu souborovému systému, zařízením typu tiskárna atd. Navíc většinou nebudou zcela funkční ty procedury, které závisí na hodinách reálného času. A většinou je nutné zcela zapomenout například na vytvoření aplikace s grafickým uživatelským rozhraním – dostupný je pouze vstup z klávesnice, výstup na obrazovku (typicky i s grafikou) a někdy i možnost práce s myší.
Obrázek 9: OnlineGDB je pískoviště, v němž je možné si otestovat větší množství programovacích jazyků, a to včetně C, C++, Go, assembleru, ale například i Pythonu a Pascalu.
Taktéž pískoviště většinou neobsahují debugger a mnohdy ani podporu pro doplňování kódu (popř. je na poměrně primitivní úrovni v porovnání s moderními LSP servery).
5. TryAPL
Pískoviště možná poněkud překvapivě existuje i pro dnes již poněkud exotický jazyk APL. V současnosti je pravděpodobně nejpoužívanější variantou APL Dyalog, což je komerční (a nutno podotknout, že velmi dobré) vývojové prostředí, které lze získat z adresy https://www.dyalog.com/. Ovšem pro otestování možností nabízených jazykem APL není nutné si Dyalog instalovat, protože je k dispozici webové prostředí s pískovištěm. Toto prostředí je dostupné na adrese https://tryapl.org/, a lze ho spustit přímo z prakticky jakéhokoli moderního webového prohlížeče. Toto prostředí mj. nabízí i trojí způsob zápisu základních funkcí a operátorů – buď se vybírají z horního pruhu se symboly, nebo je možné použít dvojznaku následovaného klávesou Tab, popř. prefixového znaku následovaného nějakým ASCII znakem. Obě poslední možnosti jsou uvedeny v tabulce pro často používaný symbol ι:
| Dvojznak následovaný TABem | iiTab |
| Prefixový znak | `i |
Obrázek 10: Prostředí TryAPL realizované ve webovém prohlížeči.
Na rozdíl od některých výše zmíněných pískovišť, v nichž se striktně oddělovaly tři (opakované) operace editace+překlad+spuštění je TryAPL více podobné klasickým REPLům. Každý zapisovaný výraz je totiž ihned po svém zadání vyhodnocen a navíc je možné se k němu vracet zpět a provádět potřebné opravy atd.
Obrázek 11: Základní funkce a operátory vypsané v nápovědě k prostředí TryAPL.
Mezi největší nevýhody v současnosti dostupné varianty TryAPL patří absence rozumného debuggeru, chybějící podpora pro vizualizaci struktury zapsaného kódu (zobrazení operací ve formě stromu, což je v APL poměrně důležité) a nemožnost importu a exportu dat, což by umožnilo využití například ve výuce pro vysvětlení operací s rastrovým obrazem atd.
Obrázek 12: Klávesové zkratky, které je možné v TryAPL používat.
6. BQN REPL a BQNPAD
Mezi velké přednosti webových pískovišť patří možnost si snadno a bez nutnosti zásahu do nastavení operačního systému otestovat různé exotické programovací jazyky. Již v předchozí kapitole jsme se ostatně s jedním takovým jazykem seznámili. Od APL je do jisté míry odvozen i programovací jazyk BQN neboli Big Query Notation. Tento jazyk je založen na použití speciálních Unicode znaků a proto není velkým překvapením, že jeho „webová varianta“ je použitelnější než textový REPL. Webové pískoviště BQN je dostupné na adrese https://mlochbaum.github.io/BQN/try.html a nabízí prakticky stejné možnosti, jako již výše zmíněné TryAPL.
Obrázek 13: Webové prostředí BQN REPLu.
V některých případech nemusí být jednoduché pravidlo vyhodnocování výrazů v BQN „funkce mají shodné priority a vyhodnocují se zprava doleva“ zcela zřejmé v případě složitějších výrazů, zejména při použití takzvaných manipulátorů. V takových případech lze použít velmi užitečnou funkci Explain dostupnou z webového prostředí, která kromě vlastního výpočtu zobrazí i pořadí vyhodnocování jednotlivých částí výrazů. Podívejme se na několik jednoduchých ukázek, v nichž budeme používat základní funkce:
Obrázek 14: Ukázka vyhodnocení výrazu 1+2.
Obrázek 15: Ukázka vyhodnocení výrazu 6×3+4 (3+4 se vyhodnotí dříve).
Obrázek 16: Ukázka vyhodnocení výrazu s několika podvýrazy v závorkách.
Poněkud složitější výraz:
Obrázek 17: Způsob vyhodnocení výrazů při výpočtu tabulky faktoriálů.
Pro programovací jazyk BQN dokonce vzniklo ještě jedno webové prostředí, které se do značné míry podobá dále popsanému Jupyter Notebooku. Toto prostředí, které lze nalézt a vyzkoušet na adrese https://bqnpad.mechanize.systems/, vypadá následovně:
Obrázek 18: Webové prostředí BQNPADu.
7. Try F#
Pískoviště pochopitelně vznikla i pro méně exotické programovací jazyky, než je APL či dokonce ještě exotičtější BQN. Dalšími jazyky v abecedě by měly být C a C++, k nim se však ještě vrátíme při popisu „plnohodnotných“ webových IDE. Pokračujme tedy dále, konkrétně popisem pískoviště určeného pro možná až zbytečně přehlížený, o to však zajímavější programovací jazyk F#. Webové rozhraní pískoviště pro F# je možné nalézt na adrese https://tryfsharp.fsbolero.io/, které vypadá následovně (mimochodem je zajímavé, že se zde používá WebAssembly):
Obrázek 19: Webové prostředí pískoviště pro programovací jazyk F#.
V porovnání s ostatními pískovišti je pískoviště pro jazyk F# vybaveno několika užitečnými technologiemi, které známe z běžných plnohodnotných IDE. Především textový editor zabudovaný do pískoviště podporuje zvýraznění syntaxe (to chybí například u pískoviště pro programovací jazyk Go), ale navíc je podporováno i automatické doplňování kódu, které je kontextové a dokonce se u nabízených funkcí zobrazuje i přesná informace o datových typech (ona by ostatně byla ostuda, kdyby tato technologie nefungovala zrovna u jazyka F#). I z tohoto důvodu se může jednat o stránku vhodnou pro první seznámení s F# (pokud se vám například nechce do Linuxu instalovat všechny závislosti, které F# ve formě nativní aplikace má).
Obrázek 20: Rekurzivní výpočet faktoriálu v jazyku F#.
Obrázek 21: Výpočet faktoriálu s využitím koncové rekurze (ta se přeloží na programovou smyčku).
Obrázek 22: Výpočet Mandelbrotovy množiny (kód převzat z Rosetta Code).
8. Go playground
Pro programovací jazyk Go vzniklo hned několik pískovišť. Rozsahem možností prakticky stejná pískoviště nalezneme na adresách https://play.golang.com/ a https://go.dev/play/. Jedná se o poměrně jednoduché webové aplikace, které obsahují vstupní textové pole pro zápis programového kódu a ovládací prvky pro naformátování kódu, jeho překlad a spuštění, pochopitelně (z pohledu uživatele) provedeného v rámci webové aplikace.
Obrázek 23: Prostředí play.golang.com. V textovém vstupním poli je zapsán program, který po svém překladu a spuštění zobrazí přímo v ploše pískoviště rastrový obrázek.
Taktéž je možné kód sdílet s ostatními uživateli – obsah zdrojového textu se uloží na serveru a je dostupný pod zadanou adresou. Určitou nevýhodou je fakt, že nefunguje automatické doplňování kódu a na chyby je uživatel upozorněn až v průběhu překladu (předtím se ovšem ještě provádí linting). Současně je možné zkoušet jen jednodušší programy nebo jednotkové testy, protože celý programový kód je uložen v jediném (virtuálním) souboru. Podrobnější popis implementace tohoto pískoviště je popsán na stránce https://go.dev/blog/playground.
Obrázek 24: Prostředí play.golang.com ve chvíli, kdy je při překladu detekována chyba ve zdrojovém kódu.
Obrázek 25: Prostředí go.dev/play, ve kterém je otevřený zdrojový kód, jenž jsme použili i na předchozích dvou screenshotech.
Obrázek 26: Rastrový obrázek vytvořený demonstračním příkladem spuštěným přímo v prostředí pískoviště.
9. Python playground
Pro programovací jazyk Python vzniklo hned několik více či méně sofistikovaných pískovišť. Jedno z nich je dostupné na adrese https://lwebapp.com/en/python-playground. Podobně jako mnoho dalších aplikací tohoto typu je na stránce s tímto pískovištěm zobrazeno okno s programátorským textovým editorem, který dokonce podporuje určitou formu automatického doplňování kódu, ovšem doplňovaná slova jsou podle všeho vybírána z pevně daného „slovníku“ s klíčovými slovy Pythonu a funkcemi ze základních modulů (například však není možné doplnit jméno funkce zapsané přímo v editoru, což celý koncept automatického doplňování poněkud snižuje).
Obrázek 27: Jeden z dostupných demonstračních příkladů otevřený a spuštěný v rámci pískoviště.
Celé pískoviště sice může na první pohled působit až primitivně, ovšem nabízí jedno velké plus, které u jiných pískovišť většinou nenajdeme – přes ovládací prvky umístěné pod plochou programátorského textového editoru je možné si nechat (stále jen v rámci pískoviště) nainstalovat vybraný balíček a ten posléze používat. Není tedy nutné, aby začátečníci, kteří si chtějí vyzkoušet nějakou knihovnu, museli tuto knihovnu instalovat lokálně přes pip, Condu atd. (což může být i přes existenci virtuálního prostředí problematické).
Obrázek 28: Tento „projekt“ používá knihovnu Numpy, která byla do pískoviště doinstalována.
Obrázek 29: Průběh instalace Matplotlibu do prostředí pískoviště.
Obrázek 30: Ovšem neradujte se předčasně, protože grafy není možné přímo zobrazit.
10. Rust playground
Dalším mainstreamovým programovacím jazykem v abecedě je Rust. I pro tento jazyk pochopitelně vzniklo pískoviště (resp. více pískovišť). V tomto článku si ve stručnosti popíšeme oficiální pískoviště, které je dostupné na adrese https://play.rust-lang.org/. Na rozdíl od pískovišť zmíněných v předchozích kapitolách se v případě Rustu (konečně!) jedná o poměrně sofistikovaný produkt, který kromě základní trojice funkcí Edit→Compile→Run nabízí uživatelům i některé další užitečné nástroje, a to pochopitelně opět bez nutnosti lokální instalace Rustu na počítač uživatele.
Obrázek 31: Uživatelské rozhraní pískoviště pro Rust.
Především je možné si vybrat verzi překladače a runtime, což je (resp. přesněji řečeno v minulosti bylo) u Rustu velmi důležitá operace. Kromě vlastního překladu (a spuštění) testovaného programu je navíc možné si nechat zobrazit výsledek překladu původního kódu do assembleru, zobrazit si výsledek překladu do různých mezikódů (LLVM, MIR atd.) a dokonce – což je z popisovaných jazyků opět specifické právě pro Rust – existuje nástroj pro zobrazení zdrojového kódu, který vznikne po expanzi maker.
Obrázek 32: V dolní části pískoviště je zobrazen výsledek expanze makra println!.
Samotný programátorský editor je konfigurovatelný, takže je například možné si vybrat modální Vimovské ovládání, ovládání s využitím klávesových zkratek Emacsu atd. A nesmíme zapomenout ani na možnost nechat si zdrojový kód naformátovat podle oficiálně doporučovaných pravidel nebo ho nasdílet s dalšími kolegy přes tlačítko Share. Citelně ovšem chybí automatické doplňování kódu, nápověda k funkcím a makrům a navíc zde nenajdeme ani debugger, takže se stále jedná pouze o pískoviště a ne o IDE.
Obrázek 33: Nastavení vlastností pískoviště.
Obrázek 34: Výsledek překladu do assembleru (neoptimalizovaná varianta kódu).
11. Univerzální vs. specializovaná integrovaná vývojová prostředí
V dalších kapitolách se zaměříme na popis webových prostředí, které je možné (i když někdy s přimhouřením obou očí) považovat za skutečná webová integrovaná vývojová prostředí. Tato prostředí lze rozdělit do dvou skupin. V první skupině se nachází univerzální IDE, která lze použít pro vývoj v mnoha podporovaných programovacích jazycích. A ve druhé skupině jsou IDE specializovaná pouze na jediný jazyk, popř. na jediný ekosystém (například JavaScript+CSS+HTML). Již dopředu je vhodné říci, že IDE popisovaná dnes nelze považovat za plnohodnotná IDE, která by dokázala nahradit komerční produkty typu IntelliJ IDEA, Xcode atd. nebo „jen“ programátorské editory doplněné a vhodné pluginy a LSP servery (Emacs, Vim, VSCode).
Obrázek 35: Dnes již poněkud staromódní, ale stále funkční Eclipse IDE; zde konkrétně s nainstalovaným pluginy pro práci s Pythonem.
12. Jupyter notebook
V článku o webových vývojových prostředích nesmíme zapomenout ani na nástroj nazvaný Jupyter Notebook, který uživatelům (a zdaleka se nemusí jednat pouze o vývojáře) používajícím programovací jazyk Python (popř. některý další programovací jazyk zmíněný dále) zpřístupňuje interaktivní prostředí založené (opět) na použití webového rozhraní. Jupyter Notebook vznikl z neméně známého a používaného projektu IPython Notebook(s). Toto interaktivní prostředí obsahuje klasickou smyčku REPL (Read–Eval–Print–Loop), což mj. znamená, že se jednotlivé výrazy zapsané uživatelem mohou ihned vyhodnocovat s prakticky okamžitou zpětnou vazbou. Navíc však nástroj Jupyter Notebook dokáže do okna prohlížeče vykreslovat tabulky, grafy či různé obrázky, a to jak s přímým využitím předaných dat (vektory či sekvence čísel), tak i při specifikaci funkce, jejíž průběh se má vykreslit (existují zde ovšem některá omezení). Třešničkou na dortu je podpora pro práci se vzorci psanými v TeXu či LaTeXu, tvorba slajdů, sdílení „živého“ zdrojového kódu atd.
D
Obrázek 36: Použití Pythonu v Jupyteru při výpočtu fraktálů. Složitější numerické výpočty jsou jednou z oblastí, v níž by bylo výhodnější použít jiný programovací jazyk, resp. přesněji jeho jádro propojené s Jupyterem (Julia, Go, C/C++).
Zdroj
Celé grafické uživatelské rozhraní Jupyter Notebooku napodobuje diář (notebook), do kterého se zapisují jak poznámky, tak i případný programový kód a jeho výsledek, takže se tento systém může hodit i pro tvorbu (interaktivních) prezentací, použití sdílené pracovní plochy, zápis postupů, na nichž jsou jednotlivé výpočty založeny atd. Ostatně v tomto ohledu není přístup zvolený autory nijak nový ani přelomový, protože například i populární Matlab používá podobnou technologii (i když založenou na jiném programovacím jazyku)
Obrázek 37: Dva způsoby, jakými je možné Jupyter rozšířit o další jazyky: nepřímo přes IPython a přímo nativním kernelem.
Zdroj: How IPython and Jupyter Notebook work
Nástroj Jupyter Notebook je založen na klasické technologii klient-server, kde klientem je webový prohlížeč spuštěný u uživatele (či uživatelů) a serverem je Jupyter s přidaným modulem (takzvaným kernelem) pro zvolený programovací jazyk nebo jazyky. Výraz, popř. blok výrazů představujících programový kód napsaný ve zvoleném programovacím jazyce, je po stlačení klávesové zkratky Shift+Enter přenesen na server, kde je zpracován a výsledek je poslán zpět do prohlížeče.
Obrázek 38: Programové zobrazení textu v Markdownu přímým zavolánímfunkce display.
JavaScriptový kód na straně prohlížeče zajistí interpretaci získaných výsledků a jejich zařazení na správné místo do dynamické webové stránky (jedná se vlastně o variantu na dnes tak populární SPA – Single-Page Application se všemi přednostmi a pochopitelně i zápory, které toto řešení přináší). Výsledky poslané serverem na klienta mohou být ve skutečnosti různého typu; typicky se jedná o fragment HTML (tabulky atd.), obrázek typu SVG (graf, histogram), rastrový obrázek (graf získaný například ze systému R), vzorec vykreslený z TeXového či LaTeXového zdrojového kódu, animace či video (různé formáty) apod. Samotná architektura nástroje Jupyter je otevřená a poměrně snadno rozšiřitelná, což znamená, že je v případě potřeby možné přidat například další typy grafů apod.
Obrázek 39: Použití MathML již vede k mnohem lepším výsledkům.
13. Compiler Explorer
Dalším integrovaným vývojovým prostředím (jestli se v tomto případě vůbec dá o IDE mluvit) je Compiler Explorer. Jedná se o webovou aplikaci dostupnou na adrese https://godbolt.org/, která dokáže přeložit zdrojové kódy napsané v různých programovacích jazycích buď do assembleru zvoleného mikroprocesoru nebo (pro určité vybrané jazyky) do bajtkódu příslušného virtuálního stroje. Překlad je přitom proveden vybraným překladačem (podle zvoleného jazyka existuje jen jeden překladač nebo na druhé straně spektra i několik desítek překladačů), který je navíc nabízen v různých verzích, takže je například možné porovnat, jak se způsob překladu postupně měnil.
Obrázek 40: Takto vypadá překlad zdrojového kódu zapsaného v Rustu (demonstrační příklad s jednoduchým pattern matchingem) do assembleru. Korespondující řádky zdrojového kódu a instrukcí assembleru jsou v tomto případě zvýrazněny odlišnou barvou podkladu.
Compiler Explorer si ovšem v případě potřeby můžete spustit i lokálně s využitím kódu a konfigurace získaného z tohoto repositáře.
Již název projektu Compiler Explorer naznačuje, že umožňuje překládat zdrojové kódy napsané v některém z překládaných (kompilovaných) jazyků do assembleru s možností prohlédnutí výsledného vygenerovaného kódu. To je operace, kterou pochopitelně dokáže provést prakticky jakýkoli překladač, ovšem Compiler Explorer programátorům nabízí především velký výběr překládaných programovacích jazyků (včetně C, C++, Rustu a Go) a taktéž velký výběr překladačů, včetně různých verzí těchto překladačů (v případě C a C++ je to GCC, LLVM, MSVC, překlad do WebAssembly apod.).
Obrázek 41: Překlad prográmku napsaného v jazyce F# do assembleru x86–64 s využitím překladače dodávaného v .NETu. Povšimněte si, že v tomto konkrétním případě neexistuje vazba mezi řádky zdrojového kódu a assemblerem.
Navíc je nabízeno velké množství cílových platforem, pro které je možné provést překlad, od historických osmibitových mikroprocesorů, až po moderní x86–64, ARMv8 či RISC-V. Ovšem Compiler Explorer uživatelům navíc nabízí možnost specifikovat parametry překladu, tedy většinou zapínat a vypínat optimalizace (prováděné s ohledem na rychlost či velikost cílového strojového kódu), popř. zapínat a vypínat různá rozšíření instrukční sady či určit typ procesoru, což je v současnosti důležité pro všechny tři výše zmíněné platformy: x86–64, ARM a taktéž RISC-V.
Obrázek 43: Překlad kódu zapsaného v jazyku C, v němž se využívají „intrinsic“ vektorové instrukční sady NEON.
14. Repl.it
Při popisu webových integrovaných vývojových prostředí nesmíme zapomenout na projekt nazvaný Repl.it, jenž je dostupný na adrese https://replit.com/. Jedná se o komerční produkt, jenž je však možné používat (i když pochopitelně s omezenými funkcemi) zdarma; viz též https://replit.com/pricing, popř. Using Replit for free s podrobnějšími informacemi o omezeních volně dostupné verze. Projekt Repl.it sice ve svém názvu obsahuje zkratku REPL, ovšem ve skutečnosti jsou podporovány nejenom interpretované jazyky se smyčkou REPL, ale i programovací jazyky překládané.
Obrázek 43: Nastavení základních vlastností webového IDE.
V prostředí Repl.it je možné kromě základních věcí (správa projektu, editace zdrojových kódů atd.) používat například i debugger, popř. provést propojení s Gitem (většinou s GitHubem). Ovšem podporovány jsou do jisté míry i jednotkové testy, propojení vyvíjené aplikace s databází a další operace, o nichž se zmíníme v navazujících kapitolách.
Obrázek 44: Vytvoření nového sezení s volbou programovacího jazyka i celého ekosystému.
15. Programovací jazyky podporované prostředím Repl.it
Celý mechanismus Repl.it je postaven na obrazech operačních systémů, v nichž je vždy nainstalován a otestován jeden z podporovaných programovacích jazyků. Díky tomuto mechanismu je poměrně snadné do Repl.it přidat podporu pro prakticky libovolný další programovací jazyk – postačuje „jen“ vytvořit příslušný obraz, přidat podporu do programátorského editoru, jazyk zaregistrovat, napsat nápovědu atd. V současnosti tak toto webové programátorské prostředí poskytuje několik desítek odzkoušených programovacích jazyků a další se budou postupně přidávat. Ostatně podívejme se na tabulku, v níž jsou podporované jazyky vypsány (jen několik z nich se nachází v beta fázi vývoje, resp. přesněji řečeno nasazení):
| Clojure |
| Haskell |
| Kotlin |
| QBasic |
| Forth |
| LOLCODE |
| BrainF |
| Emoticon |
| Bloop |
| Unlambda |
| CoffeeScript |
| Scheme |
| APL |
| Lua |
| Ruby |
| Roy |
| Python |
| Node.js |
| JavaScript |
| Deno (beta) |
| Golang |
| C++ |
| C |
| C# |
| F# |
| HTML, CSS, JS |
| Rust |
| Swift |
| Python (with Turtle) |
| Basic |
| R |
| Bash |
| Crystal |
| Julia |
| Elixir |
| Nim |
| Dart |
| Reason Node.js |
| Tcl |
| Erlang |
| TypeScript |
| Pygame |
| Love2D |
| Emacs Lisp (Elisp) |
| PHP Web Server |
| SQLite |
| Java |
| PHP CLI |
| Pyxel |
| Raku |
| Scala |
| Nix |
Obrázek 45: Zpátky na stromy – podporován je i klasický a dnes již historický QBasic.
Obrázek 46: Jednoduchý výpočet prvočísel realizovaný v Pythonu.
Obrázek 47: Online nápověda ke standardní funkci.
16. Práce s projekty
Velkou předností Repl.it oproti jednodušeji navrženým pískovištím je fakt, že Repl.it umožňuje vytvořit a následně pracovat s celým projektem. Již se tedy nejedná o izolované zdrojové texty, které je možné pouze naformátovat, přeložit, spustit a nasdílet. Díky podpoře práce s celými projekty je například možné v Go či Rustu používat standardní projektové soubory (go.mod v Go, Cargo v Rustu) a nejenom to – dokonce je možné do „svého“ virtuálního souborového systému instalovat závislé knihovny, a to zcela standardním způsobem (platným pro daný programovací jazyk).
Ukažme si tuto funkcionalitu na několika screenshotech, v nichž je vytvořen (triviální) projekt pro výpočet obrazu Mandelbrotovy množiny. Výsledkem má být soubor ve formátu PNG uložený na virtuálním souborovém systému:
Obrázek 48: Jednoduchý projekt, který závisí na dvou externích knihovnách.
Obrázek 49: Editace souboru Cargo.toml přímo v prostředí webového IDE.
Obrázek 50: Instalace závislostí a tranzitivních závislostí.
Obrázek 51: Přidání druhé závislé knihovny.
Obrázek 51: Nyní je již možné projekt přeložit a spustit.
Obrázek 52: Ve virtuálním souborovém systému je nyní vidět výsledek činnosti aplikace.
17. Prostředky dostupné programátorům
Uživatelům jak placené, tak i volně dostupné verze jsou přiřazeny jen omezené prostředky, což se týká jak mikroprocesoru, tak i dostupné paměti RAM a dostupné kapacity virtuálního souborového systému. Využití těchto prostředků je pochopitelně možné sledovat a popř. si zažádat o jejich navýšení (nemám to otestováno, ale lze si například dokoupit „booster“, který zajistí až 32násobné urychlení běhu aplikací).
Obrázek 53: Zobrazení prostředků využitých vyvíjeným projektem.
18. Propojení Repl.it s GitHubem
Poslední vlastností, o které se v dnešním článku zmíníme, je propojení webového prostředí Repl.it s GitHubem. V případě, že je toto propojení nastaveno (pokud věříte oběma stranám :-), je možné projekty přímo klonovat s Gitu, popř. synchronizovat lokálně provedené změny s Gitem (přes klasické commity). Opět se jedná vlastně o v mnoha ohledech vylepšenou techniku „Share“ známou z vývojářských pískovišť.
Obrázek 54: Propojení s GitHubem.
19. Obsah navazujícího článku
V dnešním článku jsme se zabývali především pískovišti (playground), tj. většinou velmi jednoduchými webovými aplikacemi, jejichž předností je jejich dostupnost (není nutné se registrovat či platit za komerční produkt) a možnost prakticky okamžitě si otestovat možnosti a vlastnosti vybraného programovacího jazyka. Navíc je většinou možné kód sdílet, což je v kombinaci s možností jeho okamžitého spuštění velmi užitečné (mnohem lepší, než snaha o kopírování kódu do chatu nebo webového diskusního fóra). Ovšem pro seriózní práci se tato prostředí příliš nehodí, protože většinou neobsahují všechny potřebné funkce. Ovšem existují i (víceméně) plnohodnotná webová integrovaná vývojová prostředí s nimiž se seznámíme příště.
Obrázek 55: Podporovány jsou i takové exotické jazyky, jako je Biwa Scheme.
20. Odkazy na Internetu
- The Top 5 Online IDEs for In-Browser Development
https://www.developer.com/cloud/top-online-ide/ - Online IDE (Beta)
https://www.online-ide.com/ - Online C and C++
https://www.online-cpp.com/online_c_ide - Sharplab.io
https://sharplab.io/ - 12 Best Online IDE and Code Editors to Develop Web Applications
https://geekflare.com/online-code-editors/ - Try F#
https://try.fsharp.org/ - Fable.io
https://fable.io/repl3/ - FSBolero
https://tryfsharp.fsbolero.io/ - The Go Playground
https://go.dev/play/ - TryAPL Version 3.6.1
https://tryapl.org/ - Replit
https://replit.com/ - Ghostwriter
https://replit.com/site/ghostwriter - QBJS
https://boxgm.itch.io/qbjs - The Rust playground
https://play.rust-lang.org/ - Stránka s popisem různých IDE pro Python
http://quintagroup.com/cms/python/ide - Eclipse (stránka o frameworku na Fedoraproject.org)
https://fedoraproject.org/wiki/Eclipse - PyDev (hlavní stránka)
http://pydev.sourceforge.net/index.html - PyDev (download, v podstatě není zapotřebí)
http://pydev.sourceforge.net/download.html - PyDev (stránka s metainformacemi o PyDev pluginu, použita v Eclipse)
http://www.pydev.org/updates/ - PyDev (stránka s pluginem, použita v Eclipse)
https://dl.bintray.com/fabioz/pydev/4.5.4/ - Python playground
https://lwebapp.com/en/python-playground - Quite BASIC
http://www.quitebasic.com/prj/math/mandelbrot/ - Notebook interface
https://en.wikipedia.org/wiki/Notebook_interface - Jypyter: open source, interactive data science and scientific computing across over 40 programming languages
https://jupyter.org/ - The IPython Notebook
http://ipython.org/notebook.html - nbviewer: a simple way to share Jupyter Notebooks
https://nbviewer.jupyter.org/ - Video streaming in the Jupyter Notebook
https://towardsdatascience.com/video-streaming-in-the-jupyter-notebook-635bc5809e85 - How IPython and Jupyter Notebook work
https://jupyter.readthedocs.io/en/latest/architecture/how_jupyter_ipython_work.html - Jupyter kernels
https://github.com/jupyter/jupyter/wiki/Jupyter-kernels - Inside the Go Playground
https://go.dev/blog/playground - BQN online REPL
https://mlochbaum.github.io/BQN/try.html - BQNpad
https://bqnpad.mechanize.systems/ - BQN: An APL Variant from Marshall Lochbaum (mlochbaum.github.io)
https://news.ycombinator.com/item?id=24167804 - Marshall Lochbaum
https://www.aplwiki.com/wiki/Marshall_Lochbaum - BQN
https://www.aplwiki.com/wiki/BQN - Výpočet Mandelbrotovy množiny v F#
https://rosettacode.org/wiki/Mandelbrot_set#F# - Replit na Wikipedii
https://en.wikipedia.org/wiki/Replit
ČLÁNKY DO MAILU