Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский (Microsoft)

442 views

Published on

Microsoft Edge -- новый браузер от Microsoft с новым движком и новым интерфейсом.
Какие цели преследует Microsoft, и что это нововведение означает для веб-разработчиков?
Что нового в движке браузера по сравнению с IE, и как он будет развиваться дальше?
Движок Edge внутри Windows 10: хостинг сайтов внутри приложений и доступ к нативной функциональности.

Дорожная карта: к чему и когда готовиться?

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Microsoft Edge и платформа веб-приложений в Windows 10 / Константин Кичинский (Microsoft)

  1. 1. Константин Кичинский Эксперт по стратегическим технологиям Microsoft Microsoft Edge и платформа веб- приложений в Windows 10
  2. 2. MICROSOFT EDGE EDGEHTML CHAKRA WEB APPS BRIDGE Новый движок Windows 10Новый браузер
  3. 3. Все меняется Новый Microsoft
  4. 4. НОВЫЙ CEO УМНОЕ ОБЛАКО ДЛЯ ВСЕГО ПЕРЕНОСИМЫЙ МОБИЛЬНЫЙ ОПЫТ НОВЫЙ ВЗГЛЯД
  5. 5. ПОМОЧЬ ЛЮДЯМ ДЕЛАТЬ БОЛЬШЕ И ДОСТИГАТЬ БОЛЬШЕГО
  6. 6. НОВЫЙ ПОДХОД ОТКРЫТОСТЬ И ПРОЗРАЧНОСТЬ ШИРОКОЕ ВЗАИМОДЕЙСТВИЕ ИННОВАЦИИ И ЭКСПЕРИМЕНТЫ
  7. 7. Новый браузер Microsoft Edge
  8. 8. …🗟🖊
  9. 9. 👇 Чего люди ожидают от браузера? 🏥 🚀 🔋 🗪 🎓
  10. 10. Правильное время двигаться дальше! Тяжкое наследие прошлого
  11. 11. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 КЛАССНЫЙ СОВРЕМЕННЫЙ ПРОРЫВНОЙ БРАУЗЕР
  12. 12. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 HTML4, ES3, CSS2 !DOCTYPE QUIRKS STRICT
  13. 13. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 IE5 QUIRKS IE7 COMPATIBILITY VIEW IE8 STANDARDS MODE CSS2.1HTML4, ES3, CSS2 !DOCTYPE x-ua-compatible content="edge"
  14. 14. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 IE8 STANDARDS MODE IE9 STANDARDS MODE CSS2.1HTML4, ES3, CSS2 HTML5, SVG, ES5 !DOCTYPE x-ua-compatible content="edge" IE5 QUIRKS IE7 COMPATIBILITY VIEW
  15. 15. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 IE5 QUIRKS IE8 STANDARDS MODE IE9 STANDARDS MODE CSS2.1HTML4, ES3, CSS2 HTML5, SVG, ES5 IE7 COMPATIBILITY VIEW !DOCTYPE x-ua-compatible content="edge" QME Quirks Mode Emulation IE10 STANDARDS MODE
  16. 16. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 IE5 QUIRKS IE8 STANDARDS MODE IE9 STANDARDS MODE IE7 COMPAT. VIEW !DOCTYPE x-ua-compatible content="edge" QME Quirks Mode Emulation IE10 STANDARDS MODE Legacy Web CSS2.1 Modern Web HTML5, SVG, ES5, CSS3HTML4, ES3, CSS2 EMIE Enterprise Mode IE11 STANDARDS MODE
  17. 17. 👿 АД ВЕБ-РАЗРАБОТЧИКА В аду плохого веб-разработчика заставляют проверять свой сайт в каждой версии каждого браузера. Включая мобильные!
  18. 18. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 КЛАССНЫЙ СОВРЕМЕННЫЙ ПРОРЫВНОЙ БРАУЗЕР ActiveX (COM/OLE) BHOs (Actions) DX Filters/Transitions VML VBScript Режимы документов (IE8) Условные комментарии …
  19. 19. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 КЛАССНЫЙ СОВРЕМЕННЫЙ ПРОРЫВНОЙ БРАУЗЕР ActiveX (COM/OLE) BHOs (Actions) DX Filters/Transitions VML VBScript Режимы документов (IE8) Условные комментарии …
  20. 20. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 КЛАССНЫЙ СОВРЕМЕННЫЙ ПРОРЫВНОЙ БРАУЗЕР ActiveX (COM/OLE) BHOs (Actions) DX Filters/Transitions VML VBScript Режимы документов (IE8) Условные комментарии … УДАЛЕНО 220k+ Уникальных строчек кода 6 режимов документов 300+ APIs
  21. 21. Я смотрел, как Джастин Роджерс, один из наших инженеров, нажимает “Enter” на коммит, который форкнет движок. Это займет около 45 минут только на обработку (просто внесение изменений, не сборку!). Когда все закончилось, в комнате стояла освобождающая тишина. Тогда мы могли только представить, что этот шаг позволит нам сделать: начать удалять код, любимое состояние катарсиса для каждого разработчика. Jacob Rossi
  22. 22. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 КЛАССНЫЙ СОВРЕМЕННЫЙ ПРОРЫВНОЙ БРАУЗЕР БОЛЬШЕ ВЕБ-СТАНДАРТОВ БОЛЬШЕ СКОРОСТИ БОЛЬШЕ НАДЕЖНОСТИ БОЛЬШЕ ПРОДУКТИВНОСТИ БОЛЬШЕ ПЕРСОНАЛЬНОСТИ БОЛЬШЕ СВЕЖЕСТИ
  23. 23. 1995 3 41 2 5.5 65 7 84.x 9 2015 9 10 11 КЛАССНЫЙ СОВРЕМЕННЫЙ ПРОРЫВНОЙ БРАУЗЕР БОЛЬШЕ ВЕБ-СТАНДАРТОВ БОЛЬШЕ СКОРОСТИ БОЛЬШЕ НАДЕЖНОСТИ БОЛЬШЕ ПРОДУКТИВНОСТИ БОЛЬШЕ ПЕРСОНАЛЬНОСТИ БОЛЬШЕ СВЕЖЕСТИ И РАСШИРЕНИЯ…
  24. 24. MSHTML СОВМЕСТИМОСТЬ СО СТАРЫМИ ВЕРСИЯМИ И ДРУГИМИ БРАУЗЕРАМИ Веб, интранет, корпоративный режим Наследие прошлого: ActiveX, BHO, … WINDOWS 8 и ранее
  25. 25. Internet Explorer 11: MSHTML СОВМЕСТИМОСТЬ СО СТАРЫМИ ВЕРСИЯМИ Веб, интранет, корпоративный режим Наследие прошлого: ActiveX, BHO, … Microsoft Edge: EdgeHTML СОВМЕСТИМОСТЬ С ДРУГИМИ БРАУЗЕРАМИ Постоянно обновляемый движок Свежий браузер для современных сайтов Без бинарных расширений (безопасность++) WINDOWS 10 и далее
  26. 26. Новый движок EdgeHTML, Chakra
  27. 27. КЛАССНЫЙ СОВРЕМЕННЫЙ СОВМЕСТИМЫЙ БРАУЗЕР ДОБАВЛЕНО 300k+ Уникальных строчек кода 49 новых больших возможностей 4200+ исправлений совместимости EdgeHTML
  28. 28. Когда просто следовать стандартам не достаточно Совместимость с другими браузерами
  29. 29. Совместимость не так проста Мобильныйвеб
  30. 30. Совместимость не так проста Мобильныйвеб
  31. 31. Microsoft Edge (EdgeHTML) Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Edge/12.0 EdgeHTML
  32. 32. User-Agent String 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
  33. 33. User-Agent String 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
  34. 34. Interop2 Interop1 Interop3 Interop0 Работало в IE11 Используется на реальных сайтах Работает в других браузерах Мы считаем, что сайты скоро начнут это использовать Реальное использование не скоро или никогда Приоритеты совместимости Запрос новых возможностей через UserVoice
  35. 35. dev.modern.ie
  36. 36. Новые возможности и обновления CSS • @supports • Flexbox standards update • dppx unit • transform-style: preserve-3d • Filter effects Storage & networking • HTTP/2 • Content security policy • Web Crypto API updates • HSTS (HTTP Strict Transport Security Media & RTC • Media capture • HLS • WebAudio • Video Tracks • WAV Audio support Input & Editing • Touch events • Pointer lock API • Media Queries L4 - Interaction • Selection API • Gamepad API JavaScript • ES6 Math, Number, String, RegExp & Object built-ins • Arrow functions, Enhanced object literal, Template strings, Default, Rest, Spread • Map, Set, Weakmap, __proto__, Proxies • Let, Const, Promises, Classes DOM & Graphics • SVG foreignobject • SVG attribute animation • Complete WebGL support • DOM event constructors • DOM Level 3 XPath Shipped Preview Release In development
  37. 37. Chakra Возможности железа Многопоточность JIT Многоуровневая компиляция Оптимизация Реальные сценарии (минификация) Встраивание функций Работа с массивами Сборка мусора Asm.js ES’15 I18N SIMD ES’16
  38. 38. Benchmarks 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 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
  39. 39. about:flags
  40. 40. MSHTML.dll JSCRIPT9.dll СОВМЕСТИМОСТЬ СО СТАРЫМИ ВЕРСИЯМИ EdgeHTML.dll Chakra.dll СОВМЕСТИМОСТЬ С ДРУГИМИ БРАУЗЕРАМИ WINDOWS 10 и далее
  41. 41. User Agent String Избавляйтесь от детектирования браузера Тесты Ставьте Windows 10 или используйте виртуальные машины Пожелания Используйте UserVoice, Twitter, Connect
  42. 42. Сайты превращаются… Веб-приложения
  43. 43. VS. Как люди получают доступ к сервису?
  44. 44. + Как люди получают доступ к сервису?
  45. 45. VS. Откуда люди получают доступ к сервисам?
  46. 46. Откуда люди получают доступ к сервисам? +
  47. 47. Веб-сайт HTML CSS JS ОС
  48. 48. Упакованные приложения Packaged Apps
  49. 49. HTML CSS JS ОС app HTA (1999) Prizm (2007) CEF (2009) WinRT + UWP Electron NW.js
  50. 50. HTML CSS JS ОС app HTA (1999) Prizm (2007) CEF (2009) WinRT + UWP Electron NW.js Windows FirefoxOS ChromeOS …TV Apache Cordova
  51. 51. HTML CSS JS ОС app HTA (1999) Prizm (2007) CEF (2009) WinRT + UWP Electron NW.js Windows FirefoxOS ChromeOS …TV Apache Cordova
  52. 52. Хостящиеся приложения Hosted Apps
  53. 53. Веб-сайт HTML CSS JS ОС Веб-стандарты Закрепление сайтов Расширения
  54. 54. Веб-сайт HTML CSS JS ОС Веб-стандарты Закрепление сайтов Расширения Manifest for Web Apps http://w3c.github.io/manifest/
  55. 55. W3C Standard Manifest for Web Apps Единое место для описания метаданных, связанных с веб- приложением <link rel="manifest" href="manifest.json"> Спецификация http://w3c.github.io/manifest/ { "name": "Super Web App", "short_name": "SuperWA", "start_url": "http://www.example.com", "icons": [ { "src": "tiny.png", "sizes": "70x70" }, { "src": "square.png", "sizes": "150x150" }, { "src": "apple-touch-icon-72x72-precomposed.png", "sizes": "72x72" }, { "src": "niceicon.png", "sizes": "128x128" } ], "display": "standalone", "orientation": "landscape" }
  56. 56. Веб-сайт HTML CSS JS ОС Manifest for Web Apps http://w3c.github.io/manifest/
  57. 57. Веб-сайт HTML CSS JS ОС Manifest for Web Apps http://w3c.github.io/manifest/
  58. 58. Веб-сайт HTML CSS JS .appx ОС Manifest for Web Apps http://w3c.github.io/manifest/ Windows 8.1 & Windows Phone 8.1 Web Application Template (WAT) http://wat.codeplex.com/
  59. 59. Веб-сайт HTML CSS JS .appx ОС Manifest for Web Apps http://w3c.github.io/manifest/ Windows 8.1 & Windows Phone 8.1 + Android Web Application Template (WAT) http://wat.codeplex.com/
  60. 60. Веб-сайт HTML CSS JS .appx ОС Manifest for Web Apps http://w3c.github.io/manifest/ Windows 8.1 & Windows Phone 8.1 + Android Web Application Template (WAT) http://wat.codeplex.com/ WebView Custom Bridge Native Code Ограниченный доступ к WinRT
  61. 61. Веб-сайт HTML CSS JS .appx ОС Manifest for Web Apps http://w3c.github.io/manifest/ Windows 10 Universal Windows Platform “Project Westminster” Безопасный прямой доступ к WinRT CSP, Manifest Rules WebView Native Code Windows APIs
  62. 62. HTML CSS JS .appx ОС Manifest for Web Apps http://w3c.github.io/manifest/ Windows 10 (UWP) “Project Westminster” 🗓 Windows APIs if (window.Windows) { // Create an appointment Windows.ApplicationModel.Appointments.Appointment(); } Trip to Barcelona 3/25/2015 All Day Notes: Return to work Безопасный прямой доступ к WinRT CSP, Manifest Rules
  63. 63. DEMO Хостящееся веб-приложение
  64. 64. Веб-сайт HTML CSS JS .appx ОС Manifest for Web Apps http://w3c.github.io/manifest/ Windows 10 (UWP) WebView API addWebAllowedObject clearTemporaryWebDataAsync Безопасный прямой доступ к WinRT CSP, Manifest Rules WebView Native Code Windows APIs "MSWebViewNewWindowRequested" "MSWebViewPermissionRequested"
  65. 65. Я не хочу завязываться на WinRT? И как же веб-стандарты? Что если…
  66. 66. Веб-сайт HTML CSS JS .appx ОС Manifest for Web Apps http://w3c.github.io/manifest/ Windows 10 Apache Cordova + UWP “Project Westminster” Безопасный прямой доступ к WinRT CSP, Manifest Rules Native Code Windows APIs
  67. 67. Текущий процесс для обновления контента Code Visual Studio Notepad++ Brackets Vim ATOM Sublime Text Emacs Push Git SVN Visual Studio Online GitHub Bitbucket Gitlab Host Amazon WS Heroku Parse Private Cloud Microsoft Azure Release
  68. 68. В ОСНОВЕ ВАШ САЙТ РАСШИРЕНИЕ ОПЫТА ПРОЦЕСС РАЗРАБОТКИ Доступ к UWP APIs и нативному коду в «оболочке» Практически без изменений Вы управляете кодом приложения в любой момент
  69. 69. EdgeHTML.dll Chakra
  70. 70. MICROSOFT EDGE EDGEHTML CHAKRA WEB APPS BRIDGE Новый движок Windows 10Новый браузер
  71. 71. Развитие веб-платформы Улучшенная интероперабельность Новый движок в Microsoft Edge — insider.windows.com Всегда свежий (4200+ багов совместимости с браузерами исправлено) Новые возможности Более 40 новых веб-стандартов (ECMAScript6, HTTP2, WebGL, …) Открытый процесс: следите на dev.modern.ie или спрашивайте в @MSEdgeDev Меньше границ между сайтами и приложениями Разрешить хостящимся веб-приложениям доступ к Universal APIs Улучшения в WebView и инструментах для Cordova
  72. 72. RoadMap Windows 10 как сервис 3млн.+ Windows Insiders Запуск Windows 10 RTM – летом 2015 1млрд. устройств через 2-3 года Microsoft Edge Независимое регулярное обновление После RTM Windows 10:  Расширения  Дополнительные сценарии с Cortana  Object RTC, Pointer lock  Новые технологии
  73. 73. Константин Кичинский Эксперт по стратегическим технологиям, Microsoft @kichinsky, konkich@microsoft.com Microsoft Edge и платформа веб-приложений в Windows 10
  74. 74. ©2015 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

×