C im Browser ausführen

C im Browser

Eigentlich ist es eher ungewöhnlich, C (oder C++) Programme im Browser auszuführen. Browser führen nur JavaScript oder Dart aus (im Chrome-Browser jedenfalls, oder mit JavaScript). Mehrere Jahre lang gab es Flash, bis es in Browsern verschwand, nachdem Mobiltelefone explizit die Ausführung von nativen Flash-Anwendungen blockierten.
Dennoch kann man immer noch Flash-Apps für Mobilgeräte entwickeln und zwar mit Adobe Air.

Das Nichtausführen von Flash auf Handys hat das Programm also auch in den Browsern getötet. Eigentlich schade, denn man konnte in den Browsern wirklich elegante User-Interfaces kodieren. Der Blumenhändler Interflora hatte 2002/2003 ein elegantes Flash UI – es sah eher aus, wie eine Windows-Oberfläche, als wie eine Website.
Ein weiteres Opfer dieser Ära waren die Java Applets, die in Browsern ausgeführt wurden. Obwohl Java zur gleichen Zeit wie das Web entstand, litt es unter mangelnder Sicherheit. Heute kann nur JavaScript in Browsern ausgeführt werden.

JavaScript

JavaScript hat sich von einem sehr hässlichen Entlein um die Jahrhundertwende in eine sehr mächtige und elegante Sprache entwickelt. Ich bezweifle stark, dass sie ersetzt wird, aber bis vor kurzem war sie wirklich sehr langsam. Ab 2005, als Google Maps erschien, wurde JavaScript immer schneller – JavaScript-Engines konkurrierten mit Browser-Engines, um zu sehen, wer die Nase vorn hat.

Vor vier Jahren erschien eine einfachere Version von JavaScript, die sich asm.js nannte. Ein Transpiler ist ein Programm, das eine Sprache in eine andere konvertiert. In diesem Fall ist der Transpiler ein Programm mit dem Namen Emscripten. Es benutzt die LLVM Technologie, um C/C++ zu JavaScript in asm.js Format zu konvertieren.

Emscripten ausführen

Es läuft auf allen Plattformen, also auf Windows, Macosx und Linux. Ich habe das Windows-Installationsprogramm durchgeführt, das Programm heruntergeladen und 400 MB an Dateien installiert. Nach der Installation öffnen Sie eine Befehlszeile und tippen Folgendes ein:

emsdk list
 

Das produziert eine lange Liste mit verfügbaren und installierten Tools. Auf meinem Windows 10 hatte ich clang-e135.0-64bit, Python 23.7.5.3-64bit, emscripten-1.35.0 und sdk-1.35.0-64bit installiert. Sie müssen Python installiert haben, um einige der Tests durchzuführen, aber andere müssen nur kompiliert und ausgeführt werden.

Ich folgte den Anweisungen, um es für Visual Studio 2010 zu konfigurieren, aber es funktionierte in VS 2015 nicht ganz richtig. Meines Erachtens handelt es sich eher um ein Konfigurations-Problem. Doch nach der Festlegung der drei Registry-Werte, die unten erwähnt werden, konnte ich aus der Befehlszeile kompilieren.

Konfiguration

Auf Windows gibt es drei Werte, die in der Registry eingestellt werden müssen. Keine Angst! Benutzen Sie einfach den Befehl setx, anstatt die Registry manuell zu bearbeiten. Sie werden in Manually Integrating Emscripten von Visual Studio aufgeführt.

Diese drei sind CLANG_BIN, EMSCRIPTEN und EMCC_WEBBROWSER_EXE.
CLANG_BIN ist, wo sich clang.exe befindet. Ich habe Emscripten in meine D:\program files installiert – der komplette Pfad also D:\Program Files\Emscripten\clang\e1.35.0_64bit und der Befehl lautete entsprechend

SETX CLANG_BIN "D:\Program Files\Emscripten\clang\e1.35.0_64bit"

Bitte beachten Sie die doppelten Anführungszeichen. Wenn Sie die auslassen, haben Sie Leerzeichen in Ihrem Pfad und erhalten folgende verwirrende Fehlermeldung. ERROR: Invalid syntax. Default option ins not allowed more than ‘2’ time(s). Weitere Details dazu gibt es auf StackOverflow – Fügen Sie also einfach doppelte Anführungszeichen in Pfade mit Leerzeichen ein.

In EMSCRIPTEN habe ich den vs_tool Folder installiert (von git- Anweisungen geklont, auf der “manually integrating” Seite – siehe Link oben).

SETX EMSCRIPTEN D:\development\emscripten

Und EMCC_WEBBROWSER_EXE war der Pfad zur Browser Exe-Datei. In meinem Fall war das Firefox, aber Sie können zum Beispiel auch Chrome benutzen.

SETX EMCC_WEBBROWSER_EXE "C:\Program Files (x86)\Mozilla Firefox\firefox.exe"

Nachdem sie diese drei eingestellt haben, öffnen Sie ein anderes Befehlszeilenfenster und wechseln in das Verzeichnis, in dem Sie Projektdateien und Quellcode erstellen möchten. Ich ging direkt in den Test-Ordner – installierte mit EmScripten – und führte die umgebungsvariable bat-Datei emsdk_env.bat aus. Dies benötigen Sie, um Python und Node auszuführen.

Kompilieren

Das erste Mal, wenn Sie emcc ausführen, um Ihr C-Programm in JavaScript zu übersetzen, braucht es etwas Zeit, da es verschiedene C-Bibliotheken kompiliert. Die nächsten Male dauert es nur noch einige Sekunden.
In den Test-Ordnern befinden sich viele C, C++ und Python Test-Scripts und Quellcode.
Ich versuchte test_egl.c mit dem Befehl

emcc test_egl.c -o te.html

Dies ergibt html und JavaScript File te.js. Wenn man -o te.html weglässt, erhält man nur die JavaScript Datei: Ein rotes Quadrat wird in einem Browser angezeigt. Nicht gerade die aufregendste Demo.

Die generierten JavaScript Files waren zwischen 488 KB und 760 KB groß. Denken Sie daran, dies beinhaltet Support für ein Konsolen-Fenster unterhalb der Arbeitsoberfläche für die grafische Ausgabe. Die so generierten JavaScript-Dateien enthalten Kommentare und sind überraschend gut lesbar, abgesehen von den Bibliotheksroutinen.

Schlussfolgerungen

Emscripten ist hervorragend und unterstützt nicht nur C und C++ Code. Es wurden weitere Bibliotheken hinzugefügt, sodass sie standardgemäß auch SQLite, SDL (die Games Library) und viele weitere erhalten.

Sobald es konfiguriert ist, ist es einfach und schnell zu benutzen. Es muss noch dringend daran gearbeitet werden, die Visual Studio Integration up-to-date zu bringen, da es nur die alte VS 2010 unterstützt.
Wie auch immer, asm.js ist nicht der letzte Schritt. Am meisten beschwerten sich die Nutzer über die Größe der Dateien, die heruntergeladen werden mussten.
Es wird gerade an einem Programm gearbeitet – WebAsssembly – das eine eigene Binärdatei bietet, die von JavaScript-Übersetzern ausgeführt werden kann. So ermöglicht es kleinere Downloads und einen schnelleren Start, da viel weniger Kompilieren und Übersetzen notwendig wird.
Sie können es ausprobieren, wenn Sie Emscripten installiert haben, indem Sie einfach Folgendes der emcc-Befehlszeile hinzufügen.

-s WASM=1 –o1

Nach dem Kompilieren mehrerer C-Bibliotheken ist die Web-Assembly-Kompilierung zwar fehlgeschlagen, aber ich denke, es ist einfach nur eine Konfigurationsoption.

Erfahren Sie mehr über Web Assembly.

 

Weitere Artikel

WordPress als Karriereweg

Vier Tipps, wie Sie Software-Bugs den Garaus machen

Mit diesen Superkräften finden Sie den richtigen Tech-Job

About David Bolton

David Bolton begann schon mit dem Programmieren, als er noch zur Schule ging und bevor es überhaupt PCs gab. Es gefiel ihm so sehr, dass er seinen Abschluss in Informatik machte. Er beschäftigt sich seit fast 35 Jahren mit dem Thema Programmieren – sowohl arbeitsbedingt als auch in seiner Freizeit. In dieser Zeit arbeitete er für Price Waterhouse, British Aerospace, MicroProse (wo Sid Maier Civilization kreiert hat), in einer gescheiterten Dotcom (HomeDirectory.com) und bei Morgan Stanley. Mehr als acht Jahre lange programmierte er Spiele, mehr als 12 Jahre Finanz-Software in London. Sein Leben beschreibt er als eine permanente Lernkurve. Er verfügt über umfangreiche Programmiererfahrung in 6502,Z80 und 68000 Assembler, Basic, Pascal, C, C++, C#, Java, PHP, SQL, Fortran, JavaScript und lernt zurzeit R. Außerdem entwickelt er heute mobile Apps in Xamarin (C#) und schreibt für Dice. Er lebt in New York (in Lincolnshire, England, nicht in den USA).
No comments yet.

Leave a Reply