codeframe
1.0.0
CodeFrame ist der schnellste und einfachste Weg, um schnelle statische Webseiten zu erstellen und bereitzustellen. Es ist so konzipiert, dass er der beste Ort ist, um zu lernen, wie man Dinge für das Web im Web erstellt. Sie können es live auf CodeFrame.co ausführen.
Es ist einfach zu bedienen. CodeFrame ist in erster Linie für schnelle Experimente und für Menschen erstellt, die zum ersten Mal Code lernen. Daher meidet es die Komplexität und zusätzliche Funktionen für Einfachheit und Benutzerfreundlichkeit.
Es ist schnell. Ihre Entwicklungsumgebung sollte sich mit der Geschwindigkeit Ihrer Ideen bewegen, und ohne Build -Tooling gibt es keinen Grund, dass Codeframe nicht sofort sein kann. Ich habe Codeframe erstellt, um die Zeit von der Idee bis zum gemeinsam genutzbaren Prototyp so weit wie möglich zu verkürzen. Öffnen Sie einfach den Editor, schreiben Sie Code und teilen Sie es in einem Klick.
? Es ist Open-Source und vollständig inspektiv. Alles, was Codeframe ausführt, vom Backend -Stapel bis zum JavaScript -Code hinter dem Codeframe -Editor ist Open Source und in den Browser. Ich denke, ein lesbarer Quellcode im gelieferten Produkt macht einen Unterschied für Personen, die das Code lernen, und Codeframe priorisiert dies über zusätzliche Komplexität und geringe Effizienzgewinne mit minimierten Bündeln und proprietären Quellen.
Wenn Sie nicht speziell etwas für die Geschwindigkeit oder für die Studierenden für die Codierung benötigen, gibt es andere Tools, die für Sie möglicherweise besser funktionieren, mit mehr Funktionen. CodePen ist die klassische In-Browser-Web-IDE mit leistungsstärkeren Funktionen und Anpassungsoptionen. Codesandbox ist großartig, um mit Projekten mit Build / Bündelungsschritten zu experimentieren, und Repl. Es verfügt über eine erstaunliche Reihe von Entwicklungstools für ihre HTML-Umgebung, einschließlich der Möglichkeit, zusätzliche Dateien / Ordner und Multiplayer zu erstellen, die eine reibungslose Zusammenarbeit in Echtzeit ermöglichen.
Alles, was Sie benötigen, um Ihre eigene Version von Codeframe auszuführen, ist in diesem Open-Source-Repository. So können Sie Ihre eigene Version auf Codeframe auf Ihrem Computer oder Server ausführen.
Sie benötigen diese Tools:
git , um das Repository von Github auf Ihren Computer zu kopieren. Holen Sie sich hier Git.npm (oder sein alternatives yarn ), um Abhängigkeiten wie Express zu installieren. NPM wird normalerweise mit node.js. geliefert.ls , cd usw. um Ihren Computer bewegen.Sobald Sie diese Tools installiert und bereit haben, besteht der erste Schritt darin, dieses Git -Repository auf Ihren Computer zu klonen. Gehen Sie zu einem Verzeichnis, in dem Sie den Codeframe einrichten möchten, und führen Sie aus
$ git clone https://github.com/thesephist/codeframe.git (Wenn Sie SSH für Git eingerichtet haben und wissen, wie man es benutzt, können Sie stattdessen die git:// -URL verwenden. Wenn Sie es nicht tun, mach dir keine Sorgen.)
cd in das neue codeframe -Verzeichnis Git, das gerade erstellt wurde, und Sie sollten alle Dateien im Codeframe -Repository sehen.
$ cd codeframe/
$ ls
src/ static/ docs/ README.md LICENSE ... Versuchen wir hier, den Codeframe mit Node.js mit dem Befehl npm start zu starten.
$ npm start
...
Error: Cannot find module ' express '
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
... Dies bedeutet, dass Node.js keine express finden konnte, eine JavaScript -Bibliothek, um Webserver zu erstellen, von denen Codeframe abhängt. Installieren wir Abhängigkeiten wie Express, indem wir npm install ausführen, und versuchen Sie es erneut.
$ npm install
...
$ npm start
Codeframe running on localhost:4556 Sie können feststellen, dass NPM ein neues Verzeichnis namens node_modules/ erstellt, in dem die Abhängigkeiten von Codeframe installiert werden.
Wenn Sie den Message Codeframe running on localhost:4556 sehen, bedeutet dies, dass Sie Codeframe auf Ihrem Computer einsetzen. Gehen Sie zu Ihrem Browser und öffnen Sie die Adresse http://localhost:4556 . Dies sollte Ihrem Browser anweisen, die auf Port 4556 ausgeführte Seite (Standardport von Codeframe) auf Ihrem Computer zu finden und die Hauptseite von Codeframe zu laden.
Nachdem Sie eine Backend-Service-Datei (unter src/ ) geändert haben, können Sie den Server mit npm start (Strg + C zum Ende eines laufenden Servers) neu starten, um die Änderungen zu ermitteln. Wenn Sie Frontend -Code bearbeiten, müssen Sie nicht neu gestartet werden - laden Sie einfach die Seite im Browser neu!
Wenn Sie neugierig auf die Innenbearbeitungen von Codeframe sind, baue ich eine vollständig kommentierte Version der Codebasis auf, die hier auf Github-Seiten mit einem Tool namens Litterate verfügbar ist. Während dies ein guter Ort ist, um zu untersuchen, wie alles implementiert wird, bietet dieser Abschnitt einen Überblick über hochrangige Übersicht darüber, wie das System entworfen wird.
Alle Codeframes sind (für den Moment) ein Dateienpaar, eine HTML -Datei und eine JavaScript -Datei, die wir nur als Textbrocken behandeln können. CodeFrame speichert alle Dateien, sowohl HTML als auch JavaScript, auf die gleiche Weise auf eine Weise, die nicht geändert werden kann, sobald sie gespeichert werden können. Dies ist die unveränderliche, hashbasierte Datenbank von Codeframe.
Wenn ein Benutzer eine neue Datei oder eine neue Version einer Datei erstellt, sendet der Editor die Datei an das Backend. Das Backend erhält die Datei und Hashes sie (derzeit verwendet SHA256) und verwendet den Hash, um einen kurzen und praktisch eindeutigen Dateinamen für die Datei zu erstellen. Die Datei wird in einem Speicherort im Backend ( db/ standardmäßig) mit diesem Hashed -Dateinamen gespeichert. Dies stellt sicher, dass wir, wenn wir versucht haben, dieselbe Datei mehrmals zu speichern, nur eine Datei im Backend effektiv speichern. Da dies in der Praxis mit Codeframe viel passiert, ist dies effizient.
Jede Datei wird auf diese Weise von ihrem Hash identifiziert. Daher können wir jeden einzigartigen Codeframe definieren. So funktioniert Codeframe; Die URL jedes Codeframe enthält zwei Hashes, jeweils für HTML und JavaScript. Wenn Sie einen Codeframe anfordern, findet das Backend die Dateien, die vor der Verwendung dieser Hashes als Dateinamen gespeichert sind, gespeichert und gibt die Dateien für Ihre Anzeige an den Editor oder an den Browser zurück.
Diese Hash-basierte Datenbank von Dateien hat einige Vorteile. Die Tatsache, dass jede Datei einmal gespeichert und nie überschrieben wird, bedeutet, dass jeder Codeframe zu einem bestimmten Zeitpunkt durch die URL vollständig gekennzeichnet ist. Ihr Changelog ist effektiv Ihre Browser -Geschichte, und jeder Codeframe, den Sie teilen, bleibt genau diese Version für immer. Dies bedeutet auch, dass der Backend-Service extrem einfach bleibt-er ist ein vollständig funktionelles Design ohne Nebenwirkungen außerhalb der Datenbank, der ein unveränderlicher Schlüsselwertspeicher ist.
Die derzeit auf dem Dateisystem basierende Implementierung ist in einigen Bereichen ebenfalls zu kurz. Hauptsächlich verwendet es das FS als Speicherschicht der Datenbank. Da Dateisysteme nicht so konzipiert werden, dass sie auf diese Weise verwendet werden, können wir in großer Zahl auf einen Engpass der Skalierbarkeit treffen, in dem wir in einen anderen Schlüsselwert wie S3 von Amazon wechseln müssen. Derzeit speichern wir in der Datenbank auch inkrementelle Änderungen in jeder Datei in einer vollständig separaten Datei. Dies ist auch die Art und Weise, wie Git Änderungen umgeht, aber mit der Verwendung von Codeframe kann sich herausstellen, dass dies massiv ineffizient ist. Diese Probleme sind im Moment keine Probleme, können aber in Zukunft wichtiger werden. Zu diesem Zeitpunkt werden wir sie ansprechen.
Die Frontend User Interface von CodeFrame ist als einzelne Toruskomponente erstellt, der Codeframe -Editor ist. Dieser Editor kann Standalone wie in der Vollbild-Editor-Ansicht eines Codeframe ausführen, oder er kann als <iframe> in bestimmte zulässige Websites eingebettet werden, wie es auf der Hauptseite ist. Alles andere, was Sie am Frontend sehen, einschließlich des Restes der Startseite, ist einfach, handgeschrieben HTML, CSS und JavaScript.
Ich habe den Torus für den Bau des Frontends ausgewählt, weil (1) ich die Bibliothek geschrieben habe, also weiß ich, dass sie innen nach außen geeignet ist und es für meinen Geschmack entspricht. Das V1.0 von CodeFrame wurde in 20 Stunden über 2 Tage gebaut, sodass schnelles Prototyping eine Priorität war, während Dinge wie die Unterstützung älterer Browser kein Kernziel waren. Es war auch eine gute Chance, Torus seine Beine auszudehnen und sie in einer Produktionsumgebung zu testen.
Der gesamte Editor wird in einer einzelnen JavaScript -Datei in static/js/main.js implementiert, die Sie hier lesen können.
Für den Texteditor im CodeFrame in Desktop -Browsern verwende ich Monaco, einen Texteditor, der für den Browser aus dem Visual Studio Code Editor von Microsoft erstellt wurde. Es ist schnell, schlank und funktioniert sehr gut auf Desktop -Browsern. Monacos mobiler Support fehlt jedoch, dass wir in mobilen Browsern einen anderen Editor, Codemirror, versenden. Codemirror wird unter anderem in Chrome Devtools und Panne in großem Umfang leicht und schnell verwendet und in mobilen Browsern weitaus nutzbarer als Monaco. Die Erfahrungen der Verwendung beider Redakteure sind für die Grunderfahrung nahezu Parität, während jeder Editor einige kleinere Feature -Verbesserungen gegenüber dem anderen mit sich bringt. Sie können lesen, wie wir diese steckbare Architektur im Abschnitt "Backend" von Pluggable Editor "unten erreichen.
Der Vorschau -Bereich im Editor ist ein einfacher <iframe> , der eine Ansicht der generierten HTML + JS -Seite für den Codeframe eröffnet, sodass Sie sie so sehen können, wie er live aktualisiert wird. Heute arbeitet es völlig unabhängig vom Herausgeber, aber in Zukunft können wir einige Kommunikation zwischen den beiden hinzufügen, um schickere Funktionen wie Live -Updates zu ermöglichen.
Der Editor von CodeFrame hat nur eine einzige Kernabhängigkeit: Torus, die ein leichtes UI -Framework ist. Für die Entwicklungsgeschwindigkeit versendet Codeframe derzeit die Abhängigkeit als einfaches <script> -Tag im Editor HTML, das auf die neueste Version des NPM -Pakets auf UNPKG verweist. In Zukunft können wir Torus mit einer kompilierten Version unseres Editor -Skripts bündeln. Aber bisher hat sich UNPKG als zuverlässig genug erwiesen.
Der CodeFrame -Code -Editor -Teil ist in dieser Codebasis nicht selbst enthalten. Obwohl es hier eine Referenzimplementierung eines sehr nackten Bones-Editors gibt, der als <textarea> implementiert wird, verwendet CodeFrame, wie oben erläutert, entweder Monaco oder Codemirror als Code-Editor der Wahl, abhängig vom Client (Mobile versus-Desktop-Browser). Wir können uns in Zukunft einfach und zuverlässig zwischen diesen drei und potenziellen Herausgebern und potenziellen anderen verschieben, da der Codeframe Frontend mit dem Editor über eine kleine Reihe von APIs, die um jeden vernünftigen Code -Editor implementiert werden können, implementiert werden können. Wir nennen diesen Satz von APIs die EditorCore -Schnittstelle.
CodeFrame wird mit EditorCore -Wrappern für Monaco und Codemirror geliefert und entscheiden, je nach dem Client ein oder den anderen zu laden (wenn wir keinen Editor verwenden, wird kein Teil des Code dieses Editors im Browser geladen). Wenn wir zu einem anderen Backend zum Redakteur wechseln oder einen Editor mit einem anderen in der Zukunft austauschen würden, macht diese Wrapper -Architektur mit einer kleinen API -Oberfläche dies sehr einfach - ein paar Stunden, um die Schnittstelle um einen neuen Editor zu wickeln. Solange der Editor -Wrapper die Schnittstelle korrekt implementiert, arbeitet der Editor mit dem Rest des Codeframe.
Codeframe ist aus zwei Gründen Open-Source.
Bis zum zweiten Punkt gibt es viele Ecken von Codeframe, die rau sind und etwas Politur verwenden können. Wenn Sie ein erfahrener JavaScript -Entwickler sind und den Codeframe verbessern möchten, sind meine DMs und PRs offen.
Noch wichtiger ist jedoch, dass ich Codeframe Open-Source mit der Absicht erstellt habe, dass Newcomer der Webprogrammierung aus dem Lesen von Codeframe-Quelle lernen könnten. Wenn Sie im Repository, das Sie verwirrt, auf ein bisschen Code stoßen, können Sie ein Problem einreichen oder eine Pull -Anfrage für bessere Erklärungen, Klarstellungen oder bessere Code hinzufügen.
Ein wesentlicher Bestandteil des Codeframe ist die Bibliothek mit freundlichen Startervorlagen. Es ist vorerst ein kleines Set, aber ich möchte dies in ein Repository hochwertiger Beispielcodeframes ausbauen, mit denen Menschen leicht über neue Web-Technologien einsteigen und leicht über neue Web-Technologien erfahren können.
Wenn Sie Codeframes oder Muster haben, die Sie auf der Startseite von CodeFrame als eine weitere Startervorlage aufnehmen möchten, fügen Sie eine Datei unter starter_fixtures/ und in const STARTER_FIXTURES in src/models.js hinzu und stellen Sie eine Pull -Anforderung ein! Auf diese Weise eingerichtete Startervorlagen werden zur Bereitstellungszeit in der Datenbank eingerichtet, um sicherzustellen, dass jede laufende Version von CodeFrame eingerichtet ist.
Eine der wichtigsten Funktionen des Codeframe -Editors ist die Funktion "Reload As You". Das heißt, im Standardmodus (mit der aktivierten Funktion) wird der Editor regelmäßig den Vorschau -Bereich mit dem Code des Editors neu laden, manchmal mitten im Tippen. Dies sorgt im Allgemeinen für eine überlegene Bearbeitungserfahrung - ohne das zu wechseln, was wir tun, sehen wir das Ergebnis unseres Codes sofort, während wir bearbeiten, und diese enge Rückmeldschleife ist großartig für die Entwicklung.
In bestimmten Fällen, insbesondere beim Schreiben von JavaScript, bedeutet dies jedoch, dass die Vorschau in der Mitte des Tippens nachgeladen wird, wenn wir potenziell ungültige oder fehlerhafte JavaScript schreiben. Ein solches fehlerhaftes Verhalten, das wir versehentlich in den Vorschau -Bereich neu laden könnten, ist eine unendliche Schleife. In bestimmten Kontexten, zum Beispiel, wenn wir for(){} und while(){} Loops schreiben, können wir in der Mitte des Tippens unseres Programms eine unendliche Schleife erstellen, die in unser Vorschau -Fenster neu geladen wird, das durch das Design den gesamten Editor -Registerkarte zum Halten mahlt und zu potenziellen Datenverlust in den im Editor erstellten Änderungen führt.
CodeFrame ist nicht der erste Editor, der darauf eingeht, und CodePen.io hat einen interessanten Ansatz, um JavaScript in einer Live-Reloading-Umgebung zu instrumentieren, um dieses Verhalten zu verhindern. Das Problem ist eine Herausforderung, da es unmöglich ist, unendliche Schleifen im allgemeinen Fall zu verhindern - es ist eine klassische Variante des Anstaltproblems. In CodePens Fall instrumentieren sie den generierten JavaScript -Code, so dass die Schleife die Schleife stoppt, wenn dieselbe Schleife für länger als einige Zeit oder Iterationen kontinuierlich ausgeführt wird. Es ist eine pragmatische, wenn auch unelegante Lösung. Glitch dagegen unternimmt nichts, um unendliche Schleifen in Live -Nachladungseinstellungen zu verhindern.
Ich habe festgestellt, dass es in der Praxis ziemlich selten ist, versehentlich Syntax-Valid-JavaScript-Code zu schreiben, der auch zu unendlichen Schleifen führt. In diesen seltenen Fällen hat Codeframe die Möglichkeit, das Nachladen von As-You-Typen im Editor zu deaktivieren. Standardmäßig folgt Codeframe Glitchs Vorrang, um JavaScript nicht zu ändern oder zu instrumentieren, um die unendliche Ausführung zu verhindern. Wenn wir mehr Anwendungsfälle begegnen, in denen dies zu einem Problem wird, können wir dieses Problem erneut besuchen.
Eine nette Nebenwirkung der Einfachheit des Codes, den Sie auf Codeframe schreiben können (kein Kompilierschritt, kein Bündelling), ist, dass die Ausgabe, die Sie in einer Vorschau-HTML-Seite erhalten, wörtlich ist, den Code, den Sie in den Editor eingegeben haben, sowie einen HTML-Code für Wrapper. Anstatt explizit eine "Export" -Taste oder ein Menüelement "Exportieren" hinzuzufügen, kann der Benutzer einfach die Vorschau öffnen und das HTML -Dokument selbst so speichern, dass sie alle erstellten Codeframes "exportieren".
Wenn Sie es genießen, Codeframe zu verwenden und das zu unterstützen, was ich in Zukunft mache, sollten Sie eine Spende an Codeframe über PayPal oder Venmo leisten.
Alternativ können Sie an einige der besten gemeinnützigen Organisationen in den CS -Bildungsraum, Khanacademy, Hack Club und Stutech spenden.
