Monica is an emojineer at Google. She works on Polymer, web components and Chrome, and has probably at least once broken the Internet for you. She is unreasonably excited about emoji, wary of web fonts, concerned about web performance and will become your best friend if you bring her cheese. On second thought, she may be a mouse.View the profile
About the talk
Web Components are encapsulated, re-usable elements using just the web platform. But these APIs don't say much about how to turn components into fast and modern apps. Learn how Polymer has been honing methods for building apps out of Web Components by melding the best ideas from the community with new platform APIs. You'll leave this talk understanding how using a few simple patterns like Redux to wire components together enables building highly scalable apps on the web like never before.
01:11 Progressive web apps
09:25 The view
21:12 Connecting elements
26:25 What’s in the kit?
work on the web and this year. It's a really exciting year for for a few days because they're on a 4 out of 6 out of 6 and 1/2 browser Chrome and Safari and Firefox and Edge and Opera and Samsung internet work on 11 because they degrade gracefully but you know, I'm not everything work tonight 11, so we're not going to hold that again. They also work in app store is Microsoft recently announced that along with Native Windows apps you can find pwa is in the store and then you can stall them if they have again this like native Eastfield to
them. They are on desktops growing out with that. You can install a pwa just like you do you want Android on your native desktop machine and you can have the little shortcut and you can double-click the shortcut and it opens and it seems like an installed app, even though it's not it's a web app. It's been all along. Bring up the weather for everywhere. So if you're going to feel something soon, you might think works everywhere something especially a new project on the web.
It already feels like this. Without porcelain the middle is you and all the stuff we're falling out on you is all of the things you have to implement you have to have a framer to render elements. You had to have to be accessible. It has to work offline and has to be shiny and oh my God, there's so many things. And it feels awful it kind of feels you. Don't not great. And that's because if you think about this graph of effort versus results, you have to do a lot of effort to get to like a point where you can even call it an app for crushing because it sucks
to work hard and not really accomplish a lot and where we want you to be on this grass isn't here. It's all the way at the beginning we want you to do very little effort and awesome results off the bat because then you're the hard stuff you're working on is your heart stuff is not just like boring boilerplate. You have to implement just to call it a nap. And the way you can get this done as by using a kit, you have to reuse, you know, somebody else's components in elements and just so you know regular kit everybody on my team has the same as Gilespie lazy. Kevin says
hard things are hard and I started saying always be because that's how things really work using components is the only way to do things Caleb and I mean this like in like the real world table you have different components you put together you have its level. Do you have to be to like a symbol that plank of wood you don't like go to the mine mine some more to make tables you pick somebody else's components and you put them together and that's how we can get a table done in like an hour or so like a year-and-a-half and that's optimistic cuz I don't know
if you've been saying things like games where you have to mine or it takes forever. In and out. If you do this exact same thing to pick other people's elements you pick a router you picked localforage if you want like a think local storage. You don't rewrite each of these modules and libraries every time you need them in your application. That's banana pants on the fuel. Are you have the same thing you use web components you encapsulate that you can pick and choose our they have their Styles inside and get to use them everywhere and everywhere and it's super easy and once upon as if
you saw them earlier, they're what their first class citizens of the web. Now every used everywhere you can use it but you can use somebody's what component that's really awesome and Powerful. These are great news everyone. I'm very happy to tell you we have this kit VW starter kit. It's a thing that the following my team has been working on and he can find it there and it's basically a template that lets you build pwa is it has all of these components we chosen for you and then you can mix and match them to make your pwa today. We shipped versus
your appointment actually point to this morning because we want you to give us feedback before we go 1.0 when we can't like it take back any of the teachers. What would be you know, how would we use VW starter kit to build a PW way with words for the entire time. I built a VW Adventure the awesome one player game to Philippi WV ways that are fictitious and its inventory stocked and hundreds of hours of breath of the wild. So Every game has a mess. We are the little lady with a wrench because I built a game. I have the rent.
That's what uses the lawn every good game has levels. Our first level is the tutorial. It's where you figure out how to get by in the game. If we get her arm. Are we figure out what kind of thick baddies we're going to get some building blocks you figure out what are the basics of the game? It's like the easy puzzles just to get introduced to the game. Can you figure out the slightly harder games and patterns that you need of the game? So I think it's like in Zelda you need to
you know, what shop will the grass to get roofies and stuff like that. He realized that not all Toys R Us puzzles are the same. So you have to figure out like extra combo moves to get through like the super hard levels and finally the boss level is where we actually have to ship and deploy this and give it to our users and if everything is going well at the Bahamas and let's play Adventures. Everybody starts with armor shield in your weapon and shield and weapon of this game is the pwa started yet. We start with it and then we figure out how to use it.
So are you ready for the first level? That's right. 2 2 2 2 2 2 2. We have to get started in seconds. Nobody likes tutorial did last forever in the games and you can't skip them and you have to go through them. You're like, oh my God. I already know how to run split me run to slim your mind. So the goal if you don't start a kitten to let you get started in seconds without having to mess around for too long. So if you go to the wiki, the first thing that you see is the things that we we gives you and then how to
get set up and I want to do that you can go into the So the way you can set up is you clone the song the repo you run into an install to get its dependencies you run and can start to make it going to see it locally if that worked out. Well, you can want to see how we do testing and to see that it's actually passing ALEKS test how many can run and Cameron Village and I can't run with serve so that you can build and build it for production and then actually test this production felt so when you actually start application, this is what it looks like. It's a very small application that has
three pages. One of them is a static sound foot and the other two are small examples that use a bunch of like data and State Management so that you can get inspired if your application actually means though. One of these examples is a full-blown shopping cart where you can buy my favorite cheeses from San Francisco. And of course, it has a responsive layout because all apps need to work on mobile and on desktop and a template that wouldn't have that wouldn't make any sense. So that's already built into the application. Cool
that this What's next next are the building blocks? Fun fact about noises Jake article try to use noises from a video game ones and you're not allowed to because you're not licensed to use them. So he had to make I think Street Fighter noises, but now it's so I'll sounds get you everywhere that we were testing isn't the pwa that we want. Everybody's going to have that Laura has not the app you're trying to fill it. So we have to be is figuring out the building blocks of its application so that we can add views and are
elements not the ones that the template comes with and this is her first real level. Do you think about of you? It looks like this it has components in elements and all the stuff in it and all of these components in elements are separated because we believe they're good for app to be lightweight and fast and expressive. They have to be like space because if one element is super heavy that entire page is super heavy and doesn't matter what your optimizing are. All of your job is good bandwidth is going to that element we have to be fast because if your Elementary face faster going to take
forever to render and nobody's going to want to hang out on your page and they have to be expressive whatever you use to build these elements has to let you build any of you in any element that you want because otherwise is not going to be really fun to use his abilities element. We picked a new face class called lit elephant and this is a very small your face cloths that lets you do basically everything and it's super small and fast and it takes advantage of all of the new feature is that have it arrived in browser has recently it lives over there. If you can also npm install it from at
these are things that the element cares to render and cares about these are just like, you know a value a click something like that. And whatever any of these properties changes, the render function is called and then this Runner function is the template that your element looks like. So do things might happen. When you look at this go to first of all, you're like render, I've seen it and react what is going on and truth. So reactive model that you've seen and react and you're familiar with us. We don't have like some sort of like Library. We are Jake when you do this and this model is really
conditionally render different things before they can also have why didn't that have like in line event list and all of this just work? If you really important thing here, is that all of these things only update when there is there a little bit update? So with my message updates over here only that dude gets rear-ended. Everything else stays the same around it because that's the whole power of lit HTML magical and when you make it into an element, it looks like this you have imported from a module we done with this is that yes modulus turn on you what class. It extends the base element.
We register it at the bottom we Define with a TAG Heuer properties in friends are in Abington there. This is the whole base of liniment and it works really nicely. You can also of course have encapsulated styles is that what are the awesome properties of what components does you can tan capsule ecss inside of them and they do this with by letting you explore the style from Psy importing it and then just using the squiggles instead of your element and this is native Shadow. This isn't CSS, JS or weird things. I need Transformations. This is what shadow. Looks like
in natively an awesome. So we have our view but just making static elements and of you isn't how you build in that you need to glue them together and then you know worth of logic that responds to route changes and stuff like that and when my team was building apps because that's what it was my team does we feel that we don't have it all of us were writing sort of the sea for their place code over and over and over again to glue these beads together because anytime I've heard the same thing and I like, oh my God, I'm doing this again.
Now the next level is figuring out pattern do to to to to to to Fairfield. And this is the time where like things get a little bit hard we have to level up because every game there's a point we have to learn its specific pattern and Mario you figure out that you have to take those shells and throw them at everybody and that's how you win in Zelda you figure out you know again with a with a roofie is but also what you figure out that anytime you see a crate you have to bomb this cuz there's definitely something in there also a wall that has cracks always wanted and it's Super
Beetle Adventure is we learn about the past so we can use because patterns save you time games Woodstock horribly. If every single level it was completely different than any other level and you have to like realtor in the entire world is every single episode. That's not how we play games and clear patterns help our new team members figure out an application quickly because they've seen those kind of clothes and before that base the base of your class that we have lit element is present in every single weapon part of its use in VW starter kit, which means you can look at everyone and be
like, oh, I know that I seen it before it looks like Anything a pattern is peelable because as your application grows, the goal of patterns is to make sure that your coat is in a mess your structure. Is there everything is well documented. There's an application is super performance and everything stays awesome, even though you have no 530 page and everybody just like adding you views because they can talk about the worst deals with applications and a second one deals with performance. So we looked for the best way to do this and we like Shelby reinvent the wheel obviously
not the best solution to be found is Rita were super happy about this because when it says an awesome developer Community, which means that every time you have a problem, there's probably a solution for their for their and we don't have to find it. The whole point of it is that has flex flexible and lets you like a plug in all of your solution. So he don't like Redux. You can just take it out and plug in your own application State solution in it, but just in case you want hours And you don't know what to read Exodus Redux is a small safe container. It basically is a glorified key value pair and
that's how it's towards. Your data is 2K so doesn't really add anything to the size of your application is view of Gnostic which means it works the same in any application that you use you can use it in a react app and a view app. It doesn't matter what your element interview layer are done it the same way behind the scenes and this makes it really widely used because it's really reassuring that all of us building application that all different worked out there the same problems all the time. So the solutions for them are also really clear and well-documented.
Any particular reason split to time travel and if you don't want to pick whatever Tooele to time travel on principle that I don't think we can ever be friends. I mean this debugging technique where you can have your application and you can install a developer tool. This is the one we use it's documented on the weekend and basically as you're navigating and interacting with your app is recordes all of the actions and all of this face at the different points in the world that you're taking which means you can also rewind time if you find a problem in your app, you can rewind time to right
before it happened and check with the state was and what happened to him. This is really awesome because it means that we restart the server do all the cliques. Oh, no, I've got the wrong clickhole. Restart the dev server do all the cliques. Hope you do them correctly. So on time travel is amazing for debugging. The premise of redacted actually very simple. You have your UI and any days are the needs to flow through that he White lives in a store and that store is the guardian of the states and nobody else can touch it. This means that if the you want these bits of that state it can ask
for them. What he gets is an immutable object. If you touch it, it doesn't matter that's not the date of this actually lives in the store. If you just get the immutable version of it. And of course is a you I instructed you can send an action to the store and be like, hey buddy, I need to like change this liquor Crown value to add 1/2 it in the store goes tweet. I've done it. But if you just had this you would have a lot of code in the store. And what do I say ABC always be component sizing so we got to this idea of reducers which are smaller functions that update the data for you
and then I put it in the store with a small chunk of the data and they take the previous value or do something to it and return the next value. This is the counter that updates value weather gets an increment or decremented action. That's all it does. You can have many different producers across your application depending on what kind of day that you needs to talk to the reduce or somehow so dispatch has access to it and this is where this is. What I pretended looks like is in the Montreal expos in looks like but if you think about your UI and your reducer is the
accident that you take on the front of you later, I necessarily the same actions that happen at the store. So if you think about it, I don't know logging out of an application. Press a button that says log out so that you I only knows one action, which is logout. What what happens behind the scenes is actually complicated. You got to hit some cookies. Different server is change Wy do all these things. So what the dispatch. Function is there till like convert your uey actions into what I called deductions. I don't know I called him at the top right of the top is Redux classic.
There's nothing that we went to hear. This is like Redux straight out of the box. You can go to the VTech site and read everything about it. The bottom part is the one that's interesting to us because how do you connect two components is kind of interesting and not a lot of people have been doing it. So let's talk about that one. You have your elements that we had before we seen this this is a little element and we connected with that makes sense. So this is another one of those little helpers if we hadn't mpw helpers and it basically when the element attaches it has like a
subscribe to the store when you limit detaches it on a subscription the store and every time the store changes because it's cold back quotes Dave change you quit again, right all this by hand, but why I write it yourself when you don't have to if you can just use a helper. And what happens if Nest A Change Is that you update your properties? And again, this is a pattern we've seen before this is the Glorious benefit of pattern or element has a property. So every time that they changed we take the value and we put in our property and of course every time this every time you updated
property under gets called. So we're going to rear-ender the value of this property pretty cool works pretty well. But of course, I need to update the value of the store somehow because that's the whole point of something that I click. So we do that was asked us again, whenever you click a button it dispatches and action and then it goes into the store in the story of how do I get to be changed again and the value comes in and this is where literature elements are really powerful again when the value of days only that little divots get updates or don't worry that if we get too many
updates to the store or we update the spelling too often is going to be too slow because everything else doesn't need to be affected by this re-rendering that's Redux. It's pretty great and it skills of really well. It's a really big A lot of a lot of people are using it in their applications. So the next one is performance and poor performance vs. IPad and cold cold purple and purple stands for pushing your critical resources for the initial route rendering that about free cashing the remaining World lazy loading everything and then creating It On Demand if needed
purple. It looks like this in practice. The happy thing is you your browser and you're requesting A View From a server and the server looks like a stack of pancakes because if anybody has a better icon for a server I will take it pancakes are delicious, but I don't think that's what a server looks like. The second pancakes is going to give you back or it's just a few want so he's going to give you back the few but also going to figure out that you need other resources season update the slide in time. So it's going to push you other other resources that it knows if my knees and it does
service worker. You don't have to go back to the stack of pancakes, which is always really slow and takes forever cuz I need to get the Nutella on the maple syrup to get to render them and then in your code to get to Lazy load that code because you've never loaded this view before don't do things unless that your user ask for them. Always lazy load everything always lazy load it from a cash. That's even better that looks like a crater for a few and Frizzy what's with the router
cause back and is going to be like, oh you need this new piece of code here and because he has modules are loaded magically if he's ever in for a while before he's just going to get it from your local Marshal cash. That's awesome. What time do you might also have your producers in it? Because it might touch a piece of data that you haven't seen before. So we thought it a way to also load these reducers lazily. This is us and this comes from one of the helpers that we had it to BW helpers so you can add magic to your Redux store. So he can always lazy Lee add reducers and then you know,
the purple pattern is complete deal with applications and performance and the best part about both of these patterns is that if they work for two views, they work for all of your 530 views because you just reapply the same pattern over and over again and all of your views are lazy loaded, so it doesn't really matter how many you have. These are only two of the patent that we have in VW starter kit. There's more of them and you can also add more patterns and plug-in play them as your application needs them in scales. Do do do do we save time by using patterns? I don't know what my winning
sound is I was thinking about it, but I don't think I'm allowed to play the Zelda 1 so problem. We have a solution for most of them. So that's awesome. Poop. We're so close to getting to the castle. 2 2 2 2 2 2 2 The next part is learning the combos most games. You have many bosses. You have puzzles are like just a little bit harder and the old Zelda games you had like the water temple. That was just like all of the things that you've seen before combined together and harder and a few things in the same thing happens
when you filled it out the things that we know from VW starter kit that we can solve already have a base class element. We have a response if you are because they're template comes with he's like I've elements that build a responsive UI for you. We have the PW helper. Is it glue all of his things together and make our our application easier to use which are great patterns that we can use whatever we have problem. We're going to figure out eventually but not all apps are the same at some point. You're going to have a problem that the pwk certificate template is not going to solve the
promise you this one? So it's important for kids to give you the flexibility to deviate from these decisions because even though we're comfortable with our decisions, you might not necessarily agree with them. So we have other templates that you can start with templates like that with every next one is the one you seen but there's also a template that looks identical and has the same amount of classes and everything but doesn't he doesn't use Redux. It just uses unidirectional dataflow because maybe that's the thing you've learned that you're comfortable with. We also have a temple that
look slightly different rather than converting the links from, you know, a lion to a responsive UI. We have a persistent drawer. These are on the screen when you use for his wife has no fancy way whatsoever because it's a very likely you already have a design system or an idea for what he rui looks like it's probably not pink underlines because that's my idea of who you are from that one. And all of these different templates are documented in the wiki and they're in great detail and I can figure out which ones you want and you can pick and choose from them. There's also an
advanced page where you can have more advanced topics a rather than putting code into the wee kiwi have just like coating putting code into the template. We have code into the week. He that he can pick and choose things like what do I do about a CEO? And you know, how do I see my application and stuff like that, but that's still not enough because there's really Advanced use cases up you might want so our team has been building applications with PW starter kit and we built three new one. And the reason why we built these applications is that we could have added all of this
feature is to PW start a kid a horrifyingly full of features. I recently started playing Skyrim and Skyrim. You have a wait you can't just horrid all of the kettles that you see and everybody's houses at some point going to be too heavy and our hero can't move can't put every single thing that you think of in one application and hope it's going to be readable to everybody else. Shop is an application. You might have to be before it's your standard e-commerce site where you can buy things at them to a cart checkout from that cards. Give me a credit card. I'm going to do some crypto
mining is going to be really cool. But have three more you at and Frankie and Ken when me and this is the CW 32 teams have been building them. We have an app that lets you read The Hacker News is just a Hacker News clone. We have an app that lets you search the Google Books API and we have an app that tries to teach me Japanese using flashcards or any language that you want. And the way we think of these apps are just like armor is shelves of armor that you can pick and choose features from if you play Zelda breath of the wild you have like layers and layers of armor and you pick the ones
that you want. We have to swim off the waterfall. If you pick the ones that you got from the water Land music for running around cuz they're not really bad as they're just good facilities for swimming. That is exactly what the App Store you pick the one feature that you wanted and you added to your application. The Japanese is a the flash cards app teaches you about seeming it looks completely different than all the other end. It had speak sentences because it reads out the questions to you and it is is local storage to save your love and that's because it's a game you have to pick off
you have to start from where you left off. Every time I refresh it the books app teaches you about authentication using it's a Google sign in API. It also has a speech recognition because you can just read the words out loud and to the books app. It also has fancy loaded UI and these are the cars that you may have seen on Twitter on Facebook really like pretend of content is there so that it gives you like an indicator of with a layout my look like The Hartford news app teaches you about fetching data from a third-party API getting a giant piece of Jason and sort of rendering it to the
screen without waiting for 17 hours. He does favorites so that he can save things in a reason later and it uses indexeddb to save them. So many of the features are these are any of the future that you need you can look at these apps and I'm going to feel right at home because they all used to don't waste our ticket and if you're familiar with CW starter kits, they have the same structure and they have the same naming scheme and the same pattern across all of the apps. Real documented here and there's a link to all of the Repose and all of their demos. They're all open sores on the weekend
to to to to to to the power of 4 now leveled up with how many stars we have. Where is Alta game? Where do the super Waldorf? Love heart? The only thing that's left is the final level 222 Fufu. It's really great that you've built an awesome app the friends locally, but it's our final level. We got to give it to users and you know, we started with a template. That was our first level be customized it understood how it work. If we use Advanced things like Rita
and a purple and Beyond bread machine learning because everybody has machine learning to all of their things now, but we got it you don't ship it and that is our final level. We got to defeat the final boss. That is the point putting it on the server and giving that link to people and in order for you to do this you need confidence and you need confidence the first time you deploy it, but you'll see me confidence every time you're redeployed over and over again because if my app works today and you know, I do an update if it doesn't work again, I promise you your users are going to be
pretty horrified. In testing is the only thing that can give you the confidence that every one of your redeployed is going to be successful and just think it's kind of like a shield to protect you from the monsters in your game. And the monsters are the Rage of their users when you're broke their calendars. And for this we just texting and texting is another pattern. We have a structure. We provided some starter some sort of starting ways to test. So, you know exactly where to put your test. You don't have to think about it yourself. You don't have any event to set up yourself. So we have
unit test and integration tests and they both serve very different purposes unit test. Make sure that functional Elementary application State correct between commits a button is clickable and brings out this dialogue all the time on all of the browsers integration tests on the other hand like from the beginning to the end lacation looks the same as it used to be like all the buttons. It just is a double sanity check. They liked everything sort of looks okay. For unit, testing will be running more kindly CT and rear end on an older the browser than you can run.
But in particular was kind of awesome is that we've added accessibility testing to unit the unit testing. We do this via Tax Court Explorer than awesome Library original by the DQ Labs team. So we have a function where you pass it a Dom element and that rapper is going to spit out all the violations violations that. Elements has and its element can be like a button or it can be an interview that you're testing all at once and this case. I have a question that doesn't have a title and I get all of its violations and this is really awesome because accessibility of
the future you don't really want to break. Refrigeration system we use Puppeteer, which is a headless Chrome browser. And Eric vitamin is going to be talking later about this on stage 2, but, dear basically let you spin out has been up a headless version of Chrome and look at a site and take screenshots of this site, which means we use it for screenshot testing. We looked at what all of the all of the pages look like and we compare them to what he thinks of pages. She looks like directly to your a okay because he's our test, of course they run on Travis which is a hosted cuz she was
integration server. You can use Circle C or whatever you want for that, but you can just add your test kit to continuous integration. So you're always confident than none of your commits broke your application. Now that this one was easy and are confident that we like all our might have to fight the boss. We have to actually do the fighting you have to actually deploy it took care of this to we have in Cameron built which bills and minifies and makes the bundles for your application. And then you have if you have runs through which way to test those bundles
locally that are you confident before you copy paste onto your server looks really simple. It is a lot of things behind the scenes is Minify is it generates the bundles it build a service worker so that he can free cash all those drugs that I promise you about and I'm just to kind of build you can generate you can build static bills so that you can upload them to things like fart Firebase hosting or netlify or you can build Dynamic bill with purple server and purple server. Is this awesome production optimize service a little tiny note server that you can install on your hosting if you
have access to it. It does is awesome thing where it serves the optimal bundles to the browsers that request them. So that means that you can have multiple bundles. This is a bundle Friday the 11th. This is a bundle for like browser that have Dynamic Imports. This is a bundle for things like Firefox. It's still need what components polyfills and stuff like that and purple server will look at the the browser that the request is coming from and be like, oh I see these are the things you need for the bundle that works for you are the reason why this is really awesome is that it means that
you don't have to deploy any S5 build for example and serve it to Chrome which already knows how to use is six. Arrows all that stuff. You can just give the correct bundle to every browser as they need it and it was really awesome and powerful and a cruiser performance. I want to do this once you run in Panama and build and then you test your ability, you'll notice that you have amazing Lighthouse scores because all of the heavy lifting it all of that heavy performance work with already taken care of by the CW start a pattern. There was Vino really good armor is so though the deploy mustard
isn't really attack you and you can improve that 97 to 100 by just adding more lazy loading. But again, if you put it into a template then it's going to be a little too heavy for everyday use and that's awesome. We feed our final boss do what you do what you do with a kid and 28 minutes and 12 seconds. We managed to deploy an entire out from start to finish 30. If we have finished. Our thing. We can go to the final castle where we showered with money and Cake and Candy and sugar.
This isn't my game. I hope you liked it. I hope you try VW starter kit and most important you tell us when you build something with it because we'd love to hear about it free. Us as got older and thank you so much for watching this.
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.