Share
Onlangs op // BUILD / 2015 hebben we Vorlon.js aangekondigd - een open source, uitbreidbare, platform-agnostische tool voor het op afstand debuggen en testen van uw JavaScript. Ik had de mogelijkheid om Vorlon.js te maken met de hulp van een aantal getalenteerde technici en techevangelists bij Microsoft (dezelfde jongens die je Babylon.js hebben gebracht).
Vorlon.js wordt mogelijk gemaakt door Node.js, Socket.IO en 's avonds laat koffie. Ik wil graag met je delen waarom we het hebben gemaakt en hoe je het kunt integreren in je eigen testworkflow, en wat meer details kunt delen over de kunst van het bouwen van een JavaScript-bibliotheek zoals deze.
Met Vorlon.js kunt u JavaScript-code die op een apparaat met een webbrowser wordt uitgevoerd op afstand laden, inspecteren, testen en debuggen. Of het nu een gameconsole, een mobiel apparaat of zelfs een IoT-koelkast is, u kunt op afstand maximaal 50 apparaten aansluiten en JavaScript in elk of alle apparaten uitvoeren.
Het idee hier is dat teams van ontwikkelaars ook samen kunnen debuggen - elke persoon kan code schrijven en de resultaten zijn voor iedereen zichtbaar. We hadden een eenvoudig motto in dit project: Geen native code, geen afhankelijkheid naar een specifieke browser, alleen JavaScript, HTML en CSS worden uitgevoerd op de apparaten van uw keuze.
Vorlon.js zelf is een kleine webserver die u kunt uitvoeren vanaf uw lokale computer of die u op een server kunt installeren zodat uw team toegang heeft tot het Vorlon.js-dashboard (uw commandocentrum) en communiceert met de externe apparaten.
Het installeren van de Vorlon.js-client in uw website of app is net zo eenvoudig als het toevoegen van een enkele script-tag. Het is ook uitbreidbaar, zodat ontwikkelaars plug-ins kunnen schrijven die functies toevoegen aan zowel de client als het dashboard, zoals functieherkenning, logboekregistratie en het volgen van uitzonderingen.
Dus waarom de naam? Er zijn eigenlijk twee redenen. De eerste is omdat ik gewoon gek ben op Babylon 5 (het tv-programma). Op basis hiervan is de tweede reden dat de Vorlons een van de wijste en oudste races in het universum zijn en dus nuttig zijn als diplomaten tussen jongere rassen. Hun hulpvaardigheid inspireerde ons: voor webontwikkelaars is het nog steeds te moeilijk om JavaScript te schrijven dat betrouwbaar werkt in de verschillende apparaten en browsers. Vorlon.js probeert het een beetje makkelijker te maken.
Vorlon.js is zo ontworpen dat u het dashboard en de clienttoepassing eenvoudig kunt uitbreiden door extra plug-ins te schrijven of te installeren. U kunt het formaat wijzigen of extra panelen aan het dashboard toevoegen die bidirectioneel kunnen communiceren met de clienttoepassing. Er zijn drie plug-ins om mee te beginnen:
Logging: op het tabblad console worden consoleberichten van de client naar het dashboard gestreamd die u kunt gebruiken voor foutopsporing. Alles ingelogd console.log (), console.warn () of console.error () verschijnt in het dashboard. Zoals de F12 Dev Tool DOM-verkenner, u kunt de DOM-structuur zien, een knoop selecteren (die op het apparaat wordt gemarkeerd en de nieuwe CSS-eigenschappen bijwerken of toevoegen).
Interactiviteit: u kunt ook communiceren met de externe webpagina door code in de invoer te typen. Code ingevoerd zal worden geëvalueerd in de context van de pagina.
De DOM-inspecteur toont u de DOM van de externe webpagina. U kunt de DOM inspecteren door op knooppunten te klikken om ze te markeren op de hostwebpagina. Als u er een selecteert, kunt u ook de CSS-eigenschappen ervan bekijken en wijzigen.
Het tabblad Modernizr toont de ondersteunde browserfuncties zoals gerapporteerd door Modernizr. U kunt dit gebruiken om te bepalen welke functies daadwerkelijk beschikbaar zijn. Dit kan met name handig zijn op ongebruikelijke mobiele apparaten of dingen zoals spelconsoles.
Voer vanuit de opdrachtregel van uw knooppunt dit gewoon uit:
$ npm i -g vorlon $ vorlon
Nu heb je een server die op je lokale host draait op poort 1337. Om toegang te krijgen tot het dashboard, navigeer je gewoon naar http: // localhost: 1337 / dashboard / SESSIONID, waar SESSIONID is het ID voor de huidige dashboardsessie. Dit kan elke gewenste reeks zijn.
U moet dan één referentie toevoegen aan uw klantproject:
Houd er rekening mee dat SESSIONID kan worden weggelaten en in dit geval wordt het automatisch vervangen door "standaard".
En dat is het! Nu zal uw cliënt foutopsporingsinformatie naadloos naar uw dashboard sturen. Laten we nu een voorbeeld van een echte site bekijken.
Laten we http://www.babylonjs.com/ gebruiken voor ons voorbeeld. Eerst moet ik mijn server starten (met behulp van node start.js in de /server map). Vervolgens moet ik deze regel toevoegen aan mijn clientsite:
Omdat ik niet een definieer SESSIONID, Ik kan gewoon naar http: // localhost: 1337 / dashboard gaan. Het dashboard ziet er als volgt uit:
Kanttekening: De hierboven getoonde browser is Microsoft Edge (voorheen bekend als Project Spartan), de nieuwe browser van Microsoft voor Windows 10. U kunt uw web-apps ook op afstand testen op uw Mac-, iOS-, Android- of Windows-apparaat @ http: // dev .modern.ie /. Of probeer ook Vorlon.js.
Terug naar het: Ik zie bijvoorbeeld consoleberichten, wat handig is als ik Babylon.js debug op mobiele apparaten (zoals iOS, Android of Windows Phone). Ik kan op elk knooppunt op de DOM Explorer klikken om informatie te krijgen over CSS-eigenschappen:
Aan de clientzijde is het geselecteerde knooppunt gemarkeerd met een rode rand:
Bovendien kan ik overschakelen naar de Modernizr tab om de mogelijkheden van mijn specifieke apparaat te zien:
Aan de linkerkant ziet u de lijst met verbonden clients en kunt u de Identificeer een klant om een nummer op elk aangesloten apparaat weer te geven.
Vanaf het begin wilden we er zeker van zijn dat Vorlon.js zo blijft mobile-first en platform-agnostisch als mogelijk. Daarom hebben we besloten om open source-technologie te gebruiken die werkte in het bredere aantal omgevingen.
Onze dev-omgeving was Visual Studio Community, die je nu gratis kunt krijgen. We gebruikten de Node.js-hulpmiddelen voor Visual Studio en Azure voor de back-end. Onze front-end was JavaScript en TypeScript. Als u niet bekend bent met TypeScript, kunt u leren waarom we Babylon.js hebben gemaakt in dit blogbericht. Onlangs is Angular 2 gebouwd met TypeScript. Maar u hoeft het niet te weten om Vorlon.js te gebruiken.
Hier is een algemeen schema van hoe het werkt:
Dit zijn de onderdelen waarmee we het hebben gebouwd:
De console-plug-in werkt bijvoorbeeld op deze manier:
Accentsconagua
console.log (), console.warn () of console.error (). Deze haak wordt gebruikt om de parameters van deze functies naar het dashboard te sturen. Het kan ook orders van de dashboardkant ontvangen die het zal evalueren.Het resultaat is gewoon een externe console:
U kunt een nog beter begrip krijgen van de uitbreidbaarheid van Vorlon.js, inclusief hoe u uw eigen plug-ins kunt bouwen, op de website van Vorlon.js.
Vorlon.js is gebouwd op het idee van rekbaarheid. We moedigen u aan om bij te dragen! En we zijn nu al aan het nadenken over hoe we Vorlon.js kunnen integreren in browser dev-gereedschappen en het debuggen van web-audio.
Als je het wilt proberen, ben je slechts één klik verwijderd: vorlonjs.com. En hoe meer technische documenten er op onze GitHub staan.
Het zal je misschien een beetje verbazen, maar Microsoft heeft een heleboel gratis leren over veel open source JavaScript-onderwerpen en we zijn op een missie om nog veel meer met Microsoft Edge te maken. Bekijk mijn eigen:
Of de leerserie van ons team:
En enkele gratis tools: Visual Studio Community, Azure Trial en cross-browser testtools voor Mac, Linux of Windows.
Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ http://dev.modern.ie/.
