Angular 2 and You by Pam Selle

Speaker 1: Come on, no.

Speaker 2: Thank you for the warm welcome. It's nice to be at DjangoCon. I'm Pam Sully. You can find me on the internet at Pamasaur and my also dinosaur-related blog, thewebofwar. com. I am Philadelphia. I'm also a Google developer expert in web technology. Currently a software engineering lead at IOPipe. So let's talk about what's going on with Angular too. Let's just get right into it. So if you I'm gonna presume that you've heard of Angular as a major web framework. And what we're going to be talking about today is Angular 2, which is the next awesome version of Angular. If you want to find more out about it, it's at Angular. io and it's quite different than Angular 1. So we're going to talk about that today.

Speaker 2: So the path from Angular 1 to 2, it was blogged about in 2014 and in March with some stated goals to be more modular, to support the newest versions of JavaScript at the time it was turned. ECMAScript 6, simplify dependency injection, make templating easier, simplified directives, which have been a point of confusion in the Angular world. And the beta for Angular 2 was released in December 2015. Now looking on that back on that now feels like not that long. It felt like a long time when watching that design process. And especially with all the promise of how awesome Angular 2 is going to be It was definitely, there was definitely a lot of anticipation about the framework.

Speaker 2: So what makes Angular 2 so special? So there's three things I'm going to talk about today with how Angular 2 is so special. And I'm also then after that we're going to talk about how Angular 2 will play in a Django environment. So building for any deployment target. So this is really awesome. Angular oh no no no. It's too fast. Alright. Angular tube is not tied to the DOM. So the document object model is that API we get to control the client. But Angular 2 is does not have a concept, doesn't have to be tied to a concept of a DOM. Whereas Angular 1 has this limitation. So if you want to use Angular 1 somewhere, that means that wherever you want to use it

Speaker 2: needs to understand some kind of document object model. Not so in Angular 2 That 's actually really awesome because that means you can run it in places that don't have a browser, that aren't a browser environment. So anywhere you can bring web technology, which is actually a lot of places, you can take Angular too. So kind of the the biggest example of this is being able to use NativeScript, which is an open source cross-platform framework for deploying mobile apps. And you can use Angular 2 and Nativescript so you could actually share code across your web and mobile apps. So that's pretty awesome. And especially the way Angular 2 is architected with components, which we'll talk about in a minute, makes code reuse really accessible, which is always a big dream in web development.

Speaker 2: So choose your own language. So whereas Angular 1 is a JavaScript framework, Angular 2 is kind of a as long as it compiles to JavaScript framework. with especially a big focus on TypeScript. So the this is actually the drop down in the Angular docs So you see you've got TypeScript for JavaScript for Dart, which is a language championed by Google. But let's talk about TypeScript for a minute. So TypeScript is a project championed by Microsoft. It's a superset of JavaScript providing, among things, optional static typing, including, you know I know it. Let's talk about types. Types are really awesome.

Speaker 2: Really like those. So they're nice to have when you can get them. So you can uh you get types with TypeScript, totally optional. You don't have to annotate types, and if you do want to annotate, you can always punt and say any. But you can then also with TypeScript compile the newest JavaScript standards to older environments, which means you get features like modules, lambdas, classes. the spread operator uh for of uh stuff like that in that's in the newer versions of JavaScript and the TypeScript compiler does all the work for you to compile that to run in in another environment so that you can just focus on writing beautiful TypeScript code and not on whether the browser you're going to deploy to supports it.

Speaker 2: And the other thing is that part of the design of TypeScript is that JavaScript ES5 is valid TypeScript code So it kind of follows the, if you're familiar with StAS, it kind of follows that model of all you do is change the end of the file and goes from JS to TS, and ta-da is a TypeScript file. And then that way you can migrate gradually to TypeScript if you so choose, if you're in a migration type situation. So the big question is always, do I have to use TypeScript to use Angular2? And well no. But I like you saw the drop down, you saw there there's multiple options. There's also like If you wanted to write something that, you know, as long as it can interface with JavaScript, it could probably interface with Angular 2, then, you know, use what you want.

Speaker 2: But It's pretty awesome to use TypeScript. It's pretty fun. It also a lot of the documentation for Angular 2, the best documentation is in TypeScript. So even though they have the other options, the best documentation is in TypeScript. So it just makes a lot of sense. There's good IDE support if you use an IDE or even sublime text, great types of type script support. Alright, let's talk about web components. So before I talk about either two, I'm going to talk about what web components are just for a quicker view. So a web component consists of three parts. So you have markup, behavior, and presentation. Together, they form a beautiful package of a web component. So let me introduce you to a web component that you're probably familiar with.

Speaker 2: Alright, so this is a select tag. It has markup, it has presentation, and it has an API. So you know how to get the value out of a select tag. So what if the select tag didn't exist? Right? And every time you wanted to do something like a select tag, you had to you know, write a separate, you know, HTML file, write a separate JavaScript file, and you know, wire them all together and then there's a million plugins for it. I mean you can think of components like this that we do this all the time like carousels or um you know menus stuff like that. And so the idea with web components is you don't have to, you know, champion these things to become native, like the select tag, which is native. You can write your own web component and then share it with all your friends and you know

Speaker 2: have lots of fun. So web components are really awesome. They're definitely the direction the web is going in. And in fact, the web the idea of web components actually refers to a set of APIs, and these are the APIs it refers to. So you've got custom elements, HTML imports, templates, and the shadow DOM. So many of these might sound familiar, some of them might be new. But the thing that's interesting, slash Not so fun about them is that browser support is not across the board. So that means that in order to use the web components APIs, you either need to get a polyfill or you need to, you know You probably want a polyfill and then you want to use something on top of that polyfill like polymer or X tag. However, these polyfills they aren't super performant.

Speaker 2: So The direction is web compon so basically the direction is web components, but should you use web components right now? Probably not. You should be aware of them. So this is where we get to Angular 2. So one of your best bets for using something like Web Components is using something like Angular 2, which has a component, you know, it has the idea of components, and then it actually plans for them to be compatible future forward with the web component specification. So that's pretty awesome. So you can just use something that actually works and that's really performant, because that was a priority in Angular too, remember? It was we want to be super performant, super fast. Uh, but you get, you know you get to, you know, be aware of this new thing coming forward If you want to learn more about web

Speaker 2: components, this is definitely the place to learn about web components. Webcomponents. org, kind of like the homepage for all things Web Components. So let's talk about components in Angular 2 and what they look like. So here's a TypeScript web component. So if you write vanilla JavaScript much, just and you haven't write written TypeScript, this might look a little weird. However, it looks pretty similar to to ES6 or ES2015 type stuff. You've got a class keyword in there. You have a component there. Is in Angular it's considered an annotation, but you can probably think of it like a decorator. So it adds metadata about the code. is what it does. And so our component annotation says we want to target a particular selector. Say hello and we're going to do some data binding.

Speaker 2: You even see a type annotation there, that name is a string. And so this is a super simple hello world component. You run the same thing in ES5 and it looks like this, which isn't so different. It's just it's using the same DSL, so the same domain-specific language, which is nice. So once you know the the Angular two way of doing things, you can kind of bounce between them if you want to And and so on. We don't so no type annotations. Uh it's just, you know, plain old JavaScript functions, plain old JavaScript objects. Let's start with directives. So in Angular One, you did a lot of things with Directive. It felt like if you ever developed an Angular One project, to me it felt like if there was like a question, the answer was a directive.

Speaker 2: like like much of the time uh if it wasn't related to like fetching data and then that's a service. But if you want to modify presentation, if you want to you know create a create a new element, it's also a directive. So everything is a directive. Basically, kind of. And so, but what's a directive anyway? So in Ang O2, this is a directive in action. So NG, if it looks a little different in Angular 2, you have a little asterisk there, which is actually a nice way of showing you that the directive is going to change what is going to be outputted in the presentation So ng if is going to do it also uh helps Angular to break out the code when it's doing its parsing. So it Actually it does serve a really nice purpose for them too.

Speaker 2: Uh but NGX says it's true, then it'll display this link. If it's false, it won't display the link. Pretty straightforward. But so that's a directive. It's a thing that you're going to put on your HTML to modify what's going to happen in your application. So you keep directives, so we just saw an Angular a directive in Angular 2, but they go in components. So I really this is probably my favorite thing about Angular 2, is that if you are not familiar with Angular 1 and you're coming here Like I would say just go forth into the land of Angular 2 and don't confuse yourself in Angular 1 because it's quite different. And to me, wrapping my head around components, which are markup behavior and presentation is a lot easier than trying to figure out what a directive is. So you can keep directives

Speaker 2: which are annotations on your HTML, but they go in components So here's an example of a component with a directive which is super something super important which checks if it's July 2016 and if so it will uh say hello Django or say hello DjangoCon. Back in hope. Back in hope. Alright. Anyway, I was gonna try and scroll to write, but you can believe me that it says 2016. Uh and we'll also see it in the example app, so it does say hello DjangoCon. All right, well we're gonna talk about Angular and Django now. So You know, give me an Angular talk at a Django conference, uh, but it's also you're talking about web technology in general. So The beauty is

Speaker 2: Django and certain things about in the Django ecosystem make it really easy to write your API once used everywhere. So you write an API, you consume it in this app, consume it in that app, uh, you know, it's API. That's what it's for So you can write your API in Django and then consume it with your Angular 2 app. That's probably the best way to use Angular 2 in the Django ecosystem. I would not recommend doing something like a like Franken you know, serve some things with the uh you know from the server, serve some things with Angular, uh you kind of want to go in one direction or the other. If you want to do some server-side rendering, that's a different thing too. But that's also a different talk. So if you're gonna write an API. Well the kind of common way to do this in the Django world would be with the Django

Speaker 2: Rest framework. Uh did some of you go to the Django Rest tutorial? Yeah. Nice. It's a really cool framework. So I'll show it and then the rest of you will be like, why and I go to the tutorial. And then TastyPie, which makes it really easy to make APIs. So Django Rest, powerful and flexible, web browser API, other awesomeness, go to a Django Rest tutorial and learn all about it. So let's actually look at that, I believe this time. Not now. Yeah, so our API is Dinosaurs as a service, which is a super important service the world needs today. If you want to talk about funding, you can talk to me afterward. So so let's look at that API. So

Speaker 2: So to get this started, um I mean I did the bigger bigger, sure. Thank you Yeah. Um so this UI is pretty much all, well, it's all from Django Rust. Like I did the the configuring and the stuff, I made a model, put some data in the model, did the Django thing, but most of it is this beautiful UI, is browsable, is all the Django Rest framework. So if I click on my dinosaur endpoint which is cool that I can click on it. That's really awesome. So I see my my dinosaurs. I want to ask you to suggest a dinosaur, but you have to suggest one that I can spell.

Speaker 2: How cool is that? Like we just like it just does this as Django Rest. Just works. Love it. So we just added T-Rex. If we go back and we look at our dinosaurs, we have T-Rex. So this is running on localhost 8000 , and then I have our Angular 2 running over here. So you see we actually have the Django Con that. That directive is running and saying, yes, it's July 2016, so it's DjangoCon, and we see our dinosaurs listed out here. So it's interacting with the API to present this to our you know, our simple application. And all this code is available online if you want to see the example later. So

Speaker 3: don't you need to refresh the CTRX?

Speaker 2: Uh

Speaker 3: or is that a different thing

Speaker 2: Good question. Oh, so if I had made a code change, uh yeah, if I made a code, so I have it set up with live reloads if I made the question was um do I need to refresh the CTREx? Uh yes. Um but Let's see. Yes, there would be ways for you to not have to. You could set up, especially an awesome thing about uh Angular 2, which I didn't put in here, but is generally awesome, is that the way you get your data by default is through observables and not promises. So a promise in JavaScript is like go and get me some data and then like let me know when you're done and then here's some data. And observable is more like go get me some data and then give me data as you have it, and that's pretty awesome. So if we actually set up a, you know, we could set up a web

Speaker 2: socket or something like that and set an event and like there's a bunch of ways we could do that uh in order to get a get the T-Rex once it was added live. So here's on the angular two code, then this is all going to be in TypeScript, and the example uh code is in TypeScript. But so this is a big wall of text. So less instead. Look at a little bit less of it. So this is the important bit of the the get dinos service. So the the services with are in Angar 2 are going to be if you have a data source and you want to tap the data source to speak. you're gonna use a service. It makes sense conceptually, go with it. Or it will eventually. So

Speaker 2: You have a service and then you have a little getDynos method and it uses the HTTP service to get this API. This actually turns it into a promise and just uses promises to keep things uh more promise-like and not observable. Uh and then it just throws the data at the browser. So it says uh there's a component that's consuming the service. But you're gonna run into this problem and that is cores, so cross-origin request. Uh but it's not that bad because we're working in Django, and so there's a Django package which you know You install it, you add it to the middleware, and ta-da, you have a course policy. It's pretty awesome. So one of those nice benefits of being able to build your API quickly in Django uh you know run into a little problem there's a dango

Speaker 2: pro uh package to fix your problem but back to JavaScript So let's look at the dinosaur component. So if our service is where we're gonna get our data, right, then our component is gonna be the thing that's actually gonna display on the page. So it has the So you know, to beat it to death the uh presentation, the markup behavior. So this is the annotation that is on our dinosaur component, so it says dinosaurs, and then there's a little template And you'll notice that the template has a directive, an NG4, and it just says let dyno of dinos, where dinos is that set of dinosaurs we get as a response from the API, and then it just displays the species and a known order. list. And this is the the rest of the component.

Speaker 2: This is the JavaScript part. So those were both in the same file but just broken out to make it a little bit easier to read. And so we've got it implements on init because when we want when the component boots, we want it to make a request to our service. And so when it inits, we say we want you to go get dynos And since dynos returns a promise, we get to use then and catch and set our dynos , which for see this is the type system that's like hunted and made dinos a type of any, it could it is an array of strings. Um or no, it's an array of objects. Uh an error is any. So Yeah, so this is the bit in the dinosaur component where this is dependency injection in action,

Speaker 2: which is pretty nice. So it's we're instead of saying dinosa new you know dinosaur service equals new dinosaur service, which would be one JavaScript way of saying this. Dependency injection says in the constructor we're passing private dinosaur service, which is a dinosaur service. So in the type annotation, this kind of makes And so we're getting dinosaur service because we the big capital dinosaur service is what we brought in, and then the lowercase dinosaur service is what we're actually using in our component. And then on init is that boot process where we get dynos on the component's initialization. There's also component teardown, there's a hook for that in case you need to tear down components when they're destroyed. So

Speaker 2: the example app is at uh Django Res Angle 2 example. Uh I'll tweet it so that you don't have to memorize it. And all these slides are available at pcla. github. io slash angular2nu So thank you very much. If you want to get in touch with me, uh Pamsaur, the web of war. I also have a podcast with some friends called Turing Incomplete. If you get the joke, you'll like the podcast Uh and uh thank you so much.

Speaker 3: Could you show us like the index. html that sort of brings everything up?

Speaker 2: Oh totally. Yeah. So the index. html uh is um It uses this is one of these things that like in a JavaScript app you can choose like if you want to do like Webpack or Gold. This uses the the Angular documentation uses system. js, so that's just what I use So it it consumes these things and the systemjs config, one of the reasons why is if you look at the system. js, so this is just this is index, but then systemjs config looks like this So that's kind of gnarly. Uh so I I kind of let them handle that and then it it works. So Yeah, all right.