Go to hell Flash, we don't need you anymore! GothamJs

1,769 views

Published on

When back in 1996 Macromedia introduced Flash, no one suspected that this plugin will revolutionize the world of the Internet and move an open, Web-based technologies into the background. Today, after more than 15 years, situation slowly reverses - finally creating interactive websites, games or advertisements is possible without using any browser plugins. But is it enough? Michal will take us on a tour of the world's holy war between Plugins like Flash and HTML, and will attempt to answer this question, preseting poorly known HTML5 features, services and open source tools he is working on now (like http://bly.sk).

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,769
On SlideShare
0
From Embeds
0
Number of Embeds
339
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Go to hell Flash, we don't need you anymore! GothamJs

  1. 1. Go to hell Flash, we dont need you anymore! by Michał Budzynski @michalbe
  2. 2. Go to hell Flash, we dont need you anymore! by Michał Budzynski @michalbe
  3. 3. Whos that guy?@michalbe
  4. 4. Whos that guy?JavaScript developerfrom Warsaw, Poland@michalbe
  5. 5. Whos that guy? Firefox OS Team at Mozilla@michalbe
  6. 6. Whos that guy?Open web gamedeveloper@michalbe
  7. 7. Whos that guy? Author of stupid web demos@michalbe
  8. 8. Whos that guy? Resident Evil fan <3 <3 <3@michalbe
  9. 9. Whos that guy? Resident Evil fan <3 <3 <3@michalbe
  10. 10. Whos that guy? Resident Evil fan <3 <3 <3 Other stuff Resident Evil My life0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%@michalbe
  11. 11. Whos that guy? Resident Evil fan <3 <3 <3 Other stuff Resident Evil My life0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%@michalbe
  12. 12. Why I dont like Flash?@michalbe
  13. 13. Why I dont like Flash? As a user.@michalbe
  14. 14. Why I dont like Flash? As a user.@michalbe
  15. 15. Why I dont like Flash? As a developer.@michalbe
  16. 16. Why I dont like Flash? As a developer.@michalbe
  17. 17. Why I dont like Flash? As a developer. But thats not the worst thing.@michalbe
  18. 18. Why I dont like Flash? As a developer.@michalbe
  19. 19. HTML5 vs Flash@michalbe
  20. 20. HTML5 vs Flash@michalbe
  21. 21. HTML5 vs Flash@michalbe
  22. 22. HTML5 vs Flash@michalbe
  23. 23. HTML5 vs Flash 2001 DHTML FLASHKILLA!!1!!@michalbe
  24. 24. HTML5 vs Flash 2001 DHTML@michalbe
  25. 25. HTML5 vs Flash 2005 AJAX FLASH KILLER!!!@michalbe
  26. 26. HTML5 vs Flash 2010 HTML5 Flash is dead.@michalbe
  27. 27. HTML5 vs Flash@michalbe FEATURES
  28. 28. HTML5 vs Flash - features@michalbe
  29. 29. HTML5 vs Flash - features@michalbe
  30. 30. HTML5 vs Flash - Demo! features@michalbe
  31. 31. HTML5 vs Flash - features P2P connection in the browser@michalbe
  32. 32. HTML5 vs Flash - features EasyWebSocket by @jeromeetienne http://easywebsocket.org@michalbe
  33. 33. HTML5 vs Flash - features Web RTC http://www.webrtc.org/@michalbe
  34. 34. HTML5 vs Flash SERVICES@michalbe
  35. 35. HTML5 vs Flash - services Mochimedia & Kongregate@michalbe
  36. 36. HTML5 vs Flash - services BlueVia by Telefonica@michalbe
  37. 37. HTML5 vs Flash - services FlexPi by @FlyWithMonkey@michalbe
  38. 38. HTML5 vs Flash - services FlashGameLicense.com@michalbe
  39. 39. HTML5 vs Flash - services MarketJS.com@michalbe
  40. 40. HTML5 vs Flash TOOLS@michalbe
  41. 41. HTML5 vs Flash - tools@michalbe
  42. 42. HTML5 vs Flash - tools Cloud9IDE@michalbe
  43. 43. HTML5 vs Flash - tools Just a code editor@michalbe
  44. 44. HTML5 vs Flash - tools BLYSK @blyskapp http://bly.sk@michalbe
  45. 45. BLYSK@michalbe
  46. 46. BLYSK@michalbe THE MANSION
  47. 47. BLYSK – the Mansion Build system inspired by Python syntax@michalbe
  48. 48. BLYSK – the Mansion Creating new module: java -jar js.jar mansion.js foo@michalbe
  49. 49. #export foo #import bar #import fooBar as fbar (function foo(@modules) { //variables var lorem = impsum; //logic of public functions in here var hwdp = function foo_hwdp(){ bar.drink(fbar.everything); alert(ACAB!); } //and references here: return { hwdp: hwdp } })(@modules);@michalbe
  50. 50. BLYSK – the Mansion Building: java -jar js.jar mansion.js build@michalbe
  51. 51. /* BLYSK - HTML5 Animation Tool * http://bly.sk */ (function(){ /*FILE: core/bar/bar.js*/ //#export bar var barModule = (function bar() { ... }(); /*FILE: core/foo/foo.js*/ //#export foo //#import bar //#import fooBar as fbar var fooModule = (function foo(bar, fbar) { ...@michalbe })(barModule, fooBarModule);
  52. 52. BLYSK – the Mansion Demo!@michalbe
  53. 53. BLYSK – the Mansion Pros of The Mansion: 1. Performance@michalbe
  54. 54. BLYSK – the Mansion Pros of The Mansion: 1. Performance 2. Great minification of the file@michalbe
  55. 55. BLYSK – the Mansion Pros of The Mansion: 1. Performance 2. Great minification of the file@michalbe
  56. 56. BLYSK – the Mansion Pros of The Mansion: 1. Performance 2. Great minification of the file 3. Easy to manage modules@michalbe
  57. 57. BLYSK – the Mansion Pros of The Mansion: 1. Performance 2. Great minification of the file 3. Easy to manage modules 4. Commandline helpers@michalbe
  58. 58. BLYSK – the Mansion Cons of The Mansion: 1. Still too hacky & not native for JavaScript@michalbe
  59. 59. BLYSK – the Mansion Open Source! https://github.com/Blysk/The-MANSION@michalbe
  60. 60. BLYSK – modules@michalbe
  61. 61. BLYSK – modules@michalbe Jill
  62. 62. BLYSK – modules jill.on(eventName, function); jill.fire(eventName, data); jill.out(eventName, function);@michalbe
  63. 63. BLYSK – modules@michalbe
  64. 64. BLYSK – modules Barry@michalbe
  65. 65. BLYSK – modulesbarry.$ = function $(id){ var firstSign = id.charAt(0); return firstSign === . ? document.getElementsByClassName(id.replace(/./, )) firstSign === # ? document.getElementById(id.replace(/#/, )) : firstSign === < ? document.createElement(id.replace(/<|/|>/g, )) : false;}@michalbe
  66. 66. BLYSK – modules barry.$(#domID); barry.$(.domClass); barry.$(<domElement>); barry.MOUSE; //MOUSE = {x: XX, y: XX};@michalbe
  67. 67. BLYSK – modules@michalbe
  68. 68. BLYSK – modules Leon & ClaireRebecca @michalbe Chris
  69. 69. BLYSK – problems & solutions 1. Canvas is just a bitmap@michalbe
  70. 70. BLYSK – problems & solutions Converting rasters to vectors – storage of the actions rebecca.put();@michalbe
  71. 71. BLYSK – problems & solutions Converting rasters to vectors – storage of the actions rebecca.put(chris.activeTool);@michalbe
  72. 72. BLYSK – problems & solutions Converting rasters to vectors – storage of the actions rebecca.put(chris.activeTool, barry.MOUSE);@michalbe
  73. 73. BLYSK – problems & solutions 1. Canvas is just a bitmap 2. Canvas is just a bitmap@michalbe
  74. 74. BLYSK – problems & Click! solutions@michalbe
  75. 75. BLYSK – problems & solutions Actions with elements - selecting rebecca.getAll();@michalbe
  76. 76. BLYSK – problems & solutions Actions with elements - selecting jill.fire(EventRedrawElement + toolId, {context: bufferCtx, element: element});@michalbe
  77. 77. BLYSK – problems & solutions Actions with elements - selecting bufferData = bufferCtx.getImageData(barry.MOUSE.x barry.MOUSE.y, 1, 1); if (bufferData.data[3] > 0) { //all the actions ... return; } else { //clicked nowhere ... }@michalbe
  78. 78. BLYSK – problems & solutions 1. Canvas is just a bitmap 2. Canvas is just a bitmap 3. Saving movies in different formats@michalbe
  79. 79. BLYSK – problems & solutions@michalbe
  80. 80. BLYSK – problems & solutionsNemezis @michalbe
  81. 81. BLYSK – problems & solutions Converting Canvas to other formats@michalbe
  82. 82. BLYSK – the future@michalbe
  83. 83. BLYSK – the future 1. End of basic development this year@michalbe
  84. 84. BLYSK – the future 1. End of basic development this year 2. Mobile versions (mostly for tablets)@michalbe
  85. 85. BLYSK – the future 1. End of basic development this year 2. Mobile versions (mostly for tablets) 3. Free to use@michalbe
  86. 86. BLYSK – the future 1. End of basic development this year 2. Mobile versions (mostly for tablets) 3. Free to use 4. Open source@michalbe
  87. 87. BLYSK – MOAAR!!1!ONE http://bly.sk @blyskapp http://github.com/blysk@michalbe
  88. 88. @michalbe
  89. 89. Warsaw, Poland 19th-21st of September 2012 http://onGameStart.com@michalbe @onGameStart
  90. 90. @michalbe
  91. 91. Conference at the end of the world@michalbe
  92. 92. Conference at the end of the world@michalbe
  93. 93. Conference at the end of the world Arctowski Polish Antarctic Station Summer 2012/2013 http://AntarcticJs.com@michalbe @AntarcticJS
  94. 94. Conference at the end of the world@michalbe
  95. 95. Conference at the end of the world@michalbe
  96. 96. Conference at the end of the world@michalbe
  97. 97. Conference at the end of the worldQUESTIONS? @michalbe@michalbe
  98. 98. Conference at the end of the world Thanks.@michalbe

×