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.

Like To think about our, users from, a couple of different perspectives because sometimes. We're engaging with users on a more transactional, basis where, I have, a user that's going to make a single purchase at, a single time they don't necessarily want to have a relationship with me but, then also what are the ways that we can have, relationships. With our users with our customers, in terms of longer, running engagement. Where they want to keep coming back where we they want to give us space in their lives and in their home screens. But. It's also really important to acknowledge that we have organizational. Needs when, we're building these sorts of applications. What, is the development cost to be extending. Our applications, to new experiences in thinking about new contexts. What. Is the complexity, overhead, of managing multiple. Platforms, and thinking about all of these different users, and then. How much code can we share there's. A lot of ways of delivering applications, and one of the the metrics that's really important at an organizational, level is how much of the code that I write can I reuse and can I maintain a single codebase for. As much of the functionality as possible. Angular. Is really great at letting you use some awesome solutions that exist across the web, first. Up I like to talk about native script native. Script is a way of using angular. And using. The, web, and declarative, style templates, that nu air has, and then, expressing, those things and rendering those things out as native. UI widgets, we. Also have technologies, such as ionic which, are using a webview approach, where, we are shipping, applications, to the user via, their browser embedded. Within an application and then giving us a JavaScript, API to, all the native capabilities, this. Is also possible with things like Cordova, or if you want to roll your own native. Application. It's using the same sorts of technologies, and ionic actually uses Cordova under the hood. But. What I like to say is that a lot of people want to build this installed, native application, where you actually show up in the App Store and Google Play but. Most. Of the time you actually have to ship a website as well and so, what I would say is if you're building a website anyway, build. It as a PWA because. You're going to enhance the experience for any users that have browsers that support it and for. Everyone else you've basically just done the right amount of work to deliver these great experiences via. The web which is so key. So. I want to tell a few stories today, and so the first story that I want to start with is about a company, called shopstyle, they're an ecommerce platform so. If you go to shop style that code at UK you'll see this so, basically, they are a index. In a search engine that allows you to find. So whether that's furniture, home goods clothing accessories. Those sorts of things you are able to visit their website search for what you want and then they take you to that content. Shop. Sell already had an angular application when, we started talking and they. Were even going further than that they were already using server-side rendering which is something that I'll talk about a little bit before so, they were really early adopters of angular leaning. Into a lot of the very cool capabilities, that we're trying to offer to developers. They. Even have mobile applications, on iOS and Android that they've built natively and they have a huge install base that, is building, this great relationship, with all their customers, if you like shops town you install their native application that means you typically want to keep coming back to their app and, you're gonna keep buying from them which is good for their business. Shops. Tell success in their, words was do driven. By performance and. By delivering smooth user experiences. So, how do they define smooth, so. For them they talk about server-side, rendering of content was really important for them and again I'll talk about that a little bit later their. Application had to load quickly so, as soon as the user visits a link or whether they type in the URL we, need to be showing them the content showing them the information they need to start making decisions about their shopping experience, the. Application also has to be responsive, as, soon as the user can see those things their expectation, is that they can interact with those sorts of things whether, it's clicking on filters and having them respond or clicking into a product and saying getting more information about it and so having these smooth. Experiences. Is really important, but.

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.

You So, obviously you can go deep and you can build your own service worker from scratch if you want and there's a lot of use cases where you may want to do that but, we find that a easy entry, point for getting up to speed on these sorts of new technologies, is to use the tooling that we're providing and so we shipped a brand new service worker in version 5 and we, also now, as, of the 1.6, beta of our CLI have, supported for it by, the build so, you add the service worker module to your application. You, add the. Service. Worker 5 to your CLI and every, build will automatically, include the service worker for you go. Watch Maxime socks he did a really great deep dive on a your service worker both the version that was existed, before version 5 and the new one so huge. Props to him and thank you for doing that. So. Another really important, technology, that I want everyone, to kind of think about leaning, in on his server-side rendering when. I think about server site and so we also called this project angular universal so in your Universal is a project that allows, you to buy a platform, server, take. Your angular application run. It on the server get out a string and then ship that string, to users in whatever form you want, and, so server-side rendering is really great for extending the reach of your application, because well, we often think about users and the people of our applications, I talked, about there being users, of our pages that are not humans the machines that are reading our applications, whether, that's a, search, crawler that doesn't have the capability to run JavaScript whether, that's a social network that wants to crawl and scan your content, to understand, it and generate, things like a thumbnail server-side. Rendering can, both help these machines understand your content but, they can also increase, the perceived speed of your application, by, rendering something, faster, to the screen the. User sees the application, faster and they can start making decisions they can start engaging with you quicker, so. Once upon a time there is a business publication, called Forbes and I want to enjoy invite, Jason Jean under the stage to tell us more about what Forbes is doing a server-side rendering I. Could. Stay then, so. My name is Jason Jane I'm late developer, on the article page for Forbes and I'm. Here to tell you about how we use angular or, what I like to say the, way of the Forbes. So. This is our article page and the most important thing for this article page is the content, they want to get the content to the user as soon as possible, so that they can understand, what our authors, are trying to tell them. So. When, angler started its development, we looked at our current article page and there was a lot of complication, and how we developed, it on. The back end we use Java and spring MVC and the, front-end we use angularjs and, this, is kind of confusing for us because every time we did new feature we, either had to do it twice once. On the back end and once on the front end or we need to involve multiple developers to. Develop one feature. For. A new angular page we're, really excited, about doing features, once using. The same code base for, back-end, and front-end only. Having to write the code once. Usually. When you use a certain client. Framework as many people do today, it's, very slow to get content onto the screen you, have to make multiple network requests in order to get a meaningful content, render on. Slow connections it's, going to be even more painful. So. That's why server-side. Rendering is very important for Forbes and its article pages to get the content there as soon as poss. When. The user navigates we. Do a lot of the work for them on the server so the by the time they get their first Network request back it's, a fully rendered meaningful, page they, have the content and everything, else then. They make 2 more done requests in order to become fully interactive, and has, they go through the site even more it's, a smooth experience. It's. Really important to use server-side rendering when there is no JavaScript and, while, we like to think that javascript is everywhere now there, are some cases where it's not one. Of these cases is there a search off search. Engine optimization, and. Even. Though Google executes your JavaScript not all sections do, so. If you want to be visible on all, search. Engines so, you server-side rendering to tell them what your page is about. Similarly. For, social media and. Chatting. They. Use callers to call your page which don't execute JavaScript, so it's extremely important. To use these, previews, to, tell you those, users through, a link exactly. What your page is about maybe a thumbnail maybe a description so, they're more entice to visit your site and this will drive more traffic to your content.

Also. There's, times with our user has bad Network and as, even mentioned you can do this with PWS, but also sometimes they might not even get the JavaScript, JavaScript, as many times very, large and with. Bad connection, they might lose connection and never get it and they'll be staring at a blank screen which will be really confused, and. Then. The last thing is with the way the web is moving older. Browsers you may start to deprecate support. For them because they can't execute a JavaScript, what, if you server-side render your pages these, browsers can still understand HTML, and as long as you render meaningful concepts of them they, can still get your content, even though they're using an older browser. The. Great thing about angular is that server-side, rendering works just like client-side rendering so, if you're ready using angular on the front-end you know how to use it on the back end, when. We get a request we do some routing to choose which template we're rendering and then, we can also do some server side authentication to, see whether or not this user is able to see the page. So. When. Refraction of data it's important, that on the server side you put it into the HTML so, that the client when they get the HTML, they have that API data and, they don't need to call it twice and this. Is possible using a state transfer API that, was introduced in angular 4. So. When. You're rendering your content, this is an extremely, important your users because it's into the HTML this, is the first request to get back and seconds. After they get that request back they're able to see meaningful content on the page. And. Then lastly for people, for machines. It's, really important that you put a page metadata, all insert HTML so. They know what your page is about as well and this, will drive more traffic to your content. There's. Some caveat for server-side rendering that you'll run into when you start going on this journey one, of them is caching you want to balance how. Long you catch your pages for to keep fresh content, but, to maintain fast, response times and this. Will also allow you to use fewer, or scalable servers. Part. Of this is dynamic content, some of your pages might have to mount dynamic, content and that's great but. If you want to keep your pages cache for longer, think. About keeping this dynamic content all for the server render and rendering with client-side rendering. Also. Keep in mind what's above the fold and just what is very key to your users server-side. Rendering it only lasts about three seconds on a good connection so. You can, leave some of the later things and load them progressively in. There's. Also a lot of interactive, elements which probably. Don't work without JavaScript and sometimes, they don't look good if you serve a render them so, consider just leading space for them so, that they come in later whether than fully interactive, and you don't trick the users into thinking that they are. Ford's, came across an issue but. That we had to overcome and, we used two custom, elements to solve this issue so, a lot of people are wondering with, the static note analysis. How, do you get, dynamic. Content rendered in so our CMS sends, us the body that's, just a string and this string has, interactive, elements embedded, into it so, we are problems when using a OT well. How to render this content but still keep a performant because, piling, on the runtime is expensive. So. We use custom elements for this for. Those that interactive. Embeds we build custom elements, around them so, that the web knows how to boost shut them outside of angular. Then. We were able to reuse these elements across our other pages pages. That don't use angular or don't use a framework at all. Before. Missus like a race you want to be as fast as you can to get content to the user because.

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.

Isolate, Each of the components from each other and help them innovate more quickly as they continued, to evolve. The. Last thing they've spent a lot of energy, on is automation. Having. Good source control repositories, having good developer, operations, doing, things like continuous, integration having. Automated, tests having end-to-end test unit tests all of these things they. Sound like nice to have but, especially when you're building a library which is going to be consumed by developers that are not part of your team having. Things is a key to being successful so. I. Want to talk a little bit about the successes, that VMware has had, so. This, is they, told me this I was again, shocked to hear this within VMware virtually, all products use clarity so, they had a bunch of different teams using different. UI. Libraries, making different design decisions, but, they've virtually standardized, on clarity and, they were able to do this because, it, was open because they, tried to make it good enough that developers had to pull they wanted to pull it into their applications, because. They didn't have the central authority to say everyone you have to go use this so they decided we're gonna make the best product and get, all the teams to want to adopt us and want to standardize to. Benefit themselves. So. By open source thing they also opened. Themselves up to new modes of collaboration, so. Instead of just getting feedback. Requests. And issues and things like that they, actually empowered, there community both internally, and externally to, contribute, back and solve some of those problems that, made the product even better and better one. Things that they saw was it wasn't just employees contributing. People. In the world and I think angular is a really fantastic example, of this want, to contribute they want to be part of really cool products and services, and so by, open sourcing you can engage, and activate, the community and really, empower. Them to help, themselves at the same time. Another. Side effect that I don't know if they were intentional, about this but, by, having, an open source design system, all. Of the partners that work with VMware. Were actually able to make, applications. That behave, just, like VMware applications. And so, as a side effect of doing this they created this continuous, feeling across, their whole ecosystem. Not, just within their own company, and so that was really kind of interesting, to hear about that. So. For, collaboration, by, making, both a design and an implementation they. Made it easier to adopt these standards across the whole company the. Other thing that they saw is collaboration, across teams was increased because, you already knew how to use the clarity design system in one, part of the yet the whole, company you could use it in another and you could have cross, collaborations, across multiple different projects. So. If you're looking to get started with building. Your own component, library I want to point you to three resources until. We get some of the tooling a little. Bit better and automate some of these things for you so first, we have an angular package, format specification. So. If you search for angular package format in Google you'll, find it's the top link I'll, also be posting some, links, to this presentation, along, with all of the URLs that you'll need after, this talk. Next. Check. Out the angular material bits build system so, on the angular team we have a team dedicated on building angular material which. Is our vision, of manifesting. The image field design philosophy, as a component, library and so, as part of building out this component library as part of our open source project we've actually done a ton of work to build out tooling that automates, in standardizes. Build systems to take it from the types of code that we write to the JavaScript that we want to ship out to people that are going to consume our library, I would. Also recommend you check out Philippe's guide. Because of the angular QuickStart. Library and so, this is a really good starting point if you're looking to for, code samples of how you could start, from scratch. While. I was making some. Final minute updates to this presentation this was actually an article that launched yesterday so, another, example of a company that's in the open shipping. Component, libraries and talking about their experiences, this was a an article from Auto Trader so. The, article is called everything's a component writing domain-specific reusable.

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.

2017-12-18 11:41

Other news