Erste Schritte¶

Im ersten Beispiel wird eine einfache HTML-Datei index.html mit den Standardelementen angelegt.

Nicht jeder Browser unterstützt Webcomponents vollständig. Dieses Manko lässt sich oft mit Polyfills umgehen. In diesem Beispiel wird polyfill.js und webcomponents.js verwendet. Das Alvine Frontend Framework kann als letztes über das CDN cdn.alvine.io eingebunden werden.

<!DOCTYPE html>
<html lang="de-DE">
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.polyfill.io/v2/polyfill.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-bundle.js"></script>
    </head>
    <body>

    <script>
      // Eigener Code ....
    </script>

    <script src="https://cdn.alvine.io/libs/alvine/framework/alvine.framework-snapshot.js"></script>
    </body>
</html>

In dieser Testdatei lassen sich jetzt die einzelnen Objekte der Komponente testen. Dazu einfach im Script-Bereich die gewünschten Funktionen definieren.

Testing¶

Sollte das Framework auf einem Endgerät nicht richtig funktionieren, so kann dies über die integrierten Tests geprüft werden. Mit deren Hilfe sich Fehler auf verschiedenen Plattformen aufspüren lassen. Dazu muss man einfach die Testdatei im gewünschten Browser aufrufen.

http://cdn.alvine.io/libs/alvine/framework/tests/snapshot/test.html

Im Standard wird mit der Min-Version getestet. Über den Parameter framework kann die andere Version verwendet werden:

http://cdn.alvine.io/libs/alvine/framework/tests/snapshot/test.html?framework=alvine.framework.js