I'm Caly Moss, the Developer Evangelism
Director at DocuSign and we're here in
the DocuSign studio after hours for
today's Deep Dive video. I am sitting
here with Joe Cocco, Senior Engineering
Manager at DocuSign, and Joe leads our
Olive Design System team. We're going to
talk to him a little bit today about
that.
So Joe, just to get us started off, what
is Olive? >> Yes so Olive is our design
system, which is a set of visual
standards and guidelines for building
consistent front-end applications. >> So
what exactly... well we've talked about
what Olive is, how did the Olive project
get started? >> Yeah it started off as just
some CSS inside one of our projects,
which was codenamed, "martini." So I thought
it was clever
Olive paired with Martini kind of made
sense and then other people started
asking for it and before I knew it I was
supporting it for multiple projects. I
was asked if it was something I wanted
to do full-time and I was really
enjoying it, so I said yes and then it
just kind of blossomed into what's known
as our design system today. >> I know that
it used to be built in Angular, because
that's what we were using for our web
app just using JavaScript and now you're
also doing React components can you talk
to me a little bit about that evolution
and maybe why? >> Yea so Google has decided
to stop supporting Angular 1 in the
spring of 2021. So we had to make a
decision: do we go and upgrade to the
latest version of Angular or do we move
to a different library like React or
Vue. We decided to go with React, we
really liked the community support
behind it we had a handful of developers
who've worked with it before and so that
was what we decided to really embrace. We
started off by rewriting the Angular
component library in React. We ported
over maybe two dozen or so components.
>> Out of how many? >> Oh god I don't even
know how many in the Angular one at
this point. It's got about four and a
half years worth of code in it so a lot,
but eventually we felt like that library,
the React library, was in a good place so
we asked teams, "anything new that you're
gonna build, build it with the React
component library and start giving us
feedback." That enabled us to fix some
bugs, add a lot of new features, and now
about a year and some change after
starting the React component library
we're at over 70 components and we have
over eight teams here now using it.
>> Awesome.
So how about some examples of the types
of components and packages that you guys
build? >> Sure, so when we started Olive it
really started to grow into
what's known as a monolithic repository.
It contained everything, our iconography,
our fonts. When we moved over to the
React component library we decided to
split those up into smaller packages. So
now we do have our own packages for
icons, for fonts, and for images. What that
allows us to do is move a lot faster and
release each of those things on their
own cadence. Things become easier to
maintain, easier to update and then the
developers don't have to wait as long.
When they just need a new icon we're
able to release that pretty much
immediately. >> So maybe we should take a
look at the code, I would love to see
some of these components and then maybe
take a look at the build process. You
know, how does this release work? >> Yeah
absolutely. All right so what I'm showing
you here is one of our build scripts
for that icons package and a few things
that it does. Tt runs our svgs through
an optimizer so it gets rid of a lot of
the comments, it optimizes it, it makes
the file a lot smaller. This way it
makes it a smaller package in the end.
>> And this is the build script? >> This is the
build script, correct. We also end up
generating an icon font. So this is what
a lot of our legacy applications use, an
icon font. We need to continue supporting
it, so again this is part of the icon
script instead of the component library.
Another thing that we do is we we take
all of our svgs and we export them into
PNG for iOS to use. So previously anytime
the iOS team needed an icon the
designers would manually do this export.
It was very time consuming if an icon
needed to be updated the designer
also had to do that. Now this whole
process is automated. Our build script
just takes these PNGs and it pushes it
to a place that the iOS team can really
easily go fetch and then use within
their development. >> So it's faster for everyone? >> It's a
lot faster, yea. And then one thing to note about this is
this transformation is actually really
process-heavy and takes about eight to
nine minutes and when it was part of the
old repository our build times, our
deploys were actually about 15 minutes.
We were able to remove all of this and
put it into its own repository so the
the React component library actually,
I think it takes about six minutes with
tests to make its way to NPM. And
then the the icons package is on its own
and of course all of these individual
packages are on NPM that don't we use
we've split them all up right yes
so we began pushing things to a CDN
early on but there's really no sense in
having to download an entire bundle when
you only need maybe five of twenty
components so in moving everything
towards NPM using modern JavaScript
practices you're able just to import
what you need awesome
and then just showing how we consume
these icons packages we have a icon
component in our react component library
we can import this SVG icons object from
icons and then we use it down here
someone just passes in a key we go and
look at what that key is and then in
line right so it will just end up in
lining this SVG so anytime any of these
icons may get updated it's just a matter
of updating the version of icons that
that team is using and then they'll get
that update none of that has to get
managed within their project super easy
for all the different teams that are
using it absolutely yeah yeah very cool
what's next what's next yeah so
currently we're working on a theming
package which will allow different teams
to style components slightly different
than maybe how the react component
library offers them this is going to
come really into play for our marketing
site maybe their buttons just need to be
slightly larger maybe they just they
just need to use a slightly different
color palette whatever that might be in
having theming in our components they'll
be able to do what they need to do and
the next step I'm crossing my fingers
we're going to be able to start open
sourcing some of this so we're gonna
start by maybe looking at some of our
build scripts some of our tools that we
we've built and pushing those up on
public get hub then maybe one day when
everything is you know the dust is
settled we'll look into taking our
actual react component library and
putting up there as well all right
awesome
thank you so much Joe for joining me to
do this yeah thanks for having me yeah
it was fun
and for you guys join us next month
where we're going to talk about another
upcoming API here at DocuSign ID verify
so stay tuned
[Music]
if you liked that video be sure to
subscribe to our channel for the latest
DocuSign developer content if you want
to see a specific topic in a future
video comment below for everything else
visit the DocuSign developer center
[Music]