SlideShare a Scribd company logo
1 of 57
Download to read offline
Software-Development with
JavaScript and Joose
JSConf 2009
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
                                       se when
                    very much need the
     You will still
                               e Browser
          you use Joose in th
Joose helps

_   write
_   well structured,
_   expressive,
_   declarative,
_   maintainable
_   JavaScript applications.
Joose helps

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


                                             ll it:
                                  n would ca
                               Su                 Edition
                                     Enterprise
                          JavaScript
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?
                              the meta
          need to understand
You don't
                           Joose.
     features to work with
Meta?
                              the meta
          need to understand
You don't
                           Joose.
     features to work with
                                              o :)
                                       ou d
                          ore fun if y
                   it is m
             But
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())



                                                N and turn
                            se Objects into JSO
                   Turn Joo                   jects
                          JSON into Joose ob
JSON Integration

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

var jsonSring = JSON.stringify(p);

var p2 = JSON.parse(jsonString);

alert(p2.getX())
                                                 egration
                                                t
                                     Backend In
                                                N and turn
                            se Objects into JSO
                   Turn Joo                   jects
                          JSON into Joose ob
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 () {
                                                      ion
        return this.y
                                                  zat
                                              ati
    },
                                             m
                                         Dra
    setY: function (y) {
        this.y = y;
if(Test == null) {
    Test = {};
Classes and Namespaces in native JS
}

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) {
        this.y = y;
    },
    clear: function () {
        this.setX(0)
                                                      ion
                                                  zat
        this.setY(0)
                                              ati
    }
                                             m
                                         Dra
}
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;,
                init: 0
            }
        },
        methods: {
            clear: function () {
                this.setX(0);
                this.setY(0);
                                                    olling
            }
                                        eed for scr
                                   No n
        }
    })
})
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
                                                                             ion
                                                                         zat
Test.StandardPoint3D.prototype.getZ = function () {
                                                                      ti
                                                                   ma
    return this.z
                                                               Dra
}
}

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;
}
                                                                             ion
                                                                         zat
                                                                     ati
                                                                    m
                                                                Dra
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

_   Tested with
     _   jQuery
     _   YUI
     _   Prototype
     _   MooTools
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
_   Demandware :)
_   JScript.NET
_   Flash comming soon
_   Ensured by an extensive automated test suite.
Joose runs

_   in all common browsers
_   Rhino
_   Demandware :)
_   JScript.NET
_   Flash comming soon
_   Ensured by an extensive automated test suite.




                                                               ired
                                                        requ
                                            ting in IE6
                                   extra tes
                              No
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
_   Introspection / Reflection
_   Everything Meta
_   DOM Binding
_   Client Side Databases
More Info

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

More Related Content

What's hot

The Ring programming language version 1.9 book - Part 41 of 210
The Ring programming language version 1.9 book - Part 41 of 210The Ring programming language version 1.9 book - Part 41 of 210
The Ring programming language version 1.9 book - Part 41 of 210Mahmoud Samir Fayed
 
Fee managment system
Fee managment systemFee managment system
Fee managment systemfairy9912
 
More on Classes and Objects
More on Classes and ObjectsMore on Classes and Objects
More on Classes and ObjectsPayel Guria
 
The Ring programming language version 1.10 book - Part 42 of 212
The Ring programming language version 1.10 book - Part 42 of 212The Ring programming language version 1.10 book - Part 42 of 212
The Ring programming language version 1.10 book - Part 42 of 212Mahmoud Samir Fayed
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScriptJulie Iskander
 
FunScript 2013 (with speakers notes)
FunScript 2013 (with speakers notes)FunScript 2013 (with speakers notes)
FunScript 2013 (with speakers notes)Zach Bray
 
Let the type system be your friend
Let the type system be your friendLet the type system be your friend
Let the type system be your friendThe Software House
 
The Ring programming language version 1.5.4 book - Part 31 of 185
The Ring programming language version 1.5.4 book - Part 31 of 185The Ring programming language version 1.5.4 book - Part 31 of 185
The Ring programming language version 1.5.4 book - Part 31 of 185Mahmoud Samir Fayed
 
Operator Overloading In Scala
Operator Overloading In ScalaOperator Overloading In Scala
Operator Overloading In ScalaJoey Gibson
 
ハイブリッド言語Scalaを使う
ハイブリッド言語Scalaを使うハイブリッド言語Scalaを使う
ハイブリッド言語Scalaを使うbpstudy
 
Object Equality in Scala
Object Equality in ScalaObject Equality in Scala
Object Equality in ScalaKnoldus Inc.
 
Programmation fonctionnelle Scala
Programmation fonctionnelle ScalaProgrammation fonctionnelle Scala
Programmation fonctionnelle ScalaSlim Ouertani
 
Object Orientation vs Functional Programming in Python
Object Orientation vs Functional Programming in PythonObject Orientation vs Functional Programming in Python
Object Orientation vs Functional Programming in PythonTendayi Mawushe
 
Object Oriented Programming in js
Object Oriented Programming in jsObject Oriented Programming in js
Object Oriented Programming in jsthreepointone
 
The Ring programming language version 1.8 book - Part 36 of 202
The Ring programming language version 1.8 book - Part 36 of 202The Ring programming language version 1.8 book - Part 36 of 202
The Ring programming language version 1.8 book - Part 36 of 202Mahmoud Samir Fayed
 
The Ring programming language version 1.5.1 book - Part 30 of 180
The Ring programming language version 1.5.1 book - Part 30 of 180The Ring programming language version 1.5.1 book - Part 30 of 180
The Ring programming language version 1.5.1 book - Part 30 of 180Mahmoud Samir Fayed
 

What's hot (20)

The Ring programming language version 1.9 book - Part 41 of 210
The Ring programming language version 1.9 book - Part 41 of 210The Ring programming language version 1.9 book - Part 41 of 210
The Ring programming language version 1.9 book - Part 41 of 210
 
Fee managment system
Fee managment systemFee managment system
Fee managment system
 
Python programming : Classes objects
Python programming : Classes objectsPython programming : Classes objects
Python programming : Classes objects
 
More on Classes and Objects
More on Classes and ObjectsMore on Classes and Objects
More on Classes and Objects
 
The Ring programming language version 1.10 book - Part 42 of 212
The Ring programming language version 1.10 book - Part 42 of 212The Ring programming language version 1.10 book - Part 42 of 212
The Ring programming language version 1.10 book - Part 42 of 212
 
Object Oriented JavaScript
Object Oriented JavaScriptObject Oriented JavaScript
Object Oriented JavaScript
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
FunScript 2013 (with speakers notes)
FunScript 2013 (with speakers notes)FunScript 2013 (with speakers notes)
FunScript 2013 (with speakers notes)
 
Suit case class
Suit case classSuit case class
Suit case class
 
Let the type system be your friend
Let the type system be your friendLet the type system be your friend
Let the type system be your friend
 
The Ring programming language version 1.5.4 book - Part 31 of 185
The Ring programming language version 1.5.4 book - Part 31 of 185The Ring programming language version 1.5.4 book - Part 31 of 185
The Ring programming language version 1.5.4 book - Part 31 of 185
 
Advanced JavaScript
Advanced JavaScript Advanced JavaScript
Advanced JavaScript
 
Operator Overloading In Scala
Operator Overloading In ScalaOperator Overloading In Scala
Operator Overloading In Scala
 
ハイブリッド言語Scalaを使う
ハイブリッド言語Scalaを使うハイブリッド言語Scalaを使う
ハイブリッド言語Scalaを使う
 
Object Equality in Scala
Object Equality in ScalaObject Equality in Scala
Object Equality in Scala
 
Programmation fonctionnelle Scala
Programmation fonctionnelle ScalaProgrammation fonctionnelle Scala
Programmation fonctionnelle Scala
 
Object Orientation vs Functional Programming in Python
Object Orientation vs Functional Programming in PythonObject Orientation vs Functional Programming in Python
Object Orientation vs Functional Programming in Python
 
Object Oriented Programming in js
Object Oriented Programming in jsObject Oriented Programming in js
Object Oriented Programming in js
 
The Ring programming language version 1.8 book - Part 36 of 202
The Ring programming language version 1.8 book - Part 36 of 202The Ring programming language version 1.8 book - Part 36 of 202
The Ring programming language version 1.8 book - Part 36 of 202
 
The Ring programming language version 1.5.1 book - Part 30 of 180
The Ring programming language version 1.5.1 book - Part 30 of 180The Ring programming language version 1.5.1 book - Part 30 of 180
The Ring programming language version 1.5.1 book - Part 30 of 180
 

Viewers also liked

The Power of Place 2.0: The Power of Innovation
The Power of Place 2.0: The Power of InnovationThe Power of Place 2.0: The Power of Innovation
The Power of Place 2.0: The Power of InnovationEileen Walker
 
The Power of Place: A National Strategy for Building Communities of Innovation
The Power of Place: A National Strategy for Building Communities of InnovationThe Power of Place: A National Strategy for Building Communities of Innovation
The Power of Place: A National Strategy for Building Communities of InnovationEileen Walker
 
complications of HD case presentation
complications of HD case presentationcomplications of HD case presentation
complications of HD case presentationDr. Abrar Ali Katpar
 
Postmodern Web Apps
Postmodern Web AppsPostmodern Web Apps
Postmodern Web Appsmalteubl
 
J2EE :) Joose - A Meta Object System for JavaScript
J2EE :) Joose - A Meta Object System for JavaScriptJ2EE :) Joose - A Meta Object System for JavaScript
J2EE :) Joose - A Meta Object System for JavaScriptmalteubl
 
Business Aspects of High Performance Websites
Business Aspects of High Performance WebsitesBusiness Aspects of High Performance Websites
Business Aspects of High Performance Websitesmalteubl
 
La Bo[a]te en images
La Bo[a]te en imagesLa Bo[a]te en images
La Bo[a]te en imagesmine16
 

Viewers also liked (14)

Social Media For Sales
Social Media For SalesSocial Media For Sales
Social Media For Sales
 
The Power of Place 2.0: The Power of Innovation
The Power of Place 2.0: The Power of InnovationThe Power of Place 2.0: The Power of Innovation
The Power of Place 2.0: The Power of Innovation
 
The Power of Place: A National Strategy for Building Communities of Innovation
The Power of Place: A National Strategy for Building Communities of InnovationThe Power of Place: A National Strategy for Building Communities of Innovation
The Power of Place: A National Strategy for Building Communities of Innovation
 
Social Media 101
Social Media 101Social Media 101
Social Media 101
 
complications of HD case presentation
complications of HD case presentationcomplications of HD case presentation
complications of HD case presentation
 
Postmodern Web Apps
Postmodern Web AppsPostmodern Web Apps
Postmodern Web Apps
 
J2EE :) Joose - A Meta Object System for JavaScript
J2EE :) Joose - A Meta Object System for JavaScriptJ2EE :) Joose - A Meta Object System for JavaScript
J2EE :) Joose - A Meta Object System for JavaScript
 
early vs late dialysis
early vs late dialysisearly vs late dialysis
early vs late dialysis
 
Business Aspects of High Performance Websites
Business Aspects of High Performance WebsitesBusiness Aspects of High Performance Websites
Business Aspects of High Performance Websites
 
RVD
RVDRVD
RVD
 
Uremic Encephalopathy
Uremic EncephalopathyUremic Encephalopathy
Uremic Encephalopathy
 
Hypophosphatemia
HypophosphatemiaHypophosphatemia
Hypophosphatemia
 
Alports Syndrome Pp
Alports Syndrome PpAlports Syndrome Pp
Alports Syndrome Pp
 
La Bo[a]te en images
La Bo[a]te en imagesLa Bo[a]te en images
La Bo[a]te en images
 

Similar to Joose @jsconf

NetBeans Plugin Development: JRebel Experience Report
NetBeans Plugin Development: JRebel Experience ReportNetBeans Plugin Development: JRebel Experience Report
NetBeans Plugin Development: JRebel Experience ReportAnton Arhipov
 
Functions and Objects in JavaScript
Functions and Objects in JavaScript Functions and Objects in JavaScript
Functions and Objects in JavaScript Dhananjay Kumar
 
Type script, for dummies
Type script, for dummiesType script, for dummies
Type script, for dummiessantiagoaguiar
 
11. Java Objects and classes
11. Java  Objects and classes11. Java  Objects and classes
11. Java Objects and classesIntro C# Book
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript IntroductionDmitry Sheiko
 
Chapter 7 functions (c)
Chapter 7 functions (c)Chapter 7 functions (c)
Chapter 7 functions (c)hhliu
 
Mongoskin - Guilin
Mongoskin - GuilinMongoskin - Guilin
Mongoskin - GuilinJackson Tian
 
jrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeusjrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeusTakeshi AKIMA
 
Tour de Jackson: Forgotten Features of Jackson JSON processor
Tour de Jackson: Forgotten Features of Jackson JSON processorTour de Jackson: Forgotten Features of Jackson JSON processor
Tour de Jackson: Forgotten Features of Jackson JSON processorTatu Saloranta
 
JavaScript Fundamentals with Angular and Lodash
JavaScript Fundamentals with Angular and LodashJavaScript Fundamentals with Angular and Lodash
JavaScript Fundamentals with Angular and LodashBret Little
 
No more promises lets RxJS 2 Edit
No more promises lets RxJS 2 EditNo more promises lets RxJS 2 Edit
No more promises lets RxJS 2 EditIlia Idakiev
 
Introduction to Client-Side Javascript
Introduction to Client-Side JavascriptIntroduction to Client-Side Javascript
Introduction to Client-Side JavascriptJulie Iskander
 

Similar to Joose @jsconf (20)

V8
V8V8
V8
 
NetBeans Plugin Development: JRebel Experience Report
NetBeans Plugin Development: JRebel Experience ReportNetBeans Plugin Development: JRebel Experience Report
NetBeans Plugin Development: JRebel Experience Report
 
Functions and Objects in JavaScript
Functions and Objects in JavaScript Functions and Objects in JavaScript
Functions and Objects in JavaScript
 
Type script, for dummies
Type script, for dummiesType script, for dummies
Type script, for dummies
 
New C# features
New C# featuresNew C# features
New C# features
 
11. Java Objects and classes
11. Java  Objects and classes11. Java  Objects and classes
11. Java Objects and classes
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
Chapter 7 functions (c)
Chapter 7 functions (c)Chapter 7 functions (c)
Chapter 7 functions (c)
 
Mongoskin - Guilin
Mongoskin - GuilinMongoskin - Guilin
Mongoskin - Guilin
 
SDC - Einführung in Scala
SDC - Einführung in ScalaSDC - Einführung in Scala
SDC - Einführung in Scala
 
jrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeusjrubykaigi2010-lt-rubeus
jrubykaigi2010-lt-rubeus
 
Tour de Jackson: Forgotten Features of Jackson JSON processor
Tour de Jackson: Forgotten Features of Jackson JSON processorTour de Jackson: Forgotten Features of Jackson JSON processor
Tour de Jackson: Forgotten Features of Jackson JSON processor
 
JavaScript Fundamentals with Angular and Lodash
JavaScript Fundamentals with Angular and LodashJavaScript Fundamentals with Angular and Lodash
JavaScript Fundamentals with Angular and Lodash
 
An introduction to scala
An introduction to scalaAn introduction to scala
An introduction to scala
 
Jeop game-final-review
Jeop game-final-reviewJeop game-final-review
Jeop game-final-review
 
No more promises lets RxJS 2 Edit
No more promises lets RxJS 2 EditNo more promises lets RxJS 2 Edit
No more promises lets RxJS 2 Edit
 
Scala ntnu
Scala ntnuScala ntnu
Scala ntnu
 
ES6 in Real Life
ES6 in Real LifeES6 in Real Life
ES6 in Real Life
 
Java Class Design
Java Class DesignJava Class Design
Java Class Design
 
Introduction to Client-Side Javascript
Introduction to Client-Side JavascriptIntroduction to Client-Side Javascript
Introduction to Client-Side Javascript
 

Recently uploaded

The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 

Recently uploaded (20)

The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 

Joose @jsconf

  • 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 se when very much need the You will still e Browser you use Joose in th
  • 6. Joose helps _ write _ well structured, _ expressive, _ declarative, _ maintainable _ JavaScript applications.
  • 7. Joose helps _ write _ well structured, _ expressive, _ declarative, _ maintainable _ JavaScript applications. ll it: n would ca Su Edition Enterprise JavaScript
  • 8. Core Features _ Classes _ Interfaces _ Mixins _ Modules / Packages / Namespaces _ Roles _ (Mixins + Interfaces) _ Method Modifiers _ (think aspect oriented programming)
  • 9. Core Features Declarative methods to build all these things
  • 10. Meta Features Object based interface to introspect and manipulate all these things at runtime. Meta classes for classes, methods and attributes.
  • 11. Meta?
  • 12. Meta? the meta need to understand You don't Joose. features to work with
  • 13. Meta? the meta need to understand You don't Joose. features to work with o :) ou d ore fun if y it is m But
  • 14. Mission Steal all the nice features from other programming languages. Make them available in JavaScript in a way that feels native to JavaScript.
  • 15. Java, C#, etc. _ Classes _ Interfaces _ Packages / Namespaces
  • 16. Smalltalk, CLOS (Common Lisp Object System) _ Meta classes _ Meta attributes _ Meta methods
  • 17. Ruby _ Mixins _ Meta classes
  • 18. Perl 6 _ Roles _ Method modifiers _ Type constraints and coercions
  • 19. Perl 5 _ Moose (All of the above)
  • 20. LET‘S LOOK AT SOME CODE
  • 22. with two attributes Class(quot;Pointquot;, { has: { x: {is: quot;roquot;}, y: {is: quot;rwquot;}, } })
  • 23. 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); } } })
  • 25. after... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, after: { clear: function () { this.z = 0; } } })
  • 26. before... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, before: { clear: function () { this.z = 0; } } })
  • 27. before... Class(quot;Point3Dquot;, { isa: Point, has: { z: {} }, override: { clear: function () { this.SUPER(); this.z = 0; } } })
  • 28. 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 });
  • 29. Modules _ create a namespace _ create a lexical scope for your code. _ No need for ugly (function () { ... })() _
  • 30. Bank.Account Module(quot;Bankquot;, function (m) { Class(quot;Accountquot;, { has: { balance: { is: quot;rwquot;, init: 0 } } } })
  • 31. JSON Integration Class(quot;Geometry.Pointquot;, { does: Joose.Storage, has: { x: {is: rw}, y: {is: rw}, $: { is: rw, init: quot;stuffquot;, persistent: false } } })
  • 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())
  • 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()) N and turn se Objects into JSO Turn Joo jects JSON into Joose ob
  • 34. JSON Integration var p = new Geometry.Point({x: 10, y: 20}) var jsonSring = JSON.stringify(p); var p2 = JSON.parse(jsonString); alert(p2.getX()) egration t Backend In N and turn se Objects into JSO Turn Joo jects JSON into Joose ob
  • 36. 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 () { ion return this.y zat ati }, m Dra setY: function (y) { this.y = y;
  • 37. if(Test == null) { Test = {}; Classes and Namespaces in native JS } 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) { this.y = y; }, clear: function () { this.setX(0) ion zat this.setY(0) ati } m Dra }
  • 38. 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); } } }) })
  • 39. 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); olling } eed for scr No n } }) })
  • 40. 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 ion zat Test.StandardPoint3D.prototype.getZ = function () { ti ma return this.z Dra }
  • 41. } 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; } ion zat ati m Dra
  • 42. 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) } } }) })
  • 44. Class Browser _ http://it.test.avantaxx.de/xssinterface/projects/Joose/examples/class_browser.html
  • 45. 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
  • 46. File Size _ Minified: 56 kb _ GZipped: 16 kb
  • 47. 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.
  • 48. 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.
  • 49. Other Frameworks _ Tested with _ jQuery _ YUI _ Prototype _ MooTools
  • 50. Joose does not _ extend any default object prototypes. Object.prototype.boom = function () { alert(„Dont try this at home“) }
  • 51. Joose runs _ in all common browsers _ Rhino _ Demandware :) _ JScript.NET _ Flash comming soon _ Ensured by an extensive automated test suite.
  • 52. Joose runs _ in all common browsers _ Rhino _ Demandware :) _ JScript.NET _ Flash comming soon _ Ensured by an extensive automated test suite. ired requ ting in IE6 extra tes No
  • 53. Use cases? Joose is not always the right tool for the job!
  • 54. Use it if You need more than three quot;classesquot;. It makes sense to maintain page state in objects.
  • 55. Advanced Topics _ Backend Integration _ Prototype based object orientation _ Introspection / Reflection _ Everything Meta _ DOM Binding _ Client Side Databases
  • 56. More Info _ http://code.google.com/p/joose-js/ _ http://joose-js.blogspot.com _ http://twitter.com/cramforce