AngularJS Looking back, there was a possibility to create very advanced web applications using the pure JavaScript API, but it was really difficult to maintain the initial codebase, and to test all of it. And then in 2010 AngularJS was introduced as a JavaScript MVW Framework. It had tree big advantages that made people love it:
- Code production was incomparably fast - Every piece of application was easily testable - Google was behind the project There are other things that make Angular so good for programmers. The first is two-way data binding. Angular allowed you to see data changed in JavaScript to be reflected automatically on the UI. It made things a lot easier to develop at the beginning, because no more coding was required except for linking a proper controller to the part of HTML. The second benefit that Angular brings to programmers are directives. They are the starting point for all of the components we see now in the modern front-end. Directives allowed the code to be much more reusable and separated than ever before. AngularJS forced a Dependency Injection, and it helped in mocking dependencies. Its appearance in the framework made Angular a huge step forward in the case of testing front-end applications. All of these advantages led more and more companies to rewrite their apps from their own solutions built on top of other libraries to AngularJS. Angular 2 AngularJS is a great way to kickstart an app or MVP. With a rising popularity and more and more features coming to the core, the Angular team decided to rewrite the original framework, introducing Angular 2. Some say Angular 2 and AngularJS share only one thing: the name. There is a migration path (called ng-upgrade) from AngularJS to Angular 2. However, Angular 2 is still a brand new framework sharing only some concepts of its predecessor. The whole concept of application structure has changed in Angular 2. Previously it was the MVC framework that allowed you to create applications in the pattern of rather tightly coupled entities like controllers, views, services, etc. The whole architecture of AngularJS looked like this: Real Single Page Web Applications using AngularJS <https://codequs.com/p/Hk-eHc-K> img – ng1 architecture Now, the concept of directives has been pushed further to be much closer to the Web Components’ standard and React’s way of structuring the application. It is all about components in Angular 2. It means the whole application is now a component, which contains another set of components (which can be routable). It ends up with a tree-like structure: img – ng2 architecture The purpose of the Angular 2 application architecture is to create components that don’t depend on each other, which are as loosely coupled as possible. The important thing is to introduce two ways of creating the components: - Smart components: They know about application state, and they can communicate with services to fetch or modify data. - Dumb components: They should only have inputs and outputs. They are ready to be placed anywhere in the system (or even outside it) when providing proper values to the input, and they should not know about application state existence. Performance Having such a tree of components makes a big difference in performance. The purpose with AngularJS wasn’t to create the most efficient framework, but instead the easiest one to write in. As performance became more of a problem, Angular 2 was introduced to solve the issue. AngularJS had a *digest cycle*, which allowed changes to trigger updates up and down. Angular 2, on the other hand, has a directional graph of components that is always being checked once (due to one traversal path from the root to the leaves). According to the Angular core team members, these changes made Angular 2 applications work 3-10x faster than the same apps created with the latest AngularJS. Ecosystem Angular is now more than ever considered a framework. The tool that the Angular team gave us is a complete solution. This is the opposite of React (which is just a library for rendering a component), but here we are able to create whole applications without using any third-party solutions. The framework provides us with the following blocks to use: - Component – The main and the most important one. Angular 2 is about components and modularization. These are the main blocks to create apps with. It contains logic and the view. - Directive – It is very similar to the component, but does not contain a template (view). It just makes additional operations to the existing DOM elements. - Pipe – Gives you the ability to process variables in templates in a specific manner. - Service – Injectable class used to share logic between components. Usually (and preferably) it is a layer between the component and the API. - Forms – A complex solution for handling forms in the app. This time you can choose between two styles: template driven and model driven. - HTTP – A service built on top of the observables to handle the connection between the front end and the API. - Router – Now routing directly to the components. - Testing – A whole bunch of tools for both unit and end-to-end testing, ready to handle scenarios with all of the blocks above. Modern JavaScript is going further beyond just the web browsers. Now you hear about server-side rendering and native mobile apps created with JavaScript. In Angular 2 there are plenty of other projects connected to the core, which are worth a mention and deserve their own story: - Angular Universal – server-side rendering. - Angular CLI – command line interface for kickstarting a project. - NativeScript 2 – native mobile apps. - Ionic 2 – mobile apps using web-view. - Codelyzer – linting specific for Angular 2. - ngrx – reactive programming. It all makes Angular not only a framework, but a whole platform. Real Buiding Angular 2 Charts with ZingChart <https://codequs.com/p/rkiRa7pqt> Is Angular 2 the right choice for my project? As you can probably see, there is much more to learn in Angular 2 than in the previous version. It also makes projects more complex, so the first steps are harder. It is the opposite feeling than we had with AngularJS. It is generally not easy (or even impossible) to jump into the project without knowing about its concepts and toolbox. Although this can change in the future, we recommend only starting Angular 2 projects if you are an experienced JavaScript developer. We mentioned how Angular 2 is a first citizen framework. This is incredibly powerful, but has its own drawbacks. The problem is mainly *zone.js*, which is interfering with most of the asynchronous operations that are taking place in the browser. It can break your existing code if you’re trying to merge it with another framework or library. Due to this inconvenience, you should be very careful when trying to upgrade your existing non-Angular app step-by-step (but it is possible). On the other hand, it’s highly recommended you upgrade your AngularJS app (*ng-upgrade* will be helpful), and we cover this topic later in the book. Now you should be convinced that there are two easy paths to start with Angular 2: - upgrading an existing AngularJS 1.5 app (based on components) - starting an app from the scratch Another good question is: it is good for my team? As you can probably see, we’re going deeper and deeper trying to introduce even more tools and concepts. They make a small barrier at the beginning of a project, but they are beneficial in the long run. It also makes Angular 2 a solution to use with a big team. Most of the conventions that are there help with the maintenance of a complex application. It also makes Angular 2 a better tool for long-term projects. ☞ Comparing ReactJS vs AngularJS <https://codek.tv/v/6YJM4zz8jnU> ☞ AngularJS Tutorial for Beginners <https://codek.tv/v/u2okVLCrqgE> -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
