The Breakpoint with Addy Osmani and Paul Lewis


Uploaded by GoogleDevelopers on 11.10.2012

Transcript:

ADDY OSMANI: Hey guys.
And welcome to "The Breakpoint," a brand new show
on Google Developers Live, where we're going to be
focusing on DevTools and tooling in general.
My name is Addy Osmani and joining me is Paul Irish.
PAUL LEWIS: That's not technically true.
ADDY OSMANI: Who are you?
PAUL LEWIS: I'm Paul Lewis.
ADDY OSMANI: You're not Paul Irish.
PAUL LEWIS: No.
I'm not Paul Irish.
I made a mask to try and cover up for the fact.
I don't think it worked out if I'm honest.
Yeah, I'm Paul Lewis, Developer
Programs engineer at Google.
The reason I'm standing in for Paul Irish
today is he's unwell.
So get better soon, Paul.
ADDY OSMANI: Get well soon!
PAUL LEWIS: Yeah.
ADDY OSMANI: Yeah.
PAUL LEWIS: So we're here to talk about
DevTools and Yeoman.
ADDY OSMANI: Yeah, we're here to talk about
DevTools and tooling.
Tooling's important.
There have been a lot of developers recently that have
been starting to take a long, hard look at their workflow
and the different tools that they use on
a day-to-day basis.
And hopefully in the show over the next couple of episodes,
we're going to give you some tips and tricks on how you can
improve your workflow and the tools that you use.
So, Paul?
PAUL LEWIS: Yup.
ADDY OSMANI: What do you think about tooling?
PAUL LEWIS: So well, we were talking about
this earlier today.
And we were talking about the kind of things that you do
almost on a day-to-day basis, like when you start an
application for the first time.
You go off and you get the dependencies that you need,
the libraries.
Maybe you even look around and say, well, what do I need?
You'll come to this conclusion, I'm going to do,
say, an MVC app.
ADDY OSMANI: Yeah.
PAUL LEWIS: OK, so I'm going to maybe get Backbone or Ember
or one of these things.
ADDY OSMANI: Yeah, or Angular.
Something like that, yeah.
PAUL LEWIS: Yup, Angular, yeah.
So then I go off and I download that.
Find maybe the repo, go and get that.
Start coding.
There's a bit of fun in the middle of there where I'm
constantly back and forth, iterating in my editor and
also checking in the browser back and forth.
And then I build it because I want to compress my assets--
ADDY OSMANI: Yeah.
PAUL LEWIS: --and you get all the scripts together.
ADDY OSMANI: That's sounds awfully manual.
There's like a whole lot of manual grunt work there.
PAUL LEWIS: If I'm honest, if I'm doing grunt
work, I like it.
If I'm honest, that is pretty much how I used build apps.
And I understand that Yeoman is going to help me out.
ADDY OSMANI: Well, hopefully, it will.
We found that a lot of developers are pretty much
doing exactly what Paul Lewis is doing.
It's like they're manually going and getting their
dependencies.
They're manually writing out an awful lot of boilerplate
code whenever they want to create a new application.
And we think that instead of being one of those developers
that take like 45 minutes to get set up whenever you want
to create a new project, you should just
like take five minutes.
If you've got your workflow down properly, it should just
take you 5 or 10 minutes.
And then you can have a working prototype going just
soon after if you've got your workflow down.
So we're going to give you some tips on how to do that
today with Yeoman.
But before we do that, we're going to take a look at some
of the new stuff that's landed in the Chrome DevTools, or
Developer Tools, over the past couple months.
So let me switch to my screen.
OK, so this is Chrome Stable at the moment.
And I guess one of the big things that we added in the
past couple months was better support for mobile debugging
and debugging your mobile web apps just
as easily as possible.
So I'm currently in Settings at the moment.
Let me exit that out.
Most people who are familiar with the Developer Tools
probably know that you can go into the cog at the very right
corner of the screen, and that will open
up a bunch of settings.
You can then go to the Overrides tab, and in there,
you'll see a few options.
You'll see User Agent, Device Metrics, and
Emulate Touch Events.
Now, just to give you a quick visual demo of what this does,
if I go and I select User Agent, so I pick a specific
browser or perhaps a browser pair with an operating system
I go and I configure some device metrics, I can actually
go and preview what this site looks like.
So I'm previewing what google.com looks like on an
iPhone using iOS 5.
And I've set my device metrics to have a set screen
resolution of 320 by 480.
I can also change the font scale factor if I want to see
how fonts may render differently on mobile devices.
And I can also emulate touch events.
I'm not going to show you how that works just yet.
But it's--
what do you think, Paul?
Is it useful?
PAUL LEWIS: That's amazing, actually.
So you can quickly choose--
like you say, I want to see what this
looks like for an iPhone.
I want to see what this looks like-- what else do we
have in that list?
ADDY OSMANI: Oh, we've got a ton of stuff.
PAUL LEWIS: No.
ADDY OSMANI: We've got iPads, Android devices, BlackBerrys,
and then the browsers that you're used to on desktop.
And we've got other options as well in case you want to
customize it.
PAUL LEWIS: I like it.
ADDY OSMANI: We've got a ton of options in there.
But this is useful.

I was about to show people Chrome Canary and some of the
new stuff in there.
Do you use Canary for your--
PAUL LEWIS: Yeah.
So I think this is what we say regularly anyway.
Because you can have Canary alongside Chrome Stable.
So it's kind of good to have Canary open.
You can see what's kind of coming down the line and just
check that everything still play nicely, get
access to new features.
ADDY OSMANI: Exactly.
PAUL LEWIS: Which is I'm pretty sure what you're going
to do here.
ADDY OSMANI: Exactly.
PAUL LEWIS: And have Stable alongside it so you can
actually see what all your users are seeing when they're
building your app.
ADDY OSMANI: Yeah, so most of the time, I think people will
be using Chrome Stable when they're testing out, like you
said, what their users have got.
But if you want to be using the latest, hottest features
in the Chrome Developer Tools there's no reason why you
can't be using Canary for your debugging instead.
So I'm going to show you some new stuff.
Before we go and try out some features, if you take a look
at Chrome Flags--
PAUL LEWIS: Which you should do anyway, right?
ADDY OSMANI: Yeah.
PAUL LEWIS: Because there's tons of really cool
things you can do.
ADDY OSMANI: There is so much stuff in here.
PAUL LEWIS: The one I've been playing with recently is the
ability to pipe the microphone through to the Web Audio API,
which is amazing.
ADDY OSMANI: Yeah, that stuff just landed
recently, too, right?
PAUL LEWIS: Just the last couple of weeks.
So that's a really good way to see, as we said, what's coming
down the line.
So definitely like to do some of that.
ADDY OSMANI: Yeah.
So because we're looking at the Developer Tools at the
moment, scroll down to the option that says Enable
Developer Tools Experiments.
And this a new option that will let you take a look at
some of the features that we've been
working on very recently.
They're not all finished and polished off.
But you can try them right away and see what's going on
and if they're going to be useful to your workflow.
So I've gone and I've enabled them.
I need to actually go and relaunch my browser now, just
so those changes will take effect.
That will load up very quickly.
I've got all my tabs back, which is awesome.
And now, I'm just going to go back to tab I was on.
And let's go through some of the features.
So I'm clicking on the cog once again.
And now you'll notice that we have a new
Experiments tab, right?
So let's go to Experiments.
I've going to bump up the font size a little bit so people
can see these.
Now, you see a warning at the very top.
Basically, these experiments are subject to change.
They're not finalized or stable just yet.
But you can try them out.
So some of things on this list-- have you been using any
of this stuff?
PAUL LEWIS: Yes.
I've been using the file system inspection one.
ADDY OSMANI: What does that do?
PAUL LEWIS: So it gives you-- alongside all the other
resources that you see, so any the Index DB tables all those
kind things, you'll see a new one appear at the bottom,
which is the File System.
So anything you use, anything you store using the Chrome
File System is available there.
So it's really convenient if you just wanted to see what
Chrome actually stored under the hood when you use the file
system API.
ADDY OSMANI: That is so cool.
So there's a bunch of stuff in here.
There's Snippet support.
There's CSS Regions support.
So have you taken a look at CSS Regions before?
PAUL LEWIS: I have.
ADDY OSMANI: You have?
PAUL LEWIS: I have.
You going to show us?
ADDY OSMANI: I'm not going to show a demo of this just yet.
I want to show people Snippets and some other things.
But basically with CSS Regions, we have some
experimental support of how you can go and inspect name
flows on the page and take a look at sort of any other
highlighted regions that you want to see in your document
at the moment, which is cool.
We've got a bunch of other stuff.
PAUL LEWIS: I like this Override Device Geolocation.
That's really handy.
Because again if you find yourself--
you're building the site with geolocation.
You're like, yeah, but how does this work
in the middle of--
I was going to say in the middle of London.
I'm in the middle of London.
Well done, Paul.
The middle of the US.
I'm not there.
I'm in London.
So that would be brilliant for that.
ADDY OSMANI: This sounds like the type of feature that would
let me change your location--
PAUL LEWIS: Yes.
ADDY OSMANI: --if I wanted to.
This sounds exciting.
PAUL LEWIS: That's mean.
ADDY OSMANI: You were expecting anything else?
PAUL LEWIS: No, I wasn't.
ADDY OSMANI: OK, right.
All right so Override Device Geolocation.
What does that do?
So if we go back--
let's enable it first of all.
So Override Device Geolocation.
Let's enable a few of these so I can actually show them to
you, right?
PAUL LEWIS: Presumably we need a restart there, right?
ADDY OSMANI: Yes, we need to reopen the DevTools.
Whoop.
And now you'll see that there's a bunch of other
overrides that have introduced since the Overrides tab.
Now with Override Geolocation, if I were to select that I can
then go and type in custom long/lat details, which I can
use when I'm debugging my applications.
So I don't have to go and worry about hard coding values
or anything like that into my app.
I can just do it while I'm debugging and have my app sort
of react to that, which is pretty cool.
Another thing that we've got is the ability to override
device orientation.
So if you wanted to sort of see what would happen if
someone turned around the devices they're using--
PAUL LEWIS: It's almost like you wouldn't want to take your
laptop and go, whee, with it.
ADDY OSMANI: Exactly.
And there have been people that have been doing that.
PAUL LEWIS: Really?
ADDY OSMANI: Yes.
I've seen people in some offices doing that.
PAUL LEWIS: Well, that's awkward.
ADDY OSMANI: It's crazy.
PAUL LEWIS: Imagine the looks you'd get.
And now through the power of the Chrome DevTools, no more.
PAUL LEWIS: You've got them.
It's awesome.
So one other thing that I enabled was something called
Snippets support.
Have you used Snippets before?
PAUL LEWIS: I have used Snippets.
But what are you going to do here?
ADDY OSMANI: What am I going to do here?
I'm just going to show you what Snippets are.
PAUL LEWIS: Oh, I like it.
ADDY OSMANI: So we've got a bunch of tabs in Chrome
Developer Tools.
If I go to sources and you've enabled Snippets in the
experiments, you can actually go to a Snippets sub-tab.
And you're able to now sort of create new Snippets.
And Snippets are basically just blocks of scripts that
you can create, save, or execute, and easily store them
inside the DevTools in case you want to
use them at any point.
So I can go and I can add in custom functions doing--

or something.
I don't know.
You could have any sort of function you want in here and
just have it execute.
And it all works.
It's pretty neat.
PAUL LEWIS: So how would you then use
that Snippet in your--
so you've created this Snippet--
ADDY OSMANI: Yeah, so you can go and run this if you want.
This code isn't going to run because it doesn't actually
have anything in there.
But you can then go and run these Snippets
any time you want.
You can have them interact with the page if
you want to do that.
PAUL LEWIS: Oh, OK.
ADDY OSMANI: And it's just supposed to be a nice little
addition to your work.
PAUL LEWIS: So let's so you created some kind of script
that helps you debug.
ADDY OSMANI: Yeah.
PAUL LEWIS: So I mean I'm very much in the GPU and
performance thing.
So I'm very much kind of thinking, hey, I could have a
little Snippet that could do something crazy with the WebGL
context that I only want to do when I'm debugging.
I don't want to include it as a script to my thing.
I could create a Snippet.
ADDY OSMANI: Exactly.
PAUL LEWIS: I just run that whenever I've got a problem.
ADDY OSMANI: Exactly.
And you can just go straight back into the Snippets tab and
run that code any time you want, which is
really, really fun.
PAUL LEWIS: Sold.
ADDY OSMANI: Awesome.
So one other thing I wanted to talk about.
So we've taken a look at some of the
experiments in Chrome Canary.
We've taken a look at what's in stable.
One other thing that we think developers should care about
are the Developer Tools Extensions that are available
at the moment.
One that I've written about previously was called Tincr.
And I'm going to show you a preview of what Tincr does.
It's pretty awesome.
So I'm just going to serve up a directory.
This is my TodoMVC project.
And I probably want to go and switch off my overrides just
so I can see the entire page.
It's so cool.
PAUL LEWIS: You see how easy that was, right?
ADDY OSMANI: That's really nice.
PAUL LEWIS: He just takes that box over and takes that one
check, that box.
ADDY OSMANI: It's so nice.
PAUL LEWIS: Oh, yeah.
ADDY OSMANI: Now, Tincr is there's something that's
available over at the Tincr website, so tin.cr.
And what Tincr does is it allows you to make changes
within the Developer Tools to a page and have those changes
actually be saved and persist to your original source files.
So if I made like style changes or changes to script
or anything like that, those changes can actually be saved
to the source files.
PAUL LEWIS: This is what I was talking about earlier.
ADDY OSMANI: Yeah.
PAUL LEWIS: Like when you're building an application and
then you're like, oh, I'll switch to Chrome.
Ah, I'll just change that in the DevTools because that
color's slightly off.
And then you kind of have to remember if you make like 10
or 15 changes--
ADDY OSMANI: It's a big deal.
You've got to copy those things over here.
Or you have to make sure that you don't
like reload your page.
It's a pain.
PAUL LEWIS: Or if you do reload your page, you're like,
no, I've lost all those things.
ADDY OSMANI: Exactly.
Exactly.
Right, so with Tincr, what you do is you first choose the
type of project that you're working on.
I'm currently inside a new Tincr tab that's in the
DevTools, which you'll have when you install it, right?
So I'm selecting the type of project I'm working on.
I'm going to browse to the root of where this project is
because Tincr requires that.
And by default, it'll automatically refresh to sort
of show you the changes that you've made.
And it'll automatically save.
So let me refresh my page very quickly and go back.
And let's say we want to make a change.
Like let's say I want to change the color of my buttons
to something else.
PAUL LEWIS: I, for one, am disappointed you didn't change
it to Comic Sans, that you went straight to the color
thing there.
But, you know, each to their own.
I can't fault you for just changing the color.
ADDY OSMANI: This is really the standard of developer we
were able to get instead of Paul Irish.
It's heartbreaking.
PAUL LEWIS: Desparate times, desperate measures.
Any port in a storm, I believe is the--
ADDY OSMANI: Pretty much.
Pretty much.
PAUL LEWIS: OK.
ADDY OSMANI: OK.
So I've gone and I've changed the color of
my buttons to blue.
Now, as long as you know nothing has broken, nothing's
gone wrong, when I refresh my page, and you can confirm I've
just refreshed my page--
PAUL LEWIS: Yeah.
ADDY OSMANI: --the changes have persisted.
And if go and I take a look at source of this document, what
you'll find is that in my style sheet that change has
been saved.
So I don't even have to go back to my editor or
anything like that.
The change is saved, and it's already there.
What's even cooler is if you go to Sources and you take a
look at where this stuff is-- so let me go to Sources and
figure out what file I was working in.
I can right click on a file and take a look at local
modifications to it.
So let's see what local modifications remain.
I think it was this file.
Where are we?
Let's see.
So it's because I've refreshed it.
Let's just make another change so I can actually take a look
at local modifications.
So let's say we've changed this to green, right?
I go to Sources.

Let's see if this will work.
So now what you'll see in local modifications is all the
changes that I've made to this file.
And you actually get a really, really nice
diff of those changes.
Depending on whether you've gone and you've refreshed the
page or not, you can actually see the entire history of what
you've been doing to the page and decide about what changes
you want to keep and what changes you don't want to
keep, which I think is useful.
PAUL LEWIS: Yeah, I was noticing that.
Because you've got a revert, which I assume reverts all
changes that you made locally.
And then there's presumably a per-change
Apply Original Content.
ADDY OSMANI: Yeah, and it'll show you the time that you
made the changes and everything.
It's really, really useful.
PAUL LEWIS: I like.
ADDY OSMANI: You like?
Excellent.
Right.
So we've shown you some stuff in the Chrome Developer Tools.
Let's talk a little bit more about tooling and how we can
solve some of the problems you talked about earlier.
PAUL LEWIS: Right.
Because earlier we established that
basically my workflow sucks.
Now, I'll be honest.
I've moved on a little bit from that point.
But nonetheless--
ADDY OSMANI: Notice he said little.
Just a little.
Tiny amount.
Tiny amount.
OK.
PAUL LEWIS: But all the same, I think parts of that workflow
still remain for me.
And I think, like we said, for a lot of developers, it's very
much kind of the situation.
It's very difficult to just shift.
Because people have got deadlines.
They've got these things to--
ADDY OSMANI: Yeah, of course.
PAUL LEWIS: --the actual coding to do.
So I guess we're going to talk about Yeoman, right?
ADDY OSMANI: We're going to talk a
little bit about Yeoman.
PAUL LEWIS: Solid.
ADDY OSMANI: Awesome, right.
So Yeoman is basically an opinionated workflow for
creating compelling modern web applications.
For people that haven't tried it out yet or haven't checked
out the site, we're available at yeoman.io.
And this is sort of a project that a few people, so me, Paul
Irish, Sindre Sorhus, and Mickael Daniel--
PAUL LEWIS: Paul Irish.
ADDY OSMANI: --Paul Irish --created few months ago and
we've been working on it.
And it sort of builds on top of a ton of other great tools
like Grunt and Twitter Bootstrap and so on.
And I'm just going to show you what it does.
It's easier to show than just keep talking.
PAUL LEWIS: So one of the things that you said, though,
was that this is an opinionated tool.
ADDY OSMANI: Yeah.
ADDY OSMANI: What do you mean an opinionated tool?
ADDY OSMANI: Right.
So there are like a huge ton of options that people have on
the front end these days.
Like do you use SaaS, Less, Compass?
There's a ton of options.
And then you have a whole other side of things when it
comes to like the JavaScript that you write for apps.
PAUL LEWIS: Right.
ADDY OSMANI: Like are you talking about using specific
frameworks?
Or how do you structure your whole app,
and all those things.
There's a lot of stuff that people have to think about it.
PAUL LEWIS: Yes.
ADDY OSMANI: And we thought what if we were to try
capturing what we think is the best set of options for you
develop a modern app into a single workflow.
And that's basically what Yeoman is.
It's a bunch of tools brought together that
we hope works well.
So let me take you to a demo of Yeoman and show you how
that works.
OK, so I've got my screen open at the moment.
And I'm going to also have a text editor that I'm going to
switch to you in just a sec.
Right, so with Yeoman to kickstart off our new project,
you just use Yeoman Init.
So I've typed in Yeoman Init.

Waiting for this to go and ask me some questions.
So when you sort of fire this off, it'll go ask you some
questions about what you want to do in your application.
Like do you want to include Twitter Bootstrap?
Do you want to include the Twitter Bootstrap plug-ins?
Because like, let's face it, when you're developing a
prototype, you want something that's pretty.
It doesn't have to be the prettiest thing in the world.
You don't have to go necessarily using Bootstrap in
production, but it's great for prototypes, right?
So do you want to include the Twitter Bootstrap plug-ins?
If you're a JavaScript app developer, maybe you want to
use RequireJS and AMD.
So we'll ask you about that as well.
PAUL LEWIS: So I assume the questions that it's asking are
based on your experience, Paul Irish's experience, the team's
experience on the kind of tools that people need and
want in their workflow, right?
ADDY OSMANI: Yes, absolutely.
PAUL LEWIS: Cool.
ADDY OSMANI: So, while you're talking, basically what it's
gone and it's done is it's gone and fetched the latest
version of all these dependencies, and it's put
them into a local directory that you can use for your app.
We've also gone and sort of scaffolded out some very basic
unit tests.
Unit testing's important.
Do you unit test your code?
PAUL LEWIS: Yes.
ADDY OSMANI: Yes?
PAUL LEWIS: Not always.
ADDY OSMANI: Not always.
PAUL LEWIS: If I'm honest, not always.
But if it's built in, it makes it easier.
ADDY OSMANI: OK, good.
So we do that stuff for you.
And you can then go and like preview what this has created
using server command.
So I'm guessing in previous years when you're like a web
app developer and working with a bunch of other code, maybe
you used like Map or Wamp or all that stuff.
PAUL LEWIS: Always one of those.
PAUL LEWIS: Right.
So we thought why don't we just add this to a command and
fire off a server.
So if you type in Yeoman Server, it'll actually go and
fire off a server using the contents of the application
that you working on just right now.
And it'll actually show you a preview.
So on screen at the moment, we have a preview of our compiled
Twitter Bootstrap files.
We were using Compass sources.
So this is complied Twitter Bootstrap files.
You have HTML5 Boilerplate.
You have RequireJS and a few other pieces.
And you can go and start coding right away which is
fun, right?
So one other thing I wanted to show you guys was how Yeoman
can help you with something called LiveReload.
Have you heard of LiveReload before?
PAUL LEWIS: Let's assume I have not.
That would make life a lot easier for you right now,
wouldn't it?
ADDY OSMANI: Yes.
Yes, it would.
OK, before I show this to you, so
LiveReload is pretty awesome.
It's this functionality that allows you to make changes in
your application, whether it's your style sheets, or your
scripts, your markup or anything, and have the browser
automatically reload whenever changes are made
to your local files.
So you don't have to go and refresh it yourself.
You get this constant sort of parallel view of what's going
on in the browser and what's going on in your source.
So let's see if this works right now.
So I've just created a brand new application.
I'm going to my index and let me see about replacing Wotcha!
with Wotcha Paul!
And as we can see it's gone, and it's automatically
reloaded the page.
I didn't have to do anything at all.
It's gone, and it's compiled the compass files.
If I had copied script, it would be automatically
compiling that stuff for me.
If I had RequireJS files, it'd be doing the exact same thing.
And it's just really nice.
It means I don't have to go and put together a whole
workflow and build process that does this stuff.
PAUL LEWIS: Awesome.
ADDY OSMANI: Which is nice.
Sort of on top of that, how were you saying that you were
handling dependencies before?
You were manually going against the web, right?
PAUL LEWIS: Yeah, The classic situation is there's a new
version of a library, or I want to add another library
after this point, right?
ADDY OSMANI: Yeah.
PAUL LEWIS: So we created a project but it's like, ah, now
I realize I need this other library in there.
ADDY OSMANI: Yeah.
PAUL LEWIS: So, yeah, I go off, find it in framework's
like I did with my original dependencies.
So I just go off, get it, and drag it in, and hope for the
best, generally speaking.
ADDY OSMANI: Yeah.
It's a pain.
It's, again, one of those manual things
that you have to do.
You've got to go and open up your browser and figure out
where the dependencies, whether you're using the most
up-to-date version or not.
So we figured, well, why don't we make this a little bit more
straightforward?
So let's say there's a dependency you wanted.
You mentioned Backbone apps earlier on.
PAUL LEWIS: Yeah, let's do it.
ADDY OSMANI: Let's see.
Let's say that we started off with a very
basic application structure.
And we want to get Backbone into our app.
So maybe the first thing that we do is try to look and see
is Backbone available via Yeoman?
And it's going to go and it's going to search out.
And what you can see here on the screen at the moment is
that not only is Backbone available, but there are a ton
of Backbone extensions and adapters and plug-ins also
available as well.
And I can easily install any of these via the command line.
So if I were to do Yeoman install Backbone just to start
us off, that'll go and it'll install Backbone for me.
PAUL LEWIS: What happens if I do this and then there's a new
version of Backbone released tomorrow?
It's early on in the project.
I feel like I've got the room.
I can test this in this new version.
What do I do then?
How does that work?
ADDY OSMANI: Then all you have to do is we have-- similar to
install, we have an update command.
So if you typed in "yeoman update backbone," it would go
and it would get the latest version of
Backbone for you as well.
And something you may have noticed, some people may have
noticed, is if you take a look at the lines in here, you'll
notice that it didn't just go and fetch Backbone.
It actually went and it fetched Underscore as well.
So we're using Twitter's Bower project as our package
management registry.
And when we typed in "yeoman install backbone," it went and
it tried to fetch the latest version of Backbone, figured
out that Backbone has a few other dependencies, and it
also went and grabbed those dependencies
for us, which is--
PAUL LEWIS: That's awesome because, yeah, it's like you
may have, as you say, dependencies on dependencies.
Dependency-ception.
ADDY OSMANI: Dependency-ception.
PAUL LEWIS: I love it.
ADDY OSMANI: Of course you do.
PAUL LEWIS: Why wouldn't I?
ADDY OSMANI: God knows.
God knows.
OK, so we've covered previewing stuff and what you
do when you're writing a very basic application.
Then you've got your build process, right?
PAUL LEWIS: Yeah,.
So right.
So this is the point at which, let's call him old Paul.
ADDY OSMANI: Yes.
Old Paul.
PAUL LEWIS: The unreformed.
The unwashed.
I would probably write myself, oh, let's see, an ANT script.
I would use a UE.jar or something like
that to go off and--
hey, I've been around a while--
to concatenate and minify my JavaScript, minify my CSS,
make it all good.
And then I sort of manually change the paths and all that
kind of stuff in my app.
ADDY OSMANI: Yeah.
PAUL LEWIS: And be like, yeah, this works
with my minified version.
And then push it out live.
ADDY OSMANI: Cool.
PAUL LEWIS: You've got something better for me?
ADDY OSMANI: Hopefully.
PAUL LEWIS: Yes.
ADDY OSMANI: Right, so we took a long, hard look at how
people were actually building their projects.
And, like we said, there's a ton of tools people use on the
front end these says.
You've got like SaaS and CoffeeScript and RequireJS and
what have you.
And then when you're trying to deploy something to
production, you also have to care about optimizing the rest
of your project.
Like not just the stuff you're used to like minification and
concatenation, but also things like revving your files and
optimizing all of the images in your project as well.
Now, some people, when you're putting together your own
build process, you might just go and say, OK, well, I'm
going to pick an image optimization library.
Cool, it'll do its own stuff for me, right?
What we did was we actually went and researched all of the
most popular image optimization solutions that
are available.
And we picked the two most efficient ones in terms of
making sure that you get as lasting an experience as
possible with the small file sizes as well.
And when you run Yeoman Build, this is
where the magic happens.
It'll actually go and it'll build out your entire project.
It'll compile any sort of
abstractions that you're using.
As you can see, it's both running a number of tasks on
your images as well as other stuff.
And there we have it.
The project is completely done.
I've just finished off a sentence and my project is now
ready for me to deploy to production if I wanted it.
PAUL LEWIS: I'm blown away.
ADDY OSMANI: It's done.
That is amazing.
PAUL LEWIS: Done without errors.
ADDY OSMANI: Done without errors, yeah.
PAUL LEWIS: That's unusual for me, certainly.
But let's carry on.
ADDY OSMANI: We're hoping that this will
improve you as a developer.
PAUL LEWIS: Whoa.
ADDY OSMANI: This is specifically
built for you, Paul.
PAUL LEWIS: Wow.
I am so lucky.
ADDY OSMANI: OK, so we've taken a look at the Yeoman
workflow and how it works for basic projects.
I'm going to talk very quickly about generators.
PAUL LEWIS: Right.
ADDY OSMANI: So you were talking.
PAUL LEWIS: So one of the things that came up when we
were talking about Yeoman and I was asking some questions
is, OK, you do something like Backbone.
But there are these models, there's controllers, there's
all those kinds of things that you do as well, right?
So what if I don't want Backbone.
What if I actually want to start a project with Angular
or Backbone or any of these?
Do I have to go through this multi-step process with
Yeoman, or can we kind of shortcut this whole thing?
ADDY OSMANI: Yeah.
So Yeoman, with them, we wanted to do something fun.
So we put it over the generator system in Rails,
over the node, and we make available a bunch of
different, what we call, scaffolds.
PAUL LEWIS: OK.
ADDY OSMANI: Scaffold degenerators that allow you to
scaffold out new projects using an MVC framework.
So we've got a bunch of them that we support at the moment.
We've got Angular, Backbone, Ember.
And a bunch of others.
And the idea is that rather than you having to go and
write the boilerplate for a new model, or controller, or
router, we'll actually do that for you.
Let me show you a very quick preview.
And I guess then we're going to be introducing our special
guess for today.
PAUL LEWIS: Oh, yes.
ADDY OSMANI: We've got a special guest.
So let's say that I want to start up a brand new project.
We're going to call this Paul L.
PAUL LEWIS: Oh, is this for me?
ADDY OSMANI: Is this jinxing it?
PAUL LEWIS: Well, yeah.
ADDY OSMANI: It has to.
PAUL LEWIS: It's going to be erratic at best.
ADDY OSMANI: Probably.
PAUL LEWIS: If I'm honest.
ADDY OSMANI: OK, so let's say I'm doing Yeoman and Backbone.
I want to create a new Backbone application.
And what you've seen it go and do just now is scaffold out
everything I need for a very, very basic Backbone app.
I've got my index.
I've got jQuery.
I've got Underscore or Low-Dash.
I've got a bunch of unit tests.
And I've also got my first set of application files.
So I've got my first router, my first view, template files,
model, collection.
And if you go into these files, it'll actually contain
the boilerplate for each of those pieces for you.
So you can just focus on writing the
logic for your app.
Now, that's cool and all.
But I think people will like to see what the Angular guys
have been working on.
PAUL LEWIS: Oh, yeah.
ADDY OSMANI: This has been pretty awesome.
PAUL LEWIS: Absolutely.
So the AngularJS team were pretty awesome.
They came in early on in the Yeoman project.
And they were like, well, can we actually build a generator
that can replace some of the other Angular projects at the
moment that are trying to help people with scaffolding?
And can Yeoman help give a much better generation
experience for people so they don't have to
write as much code?
So I'm happy to introduce Brian Ford from the Angular
team who is going to be showing us some of the stuff
that he's been working on Angular to do with Yeoman.
BRIAN FORD: All right.
Hey, guys.
So as Addy said, I'm from the Angular team.
I was tasked with doing some exploratory work and seeing
how Yeoman could really help us out.
And I was really pleasantly surprised.
We experimented with this thing that we called the
Angular seed, which was kind of like a
boilerplate for Angular.
So it gave you kind of a folder structure and an
index.html that's pretty inspired by HTML5 boilerplate,
and some other stuff.
And we have a pretty vibrant open source community.
And we had a lot of people work this project and kind of
say, well, I want SaaS support.
I want Bootstrap in there, or I want RequireJS.
I want these different things.
And so we were really excited about Yeoman because it was
really a pain to--
every time we released a new version or there were some API
change, all these projects had to change.
And it was just a big hassle.
And there wasn't like one definitive like here's where
you should go for the best practices for starting a new
Angular app.
So I think Yeoman's a really exciting project for not just
Angular, but any of these new MVC frameworks to look at.
So with that in mind, some of the generators that I wrote,
they not only just generate models, views, controllers,
directives, which is something awesome in Angular.
By the way, if you guys haven't checked out Angular
yet, you definitely should.
It's a really cool library.
It's a really fresh approach, I think.
And I think that you'll find that it also really helps
speed up the app building process.
So a quick plug there.
Check it out if you haven't.
But it does all these things.
But it not only does these, but it'll rewrite routing
configurations, and it makes little tweaks to other files
in a really non-destructive way.
So we're not just rewriting some file every time.
It's going in there, and it's rewriting things.
So it keep all of your changes.
But as you add new routes and things, it'll automatically
give you that boilerplate code there so you can just keep
hacking away on your app.
So I'm going to switch then over to my screen and give a
quick demo of what this actually looks like.
All right.
Oh, there we go.
PAUL LEWIS: Look at those gorgeous people on his screen.
ADDY OSMANI: There are so pretty.
PAUL LEWIS: Oh, I know.
BRIAN FORD: So here we are at our terminal.
I'm going to do a Yeoman Init Angular.

So Addy showed off what happens when you run Yeoman
Init Backbone, I think it was.
But we have pretty much the same thing going on here,
perhaps a few less choices.
So would you like to include Twitter Bootstrap?
Yes, for sure.
Twitter Bootstrap's awesome.
Would you like to use Twitter Bootstrap for Compass, which
is an extension of SaaS?
So it's the SaaS version.
Yes, that's awesome.
I love SaaS.
So there we go.
Bam.
It created a ton of files.
You'll see there are a lot of these different style things.
But then also it gives you some common Angular files,
sets up your application, sets up a single controller.
And it also sets up--
here, this is one of the coolest things about the
Angular generators, is it also sets up a unit test by default
for everything that you make.
So you're already set up to do unit testing.
You don't have to fiddle around with
some boilerplate code.
It'll automatically put that in there.
And so that's really cool.
Unit testing's a really, really huge part of developing
AngularJS apps.
We want web apps to be really robust and testable.
And we want to have these tools to support
that sort of workflow.
So let's see what this looks like right now.

So my Linus box is goofy.
I think it's going to launch up Firefox.
But we're going to ignore that and go to Chrome.
There we go there's Firefox.
Cheerio!
All right.
PAUL LEWIS: Oh, the irony.
BRIAN FORD: Yeah, the irony.
So here you can see you might recognize the Twitter
Bootstrap here.
And it says we have these things installed.
So let's go ahead and go into Apps Script Controller Main.
Ooh, that's some big font.
All right.
Let's add another item in there.
Let's see, technically we also have Bootstrap,
so let's add that.
And we save it, and we get that auto-refresh awesomeness.
So that's pretty cool.
But let's see how we can further support building an
Angular app with Yeoman.
So let's say I want another route.
Maybe I'll open up a new tab in my terminal here.
So we would do Yeoman Init Angular route.
Maybe I'll do like "hi, Paul," or something like that.
PAUL LEWIS: I like this theme.
ADDY OSMANI: I think perhaps he was referring
to our other Paul.
PAUL LEWIS: Oh.
BRIAN FORD: We can do a "hi, other Paul" as well.
PAUL LEWIS: I said at the start, we're
hot-swappable, you know?
You just pick a Paul.
It's all good.
BRIAN FORD: Full Paul interpolation?
PAUL LEWIS: Absolutely.
BRIAN FORD: All right.
PAUL LEWIS: You get increasing amount of hair.
BRIAN FORD: And you can actually just go to "hi,
Paul." And this is the "hi, Paul" view.
But let's add something in here so that way we can
navigate around.

It's hard to scroll through these things we you have this
awesome huge text.
OK.
So maybe we add a nav element here.

And we say that this goes to "hi, Paul." One of the things
that we're working on right now is supporting HTML5
routing by defaults in Yeoman.
Right now we don't do that.
But I think there's actually a pending pull request that adds
that so that you don't have to have this ugly little hashmap.
Then we can just do home, I guess.

All right, so we've got home and we've got "hi, Paul," so
that's pretty cool.
We already set up some really simple routing.
And if we check our app here, here's where it actually set
up this routing.
So you'll see we have both the "hi, Paul" and the "hi, other
Paul." And it already configured a controller and
the view, and it has it already hooked up.
And if we wanted to do maybe add like
some ID in here, right?
Then this will persist even if I were to add
another route to it.
So all of these changes that you make, they're not going to
get overwritten by the generators.
ADDY OSMANI: That's awesome.
It's seems like--
BRIAN FORD: And actually there's--
sorry, what was that?
ADDY OSMANI: It seems like almost the process of building
Angular app has in many cases been replaced by just a few
lines of the command line.
BRIAN FORD: Yeah, I mean, it's very simply.
You just write a few things in the command line, and then you
basically just open up your controller, and you're just
like right in the meat and potatoes of your app.
So, for instance, if I wanted to make it so I could edit
this list right now, it's actually really super simple.
So we just want to expose--
this is like Angular jargon here, but we just want to
expose onto our scope a method that maybe adds to our list of
awesome things.
So I'll push scope.new awesome thing.

And this is like some awesome Angular almost voodoo we have
going on here.
So if we go over here to our main view, we can just add an
input box here.
And we can say ng-model equals new awesome thing and then
maybe we want an input.
I'll make this look nice because we're using Bootstrap,
ng-click=add.

PAUL LEWIS: I love this Because you've
gone straight into--
like we're saying, all the set up-y type stuff, the really,
really dull stuff, if I'm honest, like the wiring this
and the-- less wiring and more actual fun stuff.
ADDY OSMANI: Yeah.
PAUL LEWIS: Let's face it.
ADDY OSMANI: I'm guessing that if he kept on going for like
another 10 or 20 minutes, he would easily have a nice
prototype of his app.
PAUL LEWIS: I love it.
ADDY OSMANI: It's awesome.
PAUL LEWIS: I've got a feeling he's about to add
something to this list.
BRIAN FORD: Yup.
PAUL LEWIS: Boom, there it is.
ADDY OSMANI: Sweet.
That is awesome.
BRIAN FORD: I don't know if you guys can see it very well.
ADDY OSMANI: Yes, yes, we can.
BRIAN FORD: Yeah, again, I think Angular and Yeoman are a
great team together.
Angular really focuses on minimal boilerplate.
But no matter what framework you use, you're still going to
have different references across files, different
controllers, and views and things that you need to link
together when you're making these new things.
And so Yeoman is really cool for that.
And plus you get all of the awesome things that Addy
mentioned earlier.
The build process is there.
The testing is there, just all these things, the image
minification.
So it's just really, really awesome.
I couldn't imagine developing apps any other
way since using Yeoman.
PAUL LEWIS: That's what you want to hear, right?
ADDY OSMANI: Exactly.
PAUL LEWIS: That's wonderful.
Awesome.
Yeah, thank you so much, Brian, for showing us through
the Angular generators.
That's awesome.
PAUL LEWIS: Yeah.
I guess what we should do is we should take a look at the
questions on the Moderator.
ADDY OSMANI: Yeah.
We're almost out of time so let's look at some questions.
PAUL LEWIS: Yeah, let's see what we've got.
So we maybe not be able to get through all 13 questions, but
thank you for them.
And we will obviously get through the ones that we can.
ADDY OSMANI: Yeah.
PAUL LEWIS: So let's start with the top one.
So first, "congrats on the successful launch." That's
very kind of you. "Plans on letting people define their
own code structure.
Today it's rather hard to introduce Yeoman into an
existing environment due to the requirements on folder
structure, et cetera." Also, as a bonus here, "Windows
support soon?"
ADDY OSMANI: So people have been requesting the ability to
drop in existing projects into Yeoman and just have it work.
And we totally get that.
So we're taking a look at better initial configuration
so that if you have a project with a different directory
structure to what we think you should be using, we're going
to give you a nice easy way in the next couple of releases to
just sort of say, OK, well, here's where my scripts are.
Here's where my styles are.
And here's how the rest of my app is structured.
And hopefully, you'll be able to just use Yeoman right out
of the box without too many issues.
PAUL LEWIS: So on that, though, it's presumably worth
saying that Yeoman still is opinionated.
ADDY OSMANI: Yes.
PAUL LEWIS: And that is a core part of Yeoman.
So it's probably, what?
A compromise somewhere in there?
ADDY OSMANI: Yeah.
PAUL LEWIS: So it's like, yes, you can tweak
things a little bit.
But do expect it to still be Yeoman-ish.
ADDY OSMANI: Absolutely.
And we always tell people if you find that what you're
trying to do is a little bit too much outside of our own
opinions, we do recommend, though, do check out Grunts,
which is a project that Yeoman builds on.
Because it allows you to customize a lot more.
It's more for those people that know what they're doing.
They've got a good idea of all the tools they want to support
and want something a lot more custom.
There's also a question about Windows support.
So we don't officially support Windows just yet.
But I will say I was doing a tooling workshop in
Amsterdam last week.
And I'd say half the class had Windows boxes, and they were
all up and using Yeoman.
So it does work at the moment.
There are one or two little tweaks we still have to make
to improve the user experience.
But Windows support is coming.
It's definitely something that's on our radar.
PAUL LEWIS: Awesome.
OK, so "can Yeoman be expanded for other languages, such as
PHP?"
ADDY OSMANI: Interesting question.
So quite a few people have also been saying, you know,
I've got an existing back end.
Maybe it's written in PHP, or Rails, or .net,
or something else.
And we want to try helping developers with the broader
stack as well.
There are a ton of different variations on that, though.
And we obviously can't help everybody with everything.
So what we're going to try doing some time in the near
future is giving you a solution for how you can
integrate your existing back end with a front end that's
powered by a Yeoman workflow.
It's definitely something that we're looking at.
And it'll probably just take a little while longer to
properly think through the design of that.
PAUL LEWIS: OK, that actually taps into another question.
So you've answered that one by proxy, which is great.
"It would be awesome"-- apparently--
"if Wordpress and other CMS had integration as well."
ADDY OSMANI: It's interesting when you say integration.
What do you think integration means there?
PAUL LEWIS: Well, it's a good question.
Well, the question here from Simon, he's sort of saying
"Wordpress database, HTML5 boilerplate-themed build
script, boo."
ADDY OSMANI: So, actually, a nice fellow called Romain
Berger came up with a Wordpress
generator for Yeoman.
I haven't taken a full look at it just yet.
But the idea there is that you can actually generate
Wordpress projects using Yeoman.
PAUL LEWIS: I guess that seems to be what
the question's asking.
It's like, OK, yeah.
Because if you were to scaffold out today at front
end, it would be, I suppose, ignorant of any particular CMS
or whatever.
ADDY OSMANI: Yeah.
PAUL LEWIS: So it's good to know that there are, in
theory, generators.
And yes, I mean, that's the point of the community, right?
ADDY OSMANI: Definitely.
PAUL LEWIS: If you want to write these generators, you
can look at the existing generators, you
can create your own.
There's pull requests, as you say, for Wordpress.
ADDY OSMANI: Absolutely.
PAUL LEWIS: So get involved.
Help out.
ADDY OSMANI: Yeah, that'd be awesome.
PAUL LEWIS: That's what we're hoping people will do.
ADDY OSMANI: Let's take one more question and
then we're going to--
PAUL LEWIS: Can you talk a little about Yeoman Insight?
What are the plans to share this wonderful
data with the world?
Thank you, Eric.
ADDY OSMANI: Oh, of course.
Yes.
So Yeoman Insight was this idea to help track some of the
different things that developers are doing
on the front end.
The idea is that we don't really have this sort of great
source of information about what frameworks people are
using, whether people are building large-scale
applications or something a little bit smaller, what the
pain points of people's workflows are.
And so Insight is sort of this opt-in feature of Yeoman.
So it's completely optional.
You don't have to use it.
We do like you to, if you can.
But basically, it'll track some of the stuff that you're
doing and send it back to us.
We aggregate the data.
And at some point in the near future, we're going to share a
lot of that information.
So we'll let you know what frameworks people have been
installing and using with their apps, what the most
popular commands are, whether people are just using Yeoman
for tons and tons of smaller projects or just on much
larger beefier things in production.
But, yeah, we're hopefully going to plan on getting that
data out soon.
PAUL LEWIS: I know that you said this was last question.
But I did see one at the bottom here.
Is that Paul Irish on the right?
I think, no.
Unless Paul Irish suddenly became British.
There's Paul Irish now on the left.
Unless Paul Irish became British and lost all his hair.
No, I'm Paul Irish.
But Paul Irish is unwell this week.
So hopefully he gets better.
ADDY OSMANI: Get well soon.
Get well soon.
So on that that's it.
PAUL LEWIS: Thank you for joining us.
ADDY OSMANI: Thank you to my special guest, Paul Lewis, for
stepping in.
PAUL LEWIS: Thank you.
ADDY OSMANI: And we'll see you again on the next
"Breakpoint." Thank you very much.
PAUL LEWIS: Thank you, Brian.
BRIAN FORD: Yup.
PAUL LEWIS: See you later.