[MUSIC PLAYING] LYNN JEPSEN: Good
afternoon everyone, and welcome to
our session on how to incorporate what's
new in material design into your existing code base. My name is Lynn Jepsen. I'm the engineering lead
of Materials Web Team. ADRIAN SECORD: And my
name is Adrian Secord. I'm the eng lead for our
shared code libraries. LYNN JEPSEN: So we're
going to show you how to incorporate all the new
goodness of material design into your existing
developer workflow. You're probably in this
talk because you've already built an application. And you're wondering,
all these new material tools and components, they
sound awesome, but realistically speaking, can I incorporate
them into my existing codebase. Answer is yes. OK? We're going to show you how
to update pieces of your app to use material
design without feeling like you have to rewrite
your entire application. But first, let's talk about
some of the new things in the material design
ecosystem and how that supports our existing MDC libraries. Then we're going to do a
walk-through of the code and show you some example
code actually using MDC. And then we're going
to talk about some of the benefits of using MDC
in your existing codebase. So what's new in material? There are a lot of new things
in material design this year. We've done a lot
of announcements. We've done improvements
to our guidance. We've had improvements
to our components. And we've launched a brand
new material tools suite. We're going to show you
how each of these tools supports developers. The first tool you should
absolutely know about is Material Design Guidance. We've really
expanded and enhanced these articles this year. So it starts with an overview
of the material metaphor, and then it dives into
some of the foundational UI practices around color,
topography, elevation. Now this is a really good
interesting reading but, perhaps, a bit
theoretical when you're trying to incorporate material
design into your existing codebase. So Material Design Guidelines
also provides tactical guidance on how to use our components
like button, at bar, text field, et cetera. These articles, they're
applicable to developers, not just designers. So let me give you an example. Say your designer makes a mock
with a Material Design button. The button, it shows text. But when you go to put
the text inside the button inside your application,
the text wraps to two lines. You're not sure
you should increase the width of the button
or just let the text wrap. If you read the article for
the Material Design button, your question is
answered quite quickly. There is clear guidance
that you should not let the text wrap for a button. These articles, they help
developers guess correctly when you're in the middle
of feature development. Now to make sure that
these articles are applicable to developers,
we have our own engineers, like myself and Adrian, actually
collaborate with designers as they're drafting
these articles. Our own collective
engineering experience, it provides a lot of
perspective on what sorts of problems developers
frequently encounter. ADRIAN SECORD: So that first
part, with all the guidelines, really feeds into the second
part we want to talk about, which is MDC. So MDC stands for
material components, and it's our set
of shared libraries that you can use to build
material apps and websites. It's actually four
separate libraries. And they're built to match
the guidelines that you see on the design website. We want to support developers
where they're at right now so the libraries, the platforms
we choose are chosen based on where you're developing. So the first one isn't
going to be too surprising. We have a library
called MDC Android. MDC Android is the
open source evolution of Android's previous
design support library. So essentially,
we've taken a piece of what used to be
inside of Android and pulled it out into the
open source and to GitHub so that you can use it
directly, interact with us, and work with us
on the GitHub repo. The second one is MDC iOS. This is the open source version,
much similar to the Android one, of Google's
internal UI library. So you might be a
little bit surprised that Google does
iOS development. I'm not sure if
you are or aren't. Depends on where
you're coming from. But actually, Google
is dedicated to serving its customers on whatever
platform we find them. Fun fact, actually, MDC iOS was
the first open source library that Material put
out way back in 2015. And it's been hanging out on
the GitHub repo since then. We've been iterating and
developing and interacting with everyone there. Another fun fact
actually, at I/O 2018, there are as many developers
who say they're developing for iOS as for Android. The third platform,
you might be not quite as familiar with depending on
what talks and things you've been going to at I/O this
year, but it's Flutter. So Flutter is a UI framework. It's written in
the Dart language. And you write your app once,
and then it compiles down to native Android and iOS apps. Flutter is currently in
its first public beta. It's developing a lot
of buzz with developers. And you might have actually
seen the talk earlier today by one of our
colleagues, Will Larche, called Code Beautiful UI with
Flutter and Material Design. If you didn't see the talk and
you're interested in seeing it, you can actually catch it on
YouTube in a couple of hours. LYNN JEPSEN: For web, we focus
on providing two core web technologies, CSS
and JavaScript. So as many of you
probably know, the web is a very diverse platform. There are a lot of ways
to do web development. We found that providing
CSS and JavaScript makes MDC Web usable by
multiple web frameworks. We've also developed a way
of wrapping our JavaScript so that we can use it in
other web frameworks. Now we've heard that a lot
of the existing codebases are written in one web
framework in particular, React, which is why today, we'd
like to introduce a new MDC library for React. It depends on the CSS and
JavaScript of MDC Web. Now this library
is still in alpha, but we encourage you to go
and check it out and give us feedback on what's working. ADRIAN SECORD: So we want to
emphasize that all of the MDC libraries are open source. They're there, out
there on GitHub for you to see, to play
with, to interact with, hopefully to contribute
to, even at the very worst, if it's just sending us some
issues when you find a bug. And we want to make sure
that these libraries use modern development
practices and that they're aligned with the kinds
of development workflows that you yourselves are using. A second piece I'd
like to introduce here, which we've seen before
in previous talks, is called the
Material Theme Editor. This is a plug-in for Sketch. If you're not
familiar Sketch, it's a very popular design tool. People use it for
mockups, for prototyping, that sort of thing. And if you use the Material
Theme Editor inside of Sketch, the cool thing is it knows
all about the MDC components. So you have a lot of
confidence that whatever gets designed by either
yourself or your designer will translate
really well to code. A second piece that complements
the Material Theme Editor is Gallery. So Gallery you can use to
sort of share different mocks, collaborate, comment
on them with all your different team members. But the neat thing is if
you're using the theme editor, Gallery basically sucks in
a whole bunch of metadata that came from using
the theme editor and can display
interactive things like measurements, fonts, what
the colors are that are set. And even probably more
importantly for developers is that you can tap or
click on any of the elements that you see in a
mock and get the link to the appropriate
code documentation. So here, although
you can't see this because it's probably
really far away, the user has highlighted
that first field on the top. And it's showing some
measurements in red. That kind of thing. But even more
importantly is the part over on the right where
it's actually giving you a link directly into the Android
docs for the MDC text field. This is really great because you
know that you're jumping right into the right thing, and
you're not trying to figure out, oh, where did that doc go. How do I get there? So this is a really fantastic
way to collaborate with design. So using MDC in your codebase,
we've been talking about this. Let's get right
down into some code. We developed MDC to be
incorporated directly into your codebase. We really, really wanted
to avoid forcing you into getting into
some huge framework where you had to do a
whole bunch of set up or had something where
it sent its tentacles into all the different
aspects of your app. Instead, we wanted you to be
able to take, say, a MDC button and plunk it down in your app. And get it using, get
it working right away and not have to necessarily
buy into a giant framework. So you're going to
see next some examples from Android, iOS and the web. So first, let's pretend that
you are about to go and get yourself a new puppy. So you're very
excited about this, and you're up on the dog
adoption websites, as one does. And of course, everyone knows
the most important part about bringing a new family
member into your family is-- or maybe the most fun part-- is choosing the name. So you're a developer. You've got to choose a name. You're coming up with all
sorts of different suggestions from yourself and your
family, your friends. What are you going to do? You're going to write an app
to track all these names. So we're going to
build our own app here. This is our View Controller. This is going to start in
Xcode, so it's written in Swift. MDC works just fine
with Objective-C. And this is really just starting
with a standard template that comes out of Xcode. Xcode, by the way, is Apple's
ID for generating code. And this just comes straight
out of the default template and loads up some example data. And then just gets a
view on the screen. So if you start with this, you
get this very, very basic dog name tracking app. All right. So we have our dog names here. It's wonderful. We've collected a
whole bunch of them. But of course, as you go about
your day and talking to people, you're going to
find even more dog names that you want to track and
rank in your dog name tracking app. So this is a great
example of using a material floating
action button. So instead of you having
to go into the code and add something to
an array somewhere, you could just tap the button
and add a name that way. So first off, you
got to get the code. Right? So our code, of course,
exists in GitHub. You can download that
immediately using Git, all the normal things. But at least on iOS, the
standard way to get code is to use a package manager. So a CocoaPods is a
package manager on iOS. And here is a pod file-- if
you're not familiar with this, it's not very
exciting-- but what you have to do is just reference
this material components pod. And then run pod install to
download material components and all of its dependencies
onto your local disk so you can use them. The next step is just
to wire up this Material button the exact same
way you would normally. So back in the Swift code,
you can see at the top, we're just importing
material components. And then next, we're
creating a floating button. So the class name in this
case is MDC Floating Button. So we're creating
that new button. And then we're setting its
icon and its background color and putting in the
view hierarchy, just as you would
a normal button. So if we do all this, you
get this nice list view. And in the bottom corner there,
we have a nice little purple FAB, that you can-- sorry,
floating action button-- that you can tap. Then you get all the
normal little ink ripples and the different
effects you'd expect for pretty much for free. LYNN JEPSEN: Let's talk about
a completely different example for the web. Say you have an
existing HTML form. I'm going to show you how to
replace just this input element with a new MDC text field. MDC Web is installable
through Node Package Manager. You just have to run
this one line command. It's both easy and fast
to install our code into your codebase. You'll need to actually
update your source code to use MDC Web. So let's start with
the text field. You just need to copy our text
field HTML into your form. Now our text field HTML
is documented on GitHub. Here we have the documentation
for the field component. The HTML structure is
called out quite early in the documentation so that
you can quickly copy paste. And each of our
components for Web follow this
documentation format. The next step is to actually
import our SAS files into your SAS files. SAS is a technology
which compiles into CSS, and it works with existing
open source bundle systems like Webpack. Finally, you need to
initialize the JavaScript on the HTML element. And this is all you need. You get a nice lovely text
field working on your website. Users can interact
with this text field like they would any
field on any website. And check out the animation of
the line ripple in the floating label. This is Material Design
approved animation. It provides valuable
feedback to the users who are interacting
with your website. ADRIAN SECORD: All right. So back to our little dog name
tracking app, which, you know, the first thing you
should probably do is come up with a
better name than that. But let's pretend you're
really into this app. You're very excited
about it, and you think it's the best
one of these out there. And you decide to push
it a little further. You work up, with
maybe a friend, a branding story for your app. So it's not just a
simple app anymore. You want to make
sure that you've expressed all the right
typography and color system and maybe different
elements of the app so it all comes together and
works as a single branding story. And let's pretend in
your graphic design aspect of your brand,
you're really more into sharp corners and edges
than you are of these round circle type things. This is an excellent
example of something that we can use
material theming for. You might have heard
material theming. I hope you've heard
about material theming in the other talks
in I/O. But this is a great time
where we can take a little bit of
branding, sharp corners, and apply it to a really
visual, very forward element in your design,
which is the FAB. So what we're going to
do is transform our FAB from the circular one we get by
default into this nice diamond shape. So back in the
code here, anything in MDC iOS that you
can affect its shape takes a thing called
a shape generator. And in the highlighted
code here, we're creating the shape generator. And we actually have
given you, in the library, a few standard shape
generators that you can use. They do simple things like
take rectangles and cut off corners at various
angles or maybe they round off corners at various
radii, that sort of thing. And in this case,
what we're doing is we're going to take
a square, which is the bounding box
the original button. And we're going to cut off
its four corners at 45 degree angles so we get this
nice diamond shape. So that's all that's happening
in the highlighted code. We create the shape generator,
and we assign it to the FAB. And if we do that and rerun
our code, we get this. So you have this nice
diamond shaped FAB popping up in the bottom, and you
get all the normal effects that you would expect
like the ripple and the different
animations for free. And every time your users go and
interact with your lovely FAB down there, they are
getting a little burst of your brand in that button. LYNN JEPSEN: All
of our components allow for customization. So let's talk about
the text field example on the web platform. Say your designer
wants to customize all the colors of a text field. He wants the line to start
at gray on page load but then when a user hovers
over the text field, he wants it to change to orange. Your designer also
wants the line to change to a slightly
different shade of orange when the user clicks on the text
field and starts entering text. And your designer
wants to make sure that the label matches
the color of the line. How do you build all of this? You build it using-- oops back, forward, forward. You build it using
MDC Web mixins. So these SASS mixins are
APIs that developers can use to customize components. Here, we have the code to
customize the text field. At the top, we have code to
customize the gray colors for the idle state
of the text field. In the middle, there is code
to customize the hover state. And at the bottom, there's code
to customize the focus state. Focus state is when the user
actually clicks on the text field and starts entering text. Now you can implement
a lot of customization using these SASS
mixins, and you don't have to worry about all the
choreography of all these color changes. Now for those of you that
have Android applications that are already built
using Material Design, the MDC Android team
has made it really easy for you to upgrade
your existing MDC text fields to a new outlined
variant of this text field. Here we have some code for a
form in an Android XML file. All you have to do to
upgrade to an outline variant is to add this one line of
code to the style attribute. With that, you get a
new form of text field. It looks like this. It's our outline version. You can think of
this outline version as another form
of customization. If this outline version looks
better with your app's existing graphic design, then use it. And because this is
an Android component, we've also made sure that it
works with existing Android theming. So if you've already set
your Android theme colors to the right shades of
orange, then this text field will inherit those colors. Now we've shown you a
lot of code here at I/O, but perhaps looking at code
from the back of an I/O stage is not the best way to learn. The best way to learn
is to actually write code, which is why we've created
30 code labs for you to go and enjoy that work with MDC. We have code labs for all of
our platforms, Android, iOS, Flutter, Web. For Android, we have code
labs in Java and Kotlin, and for iOS, we have code
labs in Objective-C and Swift. We don't have any code
labs in React yet, but if you want code labs in
React or some other technology that you're using, let us know. We really want to
make sure that we're targeting the technologies that
developers are already using. ADRIAN SECORD: So now
that we've seen some code, we've seen some examples
of getting some MDC things into code, we
want to go back a step and say why use MDC. We really believe that
using MDC libraries helps you create
beautiful products. We believe that they should
be pretty easy for developers to use, and we
definitely believe that they provide an excellent
user experience to your users. So not only do you get this sort
of experience of using the code and hopefully, it's a little
smoother and easier to use, but this actually brings a
lot of value to your users. Let's go into a little
bit more detail. So each one of our components
is built to be pixel perfect. We collaborate with the
designers infinitely to add polish, to get
all the details right. We worry about the
fills and the strokes and the radii and
all the anti-aliasing and all that sorts of thing. And we also do a lot of
research and user testing. Material, as an organization,
actually has researchers on staff that go out
and take our components, put them in front of people,
and test them and see what works better and what doesn't. We actually have a
very good example of this with the text field
that we were seeing before. You might have seen it had
very heavy outlines and very broad or very prominent fills. Our original text field
that we released in 2014, when we went out and did some
user experience, some user research, we found out that
people didn't actually, in the middle of a busy
screen with a whole bunch of different things
in it, people didn't actually know
necessarily if they were supposed to tap into
it and fill out the text. So they were missing,
say, filling out an important part of a form. We went back and redesigned
based on that experience and actually republished,
maybe a year ago, the text field spec,
updated all the code, so that it became a better
field for everyone to use. The other thing that we do
is, designers, of course, are not a one size fits all. There's many different
kinds of designers. So in Material, we
have visual designers. We have interaction designers. We have people who
do motion design. And we work with all
of them to make sure that every aspect
of these components is as good as possible. The other piece is that
MDC is production ready. We work very hard
to make it optimized for various performance
metrics, for memory, for CPU, that kind of thing. We test on a wide range and
exhaustive range of devices and browsers and situations. We also stress test things
with the open source community. So you could imagine that
maybe Google only uses these components
in a certain way and no one else ever
uses them a certain way. But that's OK because we have
open source contributors who are using them in all
sorts of different ways, and we get all that
and fold it back in so that everyone gets the
benefit of that experience. The other thing that's
really important is this is how Google
ships its apps worldwide for quite a number of years now. All are Android and iOS web
apps are out there using exactly this code to ship. So we're used to doing the
Google scale performance and optimization that you
get the benefit of too. LYNN JEPSEN: That
third reason why you should use MDC is because
it helps you build features faster. So using our
components can really speed up your development time. We've already spent months of
developer and designer time building these
components from scratch. So we want everyone
here today to feel like they don't have to build
components from scratch. They can just quickly install
and use our components in your codebase. In fact, we also don't want you
to be tied to Material Design's visual expression. So if your designer
wants to make changes like customizing the
color of a text field or the shape of a
floating action button, then there are APIs
developers can use to build that customization. We want you to expose
brand through our APIs. We have APIs for color,
typography, and shape. We want our components
to feel like they belong within your
existing application. The fourth reason why
you should use MDC is because using MDC is
leveraging MDC engineering. We're going to be releasing
new components and new features through 2018 and beyond. MDC is the only
component library which evolves with Material Design. So our MDC engineers,
they collaborate directly with the designers who are
writing Material Design guidelines. That's why you can
depend on us to make sure that we release new components
that evolve with the Material Design [INAUDIBLE]. I hope you all have
learned a lot today about how to incorporate
Material Design into your existing codebase. You've seen some
new material tools and how they work with MDC. You've seen some example
code actually using MDC, and you've heard about
some of the benefits of MDC in your existing codebase. That's all we have. Thank you so much. We're going to take
questions here in a second. But I just want to
let you know that we have a Dome F,
which is the design slash accessibility dome. We're going to be hanging
out there all day tomorrow, so you can come and ask us
questions there as well. But thank you so much. ADRIAN SECORD: Thank you. [APPLAUSE] [MUSIC PLAYING]
