Angular 2 and You

0 0

come on welcome I place to be at Jango chi felly you can find me on the internet at Pama sore and my also dinosaur related blog the web before calm I am Philadelphia I'm also a Google developer expert in web technology currently a software engineering lead at i/o pipe so let's talk about what's going on with enjo - let's just get right into it so if you I'm going to presumably for 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 about it it's at angular kayo and it's quite different than angular 1 so we're going to talk about that today so the path from angular 1 to 2 it was blogged about in 2014 in March with some stated goals to be more modular to support the newest versions of JavaScript at the time it was turned akima scripts 6 simplified pencil injection make templating easier simplified directives which have been a point of confusion in the angular world and the beta for a neo 2 or it's released in December 2015 now looking on the back on that now feels like not that long it felt like a long time when watching that designed for us especially with all the problems of how awesome angular 2 is going to be it was definitely there was definitely a lot of anticipation about the framework 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 Shango environment so building for any deployment target so this is really awesome Hey too fast all right angular 2 is not tied to the dock so the definite logic model is that yeah we get to control the you know the client anything or to is does not have a con it doesn't have to be hype the concept of a Dom whereas you know one has this limitation so if you want to use angular 1 somewhere that means that wherever you want to use it need 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's aren't a browser environment so anywhere you can bring web technology which is actually a lot of places you can take angular 2 so kind of the biggest example of this is being able to use native script which is an open source cross-platform framework for deploying mobile apps and you can use a or two and native script so you could actually share code across your web and mobile apps so that's pretty awesome and especially the way anger 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 so choose your own language so whereas angular 1 is a JavaScript framework angular 2 is prime of a as long as it compiles to JavaScript framework with especially a big focus on tight script so the this is actually the drop-down in the angular Doc's so you see you've got high scripts for JavaScript or dart which is a language a champion by Google but let's talk about high script for a minute so high script is a project championed by Microsoft it's a superset of JavaScript providing among things optional static typing including you know I know Hopper's will talk about types types of really awesome really liked those so they're nice to have when you can get them so you can you get types with tight script totally optional you don't have to annotate pipes and if you do want to annotate you can always punch and say any but you can then also with typescript compile the newest JavaScript standards to older environments which means you get features like modulus lambdas classes the spread operator for of stuff like that and 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 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 you know if you're familiar with staff it kind of follows that model of all you is change the end of the file and goes from JSF TF and tada is a type script 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 angular 2 and well no but I like you saw the drop-down you saw it there there's multiple options it's also like if you wanted to write something that you know as long as it can interface with JavaScript you could probably interface with a new or two then you know use what you want but it's pretty awesome use high script it's pretty fun it also a lot of documentation for a go to the best documentation isn't I scripts so even though they have the other options the best documentation is in typescript so it doesn't makes a lot of sense there's a good IDE to port if you use an IEE or even sublime text great types of typescript support alright let's talk about web components so before I talk about you know - I'm going to talk about web components are just for quick review so a web component consists of three parts so you have markup behavior and presentation together beautiful package of a web component so let me introduce you to a web component that you're probably familiar with okay all right so this is a select tag it has markup it has presentation and it has an API so you know how to get value out of select tag so where's this let type in exists right and every time you want to do something like a select tag you've had to you know write a separate you know HTML file write a separate JavaScript file and you know why are them all together and then there's a million plug-ins for it I mean you can think of components like this that we do this all the time carousels or 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 this wet tag which is native you can write your own web component and then share it with all your friends and you know have lots of fun so what was really awesome for definitely direction the web that's going in and in fact the web the idea of web components actually refers to a set of API eyes and these with API so refers to so you've got custom elements HTML imports templates in the shadow Dom so many of these might sound familiar some of them might be new but the thing is interesting / 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 API as you either need to get a polyfill or you need to you know you probably want to polyfill and then you want to use something on top of that polyfill like polymer or xTag however these polyfills they aren't super performing so the direction is web 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 go to so one of your best bets for using something like web components is using something like a neo - which has a component you know it has the idea of components and then actually plans for them to be a 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 that that was a priority and you know to remember is we want to be super Foreman super fast uh but you get you know okay you know be aware of this new thing coming forward you won't learn more about web components this is definitely the place to learn about web components web component org kind of like the home page for all things web components let's talk about components in angular 2 and what they look like so here's a typescript web component so if you're right vanilla JavaScript much this will and haven't write written typescript this might look a little weird however it looks pretty similar to two es6 or es2015 type stuff you got a class keyword in there you have a component there in in angular it's considered an annotation but you can probably think of it like a decorator so adds metadata about the code it's with us and so our component annotation says we want to target a particular selector say hello and we're going to do some data binding you can see it type annotation there that name is a string and so this is a super simple hello world component you're writing the same thing yes five 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 got some node type annotations it's just you know playing with JavaScript functions plain old JavaScript objects assignment drivers so in a newer one you did a lot of things with directive it felt like if you ever developed in any or one project to me it felt like if there was like a question the answer was a directive like like much of the time if it wasn't related to like that you gotta and that's a service but if you want to modify a presentation if you - you know create a create a new element it's also a directive so everything is the directive basically okay and so what was it directive anyway so in a Oh - this is a directive an action so ng if it looks a little different in your - 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 helps anywhere to break out the code when it's doing is parsing so it actually does serve a really nice purpose for them too but NGS is true then it will display this link if it's false once played only pretty straightforward but so that's a directive it's a it's a thing you're going to put on your HTML to modify what's going to happen that in your in your application so you keep threatening so we just signing or to a directive in a or - but they go in components so I really this is probably my favorite thing about Amy or - is that if you are not familiar with a year one and you're coming here like I would say just go forth and still Lana Taylor - and don't confuse yourself in a door one 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 directive which our annotations on your HTML but they go in components so here's an example of a component with a directive which is super filling super important which checks at this July 2016 and if so it will say hello jingle say hello Jago can't pop up target ah anyway I was gonna try and scroll it right but you can believe me that it says 2016 uh and will also see it in the example app so it does say help with Django Khan alright well I think I said my angular and Django now so you know give me a go talk at a Django conference uh but it's also your talk about web technology in general so beauty is Django and certain thing in the Jago ecosystem make it really easy to write your API once use everywhere so you write an API you consume it in this app consuming that app you know save yeah that's what it's for so you can write your API in Django and then consume it with your 8002 app that's probably the best way to use in your to in the Django ecosystem I would not recommend doing something like a like franken you know serve some things with the you know from server serve some things with angular 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 to but that's a different talk so if you're gonna write API well the kind of common ways to do this in the Django world would be with the Django rest framework there's only you go to the Django rest tutorial nice it's a really cool framework so um so I'll like show it and then the rest of you'll be like why and I go that tutorial um and then tasty pie which makes it really easy to make api's so Jane Burress powerful and flexible web browser will 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 for that 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 the coffee afterward so so let's look at that API so so to get this started um I mean I did the bigger sure thank you yeah um so this UI is pretty much all whoa it's all from Django rest like I did the configuring and stuff I made a model put some data on the model is 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 and point which is cool that I can click on it that's really awesome um so I see my my dinosaurs uh you I want to ask you to suggest a dinosaur we got suggestion on that I can spell couple of that like we just like it just does this it's Jenga 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 8080 Euler to running over here so you see we have to have the django con that that directive is running and saying yes it's July 2016 so it's django con and we see are 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 develop online if you want to see the example later oh so if I had made a code change yeah if I made it cut so I have it set with live reloads if I made the question was I'm joining to refresh your seats you guys uh yes um but yes there would be ways for you to not have to you can set up especially an awesome thing about angular 2 which I did put in here but it's 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 there's some data and observable is more like and go get me some data and they give me data as you have it and that's pretty awesome so if we actually set up hey you know we could set up a WebSocket something like that and send an event like there's a bunch of ways we could do that in order to get a get the t-rex once it was added live so here's something easier to code then this is already in texture and the example code is in typescript but so this is a big wall of text so plus instead look it a little bit less of it so this is the important bit of the Dinos service so the services with our inning or two are going to be if you have a data source and you want to cap the data source to speak you're going to use a service it makes sense conceptually go with it um or it will eventually so you have service and then you have a little get diagnose 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 more promise like and not observable and then it just throws a data at the browser so says there's a component that's consuming the service but you're going to run into this problem and that it scores so cross-origin request ah but it's not a 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 you have a course policy that's pretty awesome so one of those nice benefits of being able to build your API quickly in Django you know run into a little problem there's a gaggle brought a package to fix your problem fetch a script and so let's look at the dinosaur component so okay fire service is where we're going to get our data right then our component is going to be the thing that's actually going to display on the page so it has the - you know to beat it to death the presentation the mark-up behavior so this is an annotation that is all our guys we're dinosaurs and then there's a little template and you'll notice that the template has a directive and ng4 and it just says let Dino of dinos where dinos is that that set of dinosaurs we get as a response from the API and then this displays this BTS in an unordered list and this is the the rest of the component this is the JavaScript part so those who are close on the same file but just broken out to make it a little bit easier green and so we've got it implements on an it because when we want with a component boot so we want it to make a request to our service and so when it in its we say we want you to go get dinos and since Dinah's returns a promise we get to use then and catch and set our our dinos which fruit see this is the type system as I punted and made I know as a type of any it could this in a register or no three of objects and error is any so yeah so this is a bit in the dinosaur component where this is dependency injection in action which is pretty nice so it's worth instead of saying Dinitz new you know guys your 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 sense so we're getting dinosaur service of because we the big the capital dinosaur service is what we brought in and then lower case dinosaur service is what we're actually using in our component and then on an it is that boot process where we get dinos on the components initialization there's also component teardown in Kate there's a hook for that in case you need to turn out components when they're destroyed so the example app is at a Jenga risk and go to example I'll tweet it so that you don't have to memorize it and all these slides are available at a PLA back github diet slash angular 2 and you so thank you very much if you want to get in touch with me pama sword or I also have a podcast with some friends called terrine incomplete if you get the joke you like the podcast and thank so much oh did you show us the index.html Oh totally yeah um so the index.html is um it uses this many names like in a JavaScript back you can choose like you want to do like web pack or both this uses the the angular documentation uses systemjs so that's just what I use um so it it consumes these things and the system J's config one of the reasons why is if you look at the system dance so this is just this is index but then system JSP Vega looks like this so that's kind of gnarly so I kind of let them handle that and then it works you