FrontTalks: Илья Пухальский (EPAM Systems), «Веб-приложения будущего»

926 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
926
On SlideShare
0
From Embeds
0
Number of Embeds
307
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

FrontTalks: Илья Пухальский (EPAM Systems), «Веб-приложения будущего»

  1. 1. ВЕБ-ПРИЛОЖЕНИЯ БУДУЩЕГО« » Илья Пухальский
  2. 2. ВЕБ-ПРИЛОЖЕНИЯ БУДУЩЕГО« » Илья Пухальский
  3. 3. @witchfinderx 3 Илья Пухальский, EPAM Mobile Competency Center
  4. 4. Правда действительности — Мобильный веб существует — HTMLx не будет готов никогда 4
  5. 5. http://play.freeciv.org
  6. 6. Веб-приложения
  7. 7. 9 ?
  8. 8. 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
  9. 9. 11 !== Ориентировано на задачи Ориентирован на контент
  10. 10. Может это вообще не нужно?
  11. 11. North American Development Survey: Vol. II, Evans Data Corp.
  12. 12. Как так вышло?
  13. 13. DHTML 1997
  14. 14. AJAX 1999
  15. 15. JSONP 2005
  16. 16. 2005
  17. 17. 2006
  18. 18. 22 2007
  19. 19. 23
  20. 20. 2007
  21. 21. 2008
  22. 22. 2008
  23. 23. 2009
  24. 24. 2009
  25. 25. 2010
  26. 26. Look ma, no backend!
  27. 27. RISES AGAIN
  28. 28. Проблемы
  29. 29. Доступ к возможностям устройства
  30. 30. Сложная архитектура приложения
  31. 31. Тач-события и жесты совместно с другими устройствами ввода
  32. 32. Скроллинг и sticky-элементы
  33. 33. Анимации
  34. 34. Дополнительные элементы интерфейса
  35. 35. Эмуляция внешнего вида и поведения native-приложений
  36. 36. Нет быстрых и простых решений
  37. 37. Только «обходные пути»
  38. 38. Будущее
  39. 39. Диалоги http://wiki.whatwg.org/wiki/Dialogs
  40. 40. <dialog></dialog> <dialog open></dialog> <form method=dialog> dialog.showModal([anchor]); dialog.show([anchor]); dialog.close([returnValue]); dialog.onclose dialog.returnValue
  41. 41. Navigator
  42. 42. navigator.battery navigator.connection navigator.onLine
  43. 43. File API
  44. 44. 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);
  45. 45. Drag and Drop
  46. 46. <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)) ; });
  47. 47. Fullscreen API
  48. 48. document.getElementById("id").request Fullscreen(); document.getElementById("id").cancelF ullscreen();
  49. 49. Progress Events
  50. 50. <progress id="p" value="0" max="100" /> var progressBar = document.getElementById("p"), client = new XMLHttpRequest();
  51. 51. 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();
  52. 52. Forms
  53. 53. <input type="color" /> <input type="date" /> <input type="datetime" /> <input type="datetime-local" /> <input type="email" /> <input type="month" />
  54. 54. <input type="number" /> <input type="range" /> <input type="search" /> <input type="tel" /> <input type="time" /> <input type="url" /> <input type="week" />
  55. 55. <input type="file" />
  56. 56. Web Notifications
  57. 57. Webkit 64 if (window.webkitNotifications) { if (window.webkitNotifications.checkPermission() == 0) { window.webkitNotifications.createNotification( 'icon.png', 'Title', 'Content...' ); }else{ window.webkitNotifications.requestPermission(); } }
  58. 58. 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); } }
  59. 59. Web Speech API
  60. 60. 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() { ... } }
  61. 61. WebRTC
  62. 62. EcmaScript 6
  63. 63. 72 Модули
  64. 64. 73 module UniverseTest {}; module Universe { module MilkyWay {} }; module MilkyWay = 'Universe/MilkyWay'; module SolarSystem = Universe.MilkyWay.SolarSystem; module MySystem = SolarSystem; Определение
  65. 65. 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'; }; Экспорт
  66. 66. 75 import drive from Car; import {drive, miles} from Car; Импорт
  67. 67. 76 // load(moduleURL, callback, errorCallback) Loader.load('car.js', function(car) { console.log(car.drive(500, 'north')); }, function(err) { console.log('Error:' + err); }); Загрузчик модулей
  68. 68. 77 Классы
  69. 69. 78 module widgets { // ... class DropDownButton extends Widget { constructor(attributes) { super(attributes); this.buildUI(); } buildUI() { this.domNode.onclick = function(){ // ... }; } } } Пример использования
  70. 70. 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
  71. 71. Экосистема
  72. 72. Native vs Web?
  73. 73. Native + Web = ❤
  74. 74. Веб как платформа?
  75. 75. Браузер = ограничение
  76. 76. Браузер — переходное состояние
  77. 77. Google Chrome OS
  78. 78. Эволюция приложений 93 Native Mixed Web только только 2005 2020?
  79. 79. Эволюция приложений 94 Native Mixed Web только только Мы живем не в лучшее время 2005 2020?
  80. 80. Веб и есть платформа, но это уже другая история...
  81. 81. Может, эта битва и проиграна, но война еще нет
  82. 82. @witchfinderx

×