Steve Jobs on Interface Builder: Building Apps Visually

NeXT demonstration featuring Jobs · 1992
Video thumbnail: Steve Jobs on Interface Builder: Building Apps Visually
12 minDemo55K views across 3 uploads1,753-word transcriptWatch on YouTube ↗

What Jobs talks about

Jobs shows how NeXT software lets users search a digital library, browse dictionaries and Shakespeare, and even index their own documents. He frames it as a new way to turn books and documents “inside out” with free-text search.

He then demonstrates Interface Builder, dragging UI elements into place, connecting them to code, and testing an application without compiling. His point is that object-oriented tools can make software faster to build and easier to change.

The demo matters because Jobs is arguing for a shift in how software gets made: start with the user interface, involve users early, and iterate quickly until the experience is right.

Jobs speaks throughout.

In his words

“It's just starting”
“This becomes an extremely powerful tool once it's online”
“One of the fastest ways to make something new is to reuse pieces of something that already exists.”
“We dynamically make all the connections”
“This is what interface builder is all about.”

Key points

  • Free-text search turns a digital library into a powerful everyday tool.
  • Documents like manuals, Shakespeare, and your own writing can all live in the same searchable system.
  • Interface Builder lets you assemble apps visually instead of coding everything by hand first.
  • Reusable objects make software faster to create and more reliable.
  • Developers can test changes instantly, without compiling.
  • User interfaces should be designed and refined before the underlying code is finished.
  • The result is a faster, more collaborative way to develop software.

Full transcript

Again, this is very crude today, but you can imagine where this kind of thing is going. And the last thing was, we heard that this was a special week here, so we just digitized some music, sent it through the mail system. There was a time when people said that Singapore won't make it, but we did.

There was a time when trouble seemed too much for us to take, but we did. We built a nation, strong and free, reaching out together, peace and harmony. So you get the idea of what we can do with this stuff. It's just starting. Okay, let me show you a few other things that we're doing. We saw briefly the dictionary. Let's go back to it. This is part of what we call a digital library. With so much storage with the optical disk, we got to asking ourselves, well, what can we do with this?

Let's write some software that'll allow us to find things by free text searching in large databases. So we got a dictionary, which looks very simple, but it's actually quite hard. And in Webster's, again, we have the full pictures as well as the definitions in the thesaurus. And you end up using it a lot, and you can blast around it very, very fast. As an example, Traverse. You can go look up words, and you end up using this thing several times a day. So as you can see, this becomes an extremely powerful tool once it's online, once it's a book that I can turn inside out at my choosing.

We also have the generalized digital library online. Now, we include all of the manuals online, but we also put the complete works of William Shakespeare. Not so much because everybody needs William Shakespeare. Maybe they do. They just don't know it. But so it would inspire people. Let me give you an example. We're going to look through the entire works of William Shakespeare, and one of the ones I like to look up is Lawyer. It turns out he referenced lawyers 11 times in his entire works, and we can go look through them. Let's see. Where's the one I like? Here we go. In America, you understand, we have too many lawyers. So Shakespeare, anticipating this as he always did, said, The first thing we'll do, let's kill all the lawyers.

In Hamlet, we can see him. Why might not that be the skull of a lawyer? So the neatest thing about this, though, is you can put all your own stuff in this. You can take everything you've ever written and drag it into the digital library and find your own works this fast. Contracts, policy manuals, you name it, can be done with this. And what else can I show you here? Now, one of the real breakthroughs of the system, as we talked about, was the object-oriented programming. Remember the application kit? And remember that program called Interface Builder that I really couldn't make a slide to show you?

What I'd like to do now is build an application for you with Interface Builder. And this is what Interface Builder looks like. It has palettes. And I can go over and say, I want to build a new application. And so Interface Builder will give me a menu and a window. I can, of course, get more. Here's my window. And I can change its size here. Now, one of the great things about object-oriented programming is that I can use objects other people create. One of the fastest ways to make something new is to reuse pieces of something that already exists. It also is a very good way to make new things reliable. So this is an object that somebody else did. And it has some graphics with it so I can show you. Many objects will not have graphics.

This happens to be a simulation of a ball inside a chamber, gas molecule inside a chamber. It's PostScript so I can resize it here. And I know I want to control this with some buttons. So I'll go grab a button from the palette and just drag it and put it where I want. And I want to make it bigger so I'll make it bigger. And I want more than one of these buttons so I can just drag out another one or another one or another one. I guess I just want three. And I want to space them apart a little differently so I'll space them apart maybe this far. And I'll place them right here. Now, so that you can read them, I'll go get my font panel and I'll make a bigger font for them. I'll ask PostScript to build some new characters. And why don't we just raise the font size to 24 point and set it. There we go. And now what I want to do is I bring out something called my inspector.

And this shows me all of the messages that the person that programmed this molecule said it could understand. So when I push this button, I want to send a message to the molecule object. So I'll just drag a line over there. And this shows me all of the messages the molecule can understand. And I'm going to want this one to be start. So I'll select start here and make the connection. And when I push this one, I'm going to want it to be stop. So I'll drag my line here and I'll select stop as a message, make the connection. And this one I'll want to be reset. So I'll select reset and make the connection. And then I'll go back and I'll relabel my buttons. Start, stop, and reset so I can remember what they do.

And now if I go here and I say test my application without any compiling whatsoever, we dynamically make all the connections. And here we go, starting, stopping, resetting. Very simple. Okay. Well, now that we've got the urge to do this, let's add some more stuff. So let's grab a slider and drag it over. Make it longer. Of course, I could make a bunch of these if I want, but I just want one. And we'll give it a label here. And let's call it temperature. And let's connect it by, again, just dragging a line over and saying set the temperature. And I can grab a switch over here.

And, again, let's make it a bigger font. Let's make it, well, let's just say Helvetica. And let's make it, again, 24 point. And let's label this sound. And we can, again, make the connection here and say set the sound. There we go. And I can drag this over, which is another object that somebody else made. They might have not had any idea that these were going to be used together. And I can set a few attributes, which the programmer let me set. Maybe I'll make the background gray and the pen black so it's easier for you to see. And I'll make a connection here by dragging this over there, and I'll make the connection. And now I should be able to go back here and say test my interface and start it.

And we'll see the altitude of the top piston being plotted by the strip chart recorder. I can turn on the sound. I can raise the temperature, which should make the molecule go faster. And I can keep the piston even pegged at the top. I can turn the sound off. And here we are, all in a multitasking operating system. I can go read my mail if I want to. Here. Here we go. Now, what's happening is that this is creating a revolution in the creation of programming.

Why? Because programs are now starting to be written backwards or maybe forwards for the first time. The user interface is being worked on first, and developers are doing a revolutionary new thing. They're getting the users involved, and they're asking the users what they want, and they're iterating on the user interface 10 or 20 times. And only when they get it right do they right the guts, which means the users are being able to specify what they want and get involved in the process far more than ever. And it means that these programs are not only very easy to use but extremely rapid to develop. Let me give you an example. If after using this program for a while we decide we need another window, The button, recenter it, maybe it's an error condition.

So we add the word the title error. We go back over here, we drag out a panel, which we can make any size we want. We'll add a button on the panel and we'll have this button say, OK. We will raise the size of the font on this button to thirty six point Helvetica so we can all read it. And we'll say when you push this button, send a message to this panel, says order yourself to the front. And when you push this button. Send a message to the panel, says order yourself out. And let's go get some sounds here to make it fun.

Let's put a frog on this one here and let's put a bonk on this one. OK, now we go test this again. And after using it for a day or a week or a month, this is how hard it is to add new things to it. You'd want to be a little more creative than this, but you get the idea. So this is what interface builder is all about. And I think you'd probably agree that there really hasn't ever been anything like this before. The last thing I want to do today is I want to talk a little bit about music. Now, why music? If we went back ten years ago and I asked you how many of you want graphics in your computer, most of you would have said, nah, I don't do pie charts.

Give me eighty by twenty four characters. That's enough for me. And yet ten years later, we all want graphics in our computer for a slightly different reason than we ever imagined before for the user interface to make them easy to use. And the same I.

Transcribed from the audio with OpenAI Whisper. Timestamps link to the video above. Errors are possible.