Categories
Uncategorized

Nasce Web Live PreviewAvatarTim11 Giu 2020Se si la

TheMummichogblog è un partecipante al Amazon Services LLC Associates programma, un programma di affiliazione pubblicitario progettato per fornire un mezzo per siti per guadagnare tariffe pubblicitarie con la pubblicità e il link al amazon.com. Amazon, il logo di Amazon, AmazonSupply, e il logo AmazonSupply sono marchi di Amazon.com, Inc. o delle sue affiliate.

Nasce “Web Live Preview”
Avatar
Tim

11 Giu 2020

--------------------------------------------------------------------------------------------------



E noi tutti, a viso scoperto, riflettendo come in uno specchio la gloria del Signore, veniamo trasformati in quella medesima immagine, di gloria in gloria, secondo l'azione dello Spirito del Signore.

----------------------------------------------------------------------------------------------

Se si lavora su ogni tipo di app che ha un’interfaccia utente (UI) probabilmente avete sperimentato che di anello interno ciclo di sviluppo di fare un cambiamento, compilare ed eseguire l’applicazione, vedere il cambiamento non era quello che volevi, il debug di arresto, quindi rieseguire nuovamente il ciclo. A seconda dei quadri o la tecnologia in uso, ci sono opzioni per migliorare questa esperienza come Edit-and-continue, Xamarin Hot Reload, e gli editori in fase di progettazione. Naturalmente, nulla mostrerà l’interfaccia utente della vostra applicazione come … beh, la tua app!

Per ASP.NET WebForms abbiamo avuto i progettisti per un po ‘che consente di passare dalla visualizzazione del codice WebForms alla visualizzazione Progettazione per avere un’idea di ciò che l’interfaccia utente può sembrare. Come moderni quadri di interfaccia utente sono evoluti e si è basata più su frammenti o componenti di CSS / HTML / etc. questo punto di vista il design non può riflettere sempre l’interfaccia utente:

Schermata di progettista e vista renderizzata di HTML

E questi framework e librerie UI stanno diventando sempre più popolare e comune per l’esperienza di uno sviluppatore web. Noi li spediamo nella scatola e con alcuni dei nostri modelli di Visual Studio! Come abbiamo guardato alcune delle tendenze web e parlato con i clienti nei nostri laboratori di ricerca all’utente abbiamo voluto adattarsi a quella filosofia che la migliore rappresentazione della vostra interfaccia utente, dati, stato, ecc è il vostro reale applicazione in esecuzione. E così questo è ciò che stiamo lavorando al momento.

A partire da oggi è possibile scaricare la nostra anteprima di Visual Studio di estensione per una nuova modalità di modifica che stiamo chiamando “in diretta web anteprima.” L’estensione è disponibile ora così testa su oltre a Visual Studio Marketplace e scaricare / installare l’estensione “Web Live Preview” per Visual Studio 2019. Scherzi a parte, andare a fare che ora e solo fare clic su Installa, poi tornare indietro e leggere il resto. Sarà pronto per voi quando hai finito!

Utilizzando l’estensione
Dopo aver installato l’estensione, in un’applicazione Web ASP.NET ora avrete un’opzione che dice “Modifica in browser” quando clic destro su una pagina ASPX:

Screenshot del menu contestuale

Questo lancerà il browser predefinito con la tua applicazione in un modo speciale. Si dovrebbe notare immediatamente una piccola differenza in quanto la vostra vista ha alcuni adorners su di esso:

Cattura schermo di adorners sulla pagina web

In questa modalità è ora possibile selezionare in modo interattivo elementi su questo punto di vista e vedere la selezione sincronizzato con la sorgente. Anche se si seleziona qualcosa che viene da una pagina master, la sincronizzazione si aprirà la pagina in Visual Studio per accedere alla selezione.

Animazione di selezione dell’elemento

Quindi, ciò che si può dire, beh non è solo la sincronizzazione di selezione, ma fonte pure. Si può avere un controllo web e di essere selezionando quegli elementi e sappiamo che, per esempio, che è un asp: componente DataGrid. Quando si apportano modifiche alla fonte, così, sono riflessi immediatamente a applicazione in esecuzione. Numero d’informazione risparmio o nessun aggiornamento del browser succedendo:

Animazione di stili che cambiano

Quando si lavora con le cose come le pagine Razor, siamo in grado di rilevare il codice, come bene e anche interagire all’interno di quei blocchi di codice. Qui, in una pagina Razor Ho un ciclo. Si noti come la selezione viene identificato come un ciclo di codice, ma posso ancora fare alcune modifiche nel codice e vedere riflessa nel applicazione in esecuzione:

Animazione di codice che cambia

Quindi, anche nei vostri blocchi di codice all’interno del vostro HTML è possibile apportare modifiche e vederli riflessi nella vostra applicazione in esecuzione, accorciando che ciclo interno a piccoli cambiamenti nel vostro processo.

Ma aspettate, c’è di più!

Se si utilizza già strumenti per gli sviluppatori del browser si può chiedere se questa è una sostituzione completa per questo per voi. E probabilmente non è e che è di progettazione! Sappiamo sviluppatori web si basano molto su strumenti di sviluppo nei browser e stiamo sperimentando anche con un po ‘di estensione (per Edge / Chrome) che sincronizza negli strumenti dev resi vista pure. Così ora avete la sincronizzazione attraverso la rappresentazione fonte (compresi i controlli / code / static) per app reso, e con albero vista strumenti di sviluppo DOM … e in entrambe le direzioni:

Animazione di integrazione degli strumenti del browser

Abbiamo molto più da fare, quindi, essendo questa un’anteprima del nostro lavoro finora.

vincoli attuali
Con qualsiasi anteprima ci stanno per essere vincoli, ecco che sono per il momento in cui scriviamo. Abbiamo finalmente vediamo solo di essere funzionalità per gli sviluppatori web in Visual Studio senza installare qualsiasi altra cosa, quindi l’estensione è temporanea. Per ora, noi sosteniamo i tipi di progetto Web .NET Framework per WebForms e MVC. Sì, lo sappiamo, sappiamo che si desidera il supporto .NET Core e Blazor. Questo è sicuramente sulla nostra tabella di marcia, ma abbiamo voluto affrontare alcuni scenari molto noti in cui i nostri clienti hanno utilizzato WebForms vista di design per un po ‘. Ci si sente e questo è stato fatto eco nella nostra ricerca così … stiamo lavorando su di esso!

Per il codice puro modifiche al di fuori delle pagine ASPX / Razor non abbiamo una piena ‘reload caldo’ storia eppure così si dovrà aggiornare il browser nei casi in cui alcuni modelli di oggetti fondamentali stanno cambiando che si può fare affidamento su (nuove classi / funzioni / proprietà, modificati tipi di dati, etc.). Questo è qualcosa che speriamo di affrontare in modo più ampio per l’ecosistema .NET e prendere tutto quello che abbiamo imparato da clienti che utilizzano esperimenti simili che abbiamo avuto in questo settore.

L’estensione funziona con i browser a base di cromo, come i browser più recenti di Microsoft Edge e Google Chrome. Questo ci permette anche di avere un singolo interno strumenti di sviluppo del browser che maniglie che l’integrazione pure. Per utilizzare tale estensione del browser, si dovrà utilizzare la modalità sviluppatore nel browser e caricare l’estensione dal disco. Questo processo è abbastanza semplice, ma è necessario seguire alcuni passi che sono documentati in aggiunta e la rimozione estensioni a Edge. La posizione degli strumenti dev plugin è situato in C: \ Program Files (x86) \ Microsoft Visual Studio \ 2019 \ Common7 \ IDE \ Extensions \ Microsoft \ Web Live Preview \ BrowserExtension (ammesso che abbiate il default di Visual Studio 2019 percorso di installazione e assicurando si specifica comunitaria / Professional / Enterprise è stato installato). Si prega di notare che questa è anche una soluzione temporanea come siamo in fase di sviluppo di queste capacità. Eventuali estensioni finali Strumenti del browser saranno distribuiti nei negozi del browser.

Sommario
Se sei uno dei nostri clienti in grado di sfruttare questa estensione anteprima ci piacerebbe per voi di scaricare e installare e fare un tentativo. Se hai commenti o problemi, si prega di utilizzare il meccanismo di feedback di Visual Studio come che aiuta a ottenere informazioni di diagnostica per eventuali problemi che devono affrontare. Sappiamo che hai un sacco di strumenti a vostra disposizione, ma speriamo che questo web modalità di anteprima dal vivo farà parte del vostro flusso più facile. Niente da installare nel vostro progetto, nessun codice strumento specifico nell’origine, e (eventualmente) senza strumenti aggiuntivi da installare. Si prega di dare una prova e fateci sapere cosa ne pensate!

A nome del gruppo di lavoro sugli strumenti web per voi, grazie per la lettura!

Introducing “Web Live Preview”

Amazon e il logo di Amazon sono marchi di Amazon.com, Inc., o delle sue affiliate.