Page 1 of 2
Fun building on top of JavaScript (Objective-J)
Posted: Tue Dec 09, 2008 11:39 pm
by Chris Corbyn
I've been following the
Cappuccino developments for quite a while now since I like Objective-C and Cocoa when I'm bored and need to play with something new (to me).
Only today however did I download the Cappuccino source and started playing around. Unfortunately, to use the AppKit framework it takes over your whole browser window, which is fine if you're trying to build a Cocoa-like GUI anyway.
But playing around with the language itself and the Foundation framework it's pretty damn sweet. I have to wonder if it's usage will pick up as developers adopt Objective-J as a nice superset of JavaScript in order to get all that Objective-C-like OO goodness.
If anyone doesn't know about it, Objective-J is an implementation of Objective-C (the language used throughout Mac OS) in JavaScript. It builds on top of JavaScript itself, runs in any browser and basically adds features (and syntax) to the language.
Cappuccino is a re-implementation of parts of Cocoa, AppKit, CoreGraphics and Foundation (the base frameworks within Mac OS) in Objective-J. It's by no means got everything Cocoa has, but it has enough to build something as impressive as the
280 Slides application which they use as a demo of its power.
Basically you load the Objective-J runtime, then you load in your .j files and off it goes. You can still use standard JavaScript just like you can use standard C (or C++) within Objective-C apps.
Example Hello World (Assumes you've copied the framework to a folder called "Frameworks/Foundation"):
projects/index.html
Code: Select all
<html> <head> <title>Hello World Example</title> <script src="Frameworks/Objective-J/Objective-J.js" type="text/javascript"></script> <script type="text/javascript"><!-- objj_import("main.j", YES, function() { main(); }); // --></script> </head> <body> <div> <h1>Hello World Example</h1> <p> Contents of your standard HTML page. </p> </div> </body></html>
project/main.j (bootstrap)
Code: Select all
import <Foundation/Foundation.j>
import "Classes/Hello.j"
function main()
{
var hello = [[Hello alloc] init]; //This should look familiar to Mac developers
[hello shoutTo: @"World!"];
}
projects/Classes/Hello.j
Code: Select all
import <Foundation/Foundation.j>
@implementation Hello : CPObject
{
}
- (void)sayTo:(CPString)addressee
{
var phrase = [self phraseWithAddressee:addressee];
[self showAlert:phrase];
}
- (void)shoutTo:(CPString)addressee
{
var phrase = [self phraseWithAddressee:addressee];
[self showAlert:[phrase uppercaseString]];
}
- (CPString)phraseWithAddressee:(CPString)addressee
{
return [[CPString alloc] initWithFormat:@"Hello %s!", addressee];
}
- (void)showAlert:(CPString)message
{
//Simple JavaScript!
alert(message);
}
@end
When opened the above just displays an alert saying "HELLO WORLD!" in uppercase.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Wed Dec 10, 2008 7:17 pm
by Chris Corbyn
I'm quite surprised there's not much interest in this. I know the syntax is a little crazy to see through, but the language itself is beautiful. Perhaps not many who've dabbled in Objective-C before here?

People have been wanting classical inheritance in JavaScript for years and Objective-J provides this, along with things like static typing, more logically (IMHO) than something like Prototype. The developers have borrowed a lot of concepts from things like jQuery, GWT and Prototype to make this work.
I might write a little example app to show off some stuff when I'm less busy with Swift Mailer. A Hello World doesn't do it justice really.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Wed Dec 10, 2008 7:32 pm
by Luke
A friend of mine has really been talking up Objective-C. I'll have to point this out to him. I am interested in seeing a more advanced example.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Wed Dec 10, 2008 7:45 pm
by Eran
Personally, I think the prototypical inheritance of Javascript and functions as first class objects are incredibly powerful tools. There are already several packages that attempt to bring class-based inheritance to javascript without a new language syntax but those too I don't find very appealing.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Wed Dec 10, 2008 8:34 pm
by Chris Corbyn
pytrin wrote:Personally, I think the prototypical inheritance of Javascript and functions as first class objects are incredibly powerful tools.
I agree, but when you've got a hybrid like objective-j you have something very cool and flexible to work with. I think Objective-J has been misunderstood by some fanatical JS guys as a way to develop in JavaScript without using JavaScript (John Resig for example has put Cappuccino down by implying that it prevents developers from learning how to use JS). Really though, you need to understand JavaScript if you want to make use of Objective-J, just like you need to understand C if you want to use Objective-C. In objective C you can still write C code amongst your Objective-C classes, and in Objective-J you can still write JavaScript code within your Objective-J classes. It isn't trying to replace JavaScript, it just provides a nice new set of language features (plus the Frameworks it includes) on top of what JS already offers and I'm keen to see it evolve.
JavaScript lends itself to this sort of manipulation very well.
Granted, it's a bit of a toy but it's a fun one to play with and follow developments on.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Wed Dec 10, 2008 11:42 pm
by jack_indigo
Yeah, guys, I've been hearing a good bit of buzz about this. I believe if Objective-J takes off, it may even impact the career path of a lot of PHP devs.
Most of us PHP devs already know a good bit of Javascript, and many of us learned C in college, and we PHP devs like duck typing, so we should feel right at home with a language like this.
I mean, think about it. Developing both the client and server code in a form of Javascript.
Now, if Objective-J can run as an Apache 2 module instead of CGI and instead of an exclusive web daemon, that would be even cooler. (However, I haven't checked this out yet to know.)
Re: Fun building on top of JavaScript (Objective-J)
Posted: Thu Dec 11, 2008 12:25 am
by Chris Corbyn
Hi jack_indigo,
I'm not sure if you've got the wrong end of the stick on what objective-j is here. It's a client-side language, not a server-side language
The runtime is written in JS and is downloaded to the browser. That runtime then pre-processes the Objective-J code into straight JavaScript
I guess you could run it on the server by wrapping the command line interpreter (objj, provided in the "Tools" download from cappuccino.org) with CGI but that's not something I'm aware of.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Thu Dec 11, 2008 2:08 am
by jack_indigo
Oh, now I feel dumb. So much for skim reading. Way too much work going on right now.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Thu Dec 11, 2008 3:04 am
by Chris Corbyn
Easily done
That did make me wonder if there are any ECMAScript modules for apache however. Looking over the source of the runtime for Objective-J it wouldn't work in a base ECMAScript environment since it heavily depends on aspects of JavaScript.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Thu Dec 11, 2008 3:55 am
by Chris Corbyn
So, perhaps more convincing than the inheritance model is something to cut time by allowing you to drop all that boilerplate code you usually write for accessors.
Just so this makes sense, those not familiar with the language itself, directives beginning with @ indicate things to the compiler/interpreter. A class definition begins with @implementation and ends with @end. Instance methods start with "-" followed by the return type in parens "(BOOL)" followed by a colon separated list of arguments. Class properties are placed inside curly braces right after the @implementation line. The "extends" keyword is just a colon "MyClass extends CPObject" becomes "MyClass : CPObject". There are no constructors as such, you use [[ClassName alloc] init] generally but you can create your own version of init.
Code: Select all
import <Foundation/Foundation.j>
@implementation Person : CPObject
{
CPString name;
CPString hairColor;
}
- (id)initWithName:(CPString)aName:hairColor(CPString)aHairColor
{
[super init];
name = aName;
hairColor = aHairColor;
return self;
}
- (CPString)name
{
return name;
}
- (void)setName:(CPString)aName
{
name = aName;
}
- (CPString)hairColor
{
return hairColor;
}
- (void)setHairColor:(CPString)aHairColor
{
hairColor = aHairColor;
}
@end
Code: Select all
var person = [[Person alloc] initWithName:@"Chris" hairColor:@"Brown"];
//Now...
alert([person hairColor]); //Brown
alert([person name]); //Chris
//When I was a kid...
[person setName:@"Christopher"];
[person setHairColor:@"Blonde"];
alert([person hairColor]); //Blonde
alert([person name]); //Christopher
Nothing new here, just a basic class with getters and setters (note that in ObjC and ObjJ it's convention to drop the "get" portion of getters).
Now try this in pure JavaScript:
Code: Select all
@implementation Person : CPObject
{
CPString name @accessors;
CPString hairColor @accessors;
}
- (id)initWithName:(CPString)aName:hairColor(CPString)aHairColor
{
[super init];
name = aName;
hairColor = aHairColor;
return self;
}
@end
All the getters and setters have gone, but the code still works.
I could force the setters to disappear if I want by marking the property as read-only:
Code: Select all
@implementation Person : CPObject
{
CPString name @accessors(readonly);
CPString hairColor @accessors(readonly);
}
I could also force the getter to be called something of my own choice:
Code: Select all
@implementation Person : CPObject
{
CPString name @accessors(readonly, getter=getName);
CPString hairColor @accessors(readonly, getter=getHairColor);
}
I can also enforce that property as being immutable:
Code: Select all
@implementation Person : CPObject
{
CPString name @accessors(copy);
CPString hairColor @accessors(readonly);
}
Re: Fun building on top of JavaScript (Objective-J)
Posted: Thu Dec 11, 2008 3:09 pm
by panic!
I've been using my personal development time at work (we get about a day a week to research and develop our skills how we choose) to pick up objective-c for iPhone development. The framework makes everything really, really easy. I wrote an app to track bus times in Brighton in about 3 hours. Nothing releasable of course, but a fun proof of concept.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Wed Dec 17, 2008 1:09 pm
by josh
Is there any good tutorials to get up to speed on this? Or would it require familiarity with objective C? Can I use this with other frameworks like JQuery?
Re: Fun building on top of JavaScript (Objective-J)
Posted: Thu Dec 18, 2008 6:43 am
by Chris Corbyn
jshpro2 wrote:Is there any good tutorials to get up to speed on this? Or would it require familiarity with objective C? Can I use this with other frameworks like JQuery?
I'm sure they'll begin to show up, but since it's still pre-1.0 (0.6.5) it's all a bit new. Knowing the basics of Objective-C (look it up on the Apple Developer Connection (ADC) site) will be enough to get the grips with the syntax.
You can use existing frameworks like jQuery yes... it doesn't remove JavaScript from the browser, it just adds features on top of the language (that's why it uses the square brackets and @ signs).
http://developer.apple.com/DOCUMENTATIO ... 63-CH1-SW2 (You might need a free account).
One of the things you need to get your head around is the idea that by calling a method ( [myObject myMethod:someArg] ) you're not just invoking a method, you're "sending a message" to the object and the object provides a response. You can interact directly with the runtime to do some really cool stuff like you can do in ObjC.
The syntax is actually based on SmallTalk.
Re: Fun building on top of JavaScript (Objective-J)
Posted: Thu Dec 18, 2008 1:53 pm
by josh
The syntax is actually based on SmallTalk.
very cool...
Chris Corbyn wrote:One of the things you need to get your head around is the idea that by calling a method ( [myObject myMethod:someArg] ) you're not just invoking a method, you're "sending a message" to the object and the object provides a response. You can interact directly with the runtime to do some really cool stuff like you can do in ObjC.
I have a rough idea of what you mean, you mean its not calling the method directly in the language, instead its creating a "stack" that the "objective J" interpreter calls? Like callbacks in jquery? I'm going to read up on objC like you said, what is this called so when I read about it I know its what you're talking about ( the message ).
Re: Fun building on top of JavaScript (Objective-J)
Posted: Thu Dec 18, 2008 4:02 pm
by Chris Corbyn
jshpro2 wrote:I have a rough idea of what you mean, you mean its not calling the method directly in the language, instead its creating a "stack" that the "objective J" interpreter calls? Like callbacks in jquery? I'm going to read up on objC like you said, what is this called so when I read about it I know its what you're talking about ( the message ).
Yeah, there's a function called objc_msgSend() in Objective-C. You don't "need" to use it, but that's how the runtime works underneath. It takes whatever arguments you want to send, along with a pointer to the object (just a struct with a bunch of info AFAIK). See, in ObjC, your code actually just gets turned into pure C with a whole heap if these objc_msgSend() calls in procedural code, but the runtime is maintaining the state of your objects in structs. Inheritance is pretty easy too, if the object that you sent the message to doesn't contain that message, it sends it to "super" instead (parent). If parent doesn't have the method, it sends it to super again. Arguments and methods are defined by something called "selectors".
Objective-J has much the same underlying runtime. It's got a function called objj_msgSend() and it has selectors. When it just get processed down into pure JavaScript code and then executed unsing the runtime.
And surprise surprise, this is all called "messaging" in Objective-C and J
