Веб-приложения будущего

Дорога от первых страниц, AJAX и DHTML до HTML5. Современные проблемы разработки и дистрибуции веб-приложений. Обзор фреймворков и библиотек, облегчающих жизнь разработчику. Будущее веб-приложений и их экосистемы. Будущее веба как платформы.

Transcript

1. ВЕБ-ПРИЛОЖЕНИЯ БУДУЩЕГО « » Илья Пухальский
2. ВЕБ-ПРИЛОЖЕНИЯ БУДУЩЕГО « » Илья Пухальский
3. @witchfinderx 3 Илья Пухальский, EPAM Mobile Competency Center
4. Правда действительности — Мобильный веб существует — HTMLx не будет готов никогда 4
5. http://play.freeciv.org
8. Веб-приложения
9. 9 ?
10. 10 "...a Web page (XHTML or a variant thereof + CSS) or collection of Web "pages delivered over HTTP which use server-side or client- side "processing (e.g. JavaScript) to provide an "application-like" "experience within a Web browser." http://www.w3.org/TR/mwabp/#webapp-defined
11. 11 !== Ориентировано на задачи Ориентирован на контент
12. Может это вообще не нужно?
14. North American Development Survey: Vol. II, Evans Data Corp.
16. Как так вышло?
17. DHTML 1997
18. AJAX 1999
19. JSONP 2005
22. 22 2007
30. Look ma, no backend!
32. RISES AGAIN
33. Проблемы
34. Доступ к возможностям устройства
35. Сложная архитектура приложения
36. Тач-события и жесты совместно с другими устройствами ввода
37. Скроллинг и sticky-элементы
38. Анимации
39. Дополнительные элементы интерфейса
40. Эмуляция внешнего вида и поведения native-приложений
43. Нет быстрых и простых решений
44. Только «обходные пути»
45. Будущее
46. Диалоги http://wiki.whatwg.org/wiki/Dialogs
47. <dialog></dialog> <dialog open></dialog> <form method=dialog> dialog.showModal([anchor]); dialog.show([anchor]); dialog.close([returnValue]); dialog.onclose dialog.returnValue
48. Navigator
49. navigator.battery navigator.connection navigator.onLine
50. File API
51. function handleFileSelect(evt) { var files = evt.target.files; // FileList object for (var i = 0, f; f = files[i]; i++) { console.log(f.size, f.lastModifiedDate); } document.getElementById('files') .addEventListener('change', handleFileSelect, false);
52. Drag and Drop
53. <div draggable="true" id="id"></div> document.getElementById('id').addEventListener('drag', function (e) { e.dataTransfer.setData("Text", e.target.id); }); document.getElementById('id').addEventListener('drop', function (e) { e.preventDefault(); var data = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)) ; });
54. Fullscreen API
55. document.getElementById("id").request Fullscreen(); document.getElementById("id").cancelF ullscreen();
56. Progress Events
57. <progress id="p" value="0" max="100" /> var progressBar = document.getElementById("p"), client = new XMLHttpRequest();
58. client.open("GET", "magical-unicorns"); client.onprogress = function(pe) { if(pe.lengthComputable) { progressBar.max = pe.total progressBar.value = pe.loaded } }; client.onloadend = function(pe) { progressBar.value = pe.loaded }; client.send();
59. Forms
60. <input type="color" /> <input type="date" /> <input type="datetime" /> <input type="datetime-local" /> <input type="email" /> <input type="month" />
61. <input type="number" /> <input type="range" /> <input type="search" /> <input type="tel" /> <input type="time" /> <input type="url" /> <input type="week" />
62. <input type="file" />
63. Web Notifications
64. Webkit 64 if (window.webkitNotifications) { if (window.webkitNotifications.checkPermission() == 0) { window.webkitNotifications.createNotification( 'icon.png', 'Title', 'Content...' ); }else{ window.webkitNotifications.requestPermission(); } }
65. W3C / WHATWG 65 if (typeof Notification === 'function') { if (Notification.permission === 'granted') { var notification = new Notification( 'Title', { icon: 'icon.png', body: 'Content...' } ); }else{ Notification.requestPermission(callback); } }
66. Web Speech API
67. Web Speech API 67 if (!('webkitSpeechRecognition' in window)) { upgrade(); } else { var recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; recognition.onstart = function() { ... } recognition.onresult = function(event) { ... } recognition.onerror = function(event) { ... } recognition.onend = function() { ... } }
69. WebRTC
71. EcmaScript 6
72. 72 Модули
73. 73 module UniverseTest {}; module Universe { module MilkyWay {} }; module MilkyWay = 'Universe/MilkyWay'; module SolarSystem = Universe.MilkyWay.SolarSystem; module MySystem = SolarSystem; Определение
74. 74 module Car { // приватные var licensePlateNo = '556-343'; // публичные export function drive(speed, direction) { console.log('details:', speed, direction); } export module engine{ export function check() { } } export var miles = 5000; export var color = 'silver'; }; Экспорт
75. 75 import drive from Car; import {drive, miles} from Car; Импорт
76. 76 // load(moduleURL, callback, errorCallback) Loader.load('car.js', function(car) { console.log(car.drive(500, 'north')); }, function(err) { console.log('Error:' + err); }); Загрузчик модулей
77. 77 Классы
78. 78 module widgets { // ... class DropDownButton extends Widget { constructor(attributes) { super(attributes); this.buildUI(); } buildUI() { this.domNode.onclick = function(){ // ... }; } } } Пример использования
79. 79 var widgets = (function(global) { // ... function DropDownButton(attributes) { Widget.call(this, attributes); this.buildUI(); } DropDownButton.prototype = Object.create(Widget.prototype, { constructor: { value: DropDownButton }, buildUI: { value: function(e) { this.domNode.onclick = function(e) { // ... } } } }); })(this); class == function
80. Экосистема
81. Native vs Web?
85. Native + Web = ❤
88. Веб как платформа?
89. Браузер = ограничение
90. Браузер — переходное состояние
92. Google Chrome OS
93. Эволюция приложений 93 Native Mixed Web только только 2005 2020?
94. Эволюция приложений 94 Native Mixed Web только только Мы живем не в лучшее время 2005 2020?
95. Веб и есть платформа, но это уже другая история...
97. Может, эта битва и проиграна, но война еще нет
98. @witchfinderx