Microsoft Edge (Teched 2015)

69
Visão Geral sobre o Microsoft Edge DEV206

Transcript of Microsoft Edge (Teched 2015)

Page 1: Microsoft Edge (Teched 2015)

Visão Geral sobre o Microsoft Edge

DEV206

Page 2: Microsoft Edge (Teched 2015)

Quem é o palestrante?

Fabricio CataeTechnical Evangelist

@fcatae

DEV206

Page 3: Microsoft Edge (Teched 2015)

HTML5CSS

Javascript

Page 4: Microsoft Edge (Teched 2015)
Page 5: Microsoft Edge (Teched 2015)
Page 7: Microsoft Edge (Teched 2015)

EdgeHTML.DLL

Chakra.DLL

Page 8: Microsoft Edge (Teched 2015)

ChakraJS

Page 9: Microsoft Edge (Teched 2015)

20 anos de JavascriptNetscape introduziu o Javascript para seu

próprio navegador. Devido a sua versatilidade, hoje é uma linguagem utilizada em diferentes

cenários: cliente, servidor, desktop, IoT.

Page 10: Microsoft Edge (Teched 2015)

Vantagem ou Desvantagem?A linguagem Javascript possui uma natureza

dinâmica, permitindo criar novos tipos de dados em tempo de execução

Page 11: Microsoft Edge (Teched 2015)

Demo

Page 12: Microsoft Edge (Teched 2015)

function somar(a,b) {return a+b;

}

Somar

Page 13: Microsoft Edge (Teched 2015)

Javascript é diferente

var a = 10; function bar() { alert(a); var a = 20;}

bar();

a) undefinedb) 10c) 20d) 30

Page 14: Microsoft Edge (Teched 2015)

Prototype

prototype prototype prototype

Gato Animal Object

Page 15: Microsoft Edge (Teched 2015)

Javascript é o Futuro?Seria possível evoluir a linguagem Javascript e

obter melhor desempenho?

Page 16: Microsoft Edge (Teched 2015)

CompilaçãoO processo de compilação transforma o código

Javascript em um programa executável.

Page 17: Microsoft Edge (Teched 2015)

ParserO primeiro processamento transforma o código-

fonte em um conjunto de byte code.

Page 18: Microsoft Edge (Teched 2015)

ExecuçãoO código em byte-code roda de forma

interpretada

Page 19: Microsoft Edge (Teched 2015)

Como otimizar?Javascript possui um comportamento tão

dinâmico, que é difícil conseguir prever qual o tipo de dado que será utilizado.

Page 20: Microsoft Edge (Teched 2015)

Chakra Pipeline

Page 21: Microsoft Edge (Teched 2015)

box2D

Page 22: Microsoft Edge (Teched 2015)

Performance do Javascriptasm.js e WebAssembly são tecnologias que

podem melhorar o desempenho do javascript

Page 23: Microsoft Edge (Teched 2015)

Evolução do JavascriptAtualmente a maioria dos navegadores

implementa o ECMAScript 5. Novas funcionalidades foram introduzidas na versão 6.

Page 24: Microsoft Edge (Teched 2015)

EdgeHTMLDOM

Page 25: Microsoft Edge (Teched 2015)
Page 26: Microsoft Edge (Teched 2015)

1995

3 41 2 65 7 8 99 10 11

Internet Explorer

Page 27: Microsoft Edge (Teched 2015)

1995

3 41 2 IE65 7 8 99 10 11

Internet Explorer

Page 28: Microsoft Edge (Teched 2015)

1995

3 41 2 5 7 IE8 99 10 11

Internet Explorer

IE6

Page 29: Microsoft Edge (Teched 2015)

1995

3 41 2 65 7 8 IE9 10 IE11

Internet Explorer

Page 30: Microsoft Edge (Teched 2015)

Simples: A web funciona!

Page 31: Microsoft Edge (Teched 2015)

Simples: A web funciona!

Page 32: Microsoft Edge (Teched 2015)

Recursos do HTML5Existe uma série de funcionalidades disponíveis no

HTML5 que vão além da diagramação do documento.

Page 33: Microsoft Edge (Teched 2015)

SemânticaHTML

<header>

<section>

<footer>

<article>

<aside>

Page 34: Microsoft Edge (Teched 2015)

Bordas

Page 35: Microsoft Edge (Teched 2015)

Gradiente

Page 36: Microsoft Edge (Teched 2015)

Web Storage

Page 37: Microsoft Edge (Teched 2015)

Pointer Events

Page 38: Microsoft Edge (Teched 2015)

Geolocation

Page 39: Microsoft Edge (Teched 2015)

WebSocket

Page 40: Microsoft Edge (Teched 2015)

Media Capture

Page 41: Microsoft Edge (Teched 2015)

Video

Page 42: Microsoft Edge (Teched 2015)

SVG

Page 43: Microsoft Edge (Teched 2015)

Canvas

Page 44: Microsoft Edge (Teched 2015)

WebGL

Page 45: Microsoft Edge (Teched 2015)

Web Audio

Page 46: Microsoft Edge (Teched 2015)

ORTC

Page 48: Microsoft Edge (Teched 2015)
Page 49: Microsoft Edge (Teched 2015)

Simples: A web funciona!

Page 50: Microsoft Edge (Teched 2015)

Microsoft Edge

Page 51: Microsoft Edge (Teched 2015)

Video

Page 52: Microsoft Edge (Teched 2015)

SandboxUsando a API do WinRT, o Edge roda em um

contexto de segurança limitado de app.

Page 53: Microsoft Edge (Teched 2015)

64-bitsMicrosoft Edge roda nativamente em 64-bits, diminuindo o risco aos ataques feitos na Web

Page 54: Microsoft Edge (Teched 2015)

Plug-ins ActiveXNão existe mais suporte aos plug-ins baseados

na tecnologia de ActiveX. Esse é mais um motivo pelo qual o browser se torna mais seguro.

Page 55: Microsoft Edge (Teched 2015)

DesempenhoComparativo entre browsers usando os testes do Google e Apple

Page 56: Microsoft Edge (Teched 2015)
Page 57: Microsoft Edge (Teched 2015)
Page 58: Microsoft Edge (Teched 2015)

CompatibilidadeSerá que seu site é compatível com o Edge?

Page 59: Microsoft Edge (Teched 2015)
Page 60: Microsoft Edge (Teched 2015)

//modern.dev.ie

Page 62: Microsoft Edge (Teched 2015)

Problema #1

Detecção de Browser

Page 63: Microsoft Edge (Teched 2015)

Outros Problemas (além do #1)

Utilização de prefixos CSS (-webkit, -moz, ...)Bibliotecas Javascripts desatualizadas

Dependência de Plugins ActiveX

Page 64: Microsoft Edge (Teched 2015)

Web Hotline [email protected]

Page 65: Microsoft Edge (Teched 2015)

Q&A

Visite o espaço Ask the Experts, próximo dos expositores

Page 66: Microsoft Edge (Teched 2015)

Sessões relacionadas

WIN205: Hosted Web Apps: Leve seu web site para dentro de uma appWIN302: 10 Motivos para utilizar Apache Cordova no Visual Studio 2015WIN401: Conhecendo o Windows RuntimeDEV202: ASP.NET vNext, MVC 6 e alémDEV205: Diagnosticando problemas em sites Asp.Net

Page 67: Microsoft Edge (Teched 2015)

Evento de encerramento do Microsoft Insights Week 

com Satya Nadella, CEO da Microsoft.Dia 29 de setembro

AMCHAM - Rua da Paz 1431Chácara Santo Antônio - SP

Para se inscrever: http://aka.ms/satyabr

Page 68: Microsoft Edge (Teched 2015)

Continue sua capacitação

Microsoft Virtual Academy

http://aka.ms/ch9 http://aka.ms/mva

Page 69: Microsoft Edge (Teched 2015)

Fabricio Catae@fcatae