YUI Theater — Douglas Crockford: “Crockford on JavaScript — Volume 1: The Early Years”

February 3, 2010 at 12:44 pm by Eric Miraglia | In YUI Theater | 10 Comments

Douglas Crockford delivers the first lecture in his his Crockford on JavaScript lecture series at Yahoo on Janurary 25, 2010.

In the first part of Douglas Crockford’s five-part series on the JavaScript programming language, he explores the historical context from which JavaScript emerged. But he begins with a little bit of his own history, relating his efforts as a child to build a homemade computer:

I found some pieces of particle board and a saw and I sketched out what it was going to look like, and started sawing. I sawed, and sawed, and sawed. The particle board was really, really hard, and the saw was really, really dull. I sawed for what must have been at least two minutes, and then I gave up. OK, I’m not going to do that. So I probably went into the house and watched television after that. At that time, even at that tender age, it was already obvious that I was going to be a software guy.

For the better part of two hours, Douglas takes you on a historical journey in which you learn about:

  • the origin of the eighty-character limit
  • the history of punch-cards and their impact on modern programming
  • the origin of the term “spaghetti code”
  • why accessibility has gone downhill since the days of the Teletype
  • why we’re still living with both a carriage return character and a line feed character, and where those concepts originated
  • the genealogy of command-line text editors
  • what languages like ALGOL, Simula, and Self have to do with JavaScript
  • why “the guys who could write for the [Atari] VCS were heroes”
  • why innovation in software is slower than innovation in hardware

A few tickets remain for the next four installments of the series, which resumes Friday night with “Chapter 2: And Then There Was JavaScript.” We hope to see you here.

If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater or download the video in HD (700MB).

Other Recent YUI Theater Videos:

  • John Resig: Testing, Performance Analysis, and jQuery 1.4 — John Resig of Mozilla, creator of the popular jQuery JavaScript library, reviews options for testing and performance analysis in JavaScript and previews the significant changes coming soon in jQuery 1.4.
  • Luke Smith: Events Evolved — YUI engineer Luke Smith provides a deep introduction to the YUI 3 event system including its support for DOM events, event delegation, synthetic events, and custom events.
  • Satyen Desai: A Widget Walkthrough — YUI engineer Satyen Desai provides a detailed tour of the YUI 3 widget subsystem.

Subscribing to YUI Theater:

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Fybit Riatrax4Js: Program YUI in Java

February 2, 2010 at 11:08 am by Erol Koç | In Development, In the Wild, YUI Implementations | 2 Comments

Erol KoçAbout the Author: Erol Koç is a co-founder of Fybit, a Switzerland based startup company. Before joining Fybit, he worked as a software architect for a security company where he was the tech lead for the product’s web frontend. He has an MS degree in computer science from ETH Zurich. During an internship at IBM, he contributed to the Eclipse project.

Fybit Riatrax4Js: Write YUI in Java

YUI is not only a fantastic JavaScript library, it is also a great community. Developers contribute to YUI and allow others to benefit from it. Now, Fybit joins the YUI community with Riatrax4Js, a toolkit for rich internet applications (RIAs) based on YUI. Riatrax4Js allows you to program RIAs in plain Java and automatically translates your code to JavaScript, using YUI as a foundation layer. With YUI being available from Python, Java and JavaScript, one fourth of all developers get access to YUI. And with 18%, Fybit’s Riatrax4Js covers the largest part, consisting of Java developers.

Riatrax4Js: Java benefits, powerful YUI widgets

We just launched the Riatrax4Js alpha version with the goal of easing development of YUI-based RIAs. Riatrax4Js combines the advantages of Java with the extensive widget set and controls of YUI. Consequently, you get the benefits and comfort of Java programming such as:

  • Type safety
  • Inheritance
  • IDE support (Eclipse, NetBeans, …)
  • Debugging
  • Test tools like JUnit
  • Access to many 3rd party libraries

And you all know how fantastic YUI is:

  • Many powerful widgets
  • Compatible with all major browsers
  • Great performance
  • Yahoo! experts develop YUI

Add up the advantages of Java and YUI, you get the properties of Riatrax4Js. Riatrax4Js is not a server-side framework. It compiles Java to JavaScript, leveraging the standard Java compiler to give you unlimited scalability and speed. Moreover, Riatrax4Js allows you to connect your YUI frontend to the web server and backend with a simple annotation-based remoting mechanism.

A simple example: Show the server’s time on a button’s label when clicked

This section walks you through a simple example that is available for download from our website. Riatrax4Js apps consist of regular Java classes that can use the Java version of YUI that ships with Riatrax4Js. Here is how simple that is: 

@MainPanel(name="index")
public class DemoPanel {
		
	@Services(implementation=TimeServiceImpl.class)
	protected static TimeService service;
	
	public DemoPanel () {
		final Button syncButton = Button.create("syncButton");
		syncButton.addClickListener(new Listener() {
			public void perform () {
				syncButton.setConfLabel("Sync: " + service.getTime());
			}
		});
	}
}

The code starts with a @MainPanel annotation to allow Riatrax4Js to find the entry point to your program. Next, there is a field service that is annotated with the @Services annotation. Thanks to this annotation, the server can be called to get the time (or any other value/object you want to use on the client). It does not have to be explicitly initialized, Riatrax4Js does the dirty work for you and ensures that the client and server parts are connected by injecting an appropriate proxy. A YUI Button is then created by replacing an existing HTML button “syncButton” of your HTML page. A click listener which invokes the time service on the server is attached to the button. This is a synchronous (i.e., blocking) call. Async calls are just as easy: The generated proxies contains an async variant of each method in the interface that can be readily used. Here is the corresponding HTML page for the code: 

<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Fybit New</title>
		<script type="text/javascript" src="codebase/app-index.js"></script>
	</head>
	
	<body class="yui-skin-sam">
		<button id="syncButton">Synchronous Call</button>
	</body>
</html>

The most important line is the script tag at the beginning. It includes a single JavaScript file app-index.js where “index” is the name given in the @MainPanel annotation above. In the HTML body, you can find the aforementioned HTML button. Riatrax4Js wraps the YUI Button over this button.

A YUI button with server invocation

When you compile the application, Riatrax4Js analyses the source files and generates the file app-index.js consisting of the Java classes needed in the browser translated to JavaScript as well as the necessary YUI JavaScript code. Unlike with native YUI, you don’t have to care about YUI dependencies or which YUI files to include — Riatrax4Js includes them automatically!

This is just a small excerpt from a larger demo. The full demo also explains how to call the server asynchronously and how to use other YUI widgets (text editors, auto-completion, menus etc.). Apart from generating web application from scratch, using Riatrax4Js you can improve existing web applications easily with interactive features by wrapping ordinary HTML elements with YUI elements.

The full Fybit sowcase

Beyond demos: “PublicationManager” written with Riatrax4Js

We used Riatrax4Js to develop a user-friendly web application to manage publications for a research group at a university in Switzerland. This application facilitates the process of entering and modifying publication records and it has been put into operation in November 2009. The PublicationManager features YUI dialogs, sortable and resizable tables, paginators and auto-completion. The records entered by the users are stored in a database and can be edited and complemented with files with just a few clicks.

Publication manager for a research group at ETH Zurich

Security

Riatrax4Js is designed to make applications as secure as possible by default. But because Riatrax4Js uses JavaScript, applications are as hard to secure as any other dynamic web app. Fybit offers separate extension to Riatrax4Js, Riatrax Security. It is based on Riatrax4Js’s program code analysis and secures the application by filtering invalid or malicious content and blocking it before it reaches your code and/or application server. Fybit Riatrax Security is also configured with Java annotations.

Want to try?

The alpha version of Riatrax4Js is currently available on our web site to registered users. It’s great to see the user base of Riatrax4Js grow and be used by developers at this stage.

Fybit’s goal is to make Riatrax4Js the best Java RIA toolkit available and support it in the long run. We believe that the YUI community and YUI developers can give us important feedback about Riatrax4Js. We are excited to hear your questions and suggestions, e.g.

  • How can we improve Riatrax4Js?
  • For what kind of projects would you consider Riatrax4Js?
  • What is the best way for us to distribute the product?

As Fybit is a small startup company, we appreciate everyone who wants to contribute to Riatrax4Js to make it the number one RIA framework. Just drop us a line if you are interested or want to know more.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

The YUI Team is Looking for a World-Class Engineer to Work on Frontend CI, Build Systems, and QA

January 28, 2010 at 8:30 am by Eric Miraglia | In Development, Frontend Engineering Jobs at Yahoo | 8 Comments

If working alongside people like Douglas Crockford and on the team that created YUI (Matt Sweeney, Adam Moore, Dav Glass, Jenny Donnelly, Luke Smith, Tripp Bridges, Allen Rabinovich, Alaric Cole, Satyen Desai, and others) sounds like a good way to spend your time, read on: We’re hiring.

We’re looking for a great engineer to help us improve every aspect of our continuous integration (CI) process, including the way we build, document, test, and deploy our code. To succeed in this role, you’ll have to be:

  • familiar with best practices in frontend engineering (e.g., this video should make good sense to you);
  • knowledgeable about the goals and principles of continuous integration;
  • interested in the emerging discipline of automated testing for frontend code (e.g. this video and the first half of this one should make sense to you, and projects like TestSwarm should be deeply interesting);
  • able to solve diverse problems with a heterogeneous set of technologies (e.g. DHTML/Python/Java/Ant/linux/PHP/JavaScript);
  • excited about creating a state-of-the art CI process for YUI and evangelizing it throughout Yahoo! and beyond.

YUI is an open source project, and many of the pieces you’ll be working with are part of the YUI ecosystem. That begins with our YUI Builder tools and extends to components of our existing CI process — tools like YUI Compressor, YUI Doc and YUI Test. You’ll have the opportunity to improve the tools themselves and to improve the way they’re documented and used.

The best part of any job in technology is having the chance to do influential work in an environment that both challenges and supports your growth. The YUI team provides just that confluence of characteristics: a huge, engaged community of users and developers and a team of brilliant engineers collaborating every day to improve the project.

If this sounds like your dream job, and if the people I mentioned above sound like people you’d want to work with every day, I’d love to hear from you. Tell me why you’re the right person for this role, including a link to your resume and professional portfolio, by emailing yui [dash] jobs [at] yahoo-inc.com. (Principals only; no recruiters.)

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Crockford on JavaScript: Night One Recap, and More Tickets Released

January 26, 2010 at 2:25 pm by Eric Miraglia | In YUI Events | No Comments

About 200 people gathered in URLs Café at Yahoo! last night to take in the first installment of the Crockford on JavaScript lecture series. Douglas took the audience through a selective history of computer science and programming languages, focusing on the evolution of those features and conventions that would later give shape to JavaScript.

While we’re working on video from last night, we wanted to share a few pictures and to let you know that we’re adjusting our ticketing limits — if you visit the lecture series page and follow the RSVP links, you’ll now see availability for some of the sessions that had previously been listed as sold out.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

In the Wild for January 19, 2010

January 19, 2010 at 7:32 am by Eric Miraglia | In In the Wild | No Comments

News and notes follow from the past week in the YUI community. As always, please let us know via the comments or @yuilibrary if we missed something good.

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

In the Wild for January 10, 2010

January 8, 2010 at 9:18 am by Eric Miraglia | In In the Wild | 2 Comments

News and notes from the YUI community over the past month…let us know in the comments or at @yuilibrary if we missed something important:

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

More code reuse patterns in YUI3

January 7, 2010 at 6:41 am by Stoyan Stefanov | In Development | No Comments

Stoyan Stefanov.About the Author: Stoyan Stefanov (@stoyanstefanov) is a front-end engineer at Yahoo! Search. He is also the architect of YSlow 2.0, co-creator of the smush.it image optimizer, speaker and technical writer. His latest book is called Object-Oriented JavaScript.

This post is a follow-up to the article “Inheritance patterns in YUI3″ and dives deeper into the YUI3 APIs showing more patterns for code reuse. The Gang of Four book advocates that we should “prefer object composition to class inheritance”. And in fact, inheritance is sometimes used as a workaround in strongly typed languages where the signature of an object or a class needs to be fixed at compile time. JavaScript is loosely typed and objects can be composed, mixed and augmented at any time.

Augmenting objects

In real-life JavaScript, it’s rare that you would have to setup deep inheritance chains. Often you may only want to augment an existing object (or a constructor) with the members of another, without necessarily forming a parent-child relationship. YUI offers the method Y.augment(...) to do just that.

The following example illustrates the difference between the proper inheritance with Y.extend(...) and the simple object augmentation with Y.augment(...).

// parent, a.k.a. supplier of functionality
function Programmer(){}
Programmer.prototype.writeCode = function(){};

// a constructor that gets augmented with supplier's members
function CodeMonkey(){}
Y.augment(CodeMonkey, Programmer);
var monkey = new CodeMonkey();

// a constructor that inherits from the parent-supplier
function Guru(){}
Y.extend(Guru, Programmer);
var guru = new Guru();

Now that we’ve reused Programmer’s functionality in two ways, let’s test the outcome. Both objects monkey and guru now get a writeCode() method, but only the guru is part of the inheritance chain. 

alert(typeof monkey.writeCode); // "function"
alert(typeof guru.writeCode); // "function"

// monkey is not a Programmer, while guru is
alert(monkey instanceof Programmer); // false
alert(guru instanceof Programmer); // true

Y.augment(...) can also take an object (as opposed to a constructor) to be augmented.

var n00b = {};
Y.augment(n00b, Programmer);

// now n00b can writeCode
alert(typeof n00b.writeCode); // "function"

Y.augment(...) allows the recipient to be more picky when reusing code from the supplier. An optional third parameter to Y.augment(...) defines whether existing properties should be overwritten (false by default, meaning preserve the original properties of the recipient). The fourth parameter can optionally provide a whitelist – an array containing the names of the properties that should be carried over.

Cloning

Cloning objects is yet another pattern for code reuse, which allows you to create brand new objects which are just like existing ones. In a way, the idea is similar to the prototypal inheritance (see Y.Object(...) in the previous article), where objects inherit from objects. The main difference is that when cloning, the parent’s properties get copied to the child directly, not through the prototype chain.

Y.clone(...) creates a deep copy, meaning it recurses through array and object properties. It also creates copies by value, so that the cloned object doesn’t modify the parent by mistake (in JavaScript arrays, objects and functions are copied by reference).

To illustrate the difference, consider an object pro that gets cloned into a new object clone and also inherited as wiz using Y.Object(...).

// original object
var pro = {groks: ['html']};

// inherit
var wiz = Y.Object(pro);

// clone
var clone = Y.clone(pro);

Now let’s add a new array element to the original object

pro.groks.push('css');

The child object sees the updated value, while the clone doesn’t, because the clone is a snapshot of what the object was at the time of cloning.

wiz.groks.join(); // "html,css"
clone.groks.join(); //"html"

This works the other way around as well – when the child modifies the array.

wiz.groks.push('js');
pro.groks.join(); // "html,css,js"
clone.groks.join(); // "html"

Clone discussion

As you can see Y.clone(...) creates new objects by deep-copying all their properties and methods. Although this is probably not what you’d normally call inheritance, it’s still a pretty simple and straightforward pattern for code reuse. After all code reuse is about avoiding the need to duplicate code and reusing existing functionality.

Something you may be wondering – what about performance? Isn’t it inefficient to copy values like that. The answer is – yes, it could be inefficient. But for most applications this would rarely be the bottleneck. In fact Firebug (Firefox extensions are written in JavaScript), which is a pretty complex piece of software has an extend() method which works by simply copying properties from the parent object to the child object, using a shallow copy (not recursing into objects and arrays).

So, since cloning is just deep-copying properties from one object to another, wouldn’t it be nice if you can inherit functionality from multiple objects, not only from one? This is where Y.merge(...) comes to help you with this sort of mix-in objects.

Mixin objects with Y.merge(...)

The mixin pattern allows you to grab properties and methods from multiple objects and carry them over into a new object. YUI3 provides the method Y.merge(...) which can take any number of objects and return a single one which is a mix of all source objects.

Here’s an example:

var mad_skillz = {bake: function(){}, mix: function(){}, eat: function(){}};
var ingredients = {sugar: "lots", flour: 1, eggs: 2};
var dairy = {milk: 1};

// mixin
var cake = Y.merge(mad_skillz, ingredients, dairy);

Now you can test which properties got carried over to the cake object using the convenient method Y.Object.keys(...) which gives you an array of all property names.

Y.Object.keys(cake).join(); // "bake,mix,eat,sugar,flour,eggs,milk"
Y.merge(...) resembles cloning, but instead of deep-copying one object, it creates a shallow copy and can take multiple objects to mix with the same method call. The overwriting logic of Y.merge(...) in cases of property naming collisions is different than most other methods – if you have two members with the same name, the last one wins and overwrites the previous.

Just like with Y.clone(...), Y.merge(...) is not necessarily limited to the purposes of code reuse. You can use them also for manipulating arrays or any sort of hash-like objects, such as configuration objects.

Y.mix(...)

Y.mix(...) is the lower-level method behind most of the functionality discussed above. It offers you a fine-grained control over which properties get copied and where exactly. It also allows you to combine two properties with the same names, ignore certain properties and so on.

Here’s a somewhat complex example of using the Y.mix(...) API:

// an object
var pro = {
  groks: ['html', 'css', 'js'], 
  speaks: ['Latin'], 
  tweets: true
};

// a constructor
function WebGuru(){}

// augmenting the prototype of the constructor
// with some of pro's properties
Y.mix(WebGuru, pro, true, ['groks', 'tweets'], 4);

// test
var guru = new WebGuru();
guru.groks.join(); // "html,css,js"
guru.tweets; // true
guru.speeks; // undefined

If you look at the call to Y.mix(...), we have 5 arguments, meaning:

  1. WebGuru gets more members…
  2. from pro …
  3. overwriting any existing ones…
  4. only if they are in this whitelist array ['groks', 'tweets']. This means that the speaks property will not be mixed
  5. 4 is the mode. There are five mixing modes – 0 to 4, where 4 means that the prototype of WebGuru will receive members from pro.

You can check the docs for more information on the parameters accepted by Y.mix(...).

That’s all folks!

Thank you for reading! For more information and examples on the OOP functionality in YUI3, you can consult these links:

Find conversations: bloglines | technorati

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

Next Page »
Hosted by Yahoo!

Copyright © 2006-2010 Yahoo! Inc. All rights reserved. Privacy Policy - Terms of Service

Powered by WordPress on Yahoo! Web Hosting.