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).

1. Go to hell Flash, we don't
need you anymore!
by
Michał Budzynski
@michalbe

2. Go to hell Flash, we don't
need you anymore!
by
Michał Budzynski
@michalbe

3. Who's that guy?
@michalbe

4. Who's that guy?
JavaScript developer
from Warsaw, Poland
@michalbe

5. Who's that guy?
Firefox OS Team at Mozilla
@michalbe

6. Who's that guy?
Open web game
developer
@michalbe

7. Who's that guy?
Author of stupid web demos
@michalbe

8. Who's that guy?
Resident Evil fan <3 <3 <3
@michalbe

9. Who's that guy?
Resident Evil fan <3 <3 <3
@michalbe

10. Who's that guy?
Resident Evil fan <3 <3 <3
Other stuff
Resident Evil
My life
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
@michalbe

11. Who's that guy?
Resident Evil fan <3 <3 <3
Other stuff
Resident Evil
My life
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
@michalbe

12. Why I don't like Flash?
@michalbe

13. Why I don't like Flash?
As a user.
@michalbe

14. Why I don't like Flash?
As a user.
@michalbe

15. Why I don't like Flash?
As a developer.
@michalbe

16. Why I don't like Flash?
As a developer.
@michalbe

17. Why I don't like Flash?
As a developer.
But that's not the worst thing.
@michalbe

18. Why I don't like Flash?
As a developer.
@michalbe

19. HTML5 vs Flash
@michalbe

20. HTML5 vs Flash
@michalbe

21. HTML5 vs Flash
@michalbe

22. HTML5 vs Flash
@michalbe

23. HTML5 vs Flash
2001 DHTML
FLASHKILLA!!1!!
@michalbe

24. HTML5 vs Flash
2001 DHTML
@michalbe

25. HTML5 vs Flash
2005 AJAX
FLASH KILLER!!!
@michalbe

26. HTML5 vs Flash
2010 HTML5
Flash is dead.
@michalbe

27. HTML5 vs Flash
@michalbe
FEATURES

28. HTML5 vs Flash -
features
@michalbe

29. HTML5 vs Flash -
features
@michalbe

30. HTML5 vs Flash -
Demo! features
@michalbe

31. HTML5 vs Flash -
features
P2P connection in the browser
@michalbe

32. HTML5 vs Flash -
features
EasyWebSocket by @jeromeetienne
http://easywebsocket.org
@michalbe

33. HTML5 vs Flash -
features
Web RTC http://www.webrtc.org/
@michalbe

34. HTML5 vs Flash
SERVICES
@michalbe

35. HTML5 vs Flash -
services
Mochimedia & Kongregate
@michalbe

36. HTML5 vs Flash -
services
BlueVia by Telefonica
@michalbe

37. HTML5 vs Flash -
services
FlexPi by @FlyWithMonkey
@michalbe

38. HTML5 vs Flash -
services
FlashGameLicense.com
@michalbe

39. HTML5 vs Flash -
services
MarketJS.com
@michalbe

40. HTML5 vs Flash
TOOLS
@michalbe

41. HTML5 vs Flash - tools
@michalbe

42. HTML5 vs Flash - tools
Cloud9IDE
@michalbe

43. HTML5 vs Flash - tools
Just a code editor
@michalbe

44. HTML5 vs Flash - tools
BLYSK @blyskapp http://bly.sk
@michalbe

45. BLYSK
@michalbe

46. BLYSK
@michalbe THE MANSION

47. BLYSK – the Mansion
Build system inspired by Python syntax
@michalbe

48. BLYSK – the Mansion
Creating new module:
java -jar js.jar mansion.js foo
@michalbe

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. BLYSK – the Mansion
Building:
java -jar js.jar mansion.js build
@michalbe

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. BLYSK – the Mansion
Demo!
@michalbe

53. BLYSK – the Mansion
Pros of The Mansion:
1. Performance
@michalbe

54. BLYSK – the Mansion
Pros of The Mansion:
1. Performance
2. Great minification of the file
@michalbe

55. BLYSK – the Mansion
Pros of The Mansion:
1. Performance
2. Great minification of the file
@michalbe

56. BLYSK – the Mansion
Pros of The Mansion:
1. Performance
2. Great minification of the file
3. Easy to manage modules
@michalbe

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. BLYSK – the Mansion
Cons of The Mansion:
1. Still too hacky & not native for JavaScript
@michalbe

59. BLYSK – the Mansion
Open Source!
https://github.com/Blysk/The-MANSION
@michalbe

60. BLYSK – modules
@michalbe

61. BLYSK – modules
@michalbe Jill

62. BLYSK – modules
jill.on(eventName, function);
jill.fire(eventName, data);
jill.out(eventName, function);
@michalbe

63. BLYSK – modules
@michalbe

64. BLYSK – modules
Barry
@michalbe

65. BLYSK – modules
barry.$ = 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. BLYSK – modules
barry.$('#domID');
barry.$('.domClass');
barry.$('<domElement>');
barry.MOUSE; //MOUSE = {x: XX, y: XX};
@michalbe

67. BLYSK – modules
@michalbe

68. BLYSK – modules
Leon & Claire
Rebecca
@michalbe Chris

69. BLYSK – problems &
solutions
1. Canvas is just a bitmap
@michalbe

70. BLYSK – problems &
solutions
Converting rasters to vectors – storage of the actions
rebecca.put();
@michalbe

71. BLYSK – problems &
solutions
Converting rasters to vectors – storage of the actions
rebecca.put(chris.activeTool);
@michalbe

72. BLYSK – problems &
solutions
Converting rasters to vectors – storage of the actions
rebecca.put(chris.activeTool, barry.MOUSE);
@michalbe

73. BLYSK – problems &
solutions
1. Canvas is just a bitmap
2. Canvas is just a bitmap
@michalbe

74. BLYSK – problems &
Click! solutions
@michalbe

75. BLYSK – problems &
solutions
Actions with elements - selecting
rebecca.getAll();
@michalbe

76. BLYSK – problems &
solutions
Actions with elements - selecting
jill.fire(EventRedrawElement + toolId, {context: bufferCtx,
element: element});
@michalbe

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. BLYSK – problems &
solutions
1. Canvas is just a bitmap
2. Canvas is just a bitmap
3. Saving movies in different formats
@michalbe

79. BLYSK – problems &
solutions
@michalbe

80. BLYSK – problems &
solutions
Nemezis
@michalbe

81. BLYSK – problems &
solutions
Converting Canvas to other formats
@michalbe

82. BLYSK – the future
@michalbe

83. BLYSK – the future
1. End of basic development this year
@michalbe

84. BLYSK – the future
1. End of basic development this year
2. Mobile versions (mostly for tablets)
@michalbe

85. BLYSK – the future
1. End of basic development this year
2. Mobile versions (mostly for tablets)
3. Free to use
@michalbe

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. BLYSK – MOAAR!!1!ONE
http://bly.sk
@blyskapp
http://github.com/blysk
@michalbe

88. @michalbe

89. Warsaw, Poland
19th-21st of September 2012
http://onGameStart.com
@michalbe @onGameStart

90. @michalbe

91. Conference at the end of
the world
@michalbe

92. Conference at the end of
the world
@michalbe

93. Conference at the end of
the world
'Arctowski' Polish Antarctic Station
Summer 2012/2013
http://AntarcticJs.com
@michalbe @AntarcticJS

94. Conference at the end of
the world
@michalbe

95. Conference at the end of
the world
@michalbe

96. Conference at the end of
the world
@michalbe

97. Conference at the end of
the world
QUESTIONS?
@michalbe
@michalbe

98. Conference at the end of
the world
Thanks.
@michalbe