071 AiA Angular Material with Thomas Burleson

00:00 0:50:10
Download MP3

Check out JS Remote Conf and All Remote Confs!


02:35 - Thomas Burleson Introduction

03:01 - Angular Material

05:06 - What makes it “Angular-ish”?

09:47 - Visual Design Goals

14:38 - Mental Model; google.com/design

18:01 - Getting Started with Angular Material

  • Docs

28:17 - Marketing and User Adoption

31:23 - Browser Support

35:27 - Perf Story

37:47 - Material and Responsive Design

41:07 - Angular Material and Angular 2Picks

Screeps (Joe)Lena Reinhard: A Talk About Nothing @ .concat() 2015 (Joe)Meru (Lukas)How to Sharpen Pencils (Ward)Hour of Code with Star Wars (John)Star Wars | Code.org (John)Star Wars: The Force Awakens (John)JS Remote Conf (Chuck)Angular Remote Conf (Chuck)All Remote Confs (Chuck)Clash of Clans (Chuck)Dan Abramov: Live React: Hot Reloading with Time Travel @ react-europe 2015 (Thomas)


WARD: Oh my gosh, there’s a llama. [Laughter] Was that Joe? JOE: That is me. CHUCK: It is Joe. JOE: That’s me right there. WARD: Your dog looks like a llama. JOE: Poor dog [crosstalk]. WARD: You’re going to give him a complex. THOMAS: It took years for his dog. [Laughter][This episode is sponsored by Hired.com. Every week on Hired, they run an auction where over a thousand tech companies in San Francisco and New York and LA get on JavaScript developers providing to put the salary and equity upfront. The average JavaScript developer gets an average of 5-15 introductory offers and an average salary of over $130,000 a year. You just can either accept an offer and go right into interviewing with the company and neither with that any continuing obligations. It's totally free for users, and when you're hired, they'll also give you a $2,000 signing bonus as a "Thank You" for using them. But if you use the Adventures in Angular link, you'll get a $4,000 bonus instead. Finally, if you're not looking for a job but know someone who is, you can refer them to Hired to get a $1,337 bonus if they accept the job. Go sign up at Hired.com/AdventuresinAngular.]**[Ready to master AngularJS? Oasis Digital offers Angular Boot Camp, a three-day, in-person workshop class for individuals or teams. Bring us to your site or send developers to ours classes in St. Louis or San Francisco – AngularBootCamp.com.]**[This episode is sponsored by Digital Ocean. Digital Ocean is the provider I use to host all of my creations. All the shows are hosted there, along with any other projects I come up with. Their user interface is simple and easy to use. Their support is excellent. And their VPSes are backed on solid-state drives and are fast and responsive. Check them out at DigitalOcean.com. If you use the code “Angularadventures” you'll get a $10 credit!]**[This episode is sponsored by Telerik, the makers of Kendo UI. Kendo UI integrates seamlessly with both AngularJS 1.x and 2.0. It provides everything you need to integrate with AngularJS out-of-the-box bindings, component configuration and directives, template directives, form validation, event handlers and much more and yet Kendo UI tooling does not depend on AngularJS. So if you want to use it with Angular or not, that’s totally up to you. You could check it out at KendoUI.com] **CHUCK: Hey everybody and welcome to episode 71 of the Adventures in Angular show. This week on our panel, we have Ward Bell. WARD: Hi there! CHUCK: Joe Eames JOE: Hey everybody. CHUCK: John Papa. JOHN: Hey everyone. CHUCK: Lukas Reubbelke. LUKAS: Holler! CHUCK: I’m Charles Max Wood from devchat.tv. Quick shout-out to JSRemoteConf.com. If you want more Remote Confs next year, go to allremoteconfs.com. I’m putting on a whole bunch next year. This week, we have a special guest and that’s Thomas Burleson. THOMAS: Hey there, how are you? CHUCK: Did I say that right? THOMAS: You did. CHUCK: I need to start asking before the show. THOMAS: Yeah, you didn’t practice and you still said it right. It’s good. CHUCK: Lucky guess. Do you want to introduce yourself? THOMAS: Hi, I’m Thomas Burleson. I’m the team lead for the Angular Material and it’s awesome to be here. Thanks for inviting me. Since Ward has his funky red glasses on, I’m putting mine on. That’s awesome. CHUCK: So Angular Material – that’s a material designed with Angular? THOMAS: Angular Material is a native AngularJS native implementation of material design. A lot of people will say, “So, isn’t that paper elements?” And the answer is no. angular Material is material design. It’s like paper elements but it’s written in Angular so it’s Angular native. When people say which should I use – Polymer and paper elements or should I use Angular? Our answer is that Polymer’s a great framework. It’s really good, paper elements are really good but I tend to think if you want to use Polymer then you're writing components. If you want to write web apps and create web applications then you want to use angular. If you're using angular then it is a no-brainer to use Angular Material. WARD: Can you step back a little bit because I don’t know what a paper element is and I don’t know what a material is so take it back. What problem are we solving here? CHUCK: I got some paper right here. THOMAS: Well if we really step back a whole bunch even before material design, we can take a look at Angular and we can look at all and talk all about its features and what it’s great at, but let’s talk about what it was really missing. What Angular was really missing is a user experience component set, a UI component set. Something that was really easy to use and just fits in naturally with the way Angular apps are developed. I think Brad and Naomi and Igor were thinking about this for a long time. Around the time that material design was getting ready to come out at google.io and Google was going to announce material design, this whole concept of how components should aesthetically look, how they should work, how they should interact, transitions, how they should be themed, how they should be laid out in terms or text sizes and orders and interact with mouse hovers, etc. All these things were laid out in material design. Brad, Igor and Naomi really had some forethought and they said, “Listen, if material design’s coming out, let’s work on an Angular material version of that.” So we’ve started that in May of 2014. WARD: What makes it angular-ish as opposed to just – and I don’t mean just that, I mean – there you go; the goals of material design sounds quite ambitious and helpful so what makes it Angular-ish when you call it Angular Material. THOMAS: Often, I’m so deep in this project, it’s hard for me to step back. But when I think about what makes it angular-ish is that we support – we use and consume a lot of the services that are coming right from angular so we’re very aware under the hood of dollar animate and animate CSS and RAF services. We depend on the dependency injection mechanisms in frameworks. We use the modules from Angular. All these things we tie into and then we expose that in a markup language that is really easy to create UI elements so you can lay it out on a page. I like to tell people, when you think of Angular Material, think of three things. First off, think of UI components; UI components that are really easy to use. For example, you can use a button or you can use an MD button. The difference is we provide a lot of smarts in our components so we have a lot of accessibility features built into every component. We have the ability to recognize other ng directives that are on our components and leverage those in a better way. We then tie in to other things as part of Angular Material, so we tie in to this whole concept and set of features called theming within the Angular Material where you can use color palettes and color intentions to specify how your components should look like under what intention whether it’s a worn or primary components. Then we also have another feature called layouts which is really a flexbox on steroids version of features [inaudible], I should say. Layouts – Lukas just actually wrote an article on that and layouts is just the bomb. Using layouts with our UI components, it just becomes dirt simple to create UI apps. LUKAS: I would just like to point out that in Angular Material, you get awesome [inaudible] right out of the box. So vertical centering is actually not going to make your brain melt but you can actually center things vertically in a sensible manner. So Thomas, I’m giving you a big air hug right now. Thank you. THOMAS: Oh, you’re very nice. You're welcome, thank you. Actually, the thing I love about it is not just the way that it allows you to align elements and specify how HTML containers, dom containers should resize; what I love is the responsive nature of it. So we took this nature of how you want to layout your elements with respect to each other, and how you want to resize your components with respect to each other. And we said, “Let’s add on top of that some built-in marks about media queries, about what size of your display that you currently have available,” and we created a mutation. So for example, let’s say that you had a long button, and you wanted to say, “I want this button to be visible except when I’m in a very small view, like when I’m in a view that’s the size of a phone. I don’t want the about button to be visible.” So what we do is we allow you to say you're going to put on – on that element, you can say ‘button’ and then you can say ‘show’ – just the attribute ‘show’. And then you cannot say – put a space, of course, and then another attribute which is ‘hide-sm’ which means that when it’s in a small view, hide it. This notation – this idea of I’m allowing you to [inaudible] with this aliases for your view sizes – small, medium, large, extra large. Then using ‘greater than’, prefix is [inaudible] gives you a lot of versatility to say ‘hey, resize this, show this, change the alignment on this view size’ and all of a sudden your app becomes – they're extremely easy to become responsive to your devices – devices that have been rendered on. WARD: So clearly we’re going way beyond CSS with this library. It’s not a CSS library at all. THOMAS: No, this library is – if you take a look at it underneath the hood, you’ll see that we have a fair amount of sophisticated CSS; we use SaaS. But I’d say 80% of our code is not CSS; it’s JavaScript and we’re doing things with aria for accessibility; we’re doing things with watching data bindings and observing properties, adjusting things and doing transitions and animations when appropriate and changing your cursors. Then, we tie all of that into this concept of break points and responsiveness and it becomes an incredibly powerful library. WARD: Can you speak a little bit to the design goals of – and this may be more about material than it is about Angular Material but the visual design goals of material. THOMAS: Material design, which is up available online, has a complete specification for how components are supposed to look and act and respond. They also recently released a set of specifications for how applications should adapt so not just how the components should respond to different layouts but when we say adapt, we also mean how the component may change to a different component to adapt to different view sizes. So it’s not just changing its size, it actually may change its type completely. We are now on our path with angular 1 – material 1 that is coming out soon. We are preparing to start adding features for adaptive design but the Angular Material 1 version was really about taking the material design spec, implementing it and making it easy to make your apps look just like the components that are rendered in material design and making it easy to do that. Did that answer your question, Ward? WARD: Oh, very definitely. I’m starting to get a strong sense of the different aspirations and techniques involved here relative to say something that I and many of our listeners might be more familiar with. I think a lot of us are used to grabbing Twitter Bootstrap that’s the most popular library out there, and Chuck [inaudible] at the page and hoping for the best. It sounds like you're both addressing the problem of how my apps are going to look but you're taking a more component, semantic view of the screen and getting more involved with it. I imagine that I’m not – one of the things that gets me with Twitter Bootstrap – I don’t know about you guys – is that I’m doing these endless, nested divs and throwing classes on it and having to figure out where all that mess is and looking at a tree of HTML because I’m really using CSS to control my look but it doesn’t sound like material works that way. JOHN: Bootstrap is mostly CSS so we’ve got JavaScript in there. Maybe we can get from Thomas how this compares but Bootstrap for basic stuff, you just add CSS and you don’t always have nested divs to be fair. On some things, it’s simply just an [inaudible] for your class or something you stick on it, but when you get into navigation menus, it is absolutely horrible and I agree with Ward there, where you could literally have – if you don’t have the right container that has the nav control which has the nav bar which has the hidden nav elements, it’s like an HTML structural nightmare. That’s where I think something that’s more componentized would be more ideal. How does your stuff compare to that? THOMAS: Well I think if you start taking a look at some of the existing Angular Material apps that are coming out, you’ll notice that their markup is pretty shallow. There isn’t a lot of complexity. One of the goals of markup is instead of having lots of nested divs to keep it shallow and make it semantic correct. This was something I think Angular Material does a really great job of doing; you don’t have to have deep nestings and weird wrappers and all these other things. I fact, we do under the hood as we add those wrappers as need so the developer does not have to worry about it. If you would need it want to show a modal, a dialogue and you want to pop it out and you want to have an opaque background, we take care of doing that for you. If you don’t want it opaque, it’s really easy to hide, have a transparent background. But then you want a background around the modal dialogue because if you click off of it, you want the modal to go away potentially. So we have built in to our components this whole idea that it is really easy to show a pop up dialogue and then add your own content to the pop up and then say it supports a mouse click outside of the dialogue area to automatically hide. Same with the side nav for example, we’ll say it’s really easy to take a side nav components. I want it locked open so no matter what, it doesn’t slide off screen, or you can unlock and then it will slide off on a larger view and if you're on a smaller view, you can tell it to slide it on. To me, this is the real beauty of Angular Material. Bootstrap – I really like Bootstrap a lot. After having worked and using Angular Material for a while, I don’t know if I’d ever go back to Bootstrap honestly. Bootstrap has grid system, has CSS and has JavaScript. It was pretty darn good when it came out and it’s still not bad. Of course, I’m biased; I work with a set of great developers on Angular Material but honestly, I’ve worked with DeftJS. There’s some other frameworks out there that I’ve worked with and Angular Material is just – its intent is to make it super easy to use these components and to lay them out. WARD: So I’m beginning to get a feel that we’re – I’ve made a category mistake in comparing it with a CSS library such as Bootstrap. Maybe it’s more akin to the kinds of HTML control suites that we used to buy for server side webpage development. Is that more of what my mental model should be like, like combine a control [inaudible]? THOMAS: Yes. In fact, if you – have you guys ever used or heard about ColdFusion? ColdFusion was an example of a server side rendering engine that had HTML light markup. ColdFusion tags hit a lot of the complexity of actually how they instantiated the dom element and they rendered it. Angular Material does the same thing but the great thing about Angular Material is that it actually ties into this whole idea of view models within scopes, and the data and the ties in the controllers. And it allows you to add your own directives on our components so you can still use your own directives and your own markup within our own components. It’s super easy. LUKAS: If I can jump in here just really quick is I think if we’re going to talk about Angular Material, you have to talk about material design and actually what that is. I started to notice this – I had a sense of working with Angular Material but it’s how they actually read the intro spec, it didn’t really become apparent to me and I think this is what Angular Material brings to the table that something like Bootstrap is not is that everything is there for context. For instance, all of the material elements are layered in a way to impart hierarchy visually as well as all of the motions are designed to have a meaning. For instance, the modals come up from where you actually clicked that button, or if you have a button and you clicked on that button, then you get a ripple on that button [crosstalk] and you get that for free. Having that implied context that’s baked in to imply intention that works seamlessly across devices is really, really powerful and to me; that is the soul of Angular Material which is material design as you get this language to express context and interaction in a hierarchy absolutely free and a lot of thought went into that. Then you have Angular Material which is just this phenomenal execution of this language that’s been defined by Google. You have something really powerful but really easy to use. Again, if you want to do a three [inaudible] layout, it’s just a few divs – flex 30, flex 30, flex 40 and you're done and it’s perfect. JOHN: I think it feels to me like it fits somewhere between, as Ward said, the Bootstrap or where it’s heavily CSS with some JavaScript interactions and not quite a UI control suite like a Wijmo or a KendoUI but it’s somewhere in between those two. The reason I like it so much is this interactions you're talking about Lukas, it feels better. I think the UX is much smoother and cleaner and a little more unique quite frankly. It’s not like a lot of the UX frameworks that we’ve seen out there in the past; it actually takes more things into mind so that the user knows where they're clicking. They can feel it and you’ve got better easings to a lot of the animations, too. So for me, I really enjoy using it as a developer. [Crosstalk] WARD: I don’t want to as Thomas this; I want Thomas to listen to this. I want to ask Lukas and John what was it like to start from zero to, say, I want to try and use Angular Material in a project. THOMAS: Before you ask that Ward, can I jump in just for a minute? Because I don’t think I’ve done justice to the material design team itself. Often, I talked about Angular Material but really, if you want the essence of what Angular Material is, the best way to know that is to go to the material design docs. Go to www.google.com/design and take a look at their little menu there and you’ll see – take a look at all their components and their layouts and their styles and their animations and their patterns. All these things are very clearly and elegantly defined and specified. So our job as an angular development team was so much easier from one perspective because we didn’t have to develop these specs; they were already there. We just had to implement them as an angular native version. I think that was a huge win. WARD: Okay. Now we know what you think Thomas as if we really cared. [Laughter] That’s not about my question! Okay. THOMAS: Pay attention to me! WARD: Yeah, really. You're just a guest here. You're just a foil for this. THOMAS: I love you, Ward. You're awesome. WARD: No really, I appreciate that but I still want to know the answer. John, Lukas, how was it like when you opened the box? LUKAS: John first. JOHN: Alright. So I’ve tried twice with material – Angular Material specifically. The first time I tried is very, very early on so my experience back then is different than this today so I’ll leave that off because I got in early there. But looking at it now, the stuff I’ve done with Angular Material, when I jumped in there are things that still have a little bit of that hierarchy involved with them but I don’t know how you’d escape them quite frankly, things like the side nav. There are elements that you have to create like you’ve got to create your MD side nav, your toolbar and your content, and then you have to put buttons inside of those only because you have to design in which how you wanted it to feel. Some of that you can’t escape; I don’t want to give the impression that it’s simply just bham, I throw on a Thomas Burleson directive and everything’s just happy and it knows exactly what I want. The other side is I feel like getting started with this, the friction is pretty low. I wouldn’t say it’s any larger or smaller than what was for me to get into Bootstrap. I’m no CSS expert but I feel like the barriers to entering Angular Material are pretty low. LUKAS: And I can piggyback on that. My intro to Angular Material, I was in an internal hackathon with Scott Moss, and the goal for the hackathon was for the next two days, we’re going to take these comps and we’re going to string them together, something like – just going to click through the comps and that’s success. So Scott and I were like ‘why don’t we just actually just build this thing out’? They're like, ‘yeah, okay if you can do that’ with an eye roll. So I set out to learning Angular Material, at the same time being [inaudible] for opening my big mouth and promising to produce a working prototype. I found that the learning curve was almost non-existent that in two days Scott and I built this fully working prototype that tested really, really well with the users and now it is in production. That first intro of, “Oh, I see this is how layout works. Really simple; put the flex layout, this is how we get a button on the page, this is how we get this on the page,” and it’s really, really quite easy for me to wrap my mind around. I thought it just was a really natural extension for angular. I’ve since used it on a bunch of projects and I’ve spent some time teaching angular 2 designer types coming from jQuery. It’s hard to talk about high design when you're working on a project that just doesn’t look very good so I’ve been using Angular Material to convey these concepts. The traction that I’ve got with the JavaScript, jQuery, CSS folks has been really phenomenal because it’s very easy for them to pick up and reason about, at the same time is that the end product just looks really fantastic which they appreciate. JOHN: If I could say there’s one place that I could use some help – so I’d like to give a pros and the cons. In the Getting Started, there’s a lot of stuff in the Getting Started there. They’ve got GitHub repos and some simple examples and CodePens but just having something that is dead simple as [inaudible], it seems like all the starters stuff I’ve looked as is a little too much so the people I’ve thrown in on my team to say, “Hey, check out Angular Material,” they all came back and there was a lot to absorb in the Getting Started section so I think that’s one place in the docs that could definitely use a little bit of minimal viable product type attention. THOMAS: The good news is Aaron Frost and I are actually working together to create a whole video courseware for [inaudible] for Angular Material. And I know Lukas has also done a video courseware for Angular Material which will be a great learning resource for people. There’s also online docs. Everyone can go to material.angularjs.org and you’ll see our online docs. Our docs are actually implemented with our Angular Material components. So we eat our own dog food, we use our own CSS, we use our own animations – everything there is done with Angular Material. And yes, we will still continue to improve upon not only the docs because there’s parts that are a little confusing. We’re still – we haven’t quite released 1.0 yet; soon we will. John, you’re right; there’s a couple of starter projects but even those are a little bit challenging if you just want some gentle handle in the site, just give me [inaudible] and I can give a high-level version of how to do that because John, you hit on another good point. One of the best ways to think about your Angular Material apps is think about your containers first. What are the major containers of your app; do you have a toolbar area? Is it fixed at the top? Do you have a footer area? Do you have a side nav? Do you have content? Break it up into containers and then think about what elements you want in those containers and then it becomes pretty easy. JOHN: That’s one of the things I really like, Thomas, is that you’ve got – for example, I don’t like the Getting Started but I do love the demos. When I want to use something, I do start with the containers so I go look at the toolbar, the side bar, the nav and your demos and I just poke at the source code which is kind of what the Bootstrap team did with their docs, too. So again, it’s not any better or worse than Bootstrap but I do like that you used your own stuff. One place I think you guys did a great job is in your docs here – I may compare what Bootstrap it was I don’t like – in their docs, when they show a grid or a menu nav bar sometimes you say, “Wow, I really like what they did here in the docs,” and you show the source. It shows you the actual source for their actual docs is not even using all of their exact styles which bugged me because when I grab this, they're using styles that they wrote on their own, too, which aren’t even available on the library as opposed to just viewing source of their demos allows you to see that. What I like is maybe it’s none even your demo that I like; I like the side bar on the left-hand side. So if I do this source and that, I’m actually being able to take advantage of the real Angular Material. Maybe I’m picking too hard at it but I really like the fact that your docs are written with the same advantage the docs [inaudible] it. THOMAS: Yeah, the docs were an interesting evolution because we wanted to have docs and then all of a sudden, we realized we needed to have docs for each major release and so we needed a way for users to be able to switch between versions, much like angular docs do so we finally incorporated that feature in. Then we needed things like – ne of the things I love is that our docs, when you see one of our demos, you can say launch and CodePen and then you could use that as a customization point. Start exploring it, debug it, do whatever you want with that particular demo and it just launches as is right in. We also have on CodePen, we have an Angular Material community. Soon, we’ll have some search features within our docs. The side bar, John, it’s good but it could be better. It could be a little less confusing because we have this whole idea of – we talked about layouts and then we talked about theming and then we talked about components or demos and then we talked about our services and then our components. It may be a little too much; we may want to try to partition it a little bit better. Finally, you hit on one other point; we’ve been talking about this whole concept of user journeys at Google which is what of New Year’s? What kind of journey do they take when they're trying to learn Angular Material? What are their stumbling points? We have several areas that we can improve upon with our user journeys to make Angular Material easier to learn. I should say this is only for version 1; version 2, we already started the prototypes for Angular Material version 2 written in angular 2 and that’s in the angular 2 repository under a subdirectory for material. You guys can check that out if you wand and huge shout-out to Jeremy Elbourn for really working with that. He is our technical lead and he’s going to be leading the whole effort for angular 2 material components. In 2016, we’re going to be using not only a time picker but a data table component with sortable columns and filtering and a whole bunch of other things. We have a lot more components coming and a lot of power that we’re just going to keep adding. In 2016, we’re totally re – we’re actually not rewriting; we’ve rewritten the layout engine so now it will be JavaScript only. There will not be any more CSS so people don’t have to worry about where it’s not working because the CSS specificity isn’t working correctly; now, [inaudible] we’re just supplying the styles directly to the dom element itself and it works really fast and it’s just slick. And we’ve added smarts so now you can do layouts for – you can define your own break points for example in 2016. You can do those and we’ll have smarts for detecting orientation which we don’t support right now; detecting if you're on a phone or a tablet or a desktop then adjusting your layouts accordingly for those. JOHN: You know Thomas, something that’s been – switching gears a little bit – kind of been on my mind lately, too, I’m wondering this as much as I like Angular Material, and I do really like it obviously so I’m talking about a lot here and I enjoy using it. Most of the people I interact with out there – social media, conferences, at work, consulting – all these places, they're all using Bootstrap, pretty much everybody ubiquitously. I find some people have heard of our Angular Material and some have even [inaudible] than have played with it but I don’t find that that’s a huge number of people. Do you feel like there’s a marketing opportunity for what you guys are doing or is it – are people learning about this by just turning the other cheek? What’s going on there? Because it feels to me like this thing is awesome; why aren’t more people talking about it? THOMAS: I think we’re in the same stages with Angular Material that we saw in the beginning as with angular. The adoptions rate was relatively low; it was steady but it wasn’t sky rocketing up exponentially which is just a nice, steady curve. After about a year or two years, it just seem to sky rocket. It went up, just totally went off the shoot, remember? And you can see that on some of the adoption charts. JOHN: I think that’s when Ward started tweeting about it. [Laughter] THOMAS: That’s why I’m so excited that I’m talking about material because maybe he’ll help us sky rocket material and Angular Material. But I think right now we’re in the early stages and people also – I think John have been worried about ‘should I really invest in this? It’s not even on 1.0 yet’ and if it’s not on 1.0, it’s in alpha, it is in beta; how much pain is that going to be? When it was in version 5 or 0.5, you had to really want to use it. Our current community members were just amazing in getting involved by helping us making this a better framework. They suffered though some of that – sometimes, through summary iterations but now as we close to 1.0, what we want to be able to say is the API itself is solid. It’s going to be locked down and then if you're implementing your own apps with this API, if we make changes to it, we’ll deprecate the old API for a while. We’ll help you transition. We’re going to be working on user journeys; we’re going to be talking about, for example, a great [inaudible]. If you have Bootstrap, if you have your app with Bootstrap and your own custom JavaScript, or let’s say Bootstrap in angular, let’s make it even easier, how do you migrate? That can be a bit of a challenge if you're using some of the Bootstrap stuff for dialogues. If you're just using CSS, I think there’s a relatively understandable migration path. If you’re using some of the JavaScript stuff or the grid for example, you may actually need to just step back and say what are my objectives in terms of layout? Because the Bootstrap grid systems are not – they're not compatible with the layout system, the flexbox system that we have within Angular Material but I think our layout system is just the bomb. It was actually initially created by Adam Bradley from the Ionic team. In fact, I think Adam is probably using our version of the layout engine over an Ionic; I wouldn’t be surprised. JOE: So what are you using flex system? What browsers do you guys support with it? THOMAS: If you go to caniuse.com and just do slash or search for the [inaudible] flex, you're going to see [inaudible] on a line of all the – of the green rectangles that indicate the browsers that are active. We support that main [inaudible] on line minus one. We’re supporting Chrome, 48, Firefox – I don’t have [inaudible] over here but what we say is n-1. JOE: I do which is pretty much everybody except for IE. Even EI 11 doesn’t seem fully supportive. THOMAS: No, IE 11 has been a problem child for us to be honest. It’s been very difficult to, especially with the layout, to try and to figure out the work-arounds for IE 11 that don’t hurt everyone else. A good example, we initially started using our layout system with CSS only, and it was attributes, it was – on your dom element, you might have, say, button or div and then you might say flex = 50. In other words, you're saying this div component should flex to be 50% of the space available. Well, IE becomes a performance dog; it just dies because of attributes selectors. JOHN: Is that the technical term for it? THOMAS: Yeah, exactly. I invented that. [Laughter] LUKAS: The sound effect – Blurah! THOMAS: Blurah! CHUCK: Yeah, we need to put that into a sound when they call it. [Laughter] THOMAS: If you put that on like a – what’s that, Sweet Georgia Brown repeat, I’ll start laughing. Anyway, so we actually then had to figure out ‘okay, what can we do?’ Well, we can’t use layout attributes because IE – its performance just hits rock bottom, gets really slow so then we have to go to class names; then we had to transform live the attribute selectors, the class names. So these are the types of things I’m talking about that we had to try to address just for IE and we’re still doing that but IE will – it’s an evergreen browser and it will get better. JOE: I guess that’s the proper noun is that for those – you can’t even say today that the most modern browsers, if you're sporting the most modern IE, Opera Chrome, Safari, Firefox, that you can use material in full confidence and it’s not something that you guys I’d fall for here but it’s the evolution of where IE –. From what I understand there [inaudible] can I use it’s because IE 10 and 11 both support the old flexbox syntax and specs, not the newer version of it. THOMAS: And some of their support is just simply buggy, related to if you have the flexbox and the flex direction in column and ask to do what column heights. Some of these things we’re actually putting on our layout engine smarts to get work around that. [Crosstalk] JOHN: So what happens if I use it today, Thomas, to build a public website of some sort and I obviously going to have somebody using IE somewhere out there. What would you recommend people to do if they're using the most serial now and [inaudible] if they have to sport some people who are using IE 11 or 10? THOMAS: We already support it in some aspects. What we’re trying to do is putting some tips out, tips and tricks for – especially for those developers who are running into problems where the layout isn’t working as they expect, and we’re trying to let them understand, “Hey, if it’s not doing, flowing in the direction you think it should or resizing the way it should, check these following things.” If you're working on IE, look at these considerations. Check these other resources. The reason we do that is A, we’re just now releasing one and B, it’s amazing how the different variations that developers come up with and we can’t seem to solve a single one. We get better on it every reiteration. So I think developers shouldn’t stay away from Angular material because of IE, I just think they should go into the approach that some of the layout aspects, they’ll have to be careful and they need to test. And one of the things I say to a lot of our community member when they have layout problems is, “Look, if you did it with flexbox by hand, one of the work-arounds you have to work with that.” And maybe then they have to take some of those tweaks, apply that with our own layout, or provide feedback to us and we’ll incorporate that in. WARD: I want to flip this on a different question. It seems like not too long ago, people were saying, “Oh, don’t do layout manipulation or styling and JavaScript; it should be done in CSS because then it could be off-loaded to the graphics chip and yada, yada.” Now I’m hearing, “Maybe that was misleading or no longer true.” So what’s the perf story there in the opportunity to get off the UI thread? I think it’s real consideration here is everybody’s trying to own the one thread that’s driving a browser. What does it look like given that you guys made such a bet on JavaScript? THOMAS: JavaScript engine is coming in 2016. We haven’t even released it yet, right? So right now, we’re generating a lot of CSS and then our JavaScript portion in the 1.0 engine is just setting a class name so it’s still using CSS and it’s still using [inaudible] and everything else. The problem with that is it generates a large amount, like 200K of CSS just for the layout aspects. It’s very rigid in its flexibility; it doesn’t have a lot of flexibility in the attributes it understands. What I mean by that Ward is for example, right now if you want to do – let’s say you want to use the flex portion; in the layout API you want to say flex, so flex=50. Well, we support increments of five and that’s because we have to regenerate CSS. We don’t support CSS of anything you want and we support increments of five, of percentages but we don’t support pixel values. And we don’t support, in some areas, interpolated values. So if you want to have your controllers [inaudible] at least adjust some of these settings. Some of our API doesn’t do that. Well, the gen two version of the layout engine will support all of that. Any pixel value you want, any increment you want – it just works and it works really well. We’re trying to be focused on what kind of rendering impacts it has and reflow impacts it will have and just bash those up. More than that, I am not prepared to talk about because we’re still researching it. WARD: But so far, you're – the smell test is that you're going to get the perf out of it that we need in the modern browsers. THOMAS: Absolutely. If we don’t, we won’t be releasing it. JOHN: Let me flip it again, too. I’m looking at something that’s pretty common these days – responsive design. I noticed for example when your little grid system play-outs is here is let’s show three columns side by side but the third column is set not just a flex but to hide small. If I shrink the whole thing down, I’m only getting two of the columns visible. Where or how do you guys deal with the whole – like in [inaudible], they’ve got small, extra small, medium, large, triple X, quadruple X. they have a way to deal with responsiveness. I was [inaudible], too. What’s the right recommendation how to use material as responsive and how does it work? THOMAS: We have in our doc style up on material.angualrjs.org, we actually have – we publish what our breaks point are, what pixel values they are and what changes. We supporter very small, small, greater than extras small, greater than small, greater than medium. We support the greater ones and then off so medium, large and extra large. We define what pixel values they are; those actually come right out of the material spec and those are that ones that are built in to the layout engine. As you want to use your own – if you want to it very often then we’ll provide an API in 2016 to do that. Did I answer your question, John? JOHN: Yeah, it does and I just found one of the pages where you talk about this, like the greater than small and small and so on and they show the different sizes. And if I want custom ones, I can assume I can go my own road the same way I couldn’t Bootstrap? THOMAS: You can. It’s a bit of a challenge right now in Angular 1 because you're going to have to generate CSS and CSS media queries to support those break points and those are noon-trivial; those are a bit of a challenge. It’s almost better is you want to use custom break points to wait until the 2016 version. JOHN: For example, I can see the smalls you have is layout small – small, smallest. And it says here for layout on devices that are less than 600 pixels wide like for phones. But if, let’s say, my company decides that we feel that 540 or 480 is the right break point for that, it will then be up to us to either override our cascade or your styles or create our own layout size, correct? THOMAS: Right. JOHN: Cool. And I think that’s reasonable; that’s what we do with things like Bootstrap anyway. Gosh, what was that other one that was really popular, too? CHUCK: ZURB? JOHN: ZURB, yes. The one that sounds like a villain in Toy Story. CHUCK: Yup. I have a question related to this though. We’re talking about media queries and we’re talking about Siestas versus implementing JavaScript; are there performance implications between the two? THOMAS: So Ward was just talking about this in terms of whether it would run in the UI timeline or would run in the GPU, and what’s the performance impact of it? What’s the JavaScript only versus CSS? So there’s a trade-off because if you want to have a lot of – the more flexibility you want if you're doing CSS then the larger your footprint and CSS is going to be especially with all these variations. It just becomes almost a giant mess. So if you go to a JavaScript only version, your CSS is gone, your engine becomes super light and [inaudible] are uptight. We are still analyzing the performance issues related to doing that. I’m sure we’ll be tweaking it as we go. CHUCK: Alright. Any other questions before we get to picks? JOHN: Let’s ask the heavy question here, and I’m sure there’s a great answer for it. So, with Angular 2 coming out, how far after or at the same time do you feel there’ll me an Angular Material ready to use with that? THOMAS: Even if I knew that I answer which I may [chuckles], I don’t think Naomi or Brad would be happy with me putting any sort of timeline but –. [Crosstalk] JOHN: I’m sure they’d be totally cool with it. CHUCK: We won’t tell them. [Crosstalk] It’s just us chickens. THOMAS: Ugh, chickens. You guys are funny. [Laughter] considering the fact that we already have prototypes of many of the components already implemented in Angular 2, we have to tweak those and adjust them. We’re looking at really rewriting the theming engine as well as releasing a new layout engine. So we take in all the journey that we’ve had over the last 18 months; we’re talking those lessons learned, the best practices and the things that we love about Angular Material 1 and we’re applying them and making them even better in Angular Material 2 version for angular 2. WARD: Let me help you there Thomas. I heard Brad say January. [Laughter] THOMAS: No kidding. You're very funny. If you set some other date, I might have said ‘really?’ But I know – I feel confident that we will have components that are real components for developers to play with angular 2 that are ringing in angular 2 with TypeScript by [inaudible]. CHUCK: That sounds so nice. JOHN: Sweet. THOMAS: And before summer, we’ll actually have a story about how you can use Angular Material 1 within angular 2 apps, so we’ll also address that but I know that those who are using TypeScript with angular 2 are going to want TypeScript components in Angular Material. And I got to admit, I love the syntax. The way – because one of the challenges we had to deal with angular 2 was do we use events? When you're interacting with a component, how do we let you know that something’s changed? Do we fire an expression? Do we dispatch an event? Do we require two-way data binding? These things are so much easier to address with the syntax in angular 2 so it’s going to be exciting times. CHUCK: Alright. Let’s go ahead and get to some picks. I know some people have to run. Joe, do you want to start us off with picks? JOE: Sure. I would be happy to so I want to pick a really interesting website I discovered a couple of weeks ago. it’s called screeps.com. It’s kind of a real-time strategy but massively multiplayer game, but you only play it by coding JavaScript. So if you want to be involved with it at all, if you want to participate, you have to write JavaScript that controls what everybody – all of your little minions do. So it’s a cool way to learn JavaScript and a fun way to do some programming. Cool little game and it’s quite in depth. It has a huge API that’s really well-documented. I thought it was really cool so I pick that. I’m also going to pick a talk by a woman and I’m not really sure exactly how to pronounce her name but I think it’s Lena Reinhard and the talk is called To Talk About Nothing. It’s basically a talk about putting out a lot of things that people just don’t realize about the industry, about how things are done and inclusivity in our industry. It’s really interesting and I thought it was very well done. Those are my picks. THOMAS: She won an award, didn’t she, for one of the best talks of the year? JOE: She was put up for an award for the best talks of the year and I will say that she needed to work a little bit on her presentation skill, just how she was presenting but the content was just absolutely amazing. When I looked at the awards, it didn’t look like she actually won from whoever was doing those awards but the content was just absolutely amazing. I thought it was a great – very well worth watching. CHUCK: Alright. Lukas, what are your picks? LUKAS: My pick this week is a documentary I’ve watched a couple of days ago called Meru. It’s about a couple of climbers who – I didn’t even know what [inaudible] it was but it was actually a peak, I believe, in India that’s very hard. It’s just a phenomenal story of how these mountain climbers made it to the top. I was just like, “Oh, I just watched the first ten minutes and see what I think and it was just riveting, start to finish. One of the commentators of the movie was the guy who wrote Into Thin Air which is another pretty phenomenal book. WARD: Yeah, John Krakauer. It’s a good book. LUKAS: And so Meru is kind of an extension to that spirit of adventure and indomitable spirit, etc. and it was just riveting. I would tell anybody to check it out. The [inaudible] fee is over the top. It was done by National Geographic, very well done and just an awesome story. CHUCK: Alright. Ward, what are your picks? WARD: Well I’m going to pick an eight-minute short called How To Sharpen Pencils. I can’t – it wants some words and I can’t for the life of me believe that guy is so serious about how to sharpen a number 2 pencil. Basically, you’ve got this gigantic kit with razor blades and you look at it and you swear this is going to be a sand up. I think he’s serious. Anyway, it’s worth a look just to see how it’s [inaudible] and see a guy go nuts about sharpening pencils. JOHN: Alright, so my picks are [inaudible] and both related. One is the Hour of Code; it’s on code.org and it’s some links that we’re going to include in here. They’ve got a great way where kids around the world learn how to code using JavaScript and they’re going to launch a Star Wars theme. I recently taught at a couple of local schools and showed them this and all the classes just loved it, grade 1 all the way up to grade 8 so it’s pretty wicked cool. It looks like every year, they do this round the world and getting literally, hundreds and millions of kids to do it so it was pretty cool. The second phase is related. It’s the Star Wars: The Force Awakens movie which I’m going to see three times in the open weekend. WARD: Oh, you are so sick. JOHN: And I want to see it over and over again because Ward can’t stand Star Wars. [Chuckles] I’m really excited to go see this movie. It looks pretty cool and I’m not just saying that because I’m a Star Wars freak but saying it to rub it into Ward. CHUCK: Ward, just meet your Twitter stream for a week. WARD: [Chuckles] So ashamed of you, John. JOHN: I bought you in [inaudible]. CHUCK: There you go. JOE: Are you going to take a blow up, Ward to Star Wars? CHUCK: Oh there you go. WARD: No, no, no. [Inaudible] in your house. [Laughter] CHUCK: Dressed in bell bottoms and a spangled shirt. Alright, I’ve got a couple of picks here. The first one is I’m just letting folks know, I decided to do twelve conferences next year. I’m going to put on a conference every month next year and in fact, I had so many people complaining when I got rid of the podcasting one in favor of the React conference that I’m probably going to do 13. Anyway, you can buy season passes at allremoteconfs.com and that’s considerably cheaper that buying the tickets any other way. The other thing is if you're not interested in that and you just want JavaScript stuff then I’m doing, as I said before, JS Remote Conf in January. The call for proposals is probably going to be over when this comes out as will the early bird pricing but you can still get tickets. John Papa is speaking; I’m talking to several other people about speaking so go check that out. I’m doing some other conferences that you’ll probably be interested later in the year. I’m doing React. If you're interested in that, I’m also doing Git conference, NoSQL Conference. If you're a new programmer, I’m putting one together where people talk about careers and leveling up and things like that for newbies and it’ll be a newbie conference so go check all that out on allremoteconfs.com. The other thing I’m going to pick is I’ve been playing a game a friend of mine introduced me to and that is Clash of Clans. I’ve been playing it on my iPhone and I think it’s fun. So you build an army and you go fight other stuff and you build your village up and yeah, anyway. Fun game. Those are my picks. Thomas, what are your picks? THOMAS: I only have one; I’ll paste it here. This is a talk that I saw by Dan Abramov on Live Reloading – Hot Reloading and using Redux. I got to admit, I was really, really impressed not only with the speaker and his knowledge but the way he presented it. It made me really want to start looking at using Redux within AngularJS apps and start using at RxJS or ReactJS. These are the things that I think are on the radar for developers that they really want to keep their skills hot and current. This is the next wave that people are going to really need to make sure they stay on top of. So that’s my one pick. CHUCK: Alright. If people want to find out more about you, what you're working on or Angular Material or any of the rest of that, where do they go? THOMAS: You can go to the Google groups and go to the Material group. You can come to – there’s the Angular Material community at CodePen; you can go to Get Involved if you want at the GitHub.com/angular/material and check out not only the source but you can get involved and look at the issues that we’re working on or the features we’re trying to implement, and you can help drive new features is you want. You can hit me up on Hangout if you want or Twitter. I’m also on Google+ so that’s a great spot to find me and to stay abreast of what’s going on, what the Angular Material and some of its new directions. CHUCK: Alright. Well thanks again for coming, Thomas. This has been a lot of fun. It’s been really interesting to dig into. Some of these things that are coming up and things we can use now to make our websites look, feel and function better. THOMAS: Thank you for having me. It was a pleasure. CHUCK: Alright, we’ll go ahead and wrap this up and we’ll catch you all next week.[Hosting and bandwidth provided by The Blue Box Group. Check them out at bluebox.net]**[Bandwidth for this segment is provided by Cache Fly, the world’s fastest CDN. Deliver your content fast with Cache Fly. Visit cachefly.com to learn more.]**[Do you wanna have conversations with the Adventures in Angular crew and their guests? Do you want to support the show? Now you can. Go to adventuresinangular.com/forum and sign up today!]

Sign up for the Newsletter

Join our newsletter and get updates in your inbox. We won’t spam you and we respect your privacy.