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

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

20. 2005

21. 2006

22. 22
2007

23. 23

24. 2007

25. 2008

26. 2008

27. 2009

28. 2009

29. 2010

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