Scrap je tady!

Scrap je tady!


Aktualizováno dne

Příběh Scrapu

Moje cesta k programování začala se Scratchem, intuitivní platformou, která mě uvedla do světa programování. Nicméně, když jsem se pustil do JavaScriptu, čelil jsem obrovské výzvě. Zatímco Scratch poskytl solidní základ, přechod na JavaScript byl jako skok do neznáma. Tato výzva zažehla myšlenku pro Scrap, nástroj navržený pro zjednodušení přechodu z blokového programování na JavaScript.

Stáhnout Scrap

Vlastnosti

  1. Blokové programování – Zatímco Scrap podporuje přechod na textové programování, podporuje blokové i textové editory.
  2. Silně typovaný – V textovém editoru Scrap podporuje typové anotace TypeScriptu, které poskytují typovou bezpečnost. V blokovém editoru Scrap neumožní propojit bloky s nekompatibilními typy.
  3. Bloky ⇆ Kód – Scrap umožňuje převádět bloky na kód a naopak. Tato funkce je užitečná zejména pro učení syntaxe JavaScriptu.
  4. Žádný VM, žádný interpret – Scrap kompiluje váš kód do JavaScriptu, což znamená, že jej můžete spustit kdekoliv, bez Scrapu.
  5. HTML výstup – Scrap umožňuje exportovat váš kód jako HTML, což znamená, že můžete sdílet své projekty s kýmkoliv a kdekoliv.
  6. Open-source – Scrap je open-source, což znamená, že můžete přispět k jeho vývoji a vylepšit jej.

Kód × Text

ScrapScript je kódové označení pro problém nekompatibility. Jeho cílem je navrhnout podmnožinu ECMAScriptu, kterou lze převést na bloky a zpět co nejsnadněji.

Od samého začátku bylo zřejmé, že ScrapScript musí být typovaný, protože ne všechny bloky jsou kompatibilní tvarem. Dříve to bylo řešeno pomocí JSDoc, ale když byl v Scrapu 4 představen Monaco Editor, TypeScript byl mnohem užitečnější.

Nicméně, ne všechny funkce JavaScriptu budou podporovány. Třídy, symboly, regulární výrazy, moduly, množiny a mapy, undefined, template literals a mnoho dalších…

A některé ekvivalentní funkce ztratí svou odlišnou syntaxi při převodu. Příkladem může být:

object.toString();
// Po převodu na bloky a zpět
String(object);

Díky #158 jsem si uvědomil, že Date.prototype.getTime() lze implementovat.

// Tyto jsou ekvivalentní:
object.valueOf();
Number(object); // výchozí syntaxe Scrapu
+object;
object.getTime(); // pro data, #158

Inspirace

Název Scrap je kombinací slov Scratch a Snap, dvou blokových programovacích jazyků, které mě inspirovaly k vytvoření Scrapu. Snap mi dal nápad, aby bylo IDE pokročilé a výkonné, zatímco Scratch mě inspiroval k tomu, aby bylo intuitivní a snadno použitelné.

Pod pokličkou

Technologie

Scrap je kódován pomocí Rustu, TypeScriptu a Sassu.

Scrap se skládá z HTML frontendu a Rust backendu. Rust backend zpracovává základní logiku a také kompilaci uživatelského kódu do JavaScriptu, s pomocí SWC. Frontend je postaven pomocí TypeScriptu a Sassu a používá Blockly jako blokový editor. Editor kódu je poháněn Monaco Editorem.

Scrap používá technologii založenou na BlockLike.js jako engine (ne VM).

Scrap engine a SWC

Scrap Engine je založen na BlockLike.js; v dnešní době jsou kódové základny zcela odlišné a funkce se také liší.

Protože Scrap nemá VM, nějakým způsobem potřebuje zpozdit provádění bloků (jako to dělá Scratch) a řídit provádění kódu. Kompilátor se stará o většinu z toho, ale stále je třeba něco udělat za běhu – settery, gettery a vyhazování nezachytitelných chyb to dělají.

Scrap přichází s pluginem SWC, který uživatelům poskytuje lepší zážitek z kódování, protože jejich kód může být méně ošklivý. To znamená, že pokud někdo zahrne Scrap Engine a použije pouze kód napsaný v IDE, nebude to fungovat.

Podívejme se, jak engine a SWC spolupracují:

  • Async / await
    • Metody Scrap Engine jsou asynchronní
    • V IDE si uživatelé ani nevšimnou, protože SWC přidává potřebná klíčová slova
  • Settery / gettery
    • Scrap Engine potřebuje mít metody místo getterů a setterů (self.getX() a self.setX(10))
    • V IDE uživatelé používají známější syntaxi: self.x = 10
  • Řízení toku
    • Když Scrap engine potřebuje, nebo je mu řečeno, aby zastavil projekt, vyhodí Scrap.StopError
    • SWC zajišťuje, že uživatelé nemohou zachytit chybu, protože by to ztratilo účinek
  • Proměnné na obrazovce
    • Scrap engine umožňuje mít proměnné na obrazovce jako ve Scratchi
    • SWC umožňuje uživatelům deklarovat je uvnitř rozhraní Variables a přepisuje settery a gettery
  • SWC také zpracovává převod mezi bloky a textem

Monaco Editor

Monaco Editor je rozšířen, takže poskytuje:

  • TypeScript IntelliSense svázaný s prostředím Scrapu
  • varování o syntaxi nekompatibilní s bloky
  • výběr barev při použití barevných funkcí Scrapu
  • zvýraznění syntaxe zrcadlí barvy bloků

Závěr

Scrap je nástroj, který zjednodušuje přechod z blokového programování na JavaScript. Je navržen tak, aby byl intuitivní a snadno použitelný, a zároveň poskytoval pokročilé funkce pro zkušenější uživatele. Scrap je open-source, což znamená, že můžete přispět k jeho vývoji a vylepšit jej. Pokud máte zájem přispět k vývoji Scrapu, kontaktujte mě.

© 2025 Tomáš Wróbel.