[MUSIC PLAYING]
ALEXIS MOUSSINE-POUCHKINE: Hi we're here
at dotJS, an amazing place and I'm here
with Addy Osmani, who was on stage minutes
ago talking about a lot of things.
You managed to cram, you know--
ADDY OSMANI: I crammed in all the things.
ALEXIS MOUSSINE-POUCHKINE: Yeah.
So how about we talk about maybe Yeoman.
And you talk about Yeoman being part of those three tools
that you think are important, not just
because developers are lazy, because they
want to be more productive.
So can you maybe set the stage here.
ADDY OSMANI: Sure.
So Yeoman is a project we've been working on for a year.
It's sort of this workflow for the front end,
for helping developers stay really productive.
And it gives them three things and we
think are really compelling for you to stay efficient.
The first is a tool called yo, which
is really useful for scaffolding.
So let's say you're trying to create a new AngularJS app,
or something using Ember or Backbone.
Rather than having to go looking for the boilerplate
for that app, and trying to fit a workflow of tools around it
that works well for you, we can actually give you all of that
just by running one command.
So it saves you time and it gets you up
and running much quicker.
ALEXIS MOUSSINE-POUCHKINE: OK.
ADDY OSMANI: We've also got in that workflow,
we've also got Grunts, which is a really great task runner,
gives you a really great build process, and Bower, which
is really useful for managing dependencies.
ALEXIS MOUSSINE-POUCHKINE: So Yeoman and yo
is really co-generator, and those are mostly
known for one chaw generation, and then
you kind of need to re-run it, and you start from scratch,
and how does that work?
Is there any incremental side to it?
ADDY OSMANI: Yes, so we thought a lot about how
we can improve iterative development as well.
And so Yeoman also comes with a concept of sub generators.
And the idea is, let's say you're
trying to scaffold out a smaller piece of your app.
It might be a view, or a router, or a new component.
You can run commands that will actually
let you do that on top of the initial set of things
that you've scaffolded out.
So you can continuously keep using the tool
whenever you want to create something new, regardless
of how large or how small it is.
So the best place to find out information about Yeoman
is Yeoman.io.
ALEXIS MOUSSINE-POUCHKINE: OK.
ADDY OSMANI: But the community around the project
has been growing pretty rapidly over the past year.
There isn't a day that goes by where I haven't seen someone
trying to create something new with the project.
And we've got a whole ecosystem of generators
now whereby, if in most cases you pick out a framework
you want to use-- and not just if it's a JavaScript framework,
but in many cases it could be a mobile framework or even
a back end server language-- there
are people that everyone generators to scaffold you
up projects using those.
Probably the most surprising for me
was one of our most popular generators
is actually one for WordPress Project.
ALEXIS MOUSSINE-POUCHKINE: Interesting.
ADDY OSMANI: Something we hadn't considered at all
but people are using it for whatever's useful.
ALEXIS MOUSSINE-POUCHKINE: So you
mentioned mobile, does Yeoman do anything specific for mobile?
ADDY OSMANI: Yes actually.
So our team spent a month doing a lot of mobile web
development, just to get a really good feel
for the current landscape of tools
that developers have to use.
And on the back of that, we put together
a Yeoman generator called generator-mobile.
And what that gives you out of the box
is a really great boilerplate for creating mobile web apps.
It's fast.
It's very small.
But we also give you a whole set up of tools
for testing in the cloud, local device testing,
on getting a live iterative workflow
across multiple devices at one time.
So edit on your desktop, refreshes
across all of your devices.
And it just makes it a little bit easier
when you're trying to create something
that works great on mobile.
ALEXIS MOUSSINE-POUCHKINE: Awesome.
So another big part of your talk was
about Web Components and Polymer, the Polymer Project.
So tell us a little bit how that plays
versus existing standards that are being developed.
Should people consider this today,
or is it just so they know, and then start
using it maybe once it's ready?
ADDY OSMANI: So I think Polymer is a really great solution
to be aware of.
One of the fantastic things in recent years about sort
of standards bodies is that they've
been paying a keen eye on what developers are using.
So like things like data binding is something
that you tend to use a JavaScript
framework for a lot of time these days.
And wouldn't it be fantastic if something like that
was actually in the platform?
Templating, another thing, being able to create
sort of components with proper encapsulation.
We've had to hack around the platform
to get these features in place whenever
we're trying to create large apps.
And finally, through Web Components,
we're getting some of those.
We're getting a proper template tag.
We're getting imports that allow you to package together
different pieces of your app and let the people use them.
Custom Elements, Shadow DOM for encapsulation,
lots of really exciting pieces that
are coming to the platform.
I know a lot of developers will be wondering,
is this stuff just landing in Chrome?
And thankfully, no it's not.
We've been talking to Firefox a lot lately,
and it's actually looking like they're
going to ship most of the features needed for web
components directly with Firefox nightlies in the next couple
weeks.
ALEXIS MOUSSINE-POUCHKINE: Nice.
ADDY OSMANI: Should be exciting.
ALEXIS MOUSSINE-POUCHKINE: Very nice.
So Polymer is more than just implementation
of those standards in the word?
ADDY OSMANI: Yeah, so--
ALEXIS MOUSSINE-POUCHKINE: Is it a UI component library?
Is it a framework?
Is it all of the above?
ADDY OSMANI: It's sort of all of the above.
It's an ambitious project, but it's
solving lots of interesting problems.
Like so consider it built on top of layers.
The first layer is polyfills for the platform.
So if you're trying to target users using a modern browser,
Polymer will work great in all those.
And with the platform layer, you'll
be able to work with any of the standard features that
are being implemented in browsers.
On top of that, it has sugaring layer,
which takes away even more of the boilerplate
that you'd have to use.
If you were authoring just using regular old web components.
And I've personally found it really,
really nice for writing pretty interactive apps without having
to write a lot of code.
And because it's built in such a way that
encourages code reuse, and element reuse,
you'll often find that there are smaller things that you don't
need to go re-implant yourself.
Like the app I was showing on stage was sort of a YouTube app
for helping you manage playlists and stuff like that.
And when I was developing that, I
found that there are some really nice elements that
helped you do things like YouTube search, or displaying
YouTube videos, and so on.
And tying those all together using Polymer
and Web Components was actually pretty easy.
So I think it's a great thing to keep an eye on.
Production wise I would say that we're probably
at least a little while off--
ALEXIS MOUSSINE-POUCHKINE: OK.
ADDY OSMANI: But it's still something to be aware of.
As soon as these things are in the platform, they're faster,
they're easier to use.
ALEXIS MOUSSINE-POUCHKINE: And for those people
interested in checking it out, that actually
plays well with Yeoman.
ADDY OSMANI: Yes, yes it does.
There's actually a generator for Yeoman
that lets you scaffold up Polymer apps and Polymer
elements as well.
So if people want to check that, that's
called generator-polymer.
ALEXIS MOUSSINE-POUCHKINE: Great.
Well I think that's all the time we have for.
So I'd like to thank you Addy for answering my questions.
And wishing everyone great time, and I
hope to see you for the dot conferences.
Cheers.
ADDY OSMANI: Cheers.
[MUSIC PLAYING]