Duration 24:21
16+
Play
Video

How to incorporate what's new with Material Design in your code base

Lynn Jepsen
Tech Lead at Google
+ 1 speaker
  • Video
  • Table of contents
  • Video
2018 Google I/O
May 9, 2018, Mountain View, USA
2018 Google I/O
Video
How to incorporate what's new with Material Design in your code base
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
65.31 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speakers

Lynn Jepsen
Tech Lead at Google
Adrian Secord
Senior Software Engineer at Google

Lynn is the tech lead and manager of the material components web (MDC Web) team. She manages the open source MDC Web repository, and the internal version of MDC Web built specifically for Google's brand. Lynn graduated from MIT and spent 3 years in Palo Alto working on a front end analytics product. She then joined the Google Search team, where she was part of two visual re-design launches. After 2 years on Search, she moved to the material design team, spending the last year as TLM of MDC Web.

View the profile

Adrian is an engineering lead on the Material Design team, where he’s responsible for the development of the Material Component libraries for Android, iOS, Flutter, and the web. He has a PhD in computer graphics from New York University.

View the profile

About the talk

Learn how the latest Material tools and components can improve your product design and functionality and can be added directly to your existing code base.

Share

Good afternoon, everyone and Welcome to our session on how to incorporate what's new in material design into your existing code based. My name is Lynn Jepsen. I am the engineering lead of materials web team and my name is Adrian Secord. I'm youngest 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 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 and your existing code base. So

what's new in material there? A lot of new things in material design this year. We've done a lot of announcement. We've done improvements to our guidance. We've had improvements to our components and we've launched a brand new material tools sweet. 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 really expanded and enhance these articles this year. So it starts with an overview of the material metaphor and then it dies into some of the foundational

you are practices around color. Typography elevation know this is a really good interesting reading but perhaps a bit theoretical when you're trying to incorporate material design into your existing code base. So material design guidelines also provides tactical guidance on how to use are components like button at bar text field Etc. These articles their applicable to developers not just designer. So let me give you an example. So your designer make sumac with a material design button. When you go the the button that 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 by 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. How to make sure that these articles are applicable to developers we have our own Engineers like myself in Adrian actually collaborate

with designers as their drafting these articles our own Collective engineering experience. It provides a lot of perspective on what sorts of problems developers frequently encounter. So what 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 for 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 library is the platforms we choose our chosen based on where you're developing. So the first one is it going to be too surprising. We have a library called MDC Android MP3 Android is the open-source evolution of Androids previous design support library 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 empty cios. This is the open source version much similar to the Android one of Google's internal UI

Library by so you might be a little bit surprised that Google does iOS development. I'm not sure if you aren't friends or where you're coming from, but actually Google is dedicated to serving its customers on whatever platform we find them. Actually empty cios was the first open source library that material put a way back in 2015 and it's been hanging out on the repo since then we've been iterating and developing and interacting with everyone there. Another fun fact actually at IO 2018. There's at least as many there are Many developers who say they're developing for IOS as for

Android. The third platform you might be not quite as fit. Depending on instead of what talks and things have been going to what I owe this year, but it's letter so flutter is a UI framework. It's written in the dart language and you're right you're at once and then it compiles down to Native Android and iOS apps letter 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 large called Cody Wy with flutter and material design if you are interested in seeing it you can

actually catch it on YouTube in a couple of hours. For what we focus on providing to 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 in 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 code bases 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 NDC web notice Library still in Elsa, but we encourage you to go and check it out and give us feedback on what's working. Show me what an emphasized that all the MTP libraries are open source their 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 Second piece. I'd like to introduce here which we seen before in previous talks is called the material theme editor. This is a plug-in for sketch. If you're not feeling his sketch the 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 you and easy components. So you have a lot of confidence that whatever gets designed by yourself or your designer will translate really well to code.

The second piece that complements the material theme editor is gallery gallery is really cool in that you can start gallery you can use to sort of share different mocks collaborate comment on them with all your different team members. But the thing is if you're using the theme editor Gallery basically sucks in a whole bunch of meditative that came from using the theme editor and Candice play interactive things like measurement Ponce what the colors are there 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 documentation. So here, you know, you can't see this because probably really far away. The user has highlighted that first text field on the top and it showing some measurements and read that kind of thing but even more importantly is the part over on the right where it's actually getting a link directly into the Android dock for the MDC text field. This is really great because you know that you're jumping right into the right thing and you're out here trying to figure out all is where did that. Go? How do I get there? fantastic way to

collaborate with design So you think I'm the senior codebase, do you know we've been talking about this. Let's get right down into some code. We developed MPC to be incorporated directly at your code base. We really really wanted to avoid having to forcing you into getting into some huge brain work. We had to like do a whole bunch of set up 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 MPC button and Plunkett down in your app and get it using getting working right away and not have 2 discs

necessarily buy into a giant framework. So you're going to see next to me examples from Android iOS in the web. Stop 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. And of course everyone knows the most important part about bringing a new family member of your family is or maybe the most fun part is choosing the name. So you're a developer. You got to choose the name you're coming up with all sorts of different suggestions from yourself in your family or

friends. What 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. We're going to this is going to start in xcode. So it's written in Swift it also NBC works just fine with Objective C. And this is really just starting with the standard template that comes out of xcode Expo. By the way is Apple ID for dinner and code and this just come straight out of the default template and load up some example data and then just get the 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 named tracking app, of course. So this is a great example of using a material floating action button 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 sort code, of course existing GitHub. You can download

that immediately if you can get all the normal things, but at least an iOS the standard way to get code is to use a package manager. So I cook a pot with a sterile package manager on iOS and here is a pod file if you're not familiar with this is not very exciting. But you have to do is just reference this material components pod and then run pod install to download and material components and all this dependencies aren't your local disk so you can use them. Next step is just a wire up this material button the exact same way you would normally so back in the Swift Code. You can see at

the top or just importing material components and then next we're creating a floating button. So the class name in this case is empty sea floating button the recording that you button and then we're setting at 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 with you and in the bottom corner there, we have a nice little purple Fab that you can start 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. I talked about a completely different example for the wet say you have an existing HTML form. I'm going to show you how to replace just this input element with a new MDC Tech. 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 and New York, Otis. You need to actually update your source code to use MDC web. So let's start with a text field. You just need a copy or text you later shemale into your form.

Now I text you late. Jamel 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 in each of our components for web follow this documentation format. The next step is to actually import RSS files into your SAS filed 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 text 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. All right. So back to our a little dog named tracking app, 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 branding story for your app. So you're not just like such a simple app anymore. You want to make sure that you've expressed all the right topography and color system and maybe you know different elements of the apps that all comes together and works as a single branding story and let's pretend in your graphic design aspect of your brain. You're really morning to sort of like sharp corners and edges than you are of these round circle e 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 and the other talks this and I owe but this is a great time or we can take a little bit of Brandon sharp corners and applied to a really visual very forward elements in your Find which is the Fab. So what we're going to do is Transformer Fab from the circular when we get my default into this nice diamond shape. So back in the code hear anything in MPC iOS that you can affect its shape takes a thing called the shape

generator and in the highlighted code here, we're trading the shape generator and we actually have given you in the library a few standard sheet 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 in this case. What we're doing is way to take a square which is there are the Bounty box the original button. I'm going to cut off its Four Corners at 45 degree angles that we get this 9th diamond shaped highlighter code. We treat the shape generator and we assign

it to the South and if we do that and we run our code we got 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 a ripple in 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. All of our texts, 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 started grey 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 start centering text and your designer wants to make sure that the label matches the color of the line. How do you build all this? Ubuildit using back forward forward if you build it using MDC web SAS Dickson City sass mix-ins 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 in the at the bottom, there's code to customize the focus date Focus day is when he was actually clicks on the text field and starts entering text. Now you can Implement a lot of customization using the Sass mix-ins and you don't have to worry about all the choreography of all these color changes. Never those of you that have Android applications that are already built using material

design. The NBC Android team has made it really easy for you to upgrade your existing and DC text field to new outlines variant of this text field here. We have some code for a form in 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. Without you get a new form a text field looks like this is their outline version. You can think of this outline version is another form of customization if it's outline version looks better with your apps existing graphic design the music. And because this

is an Android component. We've also made sure that it works with existing on Android beaming so if you've already set your Android theme colors to the right shades of orange, then this text field will inherit those colors. And we've shown you a lot of code here and I owe but perhaps looking at code from the back of my 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 apply for all of our platforms Android iOS flutter web for Android. We have code

labs in Java and Scotland 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 were targeting the technologies that developers are already using So now that we've seen some code we seen some examples of getting some in DC things into code. We want to go back a step and say like why use MPC we really believe that using MPC libraries how to 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 it's actually brings a lot of value to your users a little bit more detail. So it's one of their 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 in The Strokes and the radio all the

anti-aliasing and all that sort 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 are components put them in front of people and test them and see what works better and what doesn't have a very good example of this with a text field that we're seeing before medisina had like very heavy outlines and very broad or very prominent Bills 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 little

dizzy stream stream of the whole bunch of different things in it people didn't actually know necessarily their supposed to tap into it and fill out the text. So they were missing save filling out an important part of a form. We went back and redesigned. On that experience and actually republished 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 it's designers. Of course, they're not the sort of one-size-fits-all was many different kinds of designers sewing material. We have visual designers

with 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 pieces that empty seats 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 you open source community. So you could imagine that maybe Google only uses these components in a start a certain way and no one else ever used them a

certain way, but that's okay because we have open source contributors for using all sorts of different ways. And we got all that and pulled it back in so that everyone gets the benefit of that experience the other thing that's really important. 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 two. The third reason why you should use MDC is because it helps you build

feature is faster. Do 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 are components in your code base. In fact, we also don't want you to be tied to material designs 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, but then

there are apis developers can use to build that customization. We want you to express brand who are apis. We have apis for color. Typography shape. We want our components to feel like they belong with in 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 rndc engineer as they collaborate

directly with the designers who are writing material design guidelines. That's why it you can depend on us to make sure that we released new components that evolve with the material design spec. I hope you all have learned a lot today about how to incorporate Michelle design into your existing codebase you seen some new material tools and how they work with MDC you 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.

Cackle comments for the website

Buy this talk

Access to the talk “How to incorporate what's new with Material Design in your code base”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “2018 Google I/O”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “Software development”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
159
app store, apps, development, google play, mobile, soft

Similar talks

Lukas Bergstrom
Product Manager at Google
+ 2 speakers
Ian Lake
Android Software Engineer at Google
+ 2 speakers
Sergey Vasilinets
Software Engineer at Google
+ 2 speakers
Available
In cart
Free
Free
Free
Free
Free
Free
Kathy Kam
TPM Manager at Google
+ 2 speakers
Aurimas Liutikas
Señor Software Engineer at Google
+ 2 speakers
Alan Viverette
Software Engineer at Google
+ 2 speakers
Available
In cart
Free
Free
Free
Free
Free
Free
Ewa Gasperowicz
Developer Programs Engineer at Google
+ 1 speaker
Addy Osmani
Engineering Manager at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “How to incorporate what's new with Material Design in your code base”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
558 conferences
22059 speakers
8245 hours of content