SlideShare a Scribd company logo
1 of 98
Go to hell Flash, we don't
  need you anymore!
                                  by
                     Michał Budzynski
                          @michalbe
Go to hell Flash, we don't
  need you anymore!
                                  by
                     Michał Budzynski
                          @michalbe
Who's that guy?




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




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




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




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




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




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




@michalbe
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
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
Why I don't like Flash?




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




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




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




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




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


            But that's not the worst thing.




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




@michalbe
HTML5 vs Flash




@michalbe
HTML5 vs Flash




@michalbe
HTML5 vs Flash




@michalbe
HTML5 vs Flash




@michalbe
HTML5 vs Flash
               2001 DHTML


               FLASHKILLA!!1!!




@michalbe
HTML5 vs Flash
               2001 DHTML




@michalbe
HTML5 vs Flash
               2005 AJAX


               FLASH KILLER!!!




@michalbe
HTML5 vs Flash
               2010 HTML5


               Flash is dead.




@michalbe
HTML5 vs Flash




@michalbe
            FEATURES
HTML5 vs Flash -
               features




@michalbe
HTML5 vs Flash -
               features




@michalbe
HTML5 vs Flash -
            Demo! features




@michalbe
HTML5 vs Flash -
                   features




        P2P connection in the browser

@michalbe
HTML5 vs Flash -
                   features



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




        Web RTC http://www.webrtc.org/

@michalbe
HTML5 vs Flash


      SERVICES

@michalbe
HTML5 vs Flash -
                   services



        Mochimedia & Kongregate

@michalbe
HTML5 vs Flash -
                      services




          BlueVia by Telefonica
@michalbe
HTML5 vs Flash -
                    services




            FlexPi by @FlyWithMonkey

@michalbe
HTML5 vs Flash -
                   services




            FlashGameLicense.com

@michalbe
HTML5 vs Flash -
                   services




            MarketJS.com

@michalbe
HTML5 vs Flash




                  TOOLS
@michalbe
HTML5 vs Flash - tools




@michalbe
HTML5 vs Flash - tools




            Cloud9IDE

@michalbe
HTML5 vs Flash - tools




            Just a code editor

@michalbe
HTML5 vs Flash - tools




            BLYSK @blyskapp http://bly.sk

@michalbe
BLYSK




@michalbe
BLYSK




@michalbe   THE MANSION
BLYSK – the Mansion
            Build system inspired by Python syntax




@michalbe
BLYSK – the Mansion
            Creating new module:


            java -jar js.jar mansion.js foo




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




@michalbe
/* 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);
BLYSK – the Mansion
            Demo!




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




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




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




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




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




@michalbe
BLYSK – the Mansion
            Cons of The Mansion:
            1. Still too hacky & not native for JavaScript




@michalbe
BLYSK – the Mansion
            Open Source!




              https://github.com/Blysk/The-MANSION
@michalbe
BLYSK – modules




@michalbe
BLYSK – modules




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




@michalbe
BLYSK – modules




@michalbe
BLYSK – modules


               Barry

@michalbe
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
BLYSK – modules

  barry.$('#domID');
  barry.$('.domClass');
  barry.$('<domElement>');

  barry.MOUSE; //MOUSE = {x: XX, y: XX};




@michalbe
BLYSK – modules




@michalbe
BLYSK – modules




    Leon & Claire
Rebecca
 @michalbe    Chris
BLYSK – problems &
                              solutions
            1. Canvas is just a bitmap




@michalbe
BLYSK – problems &
                             solutions
            Converting rasters to vectors – storage of the actions

            rebecca.put();




@michalbe
BLYSK – problems &
                             solutions
            Converting rasters to vectors – storage of the actions

            rebecca.put(chris.activeTool);




@michalbe
BLYSK – problems &
                             solutions
            Converting rasters to vectors – storage of the actions

            rebecca.put(chris.activeTool, barry.MOUSE);




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




@michalbe
BLYSK – problems &
            Click!   solutions




@michalbe
BLYSK – problems &
                             solutions
            Actions with elements - selecting

            rebecca.getAll();




@michalbe
BLYSK – problems &
                             solutions
            Actions with elements - selecting

    jill.fire(EventRedrawElement + toolId, {context: bufferCtx,
    element: element});




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




@michalbe
BLYSK – problems &
                 solutions




@michalbe
BLYSK – problems &
                  solutions




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




@michalbe
BLYSK – the future




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




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




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




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




@michalbe
BLYSK – MOAAR!!1!ONE
                     http://bly.sk
                     @blyskapp
                http://github.com/blysk




@michalbe
@michalbe
Warsaw, Poland
            19th-21st of September 2012
                http://onGameStart.com
@michalbe               @onGameStart
@michalbe
Conference at the end of
                   the world




@michalbe
Conference at the end of
                   the world




@michalbe
Conference at the end of
                   the world



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




@michalbe
Conference at the end of
                   the world




@michalbe
Conference at the end of
                   the world




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

              Thanks.
@michalbe

More Related Content

Viewers also liked

A million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleA million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scale
Tom Croucher
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
chriseppstein
 

Viewers also liked (10)

Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
A million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scaleA million connections and beyond - Node.js at scale
A million connections and beyond - Node.js at scale
 
Dark patterns - An Overview for Brand Owners
Dark patterns - An Overview for Brand OwnersDark patterns - An Overview for Brand Owners
Dark patterns - An Overview for Brand Owners
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
 
jQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & TricksjQuery Proven Performance Tips & Tricks
jQuery Proven Performance Tips & Tricks
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Know yourengines velocity2011
Know yourengines velocity2011Know yourengines velocity2011
Know yourengines velocity2011
 
HTML5 & JavaScript Games
HTML5 & JavaScript GamesHTML5 & JavaScript Games
HTML5 & JavaScript Games
 
Mobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance OptimizationMobile Web & HTML5 Performance Optimization
Mobile Web & HTML5 Performance Optimization
 
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
10+ Deploys Per Day: Dev and Ops Cooperation at Flickr
 

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

MonoRails - GoGaRuCo 2012
MonoRails - GoGaRuCo 2012MonoRails - GoGaRuCo 2012
MonoRails - GoGaRuCo 2012
jackdanger
 
YQL - Christian Heilmann Open Hack London presentation
YQL - Christian Heilmann Open Hack London presentationYQL - Christian Heilmann Open Hack London presentation
YQL - Christian Heilmann Open Hack London presentation
Korben00
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
brucelawson
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsCodemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Fabio Franzini
 

Similar to Go to hell Flash, we don't need you anymore! GothamJs (20)

HTML5 as a game console
HTML5 as a game consoleHTML5 as a game console
HTML5 as a game console
 
Startup Architecture: How to Lean on Others to Get Stuff DoneUntitled
Startup Architecture: How to Lean on Others to Get Stuff DoneUntitledStartup Architecture: How to Lean on Others to Get Stuff DoneUntitled
Startup Architecture: How to Lean on Others to Get Stuff DoneUntitled
 
HTML5 intro
HTML5 introHTML5 intro
HTML5 intro
 
Topsy Turvy Design
Topsy Turvy DesignTopsy Turvy Design
Topsy Turvy Design
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhone
 
MonoRails - GoGaRuCo 2012
MonoRails - GoGaRuCo 2012MonoRails - GoGaRuCo 2012
MonoRails - GoGaRuCo 2012
 
Innovateeurope
InnovateeuropeInnovateeurope
Innovateeurope
 
HTML5 Hotness
HTML5 HotnessHTML5 Hotness
HTML5 Hotness
 
How WordPress Frameworks actually work
How WordPress Frameworks actually workHow WordPress Frameworks actually work
How WordPress Frameworks actually work
 
Scaling automated quality text generation for enterprise sites
Scaling automated quality text generation for enterprise sitesScaling automated quality text generation for enterprise sites
Scaling automated quality text generation for enterprise sites
 
Effective Wireframes - UXBrighton June 2016
Effective Wireframes  - UXBrighton June 2016Effective Wireframes  - UXBrighton June 2016
Effective Wireframes - UXBrighton June 2016
 
MySQL Install for Replication - Real Life Tutorial
MySQL Install for Replication - Real Life TutorialMySQL Install for Replication - Real Life Tutorial
MySQL Install for Replication - Real Life Tutorial
 
YQL - Christian Heilmann Open Hack London presentation
YQL - Christian Heilmann Open Hack London presentationYQL - Christian Heilmann Open Hack London presentation
YQL - Christian Heilmann Open Hack London presentation
 
Open Hack London - Introduction to YQL
Open Hack London - Introduction to YQLOpen Hack London - Introduction to YQL
Open Hack London - Introduction to YQL
 
HTML5 Who what where when why how
HTML5 Who what where when why howHTML5 Who what where when why how
HTML5 Who what where when why how
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjsCodemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
 
WordPress - Whats going on in the server?
WordPress - Whats going on in the server? WordPress - Whats going on in the server?
WordPress - Whats going on in the server?
 
Deep dive into communication sites
Deep dive into communication sitesDeep dive into communication sites
Deep dive into communication sites
 
Targeting Screens with HTML5, Flash & Native
Targeting Screens with HTML5, Flash & NativeTargeting Screens with HTML5, Flash & Native
Targeting Screens with HTML5, Flash & Native
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 

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