Just angular

Introduction

On December 8-9, 2016, the first Angular conference was held in Belgium. Igor Minar (the leading developer of Angular) acted as a keynote speaker with several interesting announcements regarding the schedule for producing Angular. And imagine, in March 2017 we are waiting for the release of Angular 4 . At the same time, the beta version has already been published.

From translators

Hello everyone, Maxim Ivanov and Dmitry Sergienkov are with you, and today we will find out where the third version is, and why we can still be faithful to Angular. Now it’s quite difficult for a novice front-end developer to learn JavaScript to decide: what kind of framework or library should they take and study while staying in the trend? Of course, without a word React, not a single conversation on the topic of the frontend now does not work, however, at one time I started with the first version of Angular, I read many guides on writing the frontend on ES6 (with classes and other good things) and I still do not regret. Yes, you can write corporate applications using only jQuery, but as the project develops and becomes more complex, you will begin to bury yourself in spaghetti code, mixing logic and presentation, while the MV * frameworks will not allow you to do this.

Content

Why Angular 4? Where is Angular 3? What's happening?

Semantic Versioning Specification

Back in September, when the second version came out, Angular Team announced that it will support semantic versioning ( SEMVER ).

As the name implies, semantic versioning is the addition of meaning to each version number. The semantics of the version number allows the developer to determine that the upgrade was performed in this version of the product, and we can also customize our tools, for example, the NPM package manager, so that when building the application, a specific version of the dependent libraries is chosen so that we can nothing broke.

Version semantics consists of three numbers:

Whenever you correct a mistake in the code (bug) and release the product again, you increase the last digit; if a new function was simply added in your product, you increase the second digit, but when you release a product with drastic (critical) changes that break the work of your old code, you increase the first digit.

Critical changes appear when you, as a developer who uses this library, have to intervene in your code and change it after updating and switching to a new version.

What does this mean for the Angular Team? It is clear that for any rapidly developing software there comes a time when it is necessary to carry out critical changes. And therefore, for objective reasons, the Angular Team changed version 1.x to 2.x, due to the fact that the changes that were made broke the operation of the main code.

Critical changes should not be a pain

The Angular community will understand exactly what this is about. Users had to rewrite all the code in order to upgrade to the second version. Although many people loved Angular 1.x, but for objective reasons general critical changes were made, a new API was written, new templates. This was obvious, and ultimately, Angular 2 was completely rewritten ( although there is a way to migrate to the new version less painfully ).

It has now been decided that the transition from version 2 to version 4, 5, ... should not be as painful as it was with the first version. Now the code will not completely correspond, our changes will affect only the individual libraries that are currently supplied with Angular 2, in turn, they will be observed according to SEMVER. In addition, we will gradually include the Deprecation phase (warnings from the developer’s console that this functionality will not be supported in future versions) to allow developers to switch to a new one in a timely manner.

Angular Team uses its own change control tool and automatic update processing. The team is working hard on it, and is scheduled to release in conjunction with the release of Angular 5 in 2017.

Now it's just “Angular.”

As you may have already guessed, the term “Angular 2” will be obsolete with the release of the 4th or 5th version. However, you should now start calling it simply “Angular” without a version. In addition, you should start avoiding libraries with GitHub / NPM with the prefix ng2- or angular2-. There is a single resource with documentation - angular.io with the official community on GitHub.

New versioning rules

From now on, try to avoid using the version number if it is not really necessary to eliminate ambiguity.

Three simple guidelines:

Use “Angular” by default (for example, “I am an angular developer”, “This is Angular-Meetup”, “Angular community is developing rapidly”)
Use “Angular 1”, “Angular 2”, “Angular 4” when it comes to specific things (“This X feature appeared in Angular 4”, “We updated from Angular 1 to 2”, “I propose this change to Angular 5 ”)
Use the full version of semver when reporting an error (for example, "This problem is present in Angular 2.3.1")

All documentation, even for Angular 1.x, will be aligned with these rules in the coming weeks. But if you write something in your blog, write articles, courses, books or every time, try to focus on a specific version of Angular, append the version in the headlines of the publication, allegedly using Angular 2.3.1 in this article. This helps to avoid confusion for your readers, especially when you are writing about specific APIs.

Why did we decide to skip the third version?

Angular's core libraries are in the same repository on GitHub . All of them have their own version and are distributed as various NPM packages:

Due to a mismatch in versions , the packet router immediately began to look for Angular 4 . Therefore, we decided that semantic versioning should be strict for the core kernel packages, which are much easier to maintain, and the Angular version to be named, based on the latest dependencies.

In addition, it is important to understand that Angular is used in Google. Most Google applications use Angular from the main repository branch on GitHub. Whenever an update occurs in the master branch, everything is immediately integrated into Google’s main internal repository (the company uses one monolithic repository), where products such as Google Maps, Adsense and others are located. As a result, all projects that use Angular fall, if they have critical changes, so you have to rewrite everything, which, in turn, is inconvenient. Thus, it is best to have a fully unified version that would be easier to maintain over time, which would help the team be more productive in releasing new features.

Preliminary Release Schedule

The fact that critical changes will still happen does not mean that they will appear immediately after a week. Angular Team assures that in the future you will have backward compatibility between versions, now the changes will be clear and follow a specific schedule for three cycles:

patch releases every week
every 3 months there will be minor changes (minor) in the functional
every 6 months a new version of Angular with a slight migration

The next 3 months will be devoted to finalizing Angulr 4.0.0.

After Angular 4.0.0 you are waited by the preliminary schedule of further releases:

Conclusion: do not worry

In the end, Igor Minar summed up:

don't worry about version numbers
we have to develop together with Angular, in order to prevent such as it was with the differences between Angular 1.x and 2.x, we must do it together as a community, to develop and improve our favorite product
you must understand why we had to do this with Angular 1.x and rewrite everything from scratch

Angular2 Webpack Starter

Angular2 Webpack Starter - is a quick start repository with Angular and TypeScript , through the Webpack project builder .

What is included in this repository:

Best practices for organizing files and directories on Angular 2
Webpack 2 build system with TypeScript
Angular 2 based demo
The latest version of Angular
Ahead of Time (AoT) to quickly load your application
Tree shaking to automatically remove unused code from your project
Testing with Jasmine and Karma
Coverage test with Istanbul and Karma
End-to-end Angular 2 testing with Protractor
Type Manager with @types
Material design
Hot Module Replacement
Angular 4 support by modifying package.json and any other future versions

Fast start

Make sure you have Node.js version> = 5.0 and NPM> = 3.0

#    git clone --depth 1 https://github.com/angularclass/angular2-webpack-starter.git #   cd angular2-webpack-starter #    npm npm install #    #   npm start #  Hot Module Replacement npm run server:dev:hmr

Go to http://0.0.0.0 Down,000 or http: // localhost: 3000 in your browser. More details on the official repository .

Content video course

The course will provide an opportunity to quickly start creating your applications using one of the most popular frameworks - Angular 2. In the course of the course, step by step, you will make a real application and understand the specifics of Angular 2 well. Course is in English, but in fact, if you lame language, the main thing is to try to penetrate into the code that the author writes, basically everything is attached with slides, which are also intuitive. You don't have to pay anything, sit and develop.

What good has appeared in the outgoing 2016 together with Angular 2

Statistics (as of September 2016)

1.2 million developers using Angular 1
623 thousand already use Angular 2

If Angular 1 was a monolithic project, now Angular 2 should be considered as a platform.

Angular 1 used 43 built-in directives, now in Angular 2 we use [] and ().

Angular 2 faster

Initially, Angular 1 weighed 56K. At the same time, the core of the Angular 2 itself was 170K. Angular Team optimized tons of code and now the core of Angular 2 weighs 45K.

Delayed loading

The main task of the Angular Team was to achieve automatic deferred loading. This ensures that our applications only what is needed for the current page. Lazy loading was also enabled when routing in applications.

Fast rendering

Compared to the first version of the application, Angular 2 works 2.5 times faster, and redrawing is 4.2 times faster. The Angular team believes that it can make rendering even faster.

Official Code Writing Guide

At the time of Angular 1, a large number of code writing tutorials appeared. This led to a large number of distinctive styles, which led to a misunderstanding on the Internet. Angular 2 now has an official style guide .

Material Design for Angular 2 Applications

Angular Material looks really good. Using the material style in your application is easy enough, just embed the components.

Progressive web applications with Angular Mobile Toolkit

Angular Mobile Toolkit makes it easy to create web applications that load instantly on any device, even without an Internet connection.

Progressive web applications are very interesting for many web developers. Creating and reusing your code to create a mobile application with good performance, almost equal to the native mobile application. Angular Mobile Toolkit is another step towards the realization of this dream.

Server side templating

The big problem with applications on Angular 1 was that they were collected only in the browser. This means that your applications were completely SEO-undirected.

The Angular team carried out the main component of the assembly, and now your applications can be collected anywhere, including on the server .

It's easy enough to do this with NodeJS for building server side templates.

Our applications will now work even faster for our users; now we can save valuable rendering time in the browser.

Rapid application development via the terminal using Angular CLI

The most pleasant is Angular CLI . Installing the application takes many steps where a lot of things can go wrong:

typing setup with TypeScript
setting component imports
application launch
using System.js

Angular CLI makes installation simple in one line:

 ng new scotch-app

To get started with Angular CLI, all you need to do is:

 npm install -g angular-cli ng new scotch-app cd scotch-app ng serve

We no longer need Gulp, Grunt, Webpack, Browserify.

A large number of tutorials

For example, this video fully explains how to build an application on Angular 2:

Optional typing in your web application

There are many interesting things TypeScript can do. There are many reasons why you should use TypeScript. Thanks to TypeScript Angular 2, it has become better developed.

Good debugging tools

Anyone who uses Batarangle with Angular 1 knows that his ability to see variables and the state of your application in the browser is a great help when developing.

Now there is Angular Augury , it allows us to do just that. There is no need for console.log () in every part of your application to see the state of the variable, hierarchy and inheritance in your browser.

Firebase Business Application Development Platform

You can build an application in real time with Angular 2, Firebase and AngularFire2 in about 10 minutes, for example chat. There are many features that are implemented in a short amount of time.

Cross-platform mobile applications with NativeScript + Angular 2

While Angular Mobile Toolkit focuses on creating progressive web applications, NativeScript is more interested in building native applications with Angular 2.

What is the difference, you ask? For example in animation. Having a native animation, different from the browser, everything will look smooth even with a large number of objects.

Simple testing thanks to zones

Zone.js library for managing asynchronous tasks , a way to control the execution context. Many fantastic words, but the basic idea is that testing will be much easier in Angular 2!

All these asynchronous tasks are tracked thanks to zone.js. In her video, Julie Ralph explains how it works:

In custody

I am very proud that Angular has grown from a regular framework into a whole platform, thanks to which now you can easily develop not only web applications, but also native ones, not inferior in quality. A lot of work has been done by the Angular Team, and for that I am grateful to them. Of course, there are a lot of good things around, but being part of something big is much more pleasant. Happy New Year, dear readers, we wish you all the best and good luck!

Source: https://habr.com/ru/post/318682/

All Articles