Power of AngularDart and Trustwave's Customer Portal (Dart Conference 2018)
So. That picture of me that was up there before this, started, was back in 2015, when I was lucky enough to present at the first art summit as you. Can see there's not the gray hair up in that picture that is not a direct reflection, from, working on angulardart, it's exactly. The opposite actually so so, I'm Eric Warner I work at Trustwave on the portal infrastructure, and today we're going to talk about the power of angular dart and how we built out our customer portal taking advantage of it so. Let's, go over a little bit at the beginning of what we're going to cover so at first we'll talk about building out a large-scale, portal, and what, that means for trust way portal development, kind of set the landscape, in the view that we're looking at and then, we'll look into what, we were looking for when we went into a new UI initiative. To, get off of our leg legacy. Technology, where we're using then. We'll look at what did we consider, at that time when we were going down this endeavor what was out there what was in the landscape, before we made the wise choice a, picking. Dart and angular dart and then we'll jump into what, we've taken advantage with in dart as far, as building out a base component, for our teams to use to develop with taking. A valley to shelf routing and deferred loading, to lazy, load our portal as it goes through as the customer goes through our portal take. Advantage of UI components, and building those out for our teams to use and then, also the tools that we have taken advantage of and why we chose dart to begin with. So. Trustwave portal development, we have a large-scale, portal that we build that, has about 15 distributed, teams that. Is about 50, plus developers, that are divided, across these teams and they, build about 35, different applications. That, take advantage of a thousand, plus Java services that we built on the backend using spring some. Of those are part of our portal infrastructure, that we build out but, a lot of them are from our product service teams for the the services, that need to support the views that are built out for those products, we.
Have 40,000. Unique. Global users that log into our portal, one, portal, on a daily basis so all this is brought together from, our team development, that takes place and we, got to make sure that we bring it into one build and leverage. Whatever technology, we're using to build out some sort of framework that the teams can take advantage of. So. We'll, go back a little bit it was 2013. We. Had a legacy, portal that was built off of using, flex with flash and we all know what's happened with flash it's died it's dead the browser's, have caught up with what we, could take advantage of at that time it was a good choice back then but. The browser's have caught up so we were looking for what's next what are we gonna go to so what, were we looking at at that time there was you know the team development II had to take advantage of but we also had to look at new requirements, coming in so. We wanted to make sure that we could build out a portal framework and that for our customer experience when they came to our portal I had a quick initial startup time we didn't want them sitting there and waiting for the, download to take place we wanted it to pop up quickly for them that, means also we wanted to lazy load our portal the, teams as they work on these views that they're putting together for their products, we, don't want it to download all at once and have this big memory footprint, within the browser we, want to incrementally, grow, the portal as a user goes through it we. Want it to be fast rendering within, our UI components, so there's not a lot of waiting for the user as they click through and we want to take advantage of something that we call in the past deep linking where we could send, URLs. To our customers, that they could click on and go right to the area within the portal so they don't have to log in and dive in from there and also that they could bookmark, these URLs to get back quickly to the area they wanted to go to within our portal. Then. There's a team development, that we've discussed previously we. Have a unique, look and feel that Trustwave that we go off of for, our portal, so we want to make sure we have a set of shared UI components, that the teams can use that. Are built in a consistent manner with, the proper styles so they don't have to worry about that when they build out their products this, goes along with also a base component, that they can leverage and use as well that, they can rely on that's going to build in and bring, in services, for their for, the base things like security and locale information, that they don't have to worry about on their side so they can concentrate on their product we.
Information. We, didn't want to have each one of these development, teams doing this on their own they, should just concentrate on the product that they they, build out and this has always been our vision of how we build a portal infrastructure, so. Within this class that we built out this base portal, component, you, have it, implements, base, angular, lifecycle, events, with. True inheritance that comes with since the angular 4 came out with components now. Teams don't have to worry about implementing, these lifecycle, events they. Can still get hooks in them but we, wanted to be able to have this in the base component so we can tie into them so, you look on the ng on an it override, that we have this, is where we load in locale. Information, that's been specified by the implementing, component, security. Information and properties, information, and then, based off this component, I'll show on the next slide they have hooks into when this information, is loaded so they can react to it within their implemented, view also. Within here we have a component. Service, taking advantage of dependency, injection, this. Allows us on this component service it binds multiple. Services into it so then its dependency, injected into our base component, for things such as routing, and other, services, we need to call an our base component, so. Now we have this base component, ready to go the teams can implement and go from there and they can rely on knowing, that they have this base functionality, they can take advantage of so how does a team implement. This so. Now the developers, teams basically. Extend. Off of the. Base portal component, this is an example from the asset search component that, we have within our portal so this is a menu of a component that would line up under the area of assets. And. Within here we still do the dependency, injection of the component service so it can get to the base component. So it has a handle on it but, then you look at three overrides, that were within, this class of the implementation, you, have on locale loaded on security. Loaded and on properties, loaded so, the one we're going to look out specifically, is the implementation, under security, loaded. So this function, is going to be called from, the base component once, the security information is loaded for this component so, this team that's developing, this view can, rely on at that point hey I need, to check a permission, on a resource, and whether they have the execute, permission for the search button it, is permitted method comes off the base component as well so they don't have to be looking through that cache to find that out so, now the team can rely, on hey let me do that check for that resource. Tie. It to a boolean that I can tie it to my backing HTML template, with binding, and that buttons, gonna be enabled or not now. We have this base component, we know how to communicate with and we know how to it's, got a contract, within our portal framework so, now our teams can build independently, and know, when we go to the main deployment, and goes out that components, gonna work correctly. But. They built it out now how how do we go about loading, it into our portal and also, initially, I was talking about well we want to make sure that we keep the initial download, time. For our portal very quick and we want to lazy load things in well. This is where we take advantage of routing and deferred loading within our portal so. At the top URL, there you see this, goes into our production environment and you have the bolded assets, first that ties to the top menu area so that means when that route comes in whether, they clicked on it or whether there was a bookmark, it's gonna highlight, the, blue assets, area at the top that has been selected from.
Also We're looking for that again we're saying we want the tools IDE integration. Well, you. Get now with the dart plugin with an IntelliJ, and we, take advantage of intelligence, we're also a java company. As well for our back-end services, so now our developers, can work within one ie within, IntelliJ. On both, dart and on. Our Java side we get the code analysis, the code completion the refactoring I wasn't. Able to build a real complicated, gif on this side because recording, myself coding, just didn't work very well but, this is the dart reformatting. That takes place the dart formatter, and I. Have, to say I love the dart formatter coming from the Java side and all the battles and arguments, over formatting. And going, back and forth it's really nice that dart comes out with just one formatter, and you can tell the teams there's. Formatting, already, within stick. With it we're not going to come up with. Now. The teams have built out all these different packages, and we talked about earlier it's like well we need some sort of dependency management, to bring this all together well. This really sold us using dart as well we, have our own internal pub server that, we publish, all the core packages, up to that the teams can take advantage, of and they also publish, their views. Up so we can bring it into the main build that want to talk about later on so, we've fallen in love with the semantic versioning and that takes place that Kevin. Was talking about earlier we. Use the current syntax, on it and we avoid a lot of breaking changes and conflicts, that come in so, on this slide here is that it's just an example pub spec yeah Mel that shows the URLs of our internal pub server that would take an advantage of to bring in some, of our core packages, to one of our component, libraries that we build up. Now. We need to bring it all together okay, the teams have worked on their views and we need to bring it into one, main build so, on the right side is, our. Main, pub. Spec gamal that's in our main build I think. It's about 35, plus packages, that we pull in from our main internal, pub server into one build so, our teams can work independently, they, can publish off their packages, and no one we build this off we pulled in with the semantic versity and make sure we pull in the, proper version from our teams this, avoids breaking changes so because we make sure we handle the versioning correctly, and if there is a breaking, change that comes from one of our core components, we make sure we notify our teams at that point. But. We also need to make sure we have automated, builds, we, had this in the past and we wanted to make sure we could do this with dart as well so, we use Jenkins, as our, continuous, integration build, server and. We have built off a process, within there that, runs two, to three times a day on the, main portal framework build so our teams can make sure they deploy their packages, it'll be brought in and go off to our test networks so.
On The right shows our main build and this, is going through at first a pub upgrade to bring in the new packages, does, a pub build after that, point it goes ahead and tours up the entire build sends, it off to our internal nexus server and then, our devops teams pick, it off from there and, deploy it off into our test networks so, really our hands, off at this point so, our teams can work independent, of the portal framework and they can rely on knowing, that this is going to go out into the test networks on top, of that we, have we added some traceability, into this automated build in the, backing HTML, we put in when the deploy date was what the version went out so. That our teams our development teams can say hey did I make it into that deploy we, also put, out and only our test network deploys the pub spec lock file so they can look at that out there and say oh man I didn't. Make it I missed it this window but I know it's gonna be in the next window my newest version. So. A trust wave we are extremely. Happy with our implementation, of angular Dart in Dart we've been internal, at the company for about, a year and a half internally. Using, our portal we, went beta at the end of last year and I'm happy to announce this quarter one we have gone GA in front of our customers, it's. Worked wonderful, for us. And we're looking forward to coming up soon with. Dart, too and also. Angular 5 the, dart dev compiler we want to start using to get out of using dartium, and going straight into chrome and with the dart dev compiler and this. Quarter we're starting to develop our mobile solution, within flutter so we're going to take advantage of our middle layer our, business layer and we have a core packages, to take advantage of those core services on the backend and just, focus on the UI for our mobile solution. Thank. You.