[Music]

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 and my name is

Adrienne Secord

I'm the inche lead for our shared code

libraries 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 code base answer is yes okay

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 code base 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

typography elevation now this is all

really good interesting reading but

perhaps a bit theoretical when you're

trying to incorporate material design

into your existing code base so

design guidelines also provides tactical

guidance on how to use our components

like button at bar text field etc 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 when you go the 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 if 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 future

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 so that

first part with all the guidelines

really feeds into the second part we

want to talk about which is MDC so mt c

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 we see in the on the

design website we want to support

developers where they're at right now so

where the libraries the platform's 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 MTC Android is the

open source evolution of androids

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 into github

so that you can use it directly interact

with us and work with us on the github

repo the second one is MTC iOS this is

the open source

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 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 MTC 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 and we've

been iterating and developing and

interacting with everyone there another

fun fact actually at i/o 2018 there's at

least as many 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 sort of 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 L'Arche 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 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 em DC 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 existing code bases are

written in one web framework in

particular react which is why today we'd

like to introduce a new MVC library for

react it depends on the CSS and

JavaScript of MVC 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 so we want to

emphasize that all the MDC libraries are

open source there they're 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 the 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 is a very popular design

tool people use it for mock-ups 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 MVC 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 is really cool in that you can

sari 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 a 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 you go you can't

see this because it's probably really

far away the user has highlighted that

first text 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 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 is where did that doc go how do I

get there so this is a really fantastic

way to collaborate with design so using

MVC in your code base you know we've

been talking about this let's get right

down into some code we developed MVC to

be incorporated directly into your code

base we really really wanted to avoid

having to that forcing you into getting

into some huge framework or you had to

like do a whole bunch of setup or had

something where it like sent its

tentacles into all the different aspects

of your app instead we wanted

you to be able to take say MDC button

and plunk it down in your app and get it

using getting working right away and not

have to disassemble some 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 and your

friends what are you gonna do you're

gonna write an app to track all these

names so we're gonna build our own app

here this is our view controller we're

gonna this is gonna start in Xcode so

it's written in Swift

it also MVC works just fine with

objective-c and this is really just

starting with the 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 tracking dog named

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 of course 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 can 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 you can get

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 stearic package manager on iOS and

here is a pod file if you're not

familiar with this it's not very

exciting but you what you have to do is

just reference this material components

pod and then run pod install to download

material components

and all this 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 this Swift code you

can see at the top we're just importing

material components and then next we're

creating an 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 ListView and in the bottom corner

there we have a nice little purple fab

that you can start a floating action

button that you can tap and you get all

the normal little ink ripples and the

different effects you would expect for

pretty much for free 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 a

node package manager you just have to

run this one line command it's both easy

and fast to install our code into your

code base you'll need to actually update

your source code to use MDC web so let's

start with a 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 text 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 sass files into your

sass files sass is a technology which

compiles into CSS and it works with

existing open source bundle systems like

web pack 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 text

field on any web site and check out the

animation of the line ripple and the

float

label this is material design approved

animation it provides valuable you

feedback to the users who are

interacting with your website alright so

back to our little dog named 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 you're not just

like 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 you know

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 sort of like

sharp corners and edges then you are

these round circle II type things this

is an excellent example of something

that we could use material theming for

you might have heard material theming I

hope you've heard about material theming

and the other talks this in IO 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 MTC

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 of 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

where there are the bounding box of the

original button and we're gonna cut off

its four corners at 45-degree angles so

we get this nice diamond shape so that's

all that's happening on a highlighted

code we create this 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 shape 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

and interact with your lovely fab down

there they are getting a little burst of

your brand in that button all of our

text sorry 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 grey on

page load but they want to use their

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

this you build it using you build it

using MVC web sass mix-ins

so these sass mix-ins are api's 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's code to customize the

hover state and in the 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 mix-ins 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 and an XML or 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 which

looks like this it's our outline version

you can think of this outline version is

another form of customization if this

outline version looks better with your

apps 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 it's 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 Platt 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 and 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 so now that we've seen some code

we've seen some examples of getting some

MVC things into code we want to go back

a step and say like why use MVC we

really believe that using MVC 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 like

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 um we actually have a

very good example of this with the text

field that we were seeing before you

might have seen a head like very heavy

outlines and very broad or very

prominent fills our original text field

that we released in 2014

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 street scream 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 republish maybe

a year ago the text field spec updated

all the code so that it became a better

text field for everyone to use

the other thing that we do is we its

designers of course are not a sort of

one-size-fits-all there's many different

kinds of designers so on material we

have visual designers we have

interaction designers we have people who

do motion design and we work with all

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 optimize for various performance

metrics for memory for CPU that kind of

thing we test on a wide range an

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 sort of

certain way and no one else ever uses

them a certain way but that's okay

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 our

Android and iOS web apps are out there

using exactly this code to ship so we're

used to doing sort of the Google scale

performance and optimization that you

get the benefit of - the third reason

why you should use MVC 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 designs

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

api's developers can use to build that

customization we want you to express

brand through our api's we have api's

for color typography shape we want our

components to feel like they belong

within your existing application the

fourth reason why you should use MVC 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 spec I hope you all

have learned a lot today about how to

incorporate material design into your

existing code base 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 code base 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 flash

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 thank you

[Applause]

[Music]