GitHub Codespaces vă permite să experimentați stive complexe de dezvoltare software chiar din browserul web. Niciun software de instalat sau configurat. Fara stres. Fără mizerie.

GitHub Codespaces Cum sa codificati direct in browserul dvs
Un gif care arată procesul de configurare a unui GitHub Codespace

În recenta conferință online GitHub Satellite, unul dintre cele mai interesante anunțuri despre produse a fost GitHub Codespaces. Ideea este să aveți un buton de cod pe fiecare depozit.

Când faceți clic pe acesta, lansează un ID VSCode complet caracteristic cu toate dependențele software necesare, inclusiv bibliotecile la nivel de sistem de operare, pentru a construi și a rula proiectul. Acest ID VSCode rulează în întregime în browserul dvs. și nu va instala niciun software sau nu va modifica nicio configurație pentru a vă încurca computerul.

Sună prea bine ca să fie adevărat? Ei bine, urmăriți segmentul principal Github Satellite despre Codespaces!

Un clip din keynote: https://youtube.com/watch?v=L618Pp0n7us

Un beneficiu cheie al Github Codespaces este cât de repede puteți aborda noi dezvoltatori pentru un proiect. Un nou dezvoltator se poate configura în câteva minute, în loc de zile, și poate începe imediat să contribuie la proiect. Este un instrument excelent de învățare pentru noi limbi, cadre și instrumente software.

Sub capotă, acesta pornește un container Docker pe un server la distanță, instalează întreaga stivă software necesară proiectului și rulează sarcini precum compilarea și depanarea în Docker-ul la distanță.

Browserul web acționează ca o interfață de utilizare frontală pentru instanța Docker. Această abordare nu necesită instalarea de software pe computerul dezvoltatorului. Dar compromisul este că toată instalarea software-ului de la sistemul de operare până la aplicația finală are loc pe server.

GitHub trebuie să pornească un server nou pentru fiecare instanță Codespaces. Acest lucru necesită o mulțime de resurse ale centrului de date. De fapt, Pagina web GitHub Codespaces are o listă de așteptare începând de astăzi (iunie 2020).

Captură de ecran 2020-05-20 la 2.38.11 AM.png

Personal, abia aștept să devină disponibile GitHub Codespaces. Dar există o mașină a timpului. Puteți experimenta toate caracteristicile în GitHub Codespaces astăzi, gratuit.

VS Codespaces

Software-ul din spatele GitHub Codespaces se bazează de fapt pe un produs Microsoft VSCode numit VS Codespaces. VS Codespaces este disponibil astăzi pentru toți utilizatorii Microsoft Azure. Și da, vă permite să deschideți depozite GitHub în VSCode IDE direct dintr-o fereastră a browserului.

În acest tutorial, vă voi arăta cum să utilizați Codespaces în propria dvs. lucrare de dezvoltare astăzi.

Pentru a face disponibile Codespaces în depozitele dvs. GitHub, trebuie doar să adăugați următorul buton HTML oriunde pe paginile dvs. web.

Când un utilizator Azure face clic pe buton, acesta îi solicită utilizatorului să se conecteze la VS Codespaces și trece utilizatorul prin deschiderea depozitului în IDE-ul online. Puteți vedea cum funcționează în exemplele din secțiunea următoare.

<p>
  <a href="https://online.visualstudio.com/environments/new?name=My%20Project&repo=username/reponame">
    <img src="https://img.shields.io/endpoint?style=social&url=https%3A%2F%2Faka.ms%2Fvso-badge">
  </a>
</p>
Exemplu HTML pentru adăugarea unui buton de lansare VS Codespaces pentru repo GitHub

VS Codespaces rulează în întregime în browserul dvs. și costă aproximativ 1 USD pe zi de lucru. Este mai ieftin decât o ceașcă de cafea la birou.

Exemple

Acum, să analizăm câteva exemple despre modul în care ați putea învăța noi abilități de programare folosind VS Codespaces.

Rust este unul dintre cele mai rapide limbaje de programare în prezent. Este votat drept cel mai iubit limbaj de programare de către utilizatorii Stackoverflow patru ani la rând.

Dar pentru a experimenta cu Rust necesită un lanț de instrumente complex de compilator, linker, manager de pachete, manager de instrumente și așa mai departe.

VS Codespaces oferă o modalitate ușoară de a invata Rugina. Doar faceți clic pe butonul VS Codespaces din acest depozit și acum aveți un proiect Rust de lucru cu care să experimentați!

1612086067 367 GitHub Codespaces Cum sa codificati direct in browserul dvs
https://github.com/second-state/learn-rust-with-github-actions

Ca limbaj de sistem, Rust este bine poziționat pentru a crea aplicații de înaltă performanță pe server. Cea mai promițătoare stivă este de a compila și rula funcții Rust într-un container WebAssembly și apoi accesa aceste funcții de înaltă performanță dintr-un cadru de aplicații web existent, cum ar fi Node.js.

Cu toate acestea, după cum puteți vedea deja, această configurare pentru „cele mai bune practici” necesită un pachet complex de software.

Dând clic pe butonul VS Codespaces din acest depozit vă oferă un proiect Node.js complet funcțional care folosește Funcții rugină în WebAssembly ca module. Puteți începe imediat să modificați codul Rust și JavaScript și să rulați aplicația Node.js din interiorul IDE al browserului web.

1612086067 454 GitHub Codespaces Cum sa codificati direct in browserul dvs
https://github.com/second-state/ssvm-nodejs-starter

Rust și WebAssembly de pe server sună bine. Dar avem de fapt un exemplu mai complet care demonstrează puterea și performanța Rust dincolo de o simplă lume de salut?

Acest depozit este un astfel de exemplu. Deschideți-l în VS Codespaces și veți avea un proiect pentru un Aplicația Rust + JavaScript care utilizează Tensorflow pentru a efectua recunoașterea imaginii. Deoarece aplicația rulează în Node.js, oferă un șablon pentru aplicații web AI-as-a-Service.

1612086068 851 GitHub Codespaces Cum sa codificati direct in browserul dvs
https://github.com/second-state/rust-wasm-ai-demo

Ce se întâmplă dacă doriți să rămâneți la limita de sângerare și să utilizați Reno bazat pe web Reno Deno în loc de Node.js bazat pe C? Ei bine, există un VS Codespaces șablon pentru executarea Deno ca funcție Azure de asemenea!

Cum functioneaza

Dacă priviți cu atenție, fiecare depozit cu VS Codespaces activat are un .devcontainer pliant. În interiorul acelui folder, Dockerfile specifică modul de construire a containerului Docker pentru mediul de dezvoltare.

De exemplu, containerul Node.js Docker se bazează pe Ubuntu Linux cu Node.js și pachetele NPM selectate preinstalate. Consultați un exemplu aici.

devcontainer.json fișier specifică configurația pentru ID-ul VSCode pe Docker-ul la distanță. De exemplu, configurează extensiile VSCode de instalat, comenzile de terminal și de depanare de utilizat și porturile gazdă către care trebuie redirecționate pentru testare și depanare.

Microsoft oferă destul de putine .devcontainer șabloane pentru a le modifica și utiliza. Acestea acoperă cele mai multe stive comune de dezvoltare software de astăzi.

Puteți personaliza în continuare experiența VSCode a utilizatorului oferind definiții de lansare și sarcini în .vscode pliant. Verifică-i!

Concluzie

Cu VS Codespaces și GitHub Codespaces când se lansează, barierele și fricțiunile pentru dezvoltarea software sunt reduse în continuare. Puteți începe cu stive complexe de software fără a părăsi browserul web. Încercați-l astăzi!

În cele din urmă, urmăriți prezentarea completă GitHub Satellite pe GitHub Codespaces.

O previzualizare a GitHub Codespaces

Abonați-vă la newsletter-ul meu și rămâneți în legătură.