DSpace Angular UI Development, 23 Aug 2017

Previous Meeting

⏯

youtube image

►

From YouTube: DSpace Angular UI Tutorial at 2017 North American User Group Meeting

Description

Angular UI Tutorial session from the DSpace North American User Group meeting on August 23, 2017 at Georgetown University. Session was taught by Tim Donohue (DuraSpace). Slides from tutorial available at https://goo.gl/pWFacH

A

B

Right so Tim Donahue is going to start the tutorial.

C

I'll mention these slides were based off of a longer workshop that was done trades this year between myself and our wallet at Meijer.

C

So it's a combined effort that I'm not going to go through all the ones and repositories because there's a lot of his hands but I'm gonna leave that to you that go back and work through those Chris or a hands-on experience and ask questions on slack or the endless unheeded problems with that with the enzyme has affected things, but this is going to be a little bit more of a tutorial aspect of the workshop, where, with a tutorial I'm going to teach more about angular how its structured and change things with an angular and honestly I want you to ask questions throughout here.

C

Please just raise the int or yell something out. If I don't see your hand up in the air, because I think there will be questions throughout it like to deal with that answer them as we go. So we can kind of look at code snippets as we're going through and kind of address this question because we are going through this.

C

So the beginning run of this new tutorial schedule, so it's really kind of do a quick review about a memory architecture or just showed yesterday.

C

This need the ultimate is going to be this middle section, introduction to angular and the concepts of code code snippets, show you how this works in the deep space problem: I'm not really going to get into the hands-on aspect, because we just won't have time for that plus we have to go ring, set up laptops and everything like that, but we have a detailed documentation on that from the workshop at open repositories off the wiki there.

C

So you can go there and there's slides at the end here that also link to that and walk through a staged process of doing coconuts. You can actually look at it get another posture which has every single code of this hands-on aspect, so you can follow after the session.

C

So quick review from yesterday in case you went out and had a lot of money forgot everything, but these were our top eight things for why we chose angular after the after the analysis, we did last year with the prototyping UI prototyping challenge and all that not going to go through all these I mentioned them yesterday, but the big ones, of course, providing that dynamic user experience making sure we can support non je s browsers and non je s. Things like crawlers Google, Scholar crawlers.

C

We had a lot of fun developing with this and found them to be very modular. Customer customization friendly a little bit more though about angular when we were first doing a prototyping of angular was on angular 2.0 and health. Immersion I. Think I mentioned this yesterday and moved into beta and actually released in late 2016, but as of now as up to angular for I, think it's 4.3. They skipped 3.0.

C

Strangely, they decide go from 2 to 4, but it's all backwards compatible and the way they're doing the angular development seems to being much more controlled now in terms of making sure juice or backwards compatible. That upgrades are relatively seamless. Our code base is now upgraded.

C

The latest angular as of at least a week or so ago, of 4.3, just what we're working off of and the Ford auto models is kind of streamlining for their speed, but it has Universal, which is a very important plug-in for our purposes, don't get into that built into Fordow 10x it separate, and then she gotta.

C

So what does any work? How does it work? This is the basics, of course, so we're generating HTML via JavaScript into the client side of the server side with 12 you don't you. Obviously, we've got data from the REST API tons more about that I mean Villa Rio. They got great resources. Every tutorials and I should be slide yesterday, but I wanted review them briefly because we're going to go through and see how this this works a little bit more in action and how and what's behind this, but but as I mentioned yesterday.

C

As long as your browser supports JavaScript. This is sort of the interaction that you'll see where the first page comes back as HTML creaking out in the server and we get a counter at the same time. The reason why it does that is quite important, even for users to have JavaScript is that it provides a very quick response.

C

It's a lot better than if you had to load the entire JavaScript app down first and then my application, so the first page is already loaded while the app is conceived when you download and then as you're, interacting with that first page, the app this image to download by that time, you're able to interact directly with the rest api that time forward, and so that's the reason behind development within angular 2.

C

And you look for- and, as I mentioned yesterday with the javascript, when there's no JavaScript endowment or were crawlers like Google Scholar, every single request is returning that HTML that pre compiled HTML- and this is what is actually provided by that angular universal plugin. I didn't mention this yesterday that it's quite important it's out of the box now with angular 4, and what that provides.

C

Is that capability to do server-side, rendering of your entire application, using the exact same code that the client is using so they're, seeing the same thing using the same code, there's not extra code weight that we need to do to support that regular Universal. There is sometimes certain third-party plugins with angular that may or may not support purple, sometimes in selecting third-party plugins. If you wanted to have that full SEO compliance, it needs to be able to support the angular universal plugin.

B

Been invaded, yes, does the singular Universal also know how to simulate like a user yeah, really pretty good, Shibboleth authentication or something or is it like? A water jump browser I a little.

C

Bit one of its really built around that quick interaction for that first pit, as well as SEO compliance and since search engines don't often log in and authenticate. That's a very good question. It's not going to necessarily I mean the code as long as the code after you've authenticated is so compliant with angular Universal, which most of it is unless you're using third-party plugins that don't fully support it then you're going to get that same experience.

C

I will say, though, that our concentration and billing dspace out is to make sure the sto compliance, even with curvy space. We aren't really trying to provide great SEO overlap. The submission process, or things of that nature, think that's in the same way with with D space, 7 I, don't anticipate us concentrating as heavily with angular Universal in that submission process, whereas it really becomes a bit of string and because we want search engines.

C

So so I know that doesn't fully answer your question, but it basically means that on the third and the third party plugins that we're using we're going to be very tight on the public, plugins reason and those public features for pagination like that Universal you know to the other most extent stuff in the submission process. To me.

C

Okay- so I mentioned this briefly- that first page always renders on the server, which means that first hit to your site, that you get a perception of a much quicker response. Just apply the HTML page coming across, rather than the whole app and those.

D

Are the other sort of reasons behind.

C

Angular Universal I should mention that more and more plug-in is easiest angular to support Universal and I. Anticipate most of them are in the future, but there's sort of a transition period right now where people are getting more comfortable with this concept of having that pre compiled JavaScript on the server side, and so some plugins aren't taking that into account. There can be issues there with when you turn it on and start off. It may not appear exactly the same.

C

It still is usually close, but it may not be exactly this in terms of the experience okay. So here's where I'm going to jump I showed the demo yesterday, but I'm actually going to show it with JavaScript turned off here now and so here's our demo hosted at at Meijer. We've got we're in our Google Chrome 12.

C

C

Okay, so in the problem, is these nice developer tools, which is where a developer use many many tracks, but the developer tools also have a lot of cool debugging capabilities or angular since chrome looks versus a Google product, and so it's angular your settings.

C

Let's disable JavaScript.

C

A so now, if I reload on our network tab. So yes, the document these two on diagram, here's this home page, so I click around you'll notice in the the network side of things, we're loading an entire HTML documents, their name really, oddly, because we're using new you IDs here, so you I knew that you are out here. You see, there's a new ID here, requesting the entire HTML page, so we're going communities to collections. So if I go to a collection that doesn't come, become full of content, let's try that Emily learns.

C

Okay, so we're pulling down the entire collection page. You can see over here it's the same sort of user experience that you're getting but you're requesting each time the entire page- and you see all these separate requests here. Each time I hit the button. It's still relatively quick, because this is a very small site. There's not a whole lot of content there, but it's all happening with javascript. Disabled I realized that you can't see that icon the drafts for disabled here for this entire request process. If I.

D

Turned javascript back.

C

On you're going to see a really different level of requests in this network Council here, because we're no longer having it pulled down the entire document so JavaScript back on. Let's go back to our on that chair, so we're at the home page level. We've got the pulldown the application there's going to be a lot of hover over things just what's running, but.

E

As I do step down here again,.

C

Now, from the home page you're going to notice that I'm not getting you're getting a lot of these claims, GS calls here, which is grabbing down the data that we need to go to the collections page and if I hover over here, you can see it's actually showing me.

C

I went to the REST API here to grab your own information about the collections, but I didn't pull down an entire HTML page, and the request process is quite different, so I'm not actually seeing another full request, I'm, just adding little tiny requests to be to the to the the REST API, rather than actually reloading the entire page, which is what makes this much much snappier the JavaScript in you that's going to set very gist of that, and you will be able to see that much more easily within when we do the sort of network do within Chrome or any other browser that supports that link.

C

Questions on that before we go along here we get into.

F

Code next, oh yes, I noticed that when you went to a collection, the normally in now nowadays induce patient if they handle with an election, but I wasn't seeing a handle. I was. Is that going to be going away.

C

So the URLs yes as you're, seeing here as you're, seeing the actual URLs up here right now, we're using the EU IDs right based on the URL structure here, will still support we're still supporting handles and that the hidden links will be provided when she, the item level and they'll still do the proper redirects.

C

But what's under discussion is whether or not the URL at the top here necessarily needs to have a slash handle in there or whether we want to make it slightly more than error and work with the uu IDs and allow us to support other types of identifiers. So you're not creating a slash gable, URL, slash, DOI, URL and all of that, but rather those would act for us with redirects, which is what they are in. In any case, the redirecting you to the proper path where that object, bounces so I, will admit.

C

I don't have an exact answer for ya. That's been an ongoing discussion in the dspace 7 and if you have a thoughts on that discussion or what you'd like to see, I would encourage you to. Let me know or join one of our meetings or just via email and I can pass.

C

Without to clarify, we aren't getting rid of the redirect just the visualization.

C

D

Stakeholders, my human, readable, URLs, so I know exactly what they're looking at, so we can admire that. We call it slow, so we actually write our own every time. We do it for every single resource for ping in there, so that when the assistant director of the Department of Labor looks at a record, she knows what.

C

It is because she can read it as if it happens so human readable is your human, readable, URLs or good. Yes, that's useful feedback to have and to explain, I, don't think that this will be what the final URL structure will be in anyway, because we've also been talking about this new deal idea.

C

Is this extremely long obscure thing, and we don't want it to be this extremely loving, obscure thing that we're trying to grab better model for dealing with handles and other external identifiers and transforming them into something that isn't more of an integral T space identifier? You can do that redirect to the proper location, like you have a human, readable, I expected.

C

C

Document these requests that may be useful or long afterwards, but it sounds like a feedback. Okay, any other questions on this.

C

I'm not going to go back into the rest API demo, because this this tutorial is a little bit more about the angular side of things. But, as you saw, we were doing an arrest request with the JavaScript list was enabled, but those same requests were not there when javascript is disabled because of the fact that it's happening on the server side describing.

F

The data and compiling JavaScript for us.

C

Okay, so now we're going to get in the actual introduction to angular and that concepts in the angular technology, the language and all that sort of stuff I will mention that there's really good tutorials on the angulate IO website that can step through some how to work with data. How to do all this sort of stuff within angular.

C

What I'm going to be talking about us a little bit more dspace centric somewhat, so it will introduce you to the concepts behind angular double and give examples where we're pulling examples from our hj7 codebase as it currently exists and providing some some structure for that so with angular. These are the topics we're going to go through here, I'm, going to briefly touch on known in Canon yarn, which are some new prerequisites for right now.

C

Those may change why the typescript language we'll take a look at that, because this is what you do, the majority of your programming and when you're, not writing HTML and then we're going to look at the main elements within an angular application. These are the four main concepts together. There are some other concepts that we're not going to dig into because they're really quite advanced but they're, not things that we use totally within d space itself right now.

C

These phase, seven angular, has better walkthroughs of the other couple concepts there, but these are the main four things that we're going to be human components, templates services and modules.

C

So when the server side of things there are some prerequisites for building and running the D space, 7 application assistance, we have a. We have no js', which is the server-side JavaScript platform that does the compilation of JavaScript on them on the server side, when we're using an angular Universal, it uses NPN, which is just its way of pulling in dependencies.

C

So it's kind of like a maven sort of thing for note and nodejs, but we're actually using a slightly different version of this called beyond Earth, which is this cute little like an intelligent cat made out of yarn logo there. That is a third-party package manager, that is, that works the same as NPM, but it's actually a lot faster and it's quickly between doing things in the JavaScript realm and it's supported by a lot of the major players in JavaScript Google and to let who are behind Facebook does I'm just platform.

C

We have Google of courses angular and tildes, of course, ember Jas, so there's three main platforms in the JavaScript world and they're all using yarn right now. So that's why they've started to move first purchase using yarn to build things within our application. Some of these may end up changing as we go along with East Bay 7.

C

The main one that could possibly fall out here potentially is known because we're using no primarily for that server side, pretty compilation, another Universal, the angular universal team, is looking at please to support that same level, pre-population in things like Java, so so they're actually looking to see if they can just run Java on the server side, in which case it might just be much more like currently, as in the East Bay, it's holding DNA that automatically there and it's providing that server-side calculation.

C

So we'll see how this changes over the next coming months in the final release, but these are currently our requirements for when you're getting up and running with these basic angular applications.

C

So that's all I'm going to touch on with that tape. Script is is the main language here that we're working with is an extension of the latest version of JavaScript, which is the the actual standard behind. It is called es6 and javascript right now. The standard itself is actually following the typescript language more and more. These days, which is why we like angular and like the type strict language, is that it seems to be the direction that javascript is going in, and what that right now Dease are most right.

C

Now is basically most most web applications do not even support the latest version for navigation. Most web browsers do not even support the latest version of JavaScript. However, typescript was able to kind of compile things down to the current version that browsers support, and it allows that capability to be on the latest and greatest JavaScript without the browser's having to understand what that pasty-faced JavaScript.

F

C

What type script basically does at a basic level is adding types and annotations to JavaScript index JavaScript. Look a little bit more like Java or.net you're, not dealing with bars. You've done guys for programming, it's not everything's are variable and you don't know whether that's a string or maybe them what it is. They can actually be typed and that's what I'm showing you down here at the bottom. We have a private variable called title, and this this title must be a string. So it's a string. This. My item must be an item.

C

There's an item object there and if you want that any type that that sort of bar functionality there's in any type as well, which means you can stick any sort of variable within that pipe gram variable there. So it's a very tight strict language and that's beneficial in IE development, and when you integrated development environment they can find bugs before you would actually run the application. So as long as the idea understands type script, it can catch things before you go and try to run it and compile it and say you know this.

F

Isn't a strainings actually an item that.

C

You stuck in here. That's that's.

F

Wrong that sort of stuff.

C

So, as I mentioned briefly, it compiles down the regular JavaScript. Errors can be detected of that compile time within the IDE I'm compiling down the regular JavaScript is another very important aspect of typescript, because that means it types, but for some reason or other goes away in six months goes away in a year we can compile them our entire application just to basic JavaScript, and you can start developing against that basic transportation. You want you I, don't think that will ever happen because Microsoft's Paymentech script Google is building angular on typescript.

C

We have big players that are following the typescript languages, as I mentioned, javascript seems to be following tight script as well, and so I doubt that that would happen. But it's a benefit here that we see our texture and there's also a lot of other concepts in terms of interfaces and other sort of things that are in Java in typescript. That you'll be familiar with if you're familiar with any sort of Java programming flag, there's more tutorials and typescript. Laying that word, but we're gonna see a lot more textures as we go get actual code.

C

That's just you know what typescript is why why it's important for the angular here is an example actually of some type scripts. Hopefully you can see this not sure if it's for me as easily visible or not, but I've never heard some lines here so the top here you can see a new import statement similar to Java, so I'm importing something that's called metadata. That's an object from this other file. That's the metadata important in my class I can create abstract classes, so Java sort of concepts exploiting an abstract class called peace based object.

C

It's going to implement something, so you can implement a different object. This is an interface just like Java world we've got a fashionable object, interface that may define certain methods and imminent when you've seen on implementing casual objects, and so that's that's how you create an abstract class and implement something. This class itself has a couple variables that belong to our properties that belong to it. So these based on because a name, that's going to be a string.

D

C

Also have some metadata associated with it and then it's going to be an array of metadata objects, I'm.

E

Seeing get the idea.

C

This is this is a real class in the DS based code base. So, as we all know, everything has a name in these spaces, usually the title or candies and collections that ship, a name which is stored in DC title and they all have metadata, as we mentioned earlier today, as if these base five, all these objects have metadata, so, whether you're working with a collection community, whatever it is, they have all got metadata within them all the DC fields. We then have a method down here, we've implemented. This is a fine metadata.

E

C

Takes in a key, which would be like a DC title, which happens to be a string so we're taking a key go to the metadata field and an optional language. The question mark here means that you can include a language or not. If you don't, it's not gonna worry about the language. You say: I want the DC title, that's English or in Spanish they look specifically for that. So that's also a string here and it returns a string. So the syntax here is different.

C

Then then JavaScript traditionally or than Java traditionally, but it's very conceptually similar to a lot of other patterns that you've seen the JavaScript or Java. It's just that the types here often come after the variables. If you're used to a Java, we have things. We'd often have like a string key here you say key is a string. So that's the fine meditative method, we're defining a different, constant I, mean metadata. Here, that's going to use a different object.

C

This dot metadata is this gray of metadata that we have here, and it's going to run a find on that and look for any metadata field where the key of that metadata field matches up with the key passed in here.

E

C

Where is the language is either empty if that's not there or the language now, so this is kind of a fancy way of doing this in a JavaScript sort of way. But it's just looking for that levity to feel a lot of our array that matches up with the key to the cast in our language surpassed us, and then it just returns.

C

The value which is a property of this meditating process and when you're working on this in an IDE, then because typescript is typed because it understands what a meditative object is and the properties there are you're going to get things like auto completion and stuff that are not really as easily done in a JavaScript but you're very familiar with within a Java sort of. So when you cannot meditate on the dock, you get a auto completion.

C

The charity that you can add value an extra tournament value or that you can call a method on that or things of that nature based on that objects, descriptions and textures. So that's a very basic sort of alignment of Howell type script looks the syntax does take some getting used to, but it starts to become second nature after you play around with it a little bit within an IDE the rocket operator. There is, you know, anonymous function, body or something.

C

That's the terminology, because it's a lambda function, so yes, it's! Basically it's basically doing a fund. So it's finding all of the metadata objects within this array that in here it's a meditative, the assigns to the value to M, and then it's going through all that.

C

That's basically looping through this array and looking at the keys of that array and looking for a situation where the key and then erase the same as this key, and it's also got a matching language so that it's for lambda function, its concept, it's more familiar and like Ruby Ruby has. That is a as a concept.

B

Known each other nine Sukeena.

C

Yeah, so it's coming another language as well: it's not a totally accurate concept, but it's also one that that types good supports, because it is actually a available and one of the later versions of JavaScript that hasn't even come out yet doesn't work in Russia. Yet the idea six turn.

E

To function of feed, the results to available right, correct.

C

Yeah. Well, yes, it's almost like a loop, it's basically kind of looping through we had some impromptu looping through the amenity array here the spine function of doing this match and betraying the value returning the first value that matches into this constant metadata here and then returning the dot value down here. So it's kind of a conceptual idea of how that works. I, don't I, don't know if I know well enough how to explain it more than that conceptual idea there for the realm are not going to give you some emissions. Yes,.

G

So we have hair mat chains, we have abstract data types like a tree structure. You know basically.

C

Yes, yes, yeah I want to say it probably is, but I don't know for sure yeah that I'm going to make first off here. I am coordinating this project I'm not doing active development. So some of these questions, I will probably answer a little vaguely for point. You say and We Need to Talk cards. Article is the one who does the lead development at at my own on the angular application, as others as well.

C

I know enough that I hopefully be prototyping last year, so I didn't involvement last year, but I'm a little bit rusty currently with my but the absolute latest version of angular, or so some of these things, I needed others.

C

Okay, so that's our face, Israel other questions, Uranus well, beginning in two more examples of type scriptures: we go there and look at the various angular concepts, because this is the language everything that's written. It essentially anything. That's that's processing, language of the themes. Okay, so let's go along here, so this is taken directly from the architectural guide or angular, and then I feel that this sentence kind of really describes these concepts really well so you're writing an angular application by composing HTML templates, they're, HTML templates, you're composing them with some angular ice markup.

C

So there's additional markup tags that you can create that are angular, specific you're writing component classes of that manage those templates. Are there ways of componentize in those templates? We're gonna see how that works. My moment having an application logic and to services services are really what interacts with the rest api. So that's where we're doing calls the REST API to find out items in the collection or things of that make sure instruction them in a way that you can apply them in the templates. And then you can box up this stuff into a module.

C

Module arise things so that you could actually have a third party module or or an extension module or there's even modules within D space, for how we deal with collections or those communities versus item modules and we're going to see all these concepts and go into the code in a little bit more detail. This is for the basics of kind of how this all fits together and we're gonna go through these in this.

C

This general order here as well to start with templates templates are what compose our HTML simply play and they're used by components we're going to get into that as as the next stage after templates.

C

So templates really are HTML, like almost every single HTML tag is viola. I have a this is not what it says on the angler side. Actually not funded HTML taken is invalid. Yeah of that so I'm not sure what what tags are not valid to.

G

Be honest but on the angular size.

C

They almost every HTML is them. So if anybody.

D

F

C

That don't work in temperance, let us know so we can figure.

F

D

C

Force so templates can load other components. We go there HTML tag. Each component has its own HTML tag and eschewed. That looks like a moment, so it allows component templates to little components and components to little components, to make a very modular last look and feel, and comparing templates as well I'm going to go to the syntax behind templates. This is an example template it's not the full thing. It's just showing you that it is HTML like with some extra stuff in there, some extra magic.

C

So in this particular case we're we have a template that is going to be displaying on top level communities which you may have been able. Yes,.

C

So something and we'll get to what? What does this later on something? That's created, a variable called top-level communities once this top-level communities has responded, have succeeded so once we pull them down from the REST API this. If statement, this is an if statement with an angular, so this asterisk MGF is a special property on that sort of HTML link tag that says once that has occurred, display this div until that does occur. This is invisible to the user.

C

The HT no does not appear until our top level community's going to hold down the aggressive yeah. So if statements in angular this is how they're structured you have a statement, and then you have something that is a boolean I'm going to get more into what some of this other stuff it is. The async is just saying that's an asynchronous request, so, assuming that has completed, then we're going to display once in our div. So here's an example of a translated key.

C

So we've had something called a Home tab, local communities header which, if you're familiar with you, know the internationalization of the keys. This is how they're, evil and angular so there's something that is this key. You pass a new pipe into translate, which is just a key word within the angular language that says: I want to grab the translation from that key whenever the users print languages. So if they're using English it's going to wrap the English, translate version of bhakti and it's Spanish or whatever else French, it's gonna go out that other translate version.

C

Just gonna. Stick that in an h2 tag, that's a normal HTML h2 tag. We have a normal paragraph with a normal CSS class and prepares another translated key that it's grabbing down and sitting in the deck a paragraph with certain CSS properties. Now you can then see a list here which I don't have closed down here because ran out of space, but we have a for statement now.

C

Here's an angular for statement, Astra's ng, is kind of how angular likes to start all of their various sort of looping an if statement sort of things so we're doing for let community of top-level community is not payload. So what this is doing is the same for every community within this top-level communities list that comes back. The payload is the list of communities that comes back, we're going to loop through every community there and for each community.

C

We open up this li and within that oli we then have a paragraph that is grabbing things about the communities you get the community's name out da bikini. These short description out sticking those and some spans, and we have a special property here with an angular. This thing called a router length, which is basically a shorter syntax for developing your cats.

C

So it's saying I'm just going to create a path to our slash communities and stick the community ID on the end of that, that's just an easier way than having to type out the full URL pattern. So that is a translate that whatever your URL pattern is and your angular app communities on the end and then putting the specific community I see. So that's paving a link to that particular community page within your application.

C

B

It also needed for the angular universal. Yes, that's! So it's also a.

C

Property that angular universal is aware, so that's just kind of how you how you, how you design a sort of local links or relative links within an angular application, as you already use the sprouter link property in square brackets. So some of the syntax is here a sort of weird when you first get into this. The fact that angular likes to create asterisk MGE statements and then these sort of square bracket properties- and you also eventually see some parentheses properties as well, and they have different sorts of medians which we're going to get into.

E

Yeah Martha, so what's going on here with the we're in semtex, is this is not HTML yet.

C

Html, but after building yes and for loops within HTML, so it'll be transformed into the final HTML. Yes this. So this is the template. The template is very HTML like, but in life. If statements for loops things of that nature to kind of simplify, so you don't have to you know- create the entire HTML from scratch. So it's a text template.

E

That a lot of the content that it is HTML correct.

C

Yeah and like I said, angular advertises this unless every HTML tag and every HTML property works out of the box, I get to find one that doesn't. But if we point we should, but that's part of the reason, all weird special sin taxes, so hTML is never going to have something. That starts with an a stress in G, which is why we're using that to signify snip statements and HTML also doesn't have property surrounded with square brackets or parentheses. You always have things like class, that's the HTML property.

C

So that's the other reason for the weird syntax there as well. So angular is trying to figure out some other ways they can syntactic ly represent this in HTML base, but just as easily had over each one's in here the paragraphs things of that nature and it's all equally valid in terms of just tweaking templates easily and quickly, and hopefully that's very clear how that works and you'll see as we get into components how components are very powerful to be able to move around for the same sort of way via HTML structures.

C

Any other questions we'll see some more. This one go to.

C

Okay, so this is where I get into some of these other syntax things. These are hints, there's actually good hint page on the angular site from very, very common template, syntax things, I pull out the big ones that we use frequently see. Hey, get these swirly brackets around some sort of object, value or just even a project, that's just grabbing out and printing the value of whatever that variable is so that's a JavaScript variable of some sort, and it's going to print out that value.

C

If you surround it in the double squiggly brackets, if you have these square brackets, what this is actually doing is it's creating a property or it's setting a property to the value of whatever's in here this again is a JavaScript value, so square brackets are setting a property in this case would be setting the divs class, which is a valid HTML property to whatever the value is object that class- and this is some sort of variable within JavaScript, so whatever that helens would be set to an HTML property called class.

C

That's a very nice example, so angular I always call it says that square brackets are going like right to left so you're grabbing, what's out of here and you're putting it into here, whereas parentheses go left to right, which is sort of a they call it finding a terminology. So here you have a button and when somebody clicks that button this is an action when I clicks that button, it calls a method, and this method is you'll, see it is defined in a component which we'll get to in a second.

C

So there's a method that gets called it does something and it passes.

C

So this is like a left or right action. This is a right-to-left action and then string. Usually you can add the two together which gets kind of crazy. So now it's like a left to right and right to left, which means that when so, you got a component here when this title gets changed, the title goes into the name variable and changes. The name goes into the title: poverty.

H

C

It basically allows for very dynamic automatic saving abilities. So if you think about webform and say you're needing an item- and you want to edit its title as soon as you type that you title in, it's automatically saved back into a dspace and as soon as the state happens in the dspace level, I'm going to sinks back up to your web form.

C

So it's kind of like a two-way sync process of where that data gets saved and it's called to a mime I mean is everything there there's also, and it's the equivalent of down here, that you can do it in this syntactic sort of form. But it's also the same as this. So this is the left to right and right to left version. So, if you're updating the title, it changes needs and if you change the title, it clicks and creates an event that changes wait.

C

I did you change the name that goes to the title and if the title changes it goes, it remains under that's the longer syntax there.

C

That does get a little bit weird to understand along the way, but it becomes a little bit more. Second nature, as you start to work more with components, it doesn't happen very frequently than the day seven days, you're much more often to use the patterns of these first three, because there's not a whole lot of places where you're working with this is mostly useful to form situation where you're working forms, as I noted here as well. We have these asterisk sort of syntax. You've got an if statement so you're only going to show this tag.

C

If whatever is in there is true, you have the four statements, you're going to repeat this tag for everything inside a list- and this is just for every item in the list. You're gonna lie and then there's another one here. There's some special properties here like in G class, is just creating. That is another way of updating the class property in HTML, so the HTML class on the sphere would be set to the value active.

C

If this evaluates to true another sense, a way to be able to say if a certain thing is true, I want to set one class on it and other things is true. Then I'm going to change my class, something else: I just provided in place of one CSS, so there's great cheat sheets and template syntax guides on the angular site of the things that allow you to get much more deep and explaining really good examples for all of these and how you would use each of these.

C

But these are these basic sort of structures within a template that allow you to generate that HTML much more easily within I know those may not be 100% clear. They don't they're! That gives you the basics of what you'd be working with. Then these templates and how you kind of structure templates to create HTML.

C

So that's the basics of composing HTML within a template within, so we're going to go into components here to talk about how these work- and these are tied very closely to templates- and this is these two together of the big concepts here behind behind angular and how you create a custom theme, modify the look and feel most of that is going to be done on the template layer.

C

But you want to understand a little bit of what's going on in there unless you're doing basic changes like just changing CSS properties moving around HTML, that's how we gonna template layer. The other two things we'll get to here. So moments are really the building blocks of angular they're. What what angular is based off of them create the modularity that exists within angular and allow you to essentially create new HTML tags, custom tags. So we have a PS tags that we're creating for T space that provide our needs based component.

C

You can name them whatever you want, which we'll see you can create your own custom components. Hopefully you could share them within modules which we'll see in a little bit as well, but they consist of a neutral and a controller, so they're very much kind of a MVC programming model, so the model that's coming back is coming from like the REST API and then the template district as a controller in JavaScript methods and the new aspect, which is the templates they saw everything literally on the page, is a component.

C

So this is a an example item, page and circled. All the various sort of components here in our current code base, we have a header component and a footer components if you want to modify those those are separated out and their own template abuse, TweetDeck template briefly, and it's modified across the entire site. We have thumbnail components, display the thumb you know this one doesn't have to have one and file components to display the file list. We have collection list, components were actually object, list, components where you have different types of object list.

C

In this case it's collection and we also have item lists, components which, which would display list of items, and then we have a metadata field, components which all inherit from each other. So if you want to display data, it's going to be in a format that comes out. Authors are ordered very specifically, and you may want them to appear in that specific order. Of course, you can move that around your eyes and links need to have be hyperlinked.

C

An abstract may have its own sort of display, and titles may be bolded and all that sort of stuff. So you can have different customized components and look and feel based on the type of amenity to field that's coming back and an angular. Actually, the entire application itself is a component. So all these components are nested within an authority component, which is the angular applications, its components, all the way down, essentially opening doors and a component is where we get into these Java sort of functionalities. So we can implement interfaces.

C

A component can say: I want to I, do something when I Misha lies on an it and I. Do something writing a shutdown on destroy. It can implement various interfaces that they can extend. Another component where one component may return something the other one can extend. It, enhance the look and feel or change some functionality there. They all come with a selector, which is the HTML tag they respond to.

C

So a component called a news component could be represented by a tag name news, and that looks normal HTML tag and you treat it like a normal HTML tag in your templates for what it's actually doing the same. This is for my new support exists, and this is where I want that to load within my templates. They.

C

Don't they all come with a view which is their own template and then methods which can be actions, controllers, I'm,.

H

Curious buying for the over for the application is.

C

Really because these things are essentially templates, components and components and templates templates nest all the way down. So it starts at the very top with the application being the overarching HTML page.

C

Because it allows you to basically create nested HTML.

C

More abstractly, if the application was the component itself, it would have to be something else. We have something else to only have one dress and it does exactly what something else does right: yeah I think that is kind of why they structured it. So there is literally a half component HTML, which is the overall thing, and it just creates that head HTML, head HTML body. Then it calls the other role.

B

That it needs in Timmons there been a thought of like we're.

B

These basic instance would start doing customizations on these components or I. Think.

C

That's something we want to get more feedback about, so there's a lot of power here in terms of where we how we can make this easier for people to make musicians. So that's a complete eyes to the point that so it should be easy to manage the header if you can go into headaches, going to tweak that butter or less the same sort of thing. A managing title. Site-Wide is quite easy.

C

Like your your example of doing our artists want to be sated, septimus trim as artists and authors, one of the authors that should be relatively simple to.

C

Do that sort of thing, so we want to be able to make this as componentize and easy to tweak as possible, but you know: there's always going to be some sort of limitations that occur basically I. Think so I think that's where I'm really hoping to get more feedback from people as you're starting to learn this structure after playing with the code on. Are we providing boundaries in any way? That would be hard for you to work with this or is there ways you can do it better?

C

So so we've tried to to make it as easy as possible.

C

And we are very much to working on the best practices of how I treat level stuff over trying to keep all those things in mind that were all very well aware at the future modify America. So if you find yourself forcing late tool, complain, yes, yeah exactly! If you start to play around, then you would do something locally. You know do something locally that might be complaining.

C

Let us know we can keep that in mind. I mean the people who are working on this are major service providers work with a lot of institutions of class services. We do some of that within various spaces. Welcome honey! Keep that in mind. We all have individual institutions with their own various needs, so we're trying to keep all of these needs in mind.

C

The more people who can give us new needs and new gotchas that may see without it, because everything kind of training balance this all out and make sure it's coming beneficial for everybody and make easier.

C

Here so covered all of this, so here we actually looking at components, sort of code, so here's an example of where we're calling our our header component. So we named our header component, TS header. We purposely named all the t's based on the Box components, starting with D s, so that makes it easier for you to define things locally and it's not going to conflict with our component names. You just don't define your components named es and you're like no problem.

C

Whatever you want locally, where you can modify the behavior that gets that components if you want locally, but that's kind of the naming convention, we've started using four key space center and that's just important to note, because you can name these literally anything you want. You obviously don't want to name it, something that would conflict with HTML tags, because that would be really weird. I'm gonna call this head or anything of that nature. But you want to name it something that you know: weeks/months your institution as you're creating components.

C

So this is literally how you call a header component and here's our footer component down here as well, and you can see we just got a Anna did of a veteran Pierre here. The photo will fit here, there's a main tank here in the middle, and so you can move things around. If one of these was like a side menu, you can move the side menu around just by dragging this tag in terms of the components all modifiable as a location. It appears within that template and so behind. That is a component class.

C

So this is a class entire script that defines that vs header component and you'll see here it's got a selector, so it starts with a at component, which is which defines that this class is implementing a new component, and so this is a special syntax within within angular to define on it. A component must have a selector, and so that's the tagging. It's identify ass, so it's a DES header tag and it can actually have its own CSS. So you can actually have a separate CSS file for every single component.

C

If you want, you, don't have to do it that way. You we also have global CSS in supply globally, but it gives you a lot of power so that each individual component can actually look slightly different. If you want it to look different in different scenarios, so you can have its own separate CSS file if it loads up its own template. So since its own little tag, there's something going on underneath that tag and that tag is HTML behind it, which is a which is named right here.

C

It's just called Heather about component of HTML, and so the HTML behind a Titanic is there. Alternatively, you don't have to have it be a separate file in this case, it's a separate, HTML 5. You can actually embed the HTML. That's behind the component right in this definition. If you've wanted to that, it's a little ugly, cuz you're, mixing kind of stripped in HTML, it's an option. You can use if they're very tiny components, but we've been doing the best practice of trying to separate these out into HTML files.

C

So it's really obvious where you can go to modify the HTML for anything. You want to work with. You just slip the things that actually HTML, that's where you can tweak the theme and the look and feel so. This.

E

C

As a component there's the properties that are required of a component, we export this class. We give it a name or call this one header components. This one happens to implement an interface which it does something when it initializes and this class has a property. That's is navbar, collapsed and its value, so it starts out as that's just an empty property when it initializes so influence on an it, and it tells us that we have to implement a method called in G on an X. That's what the unint interface is.

C

So when it initializes its going to start out with is nav bar collapse. People, true or since just commit initial line, is that value to true, and so, as you might expect, that's going to collapse. The navigation bar you'll actually see how that works for the next page courses starting out as being collapsed, and then we're creating a table method down here that allows us to just flip the value back and forth. So it was true. It turns into false if it was also turns to true, so you can toggle it up and close everything.

C

So it's like a very basic sort of component, which is a header that has an arrow mark, some sort of its top toggleable and behind that so here's the template that goes along with it. So we've got our class and we've got our template. So this is the separate template file the template file. We have an HTML button when you click that button look at calls toggle. So this method here this method call, is going back and calling this method within our component class.

C

So that's an example of actually seeing that the click action is calling a JavaScript or typescript method. That's back in our component class that JavaScript method member changes, the value back and forth. So that's the paw global aspect. It just has some some accessibility stuff here and it's got a span and just displays a little logo of the borrowers and stuff like that. So it's normal HTML with some bootstrap stuff in there then we have a div here.

C

Has a value of property here called MGB collapsed. This is where we're using a third-party plugin for bootstrap bootstrap again is just a theming framework and there's an NG bootstrap, which is allowing us to use bootstrap within angular and Euler prefixes everything within G familiar with that very quickly, although third-party plugins are in G dash sort of ng bootstrap comes with this little property here that if we set collapse, it calls the bootstrap collapsed in which news open includes things using the bootstrap, automated or JavaScript, and so that's just doing that.

C

Setting that value to our value of this variable, which in came back from our.

C

So it is navbar collapse is in our component, and this variable here corresponds to this variable here. So we can call the the properties of our component in its template, so we're able to kind of collapse and then collapse that, based on the value of that property- and you can see again, we have another. This is another area that router we had that difference in extra righto, and this is a slightly different syntax for writing.

C

A link to this a home page and providing that translation translation key to translate the whole location, such as opening and closing the nav bar and allowing us to toggle that value appears in that button.

C

So when you click the button, it calls toggle toggle calls this method here which changes our value of this variable and when that value of the variable changes that flips the value here, which tells bootstrap now I'm going to give them collapse or closed flaps or clothes come along the way, so it's kind of they're all intertwined and that what happens between the actual actions within the methods and what is in the template itself. Does that make some.

B

Sense that you know you're gonna do just like a plain old JavaScript event. Kind of they might be cheap queries date when you still write it in the angular way, or will you still like haveth, jQuery layer or some other client, JavaScript layer, doing CSS shifts and other.

C

Kinds of things with bootstrap stuff bringing genetically based on some version, I'm trying to let version of jQuery bootstrap everything else here knows: I can bootstrap, my name has its own JavaScript, and that comes along with it mark. You know.

E

I'm thinking the great paranthesis paper emphasis, then that's something that's significant to the you know: the template engine, if you just wrote a halls like template engine so as you're available. If it's yours, yeah.

C

Yeah, so that would be how you to do it. I was just trying to think of how you, if you can bring in jQuery, separate or FJ Cruiser I mean this it's army and this resistance tracks so huge a breeze already doing a playlist but Marcus prep, and you just trade this a treat of this as if it's HTML again in templates, you could just write a HTML. We can use doing more angular all together. It makes it a little bit harder to do everything you want to do as these two Nelson wrote.

C

This is on site and called a jQuery method, and we treat it as just Jake written test HTML, since it's written in these parentheses click. It knows that you're using the angular sand accidents going to be applying toggle inside the components, pen, script class. So there's there are different options for hennington web dollars for charity on.

C

Questions comments.

C

The hopefully is this making some sense, just I'm, just trying to get a sense of people's yeah, making some sort of sense a little bit. Something I see something I, just as if there's big questions, I'd love to get some of them out here. So we can improve this as we go or in here as well. We're trying to improve these materials to make it even clearer how how this works together and realize there's some new concepts to develop course. Does anyone have a question down one.

G

More thing, one does have a question.

A

I'm trying to make a parallel between the two templates that we have now for the XML UI right, so the templates now you're you're, taking XML and you're running something new with this. You.

C

C

That, if you want to trigger various any different methods, yeah as terry noted, will give you wanted it actually just write HTML with jquery and jquery stuff. You can just do that as it's just passed come out, we no longer need to have developers who understand XSL and they xml and all that sort of stuff you can ever HTML developers potentially learn this as long as they understand the basics. Behind some of these things, like what parentheses click does.

E

C

Don't even understand all the gist and the nitty-gritty, they just understand that's been doing an action. I don't want to remove that just because it looks like you know, HTML does it actually but I'm, hoping that it brings more people into templating for these days, because it should be more interesting knowledge, I.

H

Think it's just getting used to the syntax yeah of what's being used here and what happens in the right.

C

Yeah and understanding that components really are just templates as well they're just kind of creating special tag around another example. I don't understand. Well, we just understand that there's nests and templates, and then you can tweet the HTML at various areas based on that I mean.

A

It's almost it's almost like the XML UI thing in Reverse, because it seems like with it with the templates of the XML that one's you know, you're running through and first your game, your XML, the process you're, getting that the XML in order and then at the last step, you're creating the HTML from that yeah. Where is with this you're like I've, got the bones of your HTML raishin to start and then you're filling in pieces of it by.

H

A

Templates yeah.

H

I mean I think if somebody were coming at this person, even this or XML. This would be ways here.

C

You can even get somebody who just knows bootstrap. They need an HTML to come.

C

In this sort of structure, the.

B

Other thing is: the components: are dynamically loading little slices data as needed, as opposed to today everything has to be available.

E

B

E

Marked Thanos, this kind of separation only works if you document your component so that you can totally feel the web page people, here's a dictionary of the you know the magic incantations you can add to HTML and what they do. We don't know.

C

How we do how they do it they'll just do it that's a good point yeah. It is making sure we clearly document our components and everybody understands where the code is how the code is structured sheet and finding these templates design. We did last time.

F

Yeah so yeah. Now, when I'm working in these space, you know I've got the XML, you I, you know looking at different XSL files, page structure, XSL file, item XSL file and to kind of create the the look and feel that I want.

F

Will the components be identified in such a way that if you you want to just change the item, view you'll know exactly which components you'll go to.

C

Yes, yeah: that is something we're trying to make clear right now and that's something I think you can also use feedback on the way components generally are structured in angular all those optional to do it. This way, for the way we've been doing it is we've been trying to create each component is its own sort of folder. You try me in this clear, there's two cameras. We have an item beautiful. That is the item component. So it's almost like more of the GSP structure. You can go down, you can see.

C

There's a header folder fluid something that there's a footer polar component of that, so we're trying to structure it more like that, but even that naming convention sometimes gets a little wishy-washy, sometimes due to things that are shared between areas. So there's like pagination, you want to look similar across from your paging through items across various components, so we're we're working towards that goal, but I think we could use a lot of feedback on. Does our code structure makes sense? Are we structured things in a way that is useful, that it's helpful so wait.

C

A second we're close next.

E

Amen to that yeah, there's a lot of time, trying to figure out that there's this visual element on my screen right where in the code was that create yet my hours we're trying to track those.

C

Down right, yeah, and so there's also special naming convention here that we are following strictly with angular, that's recommended, so you kind of notice here we can call these things almost whatever we want, but angular recommends. You call the component class the same as what you're calling these files, so this thing's called header pot. This is a header part of the header. We do a header component better component and then then we're just creep mixing with TS there you can technically name is what everyone or trying to create a very specific structure.

C

So if you want to change the header, you can either go to that feather or folder, or you can grab header start at HTML or whatever and find when that is your.

C

H

When you're looking so we doing a little busy.

H

Much more modular than.

C

Like XML, where you're looking at this massive document- yes yeah and so here, I'm just going to show this at the end, anyways.

C

We've seen it a lot yeah okay, so we go to our new space angular project here and I'm, going to get into this a little bit later, but everything in an angular application is under source app, but once I get down there here, we'll start to see the components of their collection, page component community page component tether. Some of these are still a little bit. The footer has not been pulled out properly. We need to do that. Still if I go to a community, page you'll start to see.

C

Collection page looks: we've got the HTML behind the collection page right there and then the same for each of these various components: yeah. That's because to have these rubbers that clearly lay out each of the components. You can just go into that folder to tweak its HTML, but you know we can only do it as good as we're as long as we are making the same as I'm.

C

If you all are so, if we're making bad assumptions on things, I mean help us say: look I, don't understand how in the world I would tweak this and actually looking at this I see, there's a header but I don't see the footer one. So we must have the footer when embedded somewhere somewhere in here, which means that there's a problem, probably under core yeah there. It is yeah yeah.

D

C

The footer component, somehow that embed under core, let the heavier one, is at the top level where they should both be at the top level. So it's something I'll go back and report as a bug that we need to pull that one Knox, that's a common on for a monster, but this is. This is exactly we're trying to create a structure that makes it easier to work with.

G

Hospital I know one thing: I'm really enjoying about this: front-end development is the Oh to find of the code that matches this visual element. Nitrous right-click is inspector. This like web development tolling, is so good. One of my own, my doing development in to do this amazing.

C

On IDE, yes, yeah, there are bodies that understand angular natively in pipes creatively the best for you one out. There is actually the type script ID provided by Microsoft, which is visual code, studio, video studio code or something like that yeah. It.

D

G

Visual Studio.

C

Now my memories in a long time, you know my heated floors, have you out there, but I tried it again. Try it.

D

C

It's very nice work, great debugging capabilities being able to like step through code and all of that browsers now like Google Chrome, especially you can actually do some debugging within the browser. It's tough to this browser plugins that understand angular structures, and so they allow you to step through their code a little bit or you can sister where problems are I'm within the browser's from stops. We started a resources page on this on the wiki for various tools that people that we found useful, there's still things that we get in hands about.

C

That is rayna's, mostly just a list of schools. We need to provide more guidance on this, but it's mostly because we're still learning how to use these tools ourselves.

C

In crema, this works so much easier in some situations, so for things like that, I think we can improve upon, but the tools, the tools are there and they're getting better and better on it's quite impressive, with just their capability to do some of this work and there are other IDs as well available. There is a Nutella IntelliJ natively works with it as well. That's a k1 there's a couple other ones too, and there's also things like atom, which is.

C

C

C

C

C

So we're working with the dating components and providing methods to do things, and the templates are great. You know the way we get our data is through services. So the main service here for d7 is really just.

C

So services are kind of like reusable chunks of code, most.

D

Use them for the REST API that if.

C

They're out there sort of methods that you want to share.

C

And that's the way, I just not not duplicating your message, don't suppose you want to have in different places, so so they're used locally a little bit up kind of globally they can do. They can grab data from like a REST, API or components. They can also do things like modify data. The things you would call when you're, actually setting modifications an item or the service would do all these scenes actually do that edit and it would call the REST API.

C

So the service is kind of your interface to the REST API and they also support things like dependency injection. So this is something you're not really going to need to do much with that. It's worth understanding if you want to get in that code some. So this is where a service you find reusable chunks of code. You might want to separate those I'm going to service and you can make this injectable so they're easy to load with a number components. So this is an item data service that exists to make it injectable.

C

You just put this this little annotation on injectable, that's defined, tells angular I. Have this thing? That's a class that defines some method to thing so I left out all the methods and what it defines a method in this class. It's injectable. So by doing that, that now means that any component you want. You can just pass that in as into the constructor of this component, and it knows that when you pass in that service, you now have access to all methods of that service.

C

In this items variable so anytime, you know use that items variable in this component, its reference to the service, and you can call any of the methods need all the dependency injection are required within the angular round. It's just a defined and injectable and then just start using it an air component and that's it. So it's kind of a nice way to be able to create services that do whatever you want them to do mostly right now: they're interacting REST API, using them across components.

C

So here's our REST API layer, a snippet of a REST API service. We have a rest, v2 service. It's got a constructor takes in an HTTP, it's separate HTTP service, which is a module coming from angular. So it's just using that to be able to HTTP request, and then it's got a get method that that can request a URL. They can pass some request options along the using that HTTP servers.

C

It is a get request and sends those off I'm not going to go through this kind of detail, but basically sending them off and then catching any errors down here and logging them to the angular council. If anything comes back as an error, so that's kind of adjusted it there's a little bit more in here. It was this concept of observables, which I'll mention very briefly. If I get a chance here, but it's not a understood, mostly you're, not going to touch this area of code.

C

This is an example service, beautiful and that's the gist of a service. A service is just methods. That's all. It is it's a class that defines methods those methods can be shared among components. Doesn't you it doesn't do anything else, mostly our services right, an artist raised of interacting with the.

E

C

Services I want to share across components and then there's this idea of modules. All modules are: is there a way of packaging, up components and our services, so you can say I want to create it.

C

You can, if you put all of your local customizations or thing called module, you could just say: I've created three custom components and I have had one customer service and I'm going to call this a jorge benlloch and that's it's packaged up in their Georgetown module and that module, when you include it in an angular project, includes those three components in the one service that you create. So it's just really attaching things up and allowing you to redistribute them.

C

If you wanted to be a like, a package manager like the NPM package manager, things of that nature, if you wanted to share them or use it for your own, so it's just allowing you to organize your application and happy to stuff up and the angular app itself, because I mean everything is it's using this or anything and let itself is its its own model.

C

It's also that its own component, the model itself and who is itself as its component and it has that top-level template, so it really tries to it makes you kind of understand that everything is is, is a module with components and templates. You don't have to use models at all, they're, totally. Actually, the tournament publishing templates but they're our way of kind of separating out bits of functionality for to be more redistributable and that's those are the main four elements here and mentioned. The templates.

C

The components of the 2-dose want to dig into and understand a little bit.

C

What you saw here- and one of those is a return value in here. The observable screening is being returned from this method, and you also saw this.

C

Is is something within it's not just angular-specific, it's reactive programming concept, which means everything. They say everything is a stream and what that sounds really cool and fancy and all that.

C

But what it really means is that when you're using REST API- and these are that nature doing more JavaScript based development as a values, change in the backend as a phase change is something to appear almost immediately, and so all the data points or commitments for the REST API and your app it's been in an ongoing stream, so values get updated automatically as they're changed on the back and just cream or to the front. And so that's what an observable is.

C

Just lazy wrapper around some data and then it only gets unpacked and displayed at the moment. So building a page.

C

Yes, exactly return a value return. This thing called an observable: we're going to wraps the value, and then you pipe when you do this type II think you're seeing okay I know this is going to return an observable: how about the value of isn't right now, your synchronous value, that's all I was doing this pipe, basically just wraps that reference. That's your device, the changes in the next. Second, you reload this page change.

C

This is a weird sort of concept of reactive programming and stuff and I admit just that's the gist of how I kind of understand it and funky, and more that I show you Rick yeah and when I mentioned reactive program.

G

The example that we all know and doing, and we think of as very low is Excel, which is functional reactive programming, as this updated values all the time, although when you want it burn it's not exactly. This I mean it's exactly the same, but we use it a little bit right.

C

Yes, which is something worth grabbing your mind around, just the idea that, when you're working with these observables, that's when you have this type using just to wrap, that is the concept you need and that you're kind of this.

H

Is all happening automatically.

C

Within angular, expand, subscribing and listening to the value, and perhaps the values at that point not subscribes so, and this is also managed automatically through this rxjs, which is this reactive JavaScript thing that comes with an angular, but it's just something worth kind of knowing that it's out there and if you ever start to see errors as you're programming that they're working with an observable pace negative.

C

So you need to really worry about a high level. It's just it's! This wrapper that is around on the street. So.

F

That's the gist of what I'm going to go into there's a lot more out.

C

There- and there are the others- lots of people talking about reactive programming and all that, but it is a free basic concept at this higher level of just being able to gravity and when you want and here's where very month of the code here, a little bit or glean static. The omission of the folder structure here, we're kind of all of the best practices of angular. She got. Config files you've got resources which are mostly static. That's where your translations are a little bit because of integration.

C

Testing that happens for our continuous generation applications that we need one of this, but it's coming along we're trying to do as much integration testing at that level. Most of the code is in the source, app, that's where the angular application itself exists and as you're solid in there, and we had older structures for various components. Currently we have this mock rest backend, and this allows us to work in parallel with the rest team.

C

So, as the best team builds a concept for how the next REST API calls will work so with authentication authorization in mock-up what they think it's gonna look like when you take those mock-ups and we stuck them in here and start using them right away angel so that we can actually program against it at the same time, they're building the concept behind the scenes.

C

So we have a bunch of mock data under here which is modeled in the same way that the rest API should respond when we do these calls and that just allows us to move more quickly and we've got modules, which is where the route angular code all states. We don't really touch that upgrade and stuff like that. You got global stylesheet. The styles directly read there, but, as you saw, you can have style sheets for each moment and when you compile it using node, it creates this disk directory, which is the distributed version.

C

That's just it doesn't exist there by default. It's worth noting that that's hot compiles everything and that's sort of where you're writing your code.

C

E

Slide back with the reactive components: yes with that with like energy specifics with this likely make sense.

B

On the admin side, where you're like, if you're looking at somebody else's.

C

So it's not necessarily.

C

The same but as you were editing things, something changes behind the scenes, those things get pushed to your attic screen as well. So it's almost my edition editing because it's just an automatic automatically unwrapping each time, you're kind of like requesting that data. So the next time you request the data.

C

It's been updated by somebody else before you get the absolute latest data that sort of model it's hard to going to have much more detail right now, there's a lot and if you want to dig deeper actually I say we talked ours or a little bit better examples, because our test is find I. Think even more around this time, do I understand the basics and that it's actually not that complexity concept, but it is treated very complex world.

C

It's just a matter of just realizing that it's just a wrapper around stuff and it's grabbing the latest value. When you ask for what.

H

Is potentially cut down on the amount of the indexing edger and as you're developing within your key space? Possibly that's a little bit more than that back.

C

And right now it's a good question. It's worry about. It comes update, the cache quicker and- and it's also a way of those updates as they're happening. So the caches automatic yep provides a quicker experience, a more up-to-date experience, you're coasting the latest data. There's.

H

Any more about that date as a lot of real world.

C

With real time data loading sort of things but I think that there's even more and more complex concepts there that are underneath it that are built into angular itself, so mark. There's anybody else here.

E

Old enough to remember it's called by name. That's what's going on all by me! Anybody remember Algol 60,.

C

So that was just the folder structure you want to know. I already mentioned this earlier briefly, there is a naming convention were calling, which is the recommended one for angular for each feature as a component they're, all in separate subfolder. That showed that already a component has a naming convention, so all the components files. So we start the component and then the extension. So the TS file is the tank script, that's PostScript!

C

So that's the type script file and that's where you're going to have the actual component type script class. Americans know that the HTML file, of course, is their template, where you're actually generating a lot of that component, even an optional styles, and then there can be a a spec here. These are the unit tests for the component and we've been trying to do unit testing along the way as well. So these provide the inner test to make sure the component is doing what it's supposed to be doing in our continuous aeration system testing.

C

For us, that's what the spec final structure, there's modules, then of similarly named with dot module about TS and services again have something dot service. That's, yes, those are container format and we name them based on whether they're local service or that's.

D

Just part of our recommends, I'm, structuring and meaning on your code in.

C

This was just showing that yeah- this is I already kind of talked through this, so we have the app itself is its own components, its own module. So this might be easier to just show the curve here are school girls. We have all these component folders, but we actually have the app component HTML. So this is the app itself, loading up the upper level header and then the main content and the footer component here and everything else.

C

Current location based on the route draft and so the install visit some components only module in each other component is its own subdirectory.

C

Here we do have a shared folder right now, the things that get shared across multiple components, but we're still trying to figure out how best to structure this so a little bit messy as of right now so there's stuff, that's shared between community and collection, like Tom called age header, it's a little bit of an ugly name, we're still trying to pair out the best way to test these components that are obviously shared and used in multiple places.

C

They made them in a way that makes sense to people, so you can easily appointment and so that's kind of the structure. There there's also the core area, which is where we're putting the core components, which are usually things that have used site line so that cache stuff the rest, API services, the footer should manage to eat here or in a place that there's a the index, we're working with indexes and stuff that nature is all in that area.

C

This is the last couple of things. Is that a lot of these things another thing to understand, with the node package manager, a node in general and building the project alone, it's controlled by package.json. So this is where it actually compiles things and building things together. If you're ever wondering where we're pulling in dependencies and how things are being built.

C

That's the file that does it I'm not going to really go through this in great detail than to say there's the military, where you can do from the various scripts using yarn or no, and then there's where we pullin up on all of our third-party modules, where we're pulling in our latest version of angular or using 431 we're using the ng to strap module, which is a module for the bootstrap theme framework.

C

We're using this thing called ng our explore, which is almost like a in memory database to do caching of the data I'm not going to go into that and work each other right now and then pulling in bootstrap itself and stuff, and all that that all happens in the package that juice just pulls together. All our dependencies have to does it all together as we're going to that's the dev tools we mentioned briefly.

C

Chrome is awesome to work with there's this augury plugin for chrome that allows you to browse the component tree and steal the routes. The routes are just the pads, but each path is going to Kali, so you can browse them and see how the code is structured. You do have to make sure you're running into bug node, because there's a production of regular trims all this off. So nobody else wants your introduction.

C

You go in and and look at all your components and all that's you know perhaps dig through all of your code, or maybe you I don't know, but if.

E

C

Running ain't above them and development, though, then all of this stuff is available to your browser to be able to have anything much easier, and you can also disable the server-side rendering library development allows you to see the more real time data and make sure that there's nothing being cached with server-side. Just so, you don't have to worry about server-side side effects. I mentioned these IDE. Those are some of the ones that we have been using.

C

There's a good resources area on the angular I/o website that has a big list of the content of their II's and tools that we need to kind of stick. We also have our own live off of our wiki and the resources that I linked at the beginning. To this, that has some movies that we've been came up to these been 8 months, 15 years and I'm not good. This is the photos at the end that I'm not going through at this point in time, because it's all hands-on activities that we did it open repositories.

C

There there's a options to show you how great your collection and actually the steps you would go through and creating branches and whether you create this component. That's called an agent collection and you could go through and add some data, and here that pulled negative down- and it goes goes along here and then there's actually tags along the way. So you can see that it's step, one that will create. That component is tagged with in a github repository where we store this.

C

You can kind of walk through this at your own pace, to be able to then started that tag and then there's a next one, where okay now we're going to work with remote data, and so we have like a four stage steps or a tutorial process of walking through doing some development with the DCC angular application and.

E

We went through most of this I'll say we didn't even get through all.

C

This in four hours, which is why I'm not doing it but but there's.

H

A lot of good materials there you.

C

Keep this as up-to-date as possible! So if you want to start to play with this- and we have questions asked on slack myself or art or anybody else in the angular team can kind of help you out and finding what the problem they admitted we were walking through and something didn't work right right and we're trying to make it as easy to learn and they kind of jump into as possible.

C

So with that I'm going to stop there, I'm not going to step through these for you, some slides here of hands-on activities, any other questions either now or later, and welcome your feedback. As you start to angular application.

F

I just got a stupid question targeted now. Nowadays we use maven and then and then we do the ant. So in this environment. How would we be doing the compile.

F

C

Currently, it's actually a separate compilation, so even the the master code in East base never prosper, there's no Deezer interface via rest, amazing and and you'll just get the rest API. The current new REST API and then you have to would have to build this separately for now, I'm using node and all of that. But as I mentioned, the angular team is looking at is to do compilation and some of the matrix Indian.

C

You can probably just stuck them all into maven if we wanted to, or we can look at other sort of tools, that's something that we're still kind of getting our mind around the ain't. Gonna change so quickly that we don't want to jump in one direction, be like oh great. They just solved our problem for us a month later, so we're kind of that's something we're following along either job they have an easy to.

C

If they don't build that into place, then we're going to have to build our own. The sort of solution to make this off easily. To put it was one thing: I will note.

D

Though, because they.

G

C

In our demo is doing.

C

Yes, that is to the answer and we'll welcome your feedback as we start to get more.

C

G

This seems great, is it ready, can I start using the snail you.

C

Can start to develop.

C

As I mentioned,.

C

We've got a lot of a lot of collaboration, going on mainly through admire and for science. Our teenager service providers, but there's been other groups involved at Texas, A&M, Technical, University of Berlin, I, think from Germany and a couple other folks around the world. We've been chipping in here and there you can. You can use the.

E

Browse interface.

C

Immediately, if you wanted to, but it's a basic browser functionality, there's not a whole lot there. We are constantly as we're building these we meet on a weekly basis, as I mentioned anybody's, going to join our meetings, and we would welcome people to just create individual tickets, we're putting all of our tickets as clearly as possible. The github repository the same one right here. We created tickets there as the next step of what we're doing the link it up with designs, designs or and all the other information.

C

We welcome people to either grab a ticket or ask us what's an easy ticket get started with, in which case we'll give you like a little bug fix or something is here. This is the problem. Here's what you think would work. Can you help us out here, but we welcome to be able to get involved. We have a weekly touch base meeting which you are not required to attend, but you're welcome to attend.

C

If you want to, and that's when we plan out the next week, we also all those notes on the wiki and we keep in touch via slack and like there's something to mention.

C

There are specific questions where we're very open to to finding new ways of working. If folks want to do things in a certain way, if you'd rather have more frequent meetings.

C

All the time anything like that works for us and like I mentioned we, we would welcome designers as well.

C

That I want to mention that demo site is constantly being updated. Every single time we do a code commit. It is now set up to automatically update that angular gem site. So if you want to keep in touch with where we're at go to the demo site, that's a great place where you can just start to play around and as we get to the point of authentication authorization we'll make sure that gets posted out the pipe and login is like anime and see.

C

You know how things are going with that demo site, because that's an automated process right now that we're just pushing stuff out as we're building things so I've had some other place.