SlideShare une entreprise Scribd logo
1  sur  56
Télécharger pour lire hors ligne
Software-Development with
JavaScript and Joose
Hamburg, 22.Oktober 2008
Agenda




No Agenda
Joose is
a meta object system for JavaScript
Joose is not
a browser/DOM/Ajax/Widget library
     like jQuery, Prototype, YUI,
          Mootools or Dojo
Joose is not
a browser/DOM/Ajax/Widget library
     like jQuery, Prototype, YUI,
          Mootools or Dojo
                                             hen
                             uch need these w
       Y ou wil still very m
                                the Browser
             you use Joose in
Joose helps

_   write
_   well structured,
_   expressive,
_   declarative,
_   maintainable
_   JavaScript applications.
Core Features

_   Classes
_   Interfaces
_   Mixins
_   Modules / Packages / Namespaces
_   Roles
     _   (Mixins + Interfaces)
_   Method Modifiers
     _   (think aspect oriented programming)
Core Features
Declarative methods to build
      all these things
Meta Features
Object based interface to introspect
 and manipulate all these things at
             runtime.
Meta classes for classes, methods
         and attributes.
Meta?
Meta?
                                    eta
                   understand the m
Y ou don't need to
                       with Joose.
      features to work
Meta?
                                    eta
                   understand the m
Y ou don't need to
                       with Joose.
      features to work
                                   you    do :)
             But it is more fun if
Mission
Steal all the nice features from other
      programming languages.
Make them available in JavaScript in a
 way that feels native to JavaScript.
Java, C#, etc.

_   Classes
_   Interfaces
_   Packages / Namespaces
Smalltalk, CLOS (Common Lisp
Object System)
_   Meta classes
_   Meta attributes
_   Meta methods
Ruby

_   Mixins
_   Meta classes
Perl 6

_   Roles
_   Method modifiers
_   Type constraints and coercions
Perl 5

_   Moose (All of the above)
LET‘S LOOK AT SOME CODE
a Class

Class(quot;Pointquot;, {

})
with two attributes

Class(quot;Pointquot;, {
    has: {
        x: {is: quot;roquot;},
        y: {is: quot;rwquot;},
    }
})
and a clear method

Class(quot;Pointquot;, {
    has: {
        x: {is: quot;roquot;},
        y: {is: quot;rwquot;},
    },
    methods: {
        clear: function () {
            this.x = 0;
            this.setY(0);
        }
    }
})
Inheritance

Class(quot;Point3Dquot;, {
    isa: Point
})
after...

Class(quot;Point3Dquot;, {
    isa: Point,
    has: {
        z: {}
    },
    after: {
        clear: function () {
            this.z = 0;
        }
    }
})
before...

Class(quot;Point3Dquot;, {
    isa: Point,
    has: {
        z: {}
    },
    before: {
        clear: function () {
            this.z = 0;
        }
    }
})
before...

Class(quot;Point3Dquot;, {
    isa: Point,
    has: {
        z: {}
    },
    override: {
        clear: function () {
            this.SUPER();
            this.z = 0;
        }
    }
})
Usage

var point = new Point3D();

point.setX(10);

var y = point.getY(10);

point.z = 1;

point.clear();

var point2 = new Point3D({ x: 10, y: 20 });
Modules

_   create a namespace
_   create a lexical scope for your code.
_   No need for ugly
     _   (function () { ... })()
Bank.Account

Module(quot;Bankquot;, function (m) {
    Class(quot;Accountquot;, {
        has: {
            balance: {
                is: quot;rwquot;,
                init: 0
            }
        }
    }
})
JSON Integration

Class(quot;Geometry.Pointquot;, {
    does: Joose.Storage,
    has: {
        x: {is: rw},
        y: {is: rw},
        $: {
             is:         rw,
             init:       quot;stuffquot;,
             persistent: false
        }
    }
})
JSON Integration

var p = new Geometry.Point({x: 10, y: 20})

var jsonSring = JSON.stringify(p);

var p2 = JSON.parse(jsonString);

alert(p2.getX())
JSON Integration

var p = new Geometry.Point({x: 10, y: 20})

var jsonSring = JSON.stringify(p);

var p2 = JSON.parse(jsonString);

alert(p2.getX())


                                                      ON
                                      JSON and turn JS
              Turn Joose Objects into       s
                          into Joose object
JSON Integration

var p = new Geometry.Point({x: 10, y: 20})

var jsonSring = JSON.stringify(p);

var p2 = JSON.parse(jsonString);

alert(p2.getX())                              tion!
                             Backe nd Integra
                                                      ON
                                      JSON and turn JS
              Turn Joose Objects into       s
                          into Joose object
Total JavaScript Makeover!
Classes and Namespaces in native
JS
if(Test == null) {
    Test = {};
}

Test.StandardPoint = function (x, y) {
    this.x = x || 0
    this.y = y || 0
}

Test.StandardPoint.prototype = {
    getX: function () {
        return this.x
    },
    setX: function (x) {
        this.x = x
    },
    getY: function () {
        return this.y
    },
    setY: function (y) {                 Dramatization
if(Test == null) {
    Test = {};
Classes and Namespaces in native
}

JSthis.x = x || 0= function (x, y) {
Test.StandardPoint

    this.y = y || 0
}

Test.StandardPoint.prototype = {
    getX: function () {
        return this.x
    },
    setX: function (x) {
        this.x = x
    },
    getY: function () {
        return this.y
    },
    setY: function (y) {
        this.y = y;
    },
    clear: function () {
        this.setX(0)
        this.setY(0)
    }                              Dramatization
}
Using Joose

Module(quot;Testquot;, function (m) {
    Class(quot;Pointquot;, {
        has: {
            x: {
                 is:   quot;rwquot;,
                 init: 0
            },
            y: {
                 is:   quot;rwquot;,
                 init: 0
            }
        },
        methods: {
            clear: function () {
                 this.setX(0);
                 this.setY(0);
            }
        }
    })
})
Using Joose

Module(quot;Testquot;, function (m) {
    Class(quot;Pointquot;, {
        has: {
            x: {
                 is:   quot;rwquot;,
                 init: 0
            },
            y: {
                 is:   quot;rwquot;,
                                                    lling!
                                         ed for scro
                 init: 0
            }                      No ne
        },
        methods: {
            clear: function () {
                 this.setX(0);
                 this.setY(0);
            }
        }
    })
})
Class inheritance and method
wrappers in native JS
// We need a utility function to do the inheritance
function inherit(superClass, subClass) {
    for(var i in superClass.prototype) {
        subClass.prototype[i] = superClass.prototype[i]
    }
}

Test.StandardPoint3D = function (x, y, z) {
    this.x = x || 0
    this.y = y || 0
    this.z = z || 0
}

// Make Test.Standard the super class of Test.StandardPoint3D
inherit(Test.StandardPoint, Test.StandardPoint3D)

// we cant assign a new prototype because we already have the
one from the super
Test.StandardPoint3D.prototype.getZ = function () {
    return this.z                           Dramatization
}
}

Test.StandardPoint3D = function (x, y, z) {
    this.x = x || 0
Class inheritance and method
    this.y = y || 0
    this.z = z || 0
wrappers in native JS
}

// Make Test.Standard the super class of Test.StandardPoint3D
inherit(Test.StandardPoint, Test.StandardPoint3D)

// we cant assign a new prototype because we already have the
one from the super
Test.StandardPoint3D.prototype.getZ = function () {
    return this.z
}

Test.StandardPoint3D.prototype.setZ = function (z) {
    this.z = z;
}

var superMethod = Test.StandardPoint3D.prototype.clear;
Test.StandardPoint3D.prototype.clear = function () {
    superMethod.apply(this);
    this.z = 0;
}

                                              Dramatization
Using Joose

Module(quot;Testquot;, function (m) {
    Class(quot;Point3Dquot;, {
        isa: m.Point,
        has: {
            z: {
                 is: quot;rwquot;,
                 init: 0
            }
        },
        after: {
            clear: function () {
                 this.setZ(0)
            }
        }
    })
})
EXAMPLES
Class Browser

_   http://it.test.avantaxx.de/xssinterface/projects/Joose/examples/class_browser.html
blok

_   http://blok.appspot.com
_   http://code.google.com/p/joose-js/source/browse/trunk/examples/blok/block/ui/Element.js
_   http://code.google.com/p/joose-js/source/browse/trunk/examples/blok/block/ui/role/
    Focusable.js
_   http://code.google.com/p/joose-js/source/browse/trunk/examples/blok/block/ui/role/
    Resizable.js
File Size

_   Minified: 56 kb
_   GZipped: 16 kb
Speed
Should be fine if you're not building a
canvas based ray tracer for real time
            animations.
Profiling shows that Joose's overhead
   is negligible in most real world
             applications.
Speed
Should be fine if you're not building a
canvas based ray tracer for real time
            animations.if you do, though!
                   Tell me

Profiling shows that Joose's overhead
   is negligible in most real world
             applications.
Other Frameworks

_   Integration with jQuery works like a charm
_   YUI should be fine, too (Because YUI is very serious about namespaces).
_   Others should be fine as well
Joose does not

_   extend any default object prototypes.


Object.prototype.boom = function () {
      alert(„Dont try this at home“)
}
Joose runs

_   in all common browsers
_   Rhino
_   JScript.NET
_   Flash comming soon
_   Ensured by an extensive automated test suite.
Joose runs

_   in all common browsers
_   Rhino
_   JScript.NET
_   Flash comming soon
_   Ensured by an extensive automated test suite.
                                                  ired :)
                                sting in IE6 requ
                     No extra te
Use cases?
Joose is not always the right tool for
              the job!
Use it if
You need more than three quot;classesquot;.
 It makes sense to maintain page
         state in objects.
Advanced Topics

_   Backend Integration
_   Prototype based object orientation
_   Everything Meta
_   DOM Binding
_   Client Side Databases
More Info

_   http://code.google.com/p/joose-js/
_   http://joose-js.blogspot.com
Thank You

Contenu connexe

Tendances

Lecture 4: Data Types
Lecture 4: Data TypesLecture 4: Data Types
Lecture 4: Data TypesEelco Visser
 
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...Uehara Junji
 
Jscex: Write Sexy JavaScript (中文)
Jscex: Write Sexy JavaScript (中文)Jscex: Write Sexy JavaScript (中文)
Jscex: Write Sexy JavaScript (中文)jeffz
 
Easy Going Groovy 2nd season on DevLOVE
Easy Going Groovy 2nd season on DevLOVEEasy Going Groovy 2nd season on DevLOVE
Easy Going Groovy 2nd season on DevLOVEUehara Junji
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptJulie Iskander
 
深入浅出Jscex
深入浅出Jscex深入浅出Jscex
深入浅出Jscexjeffz
 
The Evolution of Async-Programming (SD 2.0, JavaScript)
The Evolution of Async-Programming (SD 2.0, JavaScript)The Evolution of Async-Programming (SD 2.0, JavaScript)
The Evolution of Async-Programming (SD 2.0, JavaScript)jeffz
 
Groovy 1.8の新機能について
Groovy 1.8の新機能についてGroovy 1.8の新機能について
Groovy 1.8の新機能についてUehara Junji
 
Jscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScriptJscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScriptjeffz
 
Modul Praktek Java OOP
Modul Praktek Java OOP Modul Praktek Java OOP
Modul Praktek Java OOP Zaenal Arifin
 
Rainer Grimm, “Functional Programming in C++11”
Rainer Grimm, “Functional Programming in C++11”Rainer Grimm, “Functional Programming in C++11”
Rainer Grimm, “Functional Programming in C++11”Platonov Sergey
 
Python 표준 라이브러리
Python 표준 라이브러리Python 표준 라이브러리
Python 표준 라이브러리용 최
 
More on Classes and Objects
More on Classes and ObjectsMore on Classes and Objects
More on Classes and ObjectsPayel Guria
 
Groovy grails types, operators, objects
Groovy grails types, operators, objectsGroovy grails types, operators, objects
Groovy grails types, operators, objectsHusain Dalal
 
Groovy vs Boilerplate and Ceremony Code
Groovy vs Boilerplate and Ceremony CodeGroovy vs Boilerplate and Ceremony Code
Groovy vs Boilerplate and Ceremony Codestasimus
 
Exercícios Netbeans - Vera Cymbron
Exercícios Netbeans - Vera CymbronExercícios Netbeans - Vera Cymbron
Exercícios Netbeans - Vera Cymbroncymbron
 
C# v8 new features - raimundas banevicius
C# v8 new features - raimundas baneviciusC# v8 new features - raimundas banevicius
C# v8 new features - raimundas baneviciusRaimundas Banevičius
 

Tendances (20)

Lecture 4: Data Types
Lecture 4: Data TypesLecture 4: Data Types
Lecture 4: Data Types
 
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
Let's go Developer 2011 sendai Let's go Java Developer (Programming Language ...
 
Class method
Class methodClass method
Class method
 
Jscex: Write Sexy JavaScript (中文)
Jscex: Write Sexy JavaScript (中文)Jscex: Write Sexy JavaScript (中文)
Jscex: Write Sexy JavaScript (中文)
 
Easy Going Groovy 2nd season on DevLOVE
Easy Going Groovy 2nd season on DevLOVEEasy Going Groovy 2nd season on DevLOVE
Easy Going Groovy 2nd season on DevLOVE
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
深入浅出Jscex
深入浅出Jscex深入浅出Jscex
深入浅出Jscex
 
The Evolution of Async-Programming (SD 2.0, JavaScript)
The Evolution of Async-Programming (SD 2.0, JavaScript)The Evolution of Async-Programming (SD 2.0, JavaScript)
The Evolution of Async-Programming (SD 2.0, JavaScript)
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Groovy 1.8の新機能について
Groovy 1.8の新機能についてGroovy 1.8の新機能について
Groovy 1.8の新機能について
 
Jscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScriptJscex: Write Sexy JavaScript
Jscex: Write Sexy JavaScript
 
Modul Praktek Java OOP
Modul Praktek Java OOP Modul Praktek Java OOP
Modul Praktek Java OOP
 
Rainer Grimm, “Functional Programming in C++11”
Rainer Grimm, “Functional Programming in C++11”Rainer Grimm, “Functional Programming in C++11”
Rainer Grimm, “Functional Programming in C++11”
 
Python 표준 라이브러리
Python 표준 라이브러리Python 표준 라이브러리
Python 표준 라이브러리
 
Python speleology
Python speleologyPython speleology
Python speleology
 
More on Classes and Objects
More on Classes and ObjectsMore on Classes and Objects
More on Classes and Objects
 
Groovy grails types, operators, objects
Groovy grails types, operators, objectsGroovy grails types, operators, objects
Groovy grails types, operators, objects
 
Groovy vs Boilerplate and Ceremony Code
Groovy vs Boilerplate and Ceremony CodeGroovy vs Boilerplate and Ceremony Code
Groovy vs Boilerplate and Ceremony Code
 
Exercícios Netbeans - Vera Cymbron
Exercícios Netbeans - Vera CymbronExercícios Netbeans - Vera Cymbron
Exercícios Netbeans - Vera Cymbron
 
C# v8 new features - raimundas banevicius
C# v8 new features - raimundas baneviciusC# v8 new features - raimundas banevicius
C# v8 new features - raimundas banevicius
 

Similaire à Joose - JavaScript Meta Object System

jrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeusjrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeusTakeshi AKIMA
 
Mongoskin - Guilin
Mongoskin - GuilinMongoskin - Guilin
Mongoskin - GuilinJackson Tian
 
Functions and Objects in JavaScript
Functions and Objects in JavaScript Functions and Objects in JavaScript
Functions and Objects in JavaScript Dhananjay Kumar
 
NetBeans Plugin Development: JRebel Experience Report
NetBeans Plugin Development: JRebel Experience ReportNetBeans Plugin Development: JRebel Experience Report
NetBeans Plugin Development: JRebel Experience ReportAnton Arhipov
 
Javascript Design Patterns
Javascript Design PatternsJavascript Design Patterns
Javascript Design PatternsZohar Arad
 
Xopus Application Framework
Xopus Application FrameworkXopus Application Framework
Xopus Application FrameworkJady Yang
 
Type script, for dummies
Type script, for dummiesType script, for dummies
Type script, for dummiessantiagoaguiar
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse
 
The next step, part 2
The next step, part 2The next step, part 2
The next step, part 2Pat Cavit
 
Developing web-apps like it's 2013
Developing web-apps like it's 2013Developing web-apps like it's 2013
Developing web-apps like it's 2013Laurent_VB
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript IntroductionDmitry Sheiko
 
Understanding JavaScript Testing
Understanding JavaScript TestingUnderstanding JavaScript Testing
Understanding JavaScript Testingjeresig
 
JavaScript Fundamentals with Angular and Lodash
JavaScript Fundamentals with Angular and LodashJavaScript Fundamentals with Angular and Lodash
JavaScript Fundamentals with Angular and LodashBret Little
 

Similaire à Joose - JavaScript Meta Object System (20)

jrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeusjrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeus
 
Json generation
Json generationJson generation
Json generation
 
Mongoskin - Guilin
Mongoskin - GuilinMongoskin - Guilin
Mongoskin - Guilin
 
Functions and Objects in JavaScript
Functions and Objects in JavaScript Functions and Objects in JavaScript
Functions and Objects in JavaScript
 
NetBeans Plugin Development: JRebel Experience Report
NetBeans Plugin Development: JRebel Experience ReportNetBeans Plugin Development: JRebel Experience Report
NetBeans Plugin Development: JRebel Experience Report
 
Javascript Design Patterns
Javascript Design PatternsJavascript Design Patterns
Javascript Design Patterns
 
Xopus Application Framework
Xopus Application FrameworkXopus Application Framework
Xopus Application Framework
 
Type script, for dummies
Type script, for dummiesType script, for dummies
Type script, for dummies
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
 
The next step, part 2
The next step, part 2The next step, part 2
The next step, part 2
 
Developing web-apps like it's 2013
Developing web-apps like it's 2013Developing web-apps like it's 2013
Developing web-apps like it's 2013
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Java
JavaJava
Java
 
dojo.Patterns
dojo.Patternsdojo.Patterns
dojo.Patterns
 
Understanding JavaScript Testing
Understanding JavaScript TestingUnderstanding JavaScript Testing
Understanding JavaScript Testing
 
Coding Ajax
Coding AjaxCoding Ajax
Coding Ajax
 
JavaScript Fundamentals with Angular and Lodash
JavaScript Fundamentals with Angular and LodashJavaScript Fundamentals with Angular and Lodash
JavaScript Fundamentals with Angular and Lodash
 
Coding Ajax
Coding AjaxCoding Ajax
Coding Ajax
 
Java Class Design
Java Class DesignJava Class Design
Java Class Design
 

Dernier

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Dernier (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

Joose - JavaScript Meta Object System

  • 1. Software-Development with JavaScript and Joose Hamburg, 22.Oktober 2008
  • 3. Joose is a meta object system for JavaScript
  • 4. Joose is not a browser/DOM/Ajax/Widget library like jQuery, Prototype, YUI, Mootools or Dojo
  • 5. Joose is not a browser/DOM/Ajax/Widget library like jQuery, Prototype, YUI, Mootools or Dojo hen uch need these w Y ou wil still very m the Browser you use Joose in
  • 6. Joose helps _ write _ well structured, _ expressive, _ declarative, _ maintainable _ JavaScript applications.
  • 7. Core Features _ Classes _ Interfaces _ Mixins _ Modules / Packages / Namespaces _ Roles _ (Mixins + Interfaces) _ Method Modifiers _ (think aspect oriented programming)
  • 8. Core Features Declarative methods to build all these things
  • 9. Meta Features Object based interface to introspect and manipulate all these things at runtime. Meta classes for classes, methods and attributes.
  • 10. Meta?
  • 11. Meta? eta understand the m Y ou don't need to with Joose. features to work
  • 12. Meta? eta understand the m Y ou don't need to with Joose. features to work you do :) But it is more fun if
  • 13. Mission Steal all the nice features from other programming languages. Make them available in JavaScript in a way that feels native to JavaScript.
  • 14. Java, C#, etc. _ Classes _ Interfaces _ Packages / Namespaces
  • 15. Smalltalk, CLOS (Common Lisp Object System) _ Meta classes _ Meta attributes _ Meta methods
  • 16. Ruby _ Mixins _ Meta classes
  • 17. Perl 6 _ Roles _ Method modifiers _ Type constraints and coercions
  • 18. Perl 5 _ Moose (All of the above)
  • 19. LET‘S LOOK AT SOME CODE
  • 21. with two attributes Class(quot;Pointquot;, { has: { x: {is: quot;roquot;}, y: {is: quot;rwquot;}, } })
  • 22. and a clear method Class(quot;Pointquot;, { has: { x: {is: quot;roquot;}, y: {is: quot;rwquot;}, }, methods: { clear: function () { this.x = 0; this.setY(0); } } })
  • 24. after... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, after: { clear: function () { this.z = 0; } } })
  • 25. before... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, before: { clear: function () { this.z = 0; } } })
  • 26. before... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, override: { clear: function () { this.SUPER(); this.z = 0; } } })
  • 27. Usage var point = new Point3D(); point.setX(10); var y = point.getY(10); point.z = 1; point.clear(); var point2 = new Point3D({ x: 10, y: 20 });
  • 28. Modules _ create a namespace _ create a lexical scope for your code. _ No need for ugly _ (function () { ... })()
  • 29. Bank.Account Module(quot;Bankquot;, function (m) { Class(quot;Accountquot;, { has: { balance: { is: quot;rwquot;, init: 0 } } } })
  • 30. JSON Integration Class(quot;Geometry.Pointquot;, { does: Joose.Storage, has: { x: {is: rw}, y: {is: rw}, $: { is: rw, init: quot;stuffquot;, persistent: false } } })
  • 31. JSON Integration var p = new Geometry.Point({x: 10, y: 20}) var jsonSring = JSON.stringify(p); var p2 = JSON.parse(jsonString); alert(p2.getX())
  • 32. JSON Integration var p = new Geometry.Point({x: 10, y: 20}) var jsonSring = JSON.stringify(p); var p2 = JSON.parse(jsonString); alert(p2.getX()) ON JSON and turn JS Turn Joose Objects into s into Joose object
  • 33. JSON Integration var p = new Geometry.Point({x: 10, y: 20}) var jsonSring = JSON.stringify(p); var p2 = JSON.parse(jsonString); alert(p2.getX()) tion! Backe nd Integra ON JSON and turn JS Turn Joose Objects into s into Joose object
  • 35. Classes and Namespaces in native JS if(Test == null) { Test = {}; } Test.StandardPoint = function (x, y) { this.x = x || 0 this.y = y || 0 } Test.StandardPoint.prototype = { getX: function () { return this.x }, setX: function (x) { this.x = x }, getY: function () { return this.y }, setY: function (y) { Dramatization
  • 36. if(Test == null) { Test = {}; Classes and Namespaces in native } JSthis.x = x || 0= function (x, y) { Test.StandardPoint this.y = y || 0 } Test.StandardPoint.prototype = { getX: function () { return this.x }, setX: function (x) { this.x = x }, getY: function () { return this.y }, setY: function (y) { this.y = y; }, clear: function () { this.setX(0) this.setY(0) } Dramatization }
  • 37. Using Joose Module(quot;Testquot;, function (m) { Class(quot;Pointquot;, { has: { x: { is: quot;rwquot;, init: 0 }, y: { is: quot;rwquot;, init: 0 } }, methods: { clear: function () { this.setX(0); this.setY(0); } } }) })
  • 38. Using Joose Module(quot;Testquot;, function (m) { Class(quot;Pointquot;, { has: { x: { is: quot;rwquot;, init: 0 }, y: { is: quot;rwquot;, lling! ed for scro init: 0 } No ne }, methods: { clear: function () { this.setX(0); this.setY(0); } } }) })
  • 39. Class inheritance and method wrappers in native JS // We need a utility function to do the inheritance function inherit(superClass, subClass) { for(var i in superClass.prototype) { subClass.prototype[i] = superClass.prototype[i] } } Test.StandardPoint3D = function (x, y, z) { this.x = x || 0 this.y = y || 0 this.z = z || 0 } // Make Test.Standard the super class of Test.StandardPoint3D inherit(Test.StandardPoint, Test.StandardPoint3D) // we cant assign a new prototype because we already have the one from the super Test.StandardPoint3D.prototype.getZ = function () { return this.z Dramatization }
  • 40. } Test.StandardPoint3D = function (x, y, z) { this.x = x || 0 Class inheritance and method this.y = y || 0 this.z = z || 0 wrappers in native JS } // Make Test.Standard the super class of Test.StandardPoint3D inherit(Test.StandardPoint, Test.StandardPoint3D) // we cant assign a new prototype because we already have the one from the super Test.StandardPoint3D.prototype.getZ = function () { return this.z } Test.StandardPoint3D.prototype.setZ = function (z) { this.z = z; } var superMethod = Test.StandardPoint3D.prototype.clear; Test.StandardPoint3D.prototype.clear = function () { superMethod.apply(this); this.z = 0; } Dramatization
  • 41. Using Joose Module(quot;Testquot;, function (m) { Class(quot;Point3Dquot;, { isa: m.Point, has: { z: { is: quot;rwquot;, init: 0 } }, after: { clear: function () { this.setZ(0) } } }) })
  • 43. Class Browser _ http://it.test.avantaxx.de/xssinterface/projects/Joose/examples/class_browser.html
  • 44. blok _ http://blok.appspot.com _ http://code.google.com/p/joose-js/source/browse/trunk/examples/blok/block/ui/Element.js _ http://code.google.com/p/joose-js/source/browse/trunk/examples/blok/block/ui/role/ Focusable.js _ http://code.google.com/p/joose-js/source/browse/trunk/examples/blok/block/ui/role/ Resizable.js
  • 45. File Size _ Minified: 56 kb _ GZipped: 16 kb
  • 46. Speed Should be fine if you're not building a canvas based ray tracer for real time animations. Profiling shows that Joose's overhead is negligible in most real world applications.
  • 47. Speed Should be fine if you're not building a canvas based ray tracer for real time animations.if you do, though! Tell me Profiling shows that Joose's overhead is negligible in most real world applications.
  • 48. Other Frameworks _ Integration with jQuery works like a charm _ YUI should be fine, too (Because YUI is very serious about namespaces). _ Others should be fine as well
  • 49. Joose does not _ extend any default object prototypes. Object.prototype.boom = function () { alert(„Dont try this at home“) }
  • 50. Joose runs _ in all common browsers _ Rhino _ JScript.NET _ Flash comming soon _ Ensured by an extensive automated test suite.
  • 51. Joose runs _ in all common browsers _ Rhino _ JScript.NET _ Flash comming soon _ Ensured by an extensive automated test suite. ired :) sting in IE6 requ No extra te
  • 52. Use cases? Joose is not always the right tool for the job!
  • 53. Use it if You need more than three quot;classesquot;. It makes sense to maintain page state in objects.
  • 54. Advanced Topics _ Backend Integration _ Prototype based object orientation _ Everything Meta _ DOM Binding _ Client Side Databases
  • 55. More Info _ http://code.google.com/p/joose-js/ _ http://joose-js.blogspot.com