►
From YouTube: YUI in the Wild #1: Building Ubuntu Juju GUI
Description
We're chatting with Jeff Pihach (@FromAnEgg) from Canonical about how they're using YUI to build the GUI for Ubuntu Juju, an open-source tool that lets you configure and deploy services to a cloud platform quickly and easily.
We'll be talking about ways to bundle up your YUI modules for long-running apps, how Juju is structuring their application with the YUI App Framework for better performance, and ways to deploy beta features in production.
Check out Juju online in the following places!
Site: https://juju.ubuntu.com/
Source Code: https://code.launchpad.net/juju-gui
Hosted by Clarence Leung, Tony Pipkin, and Ezequiel Rodriguez, with our guest Jeff Pihach.
A
B
So
I
think,
though,
that
the
best
way
to
do
for
people
to
understand
is
just
to
give
a
really
quick
demo
of
basically
how
the
juju
gui
works
and
kind
of
you
know.
Then
you
can
really
see
the
interactions
that
that
juju
allows
you
to
do
so
awesome.
Do
you
want
to
start
sharing
your
screen
or
anything
like
that?
Yeah
yeah,
I'm
just
gonna,
switch
that
over
here
and
hope
that
this
works.
B
C
B
B
Yeah,
okay,
there's
a
there's,
just
a
really
delayed
echo
there.
Okay,
so
right
so
coming,
soon.com
is
our
trunk,
so
this
version
is
basically
bleeding
edge
and
can
break
and
basically
at
any
time
so
whenever
someone
pushes
in
a
trunk
it
gets
built
into
here.
So
this
right
here
is
a
full
yui
application.
So
when
you
come
to
jujucharms.com
url,
it
fires
up
a
y.o.a
app
instance,
and
this
is
the
result
of
it.
B
B
B
Summary
runs
you
through
on
the
readme,
any
charms
that
can
be
related
to
it,
configuration
code
files
etc,
or
what
you
can
do
is
you
can
just
simply
drag
it
and
drop
it
onto
the
canvas,
and
so
what
you
can
see
here
is
we
have
basically
a
representation
of
our
what
we
call
a
service
and,
on
the
right
hand,
side
here
we
have
our
inspector.
So
this
is
what
you
do
to
set
your
the
number
of
units.
B
A
B
So
what
this,
what
what
we
did
right
there
is,
we
deployed
what's
called
charm,
so
a
charm
is
essentially
a
collection
of
hook.
Scripts,
if
you
will
which
execute
things
on
your
cloud
instance.
So
it'll
do
things
like
download
files.
Install
them
execute
other
scripts,
basically
do
whatever
you
want
to
set
up,
in
this
case
a
wordpress
server.
B
B
So
we
have
these
two
machines
running
just
like
you
would,
if
you
were
to
set
this
environment
up
yourself
say
on
ec2
or
azure
or
any
cloud
provider,
even
a
local
provider,
but
now
we
need
to
connect
wordpress
to
mysql.
So
typically,
you
would
go
into
your
wordpress.
Config
files
go
to
mysql,
create
usernames,
do
all
that
sort
of
stuff
right.
So
what
this
allows
you
to
do
is
click
here,
build
relation
and
drag
it
to
wordpress,
and
now
we're
done
so.
What
happens
now
is
the
what
we
call
the
relation
hook.
B
And
download
my
net
works
yeah
there
we
go
all
right,
so
is
that,
coming
through
there,
all
right,
yeah,
perfect,
excellent?
Okay,
so
I'm
just
gonna
pull
up
a
a
bundle
here,
and
a
bundle
is
essentially
a
collection
of
charms
like
we
did
before,
but
they're
already
set
up
together
so
that
all
the
the
configuration
options
are
set.
The
relations
are
set
so
that
you
don't
have
to
set
those
up
yourself.
B
B
A
B
Yeah,
exactly
so
charm
is
essentially
like
I
was
saying
simply
a
collection
of
hooks,
so
you
can
create
charms
for
for
really
whatever
you
want.
I
believe
that
right,
so,
as
you
can
see
here,
somebody
has
created
a
minecraft
server
charm,
so
you
really
write
whatever
you
want.
One
of
the
charms
which
I
have
just
recently
completed
is
to
deploy
the
ghost
blogging
engine
as
a
charm.
B
So
you
simply
do
the
same
thing,
but
instead
of
wordpress,
you
drag
out
ghost
drago
to
mysql,
connect
them
and
you
have
a
fully
functional
ghost
blog
once
those
things
machines
are
done
setting
up.
So
it
really
takes
the
headache
out
of
doing
this
stuff
and
especially
for
people
who
want
to
scale
up
and
down
a
lot.
It
really
makes
this
process
so
much
easier
than
trying
to
do
this
all
the
old
way.
B
D
B
Yeah,
so,
basically,
when
you
write
a
charm,
you
create
what
are
called.
You
have
a
metadata
file
which
you
then
I
guess,
publish
relations.
If
you
will
so
let
me
pull
up
the
wordpress
one
here
again
to
show
you
so,
as
you
can
see
here,
I'm
not
sure
how
delayed
this
is.
So
I
might
be
moving
really
fast
for
you,
but
it's
pretty.
B
B
So
in
this,
in
wordpress's
case,
we
only
have
my
mysql
database
or
I'm
not
sure
what
galara
is
here
see
here.
Okay,
I
guess
it's
mysql
as
well
all
right,
so
this
charm
only
allows
you
to
do
that
one
one
relation
for
the
database,
but
it
also
allows
you
to
relate
to
memcached
nfs
and
the
on
the
other
side
of
things.
You
can
also
put
h
a
proxy
in
front
of
it
so
or
squid
varnish,
etc.
B
So,
to
answer
your
question,
yes,
you
can,
but
the
charm
author
needs
to
provide
the
hooks
to
allow
you
to
do
that,
so
so,
yeah
yeah,
it's
pretty
cool
and
for
anyone
who
wants
to
find
out,
you
know
what
those
are
you
can
go
to
this
metadata
file.
So
unfortunately,
it's
a
little
bit
small
on
my
screen
here,
but
this
kind
of
gives
you
the
information
about
the
relations.
What
it
requires
the
interface
it
communicates
on
and
whatnot,
so
there's
of
course,
a
ton
of
documentation
on
juju.one2.com
and
otherwise.
B
B
B
So
if
you
were
to
say
you
wanted
to
put
a
mongodb
backend
onto
under
wordpress,
you
would
need
to
contact
this
author
and
just
say
hey.
I
want
to
put
my
mongodb
on
here.
This
is
what
needs
to
happen
on
the
wordpress
side
to
to
relate
these.
This
is
what
and
you
know,
and
then
you
give
that
to
them.
You
add
your
charm
for
the
mongodb
charm
and,
and
you
just
simply
relate
them.
So
in
this
case
there
actually
is
a
mongodb
charm
and.
B
There
we
go
so,
as
you
can
see
here,
mongodb
can
relate
to
a
node.js,
app,
django,
app
or
rails
app,
etc.
So
these
charges
right
here
provide
relation
hooks
to
connect
these
two
together.
So
if,
if
a
guy
wanted
to
do
that
to
write
that
hook
for
wordpress,
you
could
do
that
as
well
and
mongodb
would
just
simply
say
you
know
for
this
data
for
this
relation
called
database.
B
B
B
B
So
the
only
the
like
stuff
like
these
svg
icons
and
stuff
those
are
obviously
we
want
them
cached.
So
we
we
load
those
through
your
your
typical
http
paths,
but
everything
else,
the
communication.
So
when
you
actually
move
this,
it
sends
a
web
data
down
the
websocket
connection,
so
that
juju
can
update
its
position
so
that
anyone
else
who,
logs
into
this
gets
the
exact
same
visual
representation.
B
B
Yes,
so
juju
and
so
juju,
actually,
the
entire
juju
project
is
open
source,
so
the
juju
clients,
the
gui,
the
juju
server.
All
of
that
stuff
is
all
open
source.
It's
all
hosted
on
launchpad,
and
so
you
just
go
to
launchpad
and
search
for
juju
and
there's.
Basically,
everything
is
there.
Juju
itself
is
written
in,
go
google's
new
language
and
the
gui
is
written.
The
front
end
is,
of
course,
all
javascript,
but
built
with
the
yui
app
framework
wow.
So
it's
yeah,
it's
it's.
Actually.
B
A
B
B
Instead
of
you
know,
using
bower
or
something
like
that,
and
then
we
bundle
it
together
with
all
of
our
files,
which
of
course,
are
down
this
list
here
and
then
serve
it
as
essentially
two
files
to
the
server.
So
there
are
to
the
user
there's
a
our
app
file
which
sends
out
it
goes
out
and
the
yui
file
which
goes
up.
So
it's
really
a
lot
of
times.
B
A
B
Yes,
yeah,
so
if
right,
so,
if
you
went
to
jujucharms.com
and
you
go
to
that
page
as
soon
as
you
get
there,
you'll
notice
that
there's
a
loading
indicator,
and
that
is
because,
basically,
when
you
get
you
get
this
index.html
file
and
in
this
file,
I
don't
even
know
where
it
is
basically
up
in
here.
It
says
you
know,
that's
what
you're
seeing
it's
just
saying
hey,
you
know
we're
waiting
for
this
stuff
to
get
to
get
loaded
in
once.
It's
in
excuse
me.
This
start.
B
A
B
B
Basically,
what
this
does
when
we
execute
in
our
make
file
it
executes
this
merge
files.js
and
what
it
basically
does
is
it
combined
as
the
js
combines,
combines
the
css
it
generates
source
maps
for
the
js
and
css,
so
that
during
dev
we
actually
use
the
compressed
files
so
that
we
don't
have
to
wait
for
you
know
each
file
to
come
in
like
for
those
who
have
been
using
yui
a
long
time.
You
know
in
the
in
the
loader,
you
can
set
debug
files
and
whatnot.
B
B
So
what
we
have
here
for
the
get
yui
files
is
some
really
simply.
We
create
a
new
instance
of
loader
and
we
pull
out
the
output
from
loader
as
far
as
what
all
the
files
and
all
the
dependencies
we're
gonna
need,
and
that's
the
that's
all.
We
really
do
at
that
point
to
generate
our
rolled
up
file
so
you're
using
loader
as
a
tool.
Basically,
yes,
exactly
yeah
there.
A
B
So
as
far
as
the
application
structure
is
concerned,
is
it
is
this
coming
through
all
right
on
the
left
hand,
side
here,
yep,
okay,
perfect!
So
as
you
can
see
the
bzr
file
here,
because
we
use
bizarre
instead
of
git,
but
basically
you
can
ignore
all
this
the
stuff
down
here.
This
is
for
testing
and
whatnot,
which,
if
we
have
time
I
can
get
into
later
and
building
the
file
and
stuff.
B
B
Then
we've
got
two
config
options,
so
we
have
config,
debug
and
config
prod,
so
I'll
switch
to
those
real
quick.
These
are
shipped
to
the
client
depending
on
well
juju.
The
juju
gui
is
a
charm
as
well
so,
depending
on
the
setting
you
have
in
your
charm,
it
will
either
ship
the
debug
or
the
prod
config,
and
these
configs
get
sent
to
the
app
and
basically
tell
it
what
to
do
so.
B
B
So
if
there's
something
that
we
need
to
change
in
this,
this
middle
layer,
which
will
kind
of
rework
things
to
work
properly
for
the
python
backhand
or
to
go
back
in
or
or
what
have
you
so
within
there?
Of
course,
we've
got
our
index.html
file,
which
you've
already
seen.
Then
we
have
the
two
modules
debug
and
modules
prod,
so
anyone
familiar
with
yui
will
know
about
the
the
loader
configs.
B
So
in
the
debug
version
we
have
basically
where
we
list
the
locations
for
all
the
files.
So
there's
obviously
a
ton
of
files.
Here,
some
groups
and
whatnot
there's
youtube
specific
files
and
some
gallery
modules
you're
using
are
yeah
exactly
yeah,
so
everything
is
in
here,
and
so,
as
you
can
see
here,
we
you
know
we
we
don't
want
our
any
css.
We
don't
want
it
to
use
any
roll-ups.
B
This
is
basically
you
know
as
stripped
down
as
you
can
get,
then
in
the
prod
version
really
basic,
because
we
are
rolling
things
up.
We
we
have
a
very
few
modules
which
actually
need
to
be
loaded
in,
so
these
are
only
the
parent
modules
which
needs
to
be
loaded
in,
of
course,
each
one
then
has
its
own
dependencies.
A
B
So
as
you'll
see
here,
we
really
only
have
you
know
a
few
routes
here
we
have
one
here
which
is
going
to
be
removed
and
we
have
the
login
path
and
that's
it,
but
you'll
notice
that
there
was
like
a
ton
of
url
changing
when
we
were
going
there
right
so
and
that's
part
of
our
sub
app
structure
which
we'll
get
to,
but
basically
when
the
application
loads,
it
checks.
The
user
credentials
shows
the
notifications
view
toggles
any
static
views,
and
this
right
here
show
environment.
B
B
So
what
we're
doing
here
is
we're
essentially
only
showing
a
single
view,
but
you
can
see
on
the
left
hand
side
here
we
have
a
few
different
views,
so
in
our
login
view
and
whatnot,
we
have
a
notifications
view.
So
some
of
these
are
just
simply
rendered
out.
So
you
have
we've
got
the
main
view,
which
is
the
environment
view,
and
so,
as
you
can
see,
there's
just
environment
view.
So
we
create
one
instance
of
this
and
then
for
the
notifications
and
login.
B
We
just
simply
render
those
out,
but
what's
we've
done
in
that
inspector?
So
if
you
remember
the
right
hand
side
of
that
thing
where
we
were
setting
all
the
configuration
objects
and
and
whatnot
that
right
there
actually
that's
we
want
to
go
to
this
one
so
that
right
there
is
essentially
what
we
created
called
viewlets.
B
So
we
have
a
viewlet
manager,
and
that
is
an
instance
of
y
dot
view
and
basically,
what
it's
doing
is
because
each
little
section
in
there
could
have
been
its
own
view.
We
needed
some
way
to
manage
all
of
those
right.
We
needed
a
way
to
render
some
remove
them,
etc,
but
at
the
time
we
found
that
views
were
a
little
bit
heavy
for
what
we
needed,
because
sometimes
all
we
really
need
to
do
was
render
a
template
with
like
a
little
bit
of
logic
behind
it
right.
B
So
we
came
up
with
this
idea
of
viewlets
and
a
viewlet
is
essentially
a
configuration
object.
So
let's
scroll
down
here
so
as
you
can
see
we're
using
the
yui
module
system
for
everything
in
the
in
the
application.
Basically,
it's
not
a
module.
It's
not
getting
loaded.
We
then,
of
course,
load
in
a
bunch
of
dependencies
for
this
down
at
the
bottom.
B
Here
we've
got
the
requires,
so
we
rely
very
heavily
on
the
yui
module
system,
but,
as
you
can
see
here
so
this
from
red,
can
I
get
it
all
in
here
almost
so.
This
right
here
that
you
can
see
on
the
screen
is
what
we
call
a
view
lit.
So
it's
like
a
view,
but
even
lighter
weight
than
a
view,
and
it's
essentially
just
a
configuration
object.
So
it
says
you
know
when
you
render
this
viewlet
run.
B
It
provides
a
template
and
a
name
for
the
viewlet.
So
it's
essentially
saying
you
know
yes
render
this
view,
but
then
we
have
a
manager
to
render
that
so
we're
not
using
show
view
to
to
switch
views.
If
you
will
show
view
is
only
ever
used
to
render
that
initial.
The
initial
view
into
the
application.
B
Oh,
don't
even
know
which
template
it
is,
but
basically,
when
you
create
a
new
instance
of
the
viewlet
manager,
you
pass
it
a
template
and
from
that
template
and
configuration
object,
it
knows
what
slots
are
available.
So
if
you
try
and
render
this
viewlet
into
something
which
didn't
have
this
slot
available,
it
would
just
error
out
and
say
sorry,
there's
no
slot
available
for
that.
B
So
it's
kind
of
like
a
a
really
light
way
of
using
it's
like
a
really
lightweight
views,
but
we're
also
using
the
view
system
for
the
actual
parent
of
it
right.
So
we
of
course
have
the
events
which
get
get
mixed
in
here,
so
we're
using
the
same
bubbling
up
event,
structure,
initializers,
of
course,
to
set
up
all
the
you
know
set
up
the
events
render
all
the
slots
etc.
A
B
When
you
have
so,
for
example,
this
inspector
header
one-
it
has
a
template
here
and
we
use
handlebars
templates
and
all
of
them
are
pre-compiled
and
sent
to
the
client
all
at
once.
Again
again,
that's
something
that
you
probably
wouldn't
want
to
do.
If
you
had
an
application,
which
was,
you
know,
had
to
be
loading
a
lot
quicker,
but
this
right
here,
basically
it's
a
compiled,
handlebars
template
and
within
that
handlebars
template.
B
A
B
A
B
Yeah
yeah,
so
data
binding
is
kind
of
the
the
hip
new
thing,
and
and
so
we
wrote
a
data
binding
module
which
again
using
the
ym
module
system
here,
which
allows
us
to
data,
bind
between
a
y-dot
model
or
a
pojo
plain
old,
javascript
object.
This
is,
of
course,
all
the
code.
It's
it's
pretty
thick.
You
know
like
it'll,
take
a
long
time
to
go
through
it,
so
I
won't,
but
basically
how
it
works.
Is
you
see
the
best
way
to
demo?
This
is
going
to
be.
B
Right
so
we
have,
this
is
the
fill
slot
so
before
I
had
mentioned
the
slot
that
it's
filling
so
basically
what
we
do
is
after
we
render
it.
We
then
call
the
binding
bind
method
of
the
data
binding
engine.
So
what
we
do
is,
in
this
case
we're
passing
in
a
model,
but
the
this
could
either
be
a
plain
old,
javascript
object
or
an
actual
model.
B
So,
as
anyone
who
uses
yui
knows
it
has
an
amazing
event
system
and
any
changes
to
models
bubble
up
as
change
events
and
those
change
events,
the
data
binding
engine
listens
to
and
then
reacts
to
it
accordingly.
So,
as
you
can
see
here,
we
simply
pass
in
a
model
and
a
viewlet-
and
the
viewlet
of
course
is
is
this
and
from
the
viewlet
it
can
then
parse
the
dom
and
when
it
parses
the
dom
it
looks
for
situations
that
are
attributes
called
data
dash
bind.
B
So
it's
a
data
attribute
called
bind
and
charm
changed
so
anytime.
The
model
or
pojo
which
is
bound
to
this
template,
has
a
change
event.
It
says
you
know,
has
the
charm
changed
attribute
or
property
changed?
If
it
has,
then
it
executes
the
either
the
built-in
defaults
for
that
element
or
custom
ones
that
you've
provided.
So
if
you
go
to
here
again,
I
mentioned
this
binding
section.
B
A
B
So
there's,
no,
you
know
manual
event
stuff
that
you
need
to
listen
to
it.
Just
does
that
and
the
where
was
it
here
right?
So
if
we,
you
can
see
here
that
there's
default
field,
handlers
for
check
boxes
and
whatnot,
so
obviously
it's
a
check
box
and
the
value
changes
you're
going
to
want
to
check
it,
and
so
all
of
this
stuff
is
all
handled
by
the
data
binding
module.
So
you
don't
need
to
create
a
separate
instance
of
it
you
just
at
the
application
level
it.
B
It
maintains
a
record
of
everything
that
is
bound
and
then
updates
all
the
dom
elements.
Accordingly,
as
the
models,
change
and
pojos
change,
and
for
the
the
pojo
stuff,
we
use
a
object.observe
polyfill,
which
is
it's
a
slightly
modified
version
of
this
one
right
there
and
it's
been
working
really
well
for
us.
B
So
it
allows
us
to
use
ryan's
lazy
model
list
code
because
it
just
uses
pojos
under
the
hood
and
we
can
then
listen
for
change
events
on
those
without
having
to
promote
them
to
models.
So
if
you
have
say
a
thousand
servers,
two
thousand
servers,
we
don't
need
to
create
a
ton
of
models
for
that.
We
can
simply
use
the
object
and
observe
on
that,
and
it
really
reduces
our
memory
footprint.
You
know
dramatically.
A
Yeah,
so
basically,
you
guys
are
just
using
lazy
model
list.
In
that
case,
that's
like
a
way
of
synchronizing
data
between
your
api
yeah,
exactly
yeah
yeah,
so
yeah,
it
looks
like
you
guys
have
like
default,
like
data
binding
things
going
on
there.
So
there's
like
defaults
for
like
check
boxes
and
all
that,
so
those
are
just
like
things
that
you
guys
have
wired
up
to
make
it
easier
for
to
yeah.
B
It's
only
in
spots
where
you
want
to
handle
something
in
a
you
know
specifically
different
way
that
you
can
then
provide
your
own
right
and,
and
it
really
helps
for
when
you
know
we're
going
in
after
the
fact
we
have
to
write
the
stuff
because
we
don't
need
to
be
like
okay.
So
if
it's
a
check
box-
and
it
needs
to
be
this-
you
know
that
you
know
you
don't
have
to
keep
writing
that
over
and
over
and
over
again.
A
B
B
B
So,
as
I
mentioned
before,
we
actually
have
two
separate
apps
running
at
the
same
time,
one
on
top
of
another,
so
we
needed
the
ability
to
pass
different
values
to
different
applications,
and
this
is
something
that
we're
actually
going
to
be
changing
pretty
soon,
but
it,
I
think
I
think
it's
cool
and
I'm
going
to
mention
it
anyways.
So
essentially,
if
you
took
let's
just
I'll
just
copy
this
url
and
type
it
into
here,.
B
And
let's
say
you
wanted
to
talk
to
one
app
and
not
the
other
one.
What
you
would
do
is
you
would
create
a
namespace
for
this
app,
so
one,
for
example,
could
be
the
gui
which
is
the
the
canvas
which
we
dropped.
The
and
drop
the
elements
onto
so
now,
at
this
point
from
here
on
out
you
anything
that
you
pat
type
into
this
url
will
be
sent
only
to
the
gui
application,
so
it
will
only
be
handled
by
the
router
in
that
application.
So
it
would
go.
B
So
if
you
loaded
the
app
just
like
that,
you
get
your
typical
application
right
as
soon
as
you
add
the
flags
namespace
to
it.
It's
gonna
parse
everything
else
after
that
and
load
that
into
the
application
just
set
and
it'll
just
say
these
flags
are
set,
and
so
you
could
do
something
like
new
tab
view,
let's
say
and
then
slash
fancy
colors.
B
So
what
this
will
do
is
it'll
say
the
user
has
set
these
two
flags
and
then
the
application
will
deal
with
it
at
that
point.
So
we
actually
just
did
a
release
like
this
morning.
So
all
of
our
almost
all
of
our
active
flags
have
been
removed
for
our
beta
code
but,
for
example,
in
our
fake
back
end,
which
is
kind
of
that
middle
layer,
which
I
had
mentioned
earlier.
It
checks
for
the
flags
of,
say,
charm
load
delay.
B
So
if
you
have
charm
load
delay
in
there,
it's
going
to
delay
the
loading
of
these
charms
by
by
whatever
you
set.
So
it's
really
cool
because
it
allows
us
to
say
ship,
incomplete
stuff
and
ship
features
which
maybe
we
don't
know
if
people
want,
and
at
that
point
we
can
just
say
hey.
You
know
you
want
to
use
this
feature
great,
just
type,
this
flag
into
the
url,
and
at
that
you
know
the
same
thing.
B
People
be
like
well,
why
don't
you
just
have
a
url
router
to
do
that
right
and
the
reason
that
we
don't
want
to
do.
That
is
because
this
way
it
allows
us
to
simply
just
do
a
small
conditional
anywhere
in
the
application
and
instead
of
having
to
deal
with
adding
a
new
route
right
and
then,
when
you
add
a
new
route,
you
have
to
add
in
the
infrastructure
for
that.
B
And
and
when
you're
developing
say
a
new,
you
know
say
in
this
case
the
new
tab
view
right
the
the
chance
that
the
old
one,
the
new
one,
are
gonna
share
a
lot
of
code.
Is
you
know
it's
very
likely
right.
So
this
way
it
keeps
the
original
path,
typically
sometimes
on
a
larger
feature.
You'd
have
this
right
and
else
block
in
there,
so
it
keeps
them
in
the
exact
same
area
so
that
you
don't
have
to.
You
know,
go
looking
for
this,
and
the
flag
is
also
easily
grabbable
right.
B
A
B
Yeah,
actually
we
deploy
so
we
actually
work
from
trunk.
We
don't
create
feature
branches
except
our
local
development
feature
branches
so
that
coming
soon
url,
that
is
a
releasable
version
of
the
application.
So
when
the
developer
creates
his
feature
branch,
he
works
on
it
for
a
day.
At
the
end
of
the
day,
he
commits
it
into
into
trunk.
At
that
point,
it
fires
off
to
our
ci
machine,
which
uses
juju
to
deploy
in
an
instance
of
the
gui,
so
it
actually
deploys.
B
The
gui
charm
sets
a
setting
on
the
gui
charm,
which
says
you
know.
This
is
a
ci
instance
we're
running
the
tests.
It
runs
through
all
the
tests.
If
it
says
it's,
okay,
great,
it
fires
it
back.
It
does
that
on
all
of
our
supported
browsers
and
then
at
that
point
we
can
do
a
release,
so
it
takes
us
about.
B
A
B
Well,
so
it's
it
is
a
wi-fi
module,
so
it's
got
the
ymi
dot
ad
in
here.
It
is
it's
not
in
the
gallery,
but
it's
in
our
in
our
open
source
repo.
So
anyone
can
go
in
there
and
just
rip
it
out.
It's
got
a
lot
of
extra
utility
methods
in
here
for
because
when
we
had
the
multiple
applications
where
we
want
to
send
things,
we
need
to
generate
proper
urls,
and-
and
so
it
did
all
that
stuff
for
us.
B
B
Great
well
and
then
in
the
application.
There
is
a
you
just
simply
mix
that
into
the
the
app
instance
and
you're
ready
to
go.
So
it
has
it
as
you,
as
you
saw
before
in
the
router
section.
It
just
worked
exactly
the
same
as
everything
else,
but
it
adds
that
functionality.
If
you
you
know,
if
you
want
to
use
it.
A
B
All
right,
all
right,
okay,
so
we're
back
to
the
the
gui
here,
I'll
just
load
up
the
new
version
here
or
I
guess
the
a
clean
version,
so
we
didn't
get
to
the
sub
app
stuff,
but
basically
what
this
browser
right
here
is
actually
a
totally
different
app
and
when
we
open
this
up.
These
are
views
in
that
app
and
they're
kind
of
controlled
by
a
parent
view
as
well.
B
So
all
this
functionality
right
here
is
on
top
of
the
main
app
and
the
main
app
is
what
you
see
here,
and
this,
of
course
is
a
white
on
app
with
the
whiteout
view
manually
rendered
at
the
top
here
for
the
navigation,
then
the
environment,
which
is
this
area
right
here,
is
actually
the
only
thing
which
is
show
viewed
if
you
will-
and
it
is
actually
a
d3
svg
element.
So
that's
how
we
get
these
charms
here
to
move
around
and
whatnot.
We
use
d3
for
that.
B
B
So
then,
as
far
as
I
mentioned,
the
view
list
so
this
black
box
here,
which
is
what
we
call
the
inspector
this,
is
the
wide
out
view
of
the
viewlet
manager.
So
we
can
create
multiple
instances
of
this
viewlet
manager
and
just
render
them
manually
so
essentially
just
render
the
y
dot
view,
and
the
elements
in
here
are
viewlets,
so
that
header,
which
I
was
showing,
is
this
right
here
and
then
we
have
inside
here
we
have
the
service
details,
that's
a
viewlet,
the
constraints
box.
That's
a
viewlet!
B
This
configuration
area,
that's
a
viewlet
these
buttons
here
this
destroy
service.
These
are
all
viewlets
all
with
data
binding
hooked
up
and
they
all
have
their
own
individual
templates
too.
Yes,
they
all
have
their
own
individual
templates,
their
own
data
binding
their
own
viewlet
configuration
object,
so
everything
in
here
is
very
modular,
so
we
can
take
them
out.
Add
them
in,
as
you
know,
without
a
ton
of
work.
B
So
when
we
deploy
it
you'll
notice
that
the
view
here
is
actually
still
the
same
thing,
so
we
didn't
actually
destroy
that.
Excuse
me.
We
just
simply
rendered
different
viewlets
into
the
slots.
So,
as
you
can
see
now
we
have
the
header
here
still,
but
because
an
attribute
changed
in
the
model,
we
can
no
longer
edit
this
name,
because
once
you've
deployed
a
service,
you
can't
change
its
name.
B
So
because
of
that
you
know
it's
the
same
template
and
everything.
But
now
we
have
here,
we've
got
a
control
structure
to
tab
through
these
things,
instead
of
having
it
all
in
one
monolithic
list
and
then
we've
got
a
list
here
of
the
running
units.
If
we
want
to
upgrade
or
downgrade
expose,
which
basically
means
you
know
expose
it
to
the
internet,
and
so
these
are
all
viewlets
here.
So
this
box
here
this
box
here
this
box
here
and
the
then
we
have
the
parent
container,
which
is
the
y
dot
view
and.
A
B
B
B
B
I
wrote
the
sub
app
code
and
then
another
team
actually
started
on
this
this
section
and
they
were
able
to
write
this
as
a
typical
wide-out
app
application
and
then
once
they
progressed
to
a
certain
point,
they
then
gave
us
the
code
and
it
just
worked
in
the
application,
because
it's
a
totally
separate
app.
So
any
route,
changes
and
whatnot
are
fired
from
this
sub-app
into
the
parent
app
and
it's
then
the
code
from
the
the
sub
app
extension,
which
then
figures
out
hey.
What
should
this
url
be
so
yeah?
B
B
If
they
wanted
to
to
do
that,
although
as
now
that
we've
done
it
released
a
you
know,
production
app
with
it
and
now
we're
going
away
from
that,
it's
kind
of
a
sign
that
that
technique
might
not
be
the
best
way
to
to
accomplish
this
task.
If
you
will,
but
yeah
I'd,
be
more
than
happy
to
help
anyone
out
with
that.
So.
A
B
B
You
know
juju
gooey,
so
so
yeah,
that's
that's
the
juju
gui
in
a
nutshell
and
kind
of
how
we
use
yui
and
and
for
those
out
there
who
are
maybe
trying
to
convince
their
bosses
and
whatnot
to
use
yui
for
a
large
scale
project
a
last
year
at
yy
conf.
I
did
a
talk,
called
use,
yy
to
lower
project
development
costs,
and
I
really
recommend
anyone
watch
that
just
because
it
kind
of
goes
through
the
the
major
reasons
as
why
and
why
why
we
use
it.
A
A
We
started
supporting
safari
7
recently
and
but
if
you
feel
like
you've
seen
any
problems
in
some
of
the
newer
android
browsers
that
we
haven't
tested,
such
as,
like
chrome
for
android,
feel
free
to
let
us
know
and
we'll
get
that
in
for
the
next
release
too
ezekiel.
Do
you
have
anything
else
that
you'd
like
to
alright?
C
B
A
No
problem
yeah
so
great
thanks
a
lot.
Everyone
for
coming
and
yeah
we'll
see
you
next
week,
if
you
guys
want
to
join
in
for
the
next,
if
you're
outside
of
yahoo
or
anything
else,
and
you
want
to
like,
introduce
your
products
or
show
how
you've
been
using
yui.
We
want
to
do
this.
A
lot
more
so
feel
free
to
get
in
touch
with
either
me
or
andrew.
So
yeah,
thanks
and.