SlideShare a Scribd company logo
Engineering JavaScript
        Dr Jim Purbrick
     Async 10th March 2011
Who Am I?
Technical Director at Linden Lab
   Setup Linden Lab Brighton
       Software Engineer
            Musician
           Freelancer
          Entrepreneur
That’s No Moon...
35,000 CPU Cores

Weekly Releases

No Downtime

1.5 MLOC

100 Engineers

10 Years                        Image: jurvetson



C++, Python, Perl, PHP, C#...
21st Century JavaScript




   Image: Google
                   Image: W3C
Module
myOrg = (function(myOrg) {

    var myApp = myOrg.myApp = myOrg.myApp || {};

    function myPrivateFunction() {
        // Do my thing.
    }

    myApp.myPublicFunction = function() {
        return myPrivateFunction();
    }

    return myOrg;

}(myOrg || {}));
myOrg = (function(myOrg) {
                             Class
    var myApp = myOrg.myApp = myOrg.myApp || {},
        myClass = myOrg.myApp.myClass = myOrg.myApp.myClass || {};

    myClass.create = function() {

         var that = {};

         myPrivateMethod() {
         }

         that.myPublicMethod = function() {
             myPrivateMethod();
         };

         return that;
    };

    return myOrg;

}(myOrg || {}));
Inheritance
myOrg = (function(myOrg) {

    var myApp = myOrg.myApp = myOrg.myApp || {},
        mySub = myOrg.myApp.mySub = myOrg.myApp.mySub || {};

    mySub.create = function() {

         var that = myApp.myClass.create(),
             myClassMyPublicMethod = that.myPublicMethod;

         that.myPublicMethod = function() {
             // Do something.
             return myClassMyPublicMethod();
         };

         return that;
    };

    return myOrg;

}(myOrg || {}));
Dependency Injection
myOrg = (function(myOrg) {

    var myApp = myOrg.myApp = myOrg.myApp || {},
        mySub = myOrg.myApp.mySub = myOrg.myApp.mySub || {};

    mySub.create = function(params) {

         var that = params.constructor(),
             myClassMyPublicMethod = that.myPublicMethod,
             $ = params.jQuery;

         that.myPublicMethod = function() {
             return myClassMyPublicMethod();
         };

         return that;
    };

   return myOrg;

}(myOrg || {}));
Production
<script type="text/javascript">
$(window).load(function() {

    var params, mySubInstance;

    params = {
        constructor: myOrg.myClass.create,
        jQuery: jQuery
    };

    mySubInstance = myOrg.myApp.mySub.create(params);

    // Do something with mySubClassInstance.

};
</script>
Test
JsHamcrest.Integration.QUnit();
JsMockito.Integration.QUnit();

test('mySubClass calls super class constructor', function () {

      var params, mySubInstance;

      params = {
          constructor: mockFunction(),
          jQuery: mockFunction()
      };

      mySubInstance = myOrg.myApp.mySub.create(params);

      verify(params.constructor, once())();
});
More?
1. http://www.adequatelygood.com/2010/3/
   JavaScript-Module-Pattern-In-Depth
2. http://www.crockford.com/
3. http://oreilly.com/catalog/9780596517748
4. http://docs.jquery.com/Qunit
5. http://jsmockito.org/
Thank You!




http://jimpurbrick.com
http://18dex.com

More Related Content

What's hot (20)

Introduction to cron queue
Introduction to cron queue
ADCI Solutions
 
How to practice functional programming in react
How to practice functional programming in react
Netta Bondy
 
Include
Include
Shi Chakep
 
Javascript & Ajax Basics
Javascript & Ajax Basics
Richard Paul
 
Functional Reactive Programming - RxSwift
Functional Reactive Programming - RxSwift
Rodrigo Leite
 
Grails 1.2 探検隊 -新たな聖杯をもとめて・・・-
Grails 1.2 探検隊 -新たな聖杯をもとめて・・・-
Tsuyoshi Yamamoto
 
第4回 g* ワークショップ はじめてみよう! Grailsプラグイン
第4回 g* ワークショップ はじめてみよう! Grailsプラグイン
Tsuyoshi Yamamoto
 
Reactive programming with RxSwift
Reactive programming with RxSwift
Scott Gardner
 
Swift & ReactiveX – Asynchronous Event-Based Funsies with RxSwift
Swift & ReactiveX – Asynchronous Event-Based Funsies with RxSwift
Aaron Douglas
 
Reactive Programming with RxSwift
Reactive Programming with RxSwift
Scott Gardner
 
clara-rules
clara-rules
Ikuru Kanuma
 
Js interpreter interpreted
Js interpreter interpreted
Martha Schumann
 
非同期javascriptの過去と未来
非同期javascriptの過去と未来
Taketoshi 青野健利
 
Spark Jobserver
Spark Jobserver
Yegor Andreenko
 
JavaScript Sprachraum
JavaScript Sprachraum
patricklee
 
G*なクラウド ~雲のかなたに~
G*なクラウド ~雲のかなたに~
Tsuyoshi Yamamoto
 
2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js
Noritada Shimizu
 
20151224-games
20151224-games
Noritada Shimizu
 
Groovy Api Tutorial
Groovy Api Tutorial
guligala
 
倒计时优化点滴
倒计时优化点滴
j5726
 
Introduction to cron queue
Introduction to cron queue
ADCI Solutions
 
How to practice functional programming in react
How to practice functional programming in react
Netta Bondy
 
Javascript & Ajax Basics
Javascript & Ajax Basics
Richard Paul
 
Functional Reactive Programming - RxSwift
Functional Reactive Programming - RxSwift
Rodrigo Leite
 
Grails 1.2 探検隊 -新たな聖杯をもとめて・・・-
Grails 1.2 探検隊 -新たな聖杯をもとめて・・・-
Tsuyoshi Yamamoto
 
第4回 g* ワークショップ はじめてみよう! Grailsプラグイン
第4回 g* ワークショップ はじめてみよう! Grailsプラグイン
Tsuyoshi Yamamoto
 
Reactive programming with RxSwift
Reactive programming with RxSwift
Scott Gardner
 
Swift & ReactiveX – Asynchronous Event-Based Funsies with RxSwift
Swift & ReactiveX – Asynchronous Event-Based Funsies with RxSwift
Aaron Douglas
 
Reactive Programming with RxSwift
Reactive Programming with RxSwift
Scott Gardner
 
Js interpreter interpreted
Js interpreter interpreted
Martha Schumann
 
JavaScript Sprachraum
JavaScript Sprachraum
patricklee
 
G*なクラウド ~雲のかなたに~
G*なクラウド ~雲のかなたに~
Tsuyoshi Yamamoto
 
2016 gunma.web games-and-asm.js
2016 gunma.web games-and-asm.js
Noritada Shimizu
 
Groovy Api Tutorial
Groovy Api Tutorial
guligala
 
倒计时优化点滴
倒计时优化点滴
j5726
 

Similar to Engineering JavaScript (20)

HTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
David Padbury
 
Built to last javascript for enterprise
Built to last javascript for enterprise
Marjan Nikolovski
 
Javascript Design Patterns
Javascript Design Patterns
Subramanyan Murali
 
Orlando BarCamp Why Javascript Doesn't Suck
Orlando BarCamp Why Javascript Doesn't Suck
erockendude
 
Design patterns in javascript
Design patterns in javascript
Abimbola Idowu
 
Ajaxworld
Ajaxworld
deannalagason
 
Say It With Javascript
Say It With Javascript
Giovanni Scerra ☃
 
Javascript tid-bits
Javascript tid-bits
David Atchley
 
Advanced Javascript
Advanced Javascript
relay12
 
Advanced Javascript
Advanced Javascript
Manikanda kumar
 
Advanced Javascript
Advanced Javascript
Adieu
 
運用Closure Compiler 打造高品質的JavaScript
運用Closure Compiler 打造高品質的JavaScript
taobao.com
 
JavaScript - Introduction
JavaScript - Introduction
Tomasz Masternak
 
Download Complete JavaScript for NET Developers 1st Edition Ovais Mehboob Ahm...
Download Complete JavaScript for NET Developers 1st Edition Ovais Mehboob Ahm...
dialiolona
 
Object Oriented JavaScript
Object Oriented JavaScript
Donald Sipe
 
Douglas Crockford Presentation Goodparts
Douglas Crockford Presentation Goodparts
Ajax Experience 2009
 
JavaScript (without DOM)
JavaScript (without DOM)
Piyush Katariya
 
JavaScript Core
JavaScript Core
François Sarradin
 
Design patterns in java script, jquery, angularjs
Design patterns in java script, jquery, angularjs
Ravi Bhadauria
 
Unleashing the Power of Modern Javascript Development
Unleashing the Power of Modern Javascript Development
Tarandeep Singh
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
David Padbury
 
Built to last javascript for enterprise
Built to last javascript for enterprise
Marjan Nikolovski
 
Orlando BarCamp Why Javascript Doesn't Suck
Orlando BarCamp Why Javascript Doesn't Suck
erockendude
 
Design patterns in javascript
Design patterns in javascript
Abimbola Idowu
 
Advanced Javascript
Advanced Javascript
relay12
 
Advanced Javascript
Advanced Javascript
Adieu
 
運用Closure Compiler 打造高品質的JavaScript
運用Closure Compiler 打造高品質的JavaScript
taobao.com
 
Download Complete JavaScript for NET Developers 1st Edition Ovais Mehboob Ahm...
Download Complete JavaScript for NET Developers 1st Edition Ovais Mehboob Ahm...
dialiolona
 
Object Oriented JavaScript
Object Oriented JavaScript
Donald Sipe
 
Douglas Crockford Presentation Goodparts
Douglas Crockford Presentation Goodparts
Ajax Experience 2009
 
JavaScript (without DOM)
JavaScript (without DOM)
Piyush Katariya
 
Design patterns in java script, jquery, angularjs
Design patterns in java script, jquery, angularjs
Ravi Bhadauria
 
Unleashing the Power of Modern Javascript Development
Unleashing the Power of Modern Javascript Development
Tarandeep Singh
 
Ad

Recently uploaded (20)

FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Seminar: Authentication for a Billion Consumers - Amazon.pptx
FIDO Alliance
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
The State of Web3 Industry- Industry Report
The State of Web3 Industry- Industry Report
Liveplex
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
PyData - Graph Theory for Multi-Agent Integration
PyData - Graph Theory for Multi-Agent Integration
barqawicloud
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
Enabling BIM / GIS integrations with Other Systems with FME
Enabling BIM / GIS integrations with Other Systems with FME
Safe Software
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Ad

Engineering JavaScript

Editor's Notes