What should I learn first before AngularJS

Angular & TypeScript workshop from workshops.de / angular.de

introduction

Since the trainer is also familiar with React, it was of course first discussed at the beginning why one should choose Angular. The slides said things like: Builds on the experience of AngularJS, offers the developer support to do the right thing, tries to keep very close to web standards, has good maintainability and there are holistic solutions for known challenges such as i18n or animation . I would add that the Angular CLI is quite mature, as it can do some typing for you. Angular also offers features such as ahead-of-time compilation and server-side rendering. In addition, you should of course not lose sight of the trends. The point that Angular delivers a very large bundle is certainly not entirely wrong, but you can "get in" a lot here through architecture (lazy laoding) and up-to-dateness (Angular 9 Ivy compiler).

TypeScript

The first big point was TypeScript. Starting with the terms "JS", "ES", "TS". ES - or rather ECMAScript is the official standard for JavaScript. After ES5 there was a switch to the year numbers in the designation, which is why ES2015 followed. This standard is important for the functionalities that are used and which the target browser supports. The so-called transpilation then takes place via Babel, which is already delivered with an Angular project. Comparable to Java it would be like "I develop with the cool Java 8 features and Babel transpils the app in Java 7 for my old server" (which is unfortunately not possible with Java). With ES5 there is a common denominator for using old IE browsers. Therefore, the goal is usually to transpile the code in ES5. Of course, the types were introduced and also talked about type inference, but I don't want to go into that here. An important point, however, was that the ratio of assignments should be at least 70/30. The TSLinter also helps here and shows variables which are no longer overwritten but have been incorrectly assigned. With TypeScript there is a possibility to leave the type out with the type. The trainer confirmed what I had read several times before: Mainly it is the developer's laziness - the following comment "any is the new TODO" also fits. But it doesn't just have to be laziness, it can also be ignorance of the type, especially with third-party libraries. However, the GitHub project "DefinitelyTyped" can provide a remedy here by downloading certain typings and thus typing your objects. If the objects cannot be found here, there is always the option of assigning types using your own interfaces. Therefore, the trainer is of the opinion that there is actually no longer any reason to use. Closures were also discussed. A very complex and confusing topic (sometimes even more confusing due to the "new" spelling with the so-called Fat Arrows), but a thoroughly interesting concept! Fat Arrow functions were also discussed at the same time. In addition, it was a question of preferring interfaces to classes as DTOs, for example. The crucial point is that classes generate real code during build (i.e. KBs that are shipped), while interfaces generate no code. So you can definitely influence the size of the app. As an example - that's an interface too. In addition, the decorators (in Java the annotations) are currently not yet released for TypeScript, which is why every Angular project (which cannot do without a decorator) must set them in the tsconfig file.

Angular

First of all: Since Angular 9 was only released a few days before the workshop, we used Angular 8. At the end of the first day, the Angular CLI - especially the Angular Generator - was presented. With this you can easily generate using or (and other) classes, templates, CSS files with a given structure. The relationship between modules and components was also discussed. You shouldn't be stingy with modules, as these can then be used very well for lazy loading afterwards. In addition, the trainer took Angular Material as an example, there every component is a module at the same time, which you can easily import and thus use the component. On the second day we started with the real programming and created an app, two modules and several components with the Angular CLI. The aim was to develop a book management system (list, display book, edit book) in the remaining two days. (I don't want to go into the code any more here, just a few general concepts) So at the beginning we created the app, two modules and a few components with the Angular CLI. We have currently provided the navigation bar with real links (so-called "full-page reloads"), which actually does not correspond to the concept of a SPA (single page application), but the topic of routing was only on day 3. Then the important concepts of property and event binding were discussed and programmed using small examples (button clicks, output of the mouse position). This was the start for "real" component programming with inputs (property binding of a component) and outputs (event binding of a component). In order to share data more easily between components, there are services in Angular, which can be integrated into any component using the Injectable Decorator (analogous to Dependency Injection with Spring in Java). If you indicate, you register the service globally. Angular uses dependency injection for the same reasons as Spring: keep component classes clean (you just need a private variable in the constructor) and you can test the code better. However, you quickly have to struggle with circular dependencies and therefore you have to be careful where you inject something, and it also depends on the level at which you inject, otherwise it may no longer be a singleton and you get problems with data consistency. The subject of observables was also brought up, but as this is very complex, I don't want to go into that much in my article. Observables or RxJS is the implementation of reactive programming in the front end. The HttpClient offered by Angular is based on observables, which is why you cannot avoid observables in an app with REST calls. We used the provided "bookmonkey-api", which we installed via npm and then started on a separate port. At the end of the second day we got an explanation of the lifecycle hooks of a component. There are options here to react to different states of a component. The third day started with two pointers: The topic "Content Projection" should be very interesting and you should take a look at it after the workshop. In addition, the trainer showed how you can use the "webpack-bundle-analyzer" to analyze your deliverable bundle, especially with a view to the storage size. The most important thing that day was routing. We have built in routing in our app to navigate to the list of books and an About page (without "full-page-reload"). It was discussed in which module the paths should be registered. Our BookRouting Module then got the path and also the children and created it. These were needed to be able to display the details of a book. At the end of the day we looked at forms - first the template driven approach and then the reactive approach. The main difference is that with the template driven approach you have the creation and configuration in the HTML template, while with the reactive approach you do most of the work in the code (typescript date). This is why Template Driven Forms are mainly suitable for simple forms such as a login. We have called up a form for editing a book under, in order to change the book there using input fields and validation and then save it again. We transmitted the ISBN to the previously created route using parameters. At the very end, the trainer then released documents for us regarding angular testing, which anyone can look at afterwards if necessary.

Personal conclusion

Really cool workshop, especially for Angular beginners. Personally, I already had some previous knowledge and therefore also dealt with Angular material for the design and ag-grid for an appealing list of books in tabular form. I took a lot with me from the workshop and it showed me that I was on the right track in terms of my previous knowledge. Angular is really very interesting and does a lot for you (keyword CLI, Webpack and Babel). In addition, if you do clean code in a disciplined manner, you can structure your app very well by separating HTML, CSS and TypeScript. So I can definitely say that learning Angular was the right decision.