Your SlideShare is downloading. ×

Microsoft Edge and Windows Hosted Web Apps

Angelo Gino Varrati

•

May. 01, 2016

• •

Ad

Always up-to-date
EdgeHTML
Chakra
EdgeHTML
Chakra

Ad

Performances
0
20
40
60
80
100
120
140
160
Internet Explorer 11 Microsoft Edge Chrome Canary 43.0.2369.0 Firefox Alpha 40....

Ad

Performances
0
5000
10000
15000
20000
25000
Internet Explorer 11 Microsoft Edge Chrome Canary 43.0.2369.0 Firefox Alpha 40...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Next SlideShares

Upcoming SlideShare

OBIA Installation

OBIA Installation

Loading in …3

×

Check these out next

Azure for gaming

Angelo Gino Varrati

Internet of everything: let's talk about IoT and Azure - DotNet Conf 2018

Angelo Gino Varrati

Un caso di studio sui big data - Campus Connestions Summit 2018 - #CCS18

Angelo Gino Varrati

Internet of things: dai sensori al cloud - Global Azure Bootcamp - GABRome18

Angelo Gino Varrati

4th industrial revolution and cloud computing

Angelo Gino Varrati

Hour of Code Minecraft

Angelo Gino Varrati

Introduction to Xamarin and Xamarin Forms

Angelo Gino Varrati

Microsoft Hololens (Novembre 2015)

Angelo Gino Varrati

Microsoft Edge and Windows Hosted Web Apps

May. 01, 2016

• •

Download to read offline

"Microsoft Edge and Windows Hosted Web Apps" was exposed for DotNet Abruzzo by a MSP (Microsoft Student Partners) in L'Aquila on April 28 - 2016. "Sviluppo Windows 10 e mobile a 360 gradi"

Angelo Gino Varrati

student

"Microsoft Edge and Windows Hosted Web Apps" was exposed for DotNet Abruzzo by a MSP (Microsoft Student Partners) in L'Aquila on April 28 - 2016. "Sviluppo Windows 10 e mobile a 360 gradi"

More Related Content

Microsoft Edge and Windows Hosted Web Apps

1. Always up-to-date EdgeHTML Chakra EdgeHTML Chakra
2. Performances 0 20 40 60 80 100 120 140 160 Internet Explorer 11 Microsoft Edge Chrome Canary 43.0.2369.0 Firefox Alpha 40.0a1(04-14) JetStream Benchmark (higher is better)
3. Performances 0 5000 10000 15000 20000 25000 Internet Explorer 11 Microsoft Edge Chrome Canary 43.0.2369.0 Firefox Alpha 40.0a1(04-14) Octane 2.0 Benchmark (higher is better)
4. User-Agent Strings Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25 Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
5. Microsoft Edge
6. EdgeHTML.dll Chakra
7. WebView
8. Packaged apps and tools investments • Build apps for iOS, Android & Windows • Nearly 100% shared code • Debug on any device or emulator • Use the JavaScript frameworks you love • Support for offline
9. WebView
10.  Uses the always current Edge rendering engine  Improved app performance and responsiveness  Improved App to WebView communication  Enables Windows Runtime access WebView Control
11. Microsoft Edge Bring your website experience to the Windows Store Leverage your web investments and developer workflow Full access to Universal APIs like
12. Q&AGrazie per l’attenzione!  @angelog_varrati #DotNetAbruzzo #MSPItaly Feedback sulla sessione http://tinyurl.com/mobileaq-q

Editor's Notes

In Windows 10 è stato inserito un nuovo browser: Microsoft Edge.
Nome in codice Spartan, debuttato con Windows 10 Technical Preview build 9879.
Rilasciato al grande pubblico a luglio 2015 assieme a Windows 10.
Build 2016 -> aggiornamento motore HTML5 (seconda posizione dopo chrome), windows hello, miglioramento notifiche, adblock plus, estensioni tramite store (come OneNote, Amazon, Evernote e LastPass anche se annunciate precedentemente)
La grande differenza tra IE e Microsoft Edge è l’engine che è sempre aggiornato.
IE11 è ancora disponibile ed è consigliato per tutti quei casi che prevedono contenuti web di tipo legacy (quindi non più aggiornati, ma che supportano IE), o per contenuti basati su tecnologia ActiveX o Silverlight.
In tutti gli altri casi (contenuti web più moderni), come ad esempio HTML5, ECMAScript 6, CSS3 o 4, è meglio utilizzare Edge.

Edge è sempre aggiornato, tant’è che possiamo definirlo un evergreen!
Ciò facilità anche la vita che gli sviluppatori: se vogliono sviluppare per il web, allora devono solo renderlo compatibile con le ultime release di Edge, Firefox, Chrome, Opera, etc.

EdgeHTML è il nuovo engine per il layout che è il prodotto dell’evoluzione di Trident, al quale sono stati rimossi I contenuti legacy di IE ed è stato adattato alle nuove tencologie.
In Edge è stato fatto davvero un ottimo e grande lavoro sul motore di rendering “Chakra JavaScript” che ha portato ad un notevole aumento delle performance.
Possiamo vedere come Edge primeggi sui browser concorrenti maggiori in due tipi di banchmark:

<click>

JetStream benchmark è stato creato da Apple, e simula compresse applicazioni web, EdgeHTML è circa 1,5x più prestante rispoetto a IE11.

<click>

Ha anche prestazioni paragonabili rispetto a quelle degli altri browser a 64-bit.
Secondo Octane benchmark, creato da Google, Edge è circa 2 volte più performante di IE11

<click>

Ha anche prestazioni paragonabili rispetto a quelle degli altri browser a 64-bit.
Qualunque browser web deve identificarsi quando cominucia con un server e lo fa inviando il proprio “User-agent” ad ogni richiesta. Lato server viene controllata la stringa che permette di identificare browser e S.O. in modo tale da fornire la migliore versione possibile del sito in base a queste due condizioni.

Tuttavia il web non dovrebbe funzionare in questo modo! Il server dovrebbe fornire la miglior versione disponibile indifferentemente dal browser utilizzato.

È compito dello sviluppatore inserire un JavaScript affinché venga effettuato il cosiddetto “feature testing”, ad esempio: vedere se il richiedente supporta “webaudio” e nel caso inviarlo!

A causa dei contenuti “selettivi” si è deciso di integrare all’interno di Edge uno user agent simile a quello di Chrome, in modo da ricevere I migliori contenuti disponibili.
Questa non è una novità, com’è possibile vedere dalla slide, le scritte in rosso indicano lo stesso user agent integrato all’interno di più browser.
Ragionamento simile viene affrontato anche dal lato mobile: se non era presente una versione mobile per IE11, allora veniva restituita la versione desktop!
Grazie al cambio di user-agent, ora edge riceve la versione più moderna disponibile anche su mobile.
Il passaggio da IE a Edge non ha portato solo maggior compatibilità, ma anche nuove funzioni.
Per avere un ordine di grandezza, si basti pensare che Edge porta circa 4200 miglioramenti rispetto a IE11.
Tra le nuove funzioni troviamo: HTTP/2, EcmaScript 6, etc.
La Windows Web Platform è stata costruita basandosi su Edge.
In Windows 10 viene usato lo stesso motore rendering sia nel caso in cui si usi Edge, sia una Hosted Web App!
Possiamo vedere una finestra di Edge.
<Click>
Accanto al rendering engine “EdgeHTML” che contiene tutti I miglioramenti e le funzioni precedentemente descritte,
<Click>
è presente il nuovo Chakra engine che permette di eseguire JavaScript più velocemente che mai.
<Click>
Questi due motori di rendering sono gli stessi presenti all’interno delle Windows App scritte in JS.
Per questa ragione per un web developer sarà estremamente semplice trasformare il codice di un sito web in un’app
Ci sono più modi per portare il codice web su Windows 10.

IL PRIMO CONSISTE NEL “IMPACCHETTARE UN SITO WEB” (JavaScript, HTML e CSS) all’interno di un pacchetto ed eseguirlo sul PC, questo metodo è pensato in ottica “offline first”: tutto viene eseguito localmente (tutto ciò è stato in realtà introdotto con Windows 8).

<Click>

IL SECONDO
In Windows 10 sono state introdotte le cosiddette “Hosted Web Apps” (presentate a Build2015 come Project Westminster). Questo bridge ci permette di far eseguire tutto il codice presente sul nostro server in un’app per Windows.
Questa seconda possibilità è da preferire rispetto all’impacchettamento di un sito web (per siti complessi), dato che molti siti sono basati su un complesso backend scritto in nodeJS o PHP.

<Click>

IL TERZO nasce dalla fusion dei due precedent: ovvero avere parte del contenuto offline e parte sul server.
In questo senso una WebView diventa molto utile perché scegliamo noi cosa deve essere online e cosa offline.
So let’s talk about packaged apps first.
Recentemente è stato integrato in Visual Studio anche Apache Cordova: un applicativo che utilizza JavaScript per realizzare delle app cross-platform (iOS, Android, Windows, etc.)
Qyeste app vengono renderizzate su Windows dallo stesso engine presente su edge.
Parliamo di WebView. Moltissime app presenti sullo store utilizzano JS, si pensi che può essere implementata sia all’interno di un’app scritta in JS, sia all’interno di uno XAML per mostrare del contenuto web.
Grazie ai miglioramenti portati al motore di rendering di Edge, ora JavaScript può richiamare moduli scritti in C# o C++, per far ciò il codice JS eseguito all’interno di una WebView ha facilmente accesso alle API del Runtime di Windows, come ad esempio notifiche, live tile, etc.
È inutile che precisare che una Hosted Web App sarà sempre aggiornata perché il suo codice si trova tutto lato server.
All’interno delle Hosted Web App non abbiamo bisogno di modificare il codice lato server per adattarlo a questa condizione, dato che il contenuto viene renderizzato nello stesso modo in cui lo farebbe il browsder.

Perché una Hosted Web App? Perché si comporta come tutte le app presenti sullo store: ha la propria memoria e cache (dedicate), è sotto sandbox (maggior sicurezza) e soprattutto perché può accedere alle API del Runtime di Windows.
Qui vediamo alcuni esempi di API a cui possono accedere le hosted web apps: calendario, live tile, contatti, Cortana, etc.