Day 2 Keynote – Stephen Fluin – AngularConnect 2017
Good. Morning everyone welcome. To day 2 are you excited. All. Right I'm, a little bit more excited than you let's hear that one more time are. You excited. All. Right there. We go we had so much awesome, content, yesterday and I'm really excited about all of the really awesome content, we're gonna see again today part. Of my, love's. Part of the things that I'm really passionate about and why I come to a lot of these conferences is to talk to developers hear. Their stories hear what they are having fun with hear what their challenges, are hear what their successes, are because, these are a huge part of how we make angular successful. And how we make it better for everyone that's using it I really. Like to think that today, it. Is a really great time to be an angular developer if. You look at the state of angular, and the satisfaction, levels, that we've got from all the developers that are using it we've really achieved a really, nice time we've. Achieved a high level of stability making. Updates very, very easy as you're moving routine versions we've, got a really successful passion. Ecosystem, that are building and looking at how we can do things more, and better all the time and that's, just something that I really want to lean into as I. Think about the things that we want to do on the angular team in terms of encouraging, community, and collaborating, with the developers, that are out there there's, kind of three things that I think about the. First thing I think about is really bridges, to angular there. Are a lot of developers, out there coming from a lot of different contexts, we have a lot of developers still using angularjs we, have developers coming from other technologies, such as c-sharp, such. As Java and, we want to figure out ways to help those developers, and welcome, them into our community, and a, big part of welcoming people into our community is this idea that I call welcome signs which. Is I want to acknowledge that you've kind of arrived at angular and really, have a focus, on how do we welcome those people in how do we make it easy to get started with all the different tools that we've got and give, them a guide in a roadmap to how, they can become better developers, using, angular and then, the third piece that I think a lot of the people in this room are really excited, about is how, can we use angular as a bridge, to take us to new technologies, that, really make us better developers, and help, us build better.
Haitians For our users and for our organizations, more. Maintainable code cooler. Features taking. Advantage of the platform as it continues, to evolve and, so. Today's, goal is I'm really hoping to convince you to take your angular applications, to the next level, what. We've seen when talking to developers, is we, used, to really focus on beginner content, how do I get started, but, when we come to conferences, like this most, of you are already using angular, in a professional, context, and so, you're less interested about, basics, about, angular what, a component is what a service is and really, want to take it to the next level and so you've heard a lot from our team this past, day about, all of the cool new things that are possible in diving, deeper into what the framework and platform, provide in terms of topics, like dependency, injection in terms of internationalization. And so, this talk is really focused, on three, areas where, I want to help you take. The next step in your angular applications, and build even better experiences, for your users and better, applications, for yourselves. I'm. Going to talk about this in three, stories, first. I'm gonna talk about progressive, web applications, or pwace. Which, are really new exciting. Way of building applications that are gonna, allow you to leverage the new ApS that are available as part of the browser's to. Radically, improve the engagement. Of your users then. I'm going to talk about new technologies, such, as server-side, rendering, they can extend, and enhance the way that you deliver applications, and then, last I want to talk about building libraries, there's, a lot of companies that are standardizing. On angular and choosing, hey we need to build a library internally, and I want to talk about what that can look like in some of the challenges and opportunities for, you there so. Let's get started with this idea of pwace. Progressive. Web applications, so, there is a fantastic, talk from Maxime yesterday which you definitely go check out but, just, to remind you a little bit p.w ways are a set of new api's. That. Allow you to take more advantage of, the web as a platform and, deliver better experiences.
So, You have things like the application manifest that. Collects, your application, instead of having it as a series, of URLs or pages we, have a concept, of an application with a starting point with, an icon with a name and the even a color that shows up in the browser, then. We also have things like the serviceworker that, allow us to build new experiences, by caching and proxying, content, that's coming from the web and making. Sure that my application works even in unreliable, internet connections, or even in offline use cases. The. World is mobile. When. We look at building a new application, or new website it's really important that we use these things and I'm reminded, this every time that I travel, because, when you get on a plane you lose Internet connectivity and to. The extent that that stops you from being productive, that's frustrating, to your users and so it's really important that we as application, developers think, about the types of use cases for our users because people, are engaging with us in more places and in more ways than ever before, and, acknowledging. That new context, is very very important. We've. Looked at a lot of different applications and, for some classes of applications we. See about 70%. Of web traffic so that's just over HTTP to a website is. About 70% coming, from mobile and in, places like China this is even higher we, see numbers like 90% and, so, acknowledging, mobile as an afterthought, isn't. Really possible anymore, we really need to think about how, is our mobile experience, coming, through with via our web application, day, one I often. Recommended, developers, you should when you're in the developer tools click on that little device emulation mode and just leave it on because that's how most of your users are going to experience your application. It's. Really important to think about the needs of our users when we're building these sorts of applications we, talk about the features that we want to deliver so whether it's offline capabilities, with serviceworker, or, whether it's just the having, the capabilities, that, they need at the right time using, new API switches the payment request API, it's. Also about performance, how do we achieve both good runtime performance so that every interactions, they have is smooth and fast but, also startup, time performance, how do we make sure that we can deliver these applications, even on slower networks I, also.
Then We ended up in a conversation with them and they heard about PW A's and they. Thought hey maybe, we should give that a try. There's. Basically three ways to think about PW, A's today across the web I, talked. About the angular service worker which, is the opinionated, angular, version of the service worker that's baked into the core framework where. We're, understanding. A lot about your application using the our syntactical, or semantic, understanding of your apps using, things like the CLI and building, service, workers into your application for you but, there's also a couple other very cool tools that exist out there the. First is work box this. Was a tool that was built by the Google team by the chrome team in order, to help a lot of web developers who don't have the same sort of DevOps. Infrastructure, the same sort of build infrastructure to start adding service workers to their application in solving, a lot of very common use cases and a, predecessor, to work Vox that we still see a lot of developers use that you're gonna hear a lot about if you're doing POS he's s to be precache which, handles a little bit one of the challenges of work, box but. It was there first and is his, a huge install based kind of across the web. So. At the time the, angular service worker wasn't, exactly ready it wasn't we didn't have CLI support at the time and so it was a little bit early for them so they ended up choosing s to be precache and. It was took about a week of calendar time but about two days of development they, got from having nothing having a conversation about pwace all the way to having a prototype that was live in their dev server. So. As they, were building this out I really, wanted to dig into not just what was. Successful for this well how easy was but I also wanted to understand some of the challenges to help guide everyone here as you're starting to look into these technologies, so the, first challenge that they had to overcome was the idea of analytics, how do we track and understand, the impact of our PWA and so, what they did is as part of their app manifest, they, set a home, URL that included, a UTM, source basically. We identified, through they identify the campaign, saying. This user, came from a PWA so, as soon as the user had that application installed as their home screen every, time they clicked on that they. Ended up knowing that that user came from that source and they could measure the, effectiveness, of that and we'll get into some of those outcomes that they saw via those analytics, in a little bit, they.
Also Had a lot of organizational. Mindset. Shifts that they had to do so. One of the challenges. That they struggled with that I think they they continued to think about is whether or not they should have a customized, or personalized, launch URL because, we had these nice server-side rendering capabilities when. I should render my app manifest I could actually send down a dynamic. Or a custom URL for any user that is authenticated, with me so. I believe at this time that he chose not to do that but it's something really interesting to consider for the future, another. Challenge that they had was user notifications. So, at the bottom of the screen there's. Already in their application, a prompt, that says hey you should go check out our native application, so, now in addition to this they have another prompt from the browser saying you should install our PWA and there's. Two other prompts that they have to think about one. Is when they want to ask for permissions to display notifications, should. They be doing that at all should they be doing that for authenticated, users and second. When. Should they actually be sending these notifications when, is the right time that says this, is going to be useful to this user and the users gonna want this notification and it's not gonna come across as spammy and make them uninstall, or disengage, from, shopstyle they. Also wanted to think about caching versus dynamic content, so, for them having fresh content, is very very important and I think it is important for a lot of us and so thinking, about when and where we should be caching and when we where we should have dynamic content is really important, and so. Today they're not actually taking advantage of offline because their content is so dynamic, and so fresh from the Internet where they actually rely on third parties as well to deliver shopping. Experiences, all. Fly doesn't necessarily, make experience, but, maybe there's some opportunities, for that in the future. Tooling. So I asked them about their tooling recommendations, their first one was used lighthouse, lighthouse. Is another product from the chrome team that's now actually built into recent versions of Chrome what, lice house provides is a set of audits that tell you how good is my application what. Sorts, of features am I taking advantage of does, it meet the criteria, for a PWA so, it's a really helpful tool for understanding, the accessibility, of your application, the performance of your application, and how well. You're meeting the criteria for a progressive web app they. Also recommend to use the CLI if you can if. You. Can't use the CLI because there are still a few companies that are not able to use the CLI because of their build infrastructure they, found that s to be precache was a really good option as well. So. I want to talk a little bit about their outcomes, in terms of what happened after, they'd shipped this experience, into production and they were seeing users starting to add the PWA to their home screens. So. For every user that added, the PWA to their home screen they saw a 90 percent increase, in time, on site and for. Those of you not in e-commerce time, on site is one of the leading and most direct indicators, of how much spend users, are gonna have and so, having this sort of impact, from just having a PWA on their home screen is, really. Impactful, but, the other half of that is what if these users are coming from iOS or Android and they already had the native application what. Did that do to all the other traffic well. Fortunately they actually saw 0%. Cannibals a of their Android and iOS market. Share and, usage, so, all of the users, that wanted to install the applications, from the App Store's still, use those applications from the App Store's and people. That are using the web experience a subset, of them opted, to engage. In deepen the relationship by installing the home screen and we saw that 90 percent time on screen. Experience. Increase, which was huge. So. Next up first off style I think they're looking at push notification, so they've decided not yet to do push notifications, but the nice thing about pwace, is they're progressive, you can add one feature at a time you can keep making it a little bit better and a little bit better so, now they're looking at how can we add notifications. For application, in a nice smooth. Easy way there's. Also to shop style developers. In the audience if. You guys want to raise your hands if, you're in here right now but, definitely look for them they're there they are thank you guys so much for letting us do this little story about you guys if, you have any questions about their application feel, free to ask them. If. You're looking at getting started with PTAs I highly, recommend that use the angular service worker we. Feel like it's the easiest way to get started because we're trying to abstract a lot of the complexity service workers for.
Forbes Uses server-side, rendering we're able to get content in under a second, to the user. Also. Because we could split most of our longer bootstrap times outside, of the main app bundle this. Is able to start one second into the page and. Then. Because we use a OT when the app does get to the user it's quick, to boot it up and this, type it's in under two seconds because. Of all this we're able to call our ads in under, three seconds this, is extremely important to our advertisers because. It gives their ads more, viewability and. Then. Also because the contents getting there earlier, uses a boring place to interact. With our content and scroll down and to read the article. So. This is how we use performance, to create a better user experience. For. Us this also stayed up to date with the latest angular versions we. Started developing our angular page just as soon as angular itself started, developing, and, then. When. They finally released we were really quite to ship our mostly viable product out to our users to see the, differences, between our old experience, and the new experience that was coming. When. Angler 4 was in testing we also took the opportunity to, get a sneak peek and we also found bugs but, we, contributed, fixes for them so, that by the time that angler 4 released the, general public did not experience these bugs. When. Angular force released we, then complete, our feature set and shipped our product, for the full audience and, we had great success doing this. Recently. When angular 5 came out we. Also, followed, along and we, serve, we tested the server-side performance, to make sure that there was no real product locations of switching. The damn time the server, renderer, Sudama. No. The. Journey ahead for Forbes involves. Improve our UX even more and. We want to do this by looking into service workers and what I can do for our audience so, they can get faster render, times on repeat visits. We're. Also looking forward to the newest web technologies, and how angular provides this for us we. Want to use these as tools so, that our users get a better experience out of it and then. As we have in for the last hundred years we like to keep highlighting, success stories and offering. Our expert, opinions on these. So. That's it for me and I. Like to just thank, you all enjoy, the rest of the conference and may the force be with you. Thank. You so much Jason that, was awesome hearing about the work that you guys are doing in order to serve your customers I also. Want to thank Jason in particular, because he. Actually became an open-source contributor, and added a bunch of work, into. The angular CLI project, that helped make angular Universal even better and, so anyone. Can do this it really is possible to contribute, back to the open-source community and become, part of all this work that we're doing so let's give Jason another round of applause. So. If you're looking to get started with server-side rendering with, your applications, there, is the a lot of documentation about in your Universal that exists on the Internet but one video in particular that I would recommend you take a look at if, you search for its angular Universal and firebase hosting it's. By fire based developer advocate David East and he does a fantastic job, of taking you from a CLI application, all the, way to a server-side, rendered application, using, firebase, hosting and firebase cloud functions, which is a really cool combination, that gives you a really fast path from, getting from your application to, of being server-side rendered with this nice client-side bootstrap on top. So. Next up we're going to talk about libraries. And in particular building, libraries that are designed for sharing, code how, many people here are already building libraries, that are being shared across your, teams okay, how, many people want to be building libraries that are shared across your team okay.
A Lot, more there so, this is an area that we're continuing, to spend a lot of time thinking about and. We've got a lot of future plans to make this easier things like we're exploring, and evaluating, CLI support but, I want to talk a little bit about what it looks like today. And how people can use this as it, is today and so, I'm going to tell the story of a little company called VMware, they. Do a cloud, computing virtualization, platform. Everybody. Heard of VMware okay good. So. VMware, has a lot of developers Wow. Surprising, right a company that makes software has a lot of developers this, is very, expected what ends up happening when you have a lot of developers on a lot of different teams you end, up getting inconsistencies. In your UI I'm, a really big fan of this xkcd. Comic where, he says hey there's 13, or 14 competing standards we, need to make a new standard to make it even better and now, we have 15 standards right so this happens to a lot of us it's very easy trap to fall into but. Fortunately, for VMware. This, story actually doesn't end that way. So. VMware, internally. Uses both angularjs, and angular and so, one of their big challenges, was across all these different teams the, UX, that they were building was, not as consistent as they wanted it to be and, so what they did is a team. With in vmware started, an engineering, lead project, to create a full-stack owned. Solution. In terms, of how we can do a design and how we can implement this design as components, they're shipped by angular and so they released the clarity, design system, initially. It was released internally, but later it was open sourced and the, clarity design system was really designed to help build consistency across the whole company within VMware, so. It's, made up of a few different pieces they. Release sketch templates, to help people mock. Out these things and understand what the UX would be to, use this standard, set of components, they. Released a comprehensive set of UX guidelines so, what should the application, look, like what, is the experience we're trying to create what are the principles, at play here when you have to make different decisions about your application they. Won't gave you an HTML, and CSS framework. That allowed you to prototype. Very quickly and get moving and then, they manifested, all of this as angular, components, their. Feeling was that by owning the full stack it would actually dramatically, increase adoption, and, I'll mention a little bit more about that later and just so you have some context, in case you've never actually used some of these web-based, backends, so this is V realize this, is their old interface and then. After the clarity design system, we've. Got another one here old. Screenshot, and, then below there you can see a side-by-side comparison of, how they've tried to modernize and increase the quality. And consistency of their application, across, products and then. They even did this for their charting in reporting. Libraries. So. One, of things that VMware did is as, with Forbes they started very early but, VMware started small and so they released basically. Just a small tiny set of components internally so they started working and. Within two weeks they, actually did a internal, product launch with, those new components, so, by starting with a very small set of components and not trying to be over broad they were able to move quickly and figure out okay how should we be doing these things what are the sort of standards that we want to apply to, our company into the way that we're building out our library, and. So two weeks is really fast I was actually really surprised to hear that but, then later in 2016, they actually open source clarity, was the intention of building a broader, community, around. The work that they were doing when. She can be really impactful in terms of building a higher quality product. So. I asked again VMware, what sort of challenges did they face as they were doing this so. One of the challenges that they faced was they joined us very very early in the angular journey I know some of us were around, for that what, I always say the developers, that joined us during the beta, period was thank, you I'm sorry I, say. Thank you because we really needed the validation, we. Needed to prove, these concepts, out in the real world we needed to see how they work and validate. Them at scale and, a little bit of I'm sorry because we needed a petition ship code, that was going to work for the long term and I feel like as a version 2 that. We released in September of 2016 we've been very successful in delivering a platform. That works for a lot of developers and helps, them build really great applications. So animations. In particular they ran into a lot and, then just some of the changes that we were doing during the beta and the RCS another. Challenge that they they've had to spend a lot of time thinking about is how do we project external.
Content So, I want to provide a component, an angular. Component, that's usable in other people's applications what. Do I do with their content, when do I modify it when do I give it multiple. Places. That I want to be rendering that when, do I use inputs, when do I use services. To pass data so all of these kind of challenges were something that they thought, a lot about so. They should have skewed the best practices, that they've experienced, from, doing this in the real world in the field, so. Their first tip was think about performance early and often. Angular's. Change detection is really powerful and it's by, using angular across the whole company they, have a really nice way of having a cross collaboration, across many many different teams but AO has some, very cool tools for change direction etc but. Don't abuse it don't, be creating. Extra change detection cycles, for every piece of UI that you're putting on the screen trying, to tie in very naturally, to the users experience and think, about what you're doing they. Also recommend, that you leverage services, so, from their experience, with their component library they found that using inputs and outputs was, actually harder for them than using just services to pass data back and forth by. Using services they were able to centralize, a lot of their business logic away. From the components, themselves so. That they didn't have any challenges, managing those two things and keeping them in sync. One. Of the things that they experienced, is that and I think we all see this is the, more adoption you have, in some ways this slow where you go because, the more people are relying on you the more people that are expecting you not to change more, people that have requests, of you and so it makes new features a new ideation, take, longer and longer and so they've done a few different things that can combat, this across the company so. The first thing they did is by open sourcing the project they were able to encourage. More contributions. So. As the amount of work increased, because the framework, was becoming more and more popular for them they, were able to increase the amount of people working on in the moment of I is thinking, about those sorts of problems and so open sourcing, can be a very successful tool, in your toolbox, they. Also set up a set of policies and tools for. Their standards, for how they build out these components, when, should a component be managing its own state what, are the allowed inputs, and outputs what, are the visual standards how broadly, do we wanted to find these components, and by defining those very early on it helped.
Angular Components, across squads and it echoed a lot of the things that we saw from VMware in terms of the ways that it can prove collaboration, and create, this pull from other teams by focusing on quality and by focusing on reusability, all the way to the manifestation, all the way to the implementation of, a, full stack solution, using, angular. So. To. Leave us I want to kind of just summarize we've. Looked at how we're, already great angular applications, and it's wonderful day, to be building, angular applications, for our users but it's really now time to start leaning into all the things that we're doing in building, better experiences. Whether, that's shipping a progressive, web application, for the first time and creating, more engagement, with all of our users and getting more traction from the people that are already spending time with us to. Server-side rendering to increasing the perceived, performance of our applications, as well as making it more machine readable that will help us broaden, our reach across, many, different places and finally, building, libraries there, was a lot of people here that raised their hands that I want to be building libraries and, it's, definitely possible today there, are lots, and lots of good libraries out there you, can take a look at a lot of them are open source a lot of them are here as sponsors. And in the exhibitor hall so definitely check those out but, then think about hey how can we extend what they're doing and how can we find our own standards, that we want to apply across, our company and just. Remember and yours here to help thank. You so much. Thank. You Steven. Thank. You Steven.