SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

En vedette

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
 

En vedette (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
 

Similaire à 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
 

Similaire à 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
 

Dernier

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Dernier (20)

Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
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...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
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, ...
 
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
 
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
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
"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 ...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
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
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 

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