Writing in the front

Note: My level is limited, in The process of translation will inevitably understand The inaccurate place, in order to avoid mistakes to guide you, I hope to be able to point out, to convey The correct point of view and knowledge to you.

The body of the

Give a detailed overview of Angular today, from the latest features to the hottest topics and trends you might have missed



Photo by Guillermo Ferla on Unsplash

At this time of year, with meetings and events taking place all over the world, we are bombarded with information that is hard to digest. The front-end world is a never-ending machine, and we all know how hard it is to keep up. It takes a lot of time to watch all the meetings, so it makes sense that most people would prefer to watch Netflix at the office after a long day at work. Therefore, I hope to help you analyze a lot of information and give you an overview of Angular 2019 in an article. Here’s what we’re talking about in this article:

  • Presents the current situation of
  • The latest features of the framework
  • The latest views and trends
  • Understand words that you’ve seen in many places but haven’t fully understood yet

    Tip: UseBitEasily share and reuse Angular components in projects, suggest updates, synchronize changes, and build faster as a team.

Angular usage is growing

According to statistics presented by Current Angular engineering manager Brad Green at NG Conf 2019, Angular adoption has increased by about 50% since last year! Admittedly, the engineering of upgrading from the older version of Angular1.x inflated this figure, but it’s still an impressive increase. Angular isn’t growing as fast or as widely used as Svelte or Vue, but contrary to what you might see on Reddit and Twitter, Angular is in a very healthy state, being used by millions of developers and teams.

The Angular ecosystem is large and thriving

While the framework comes with a lot of off-the-shelf tools from the Angular team, the community still provides a very large and high-quality ecosystem. There are many things we can use with Angular:

  • Integration with excellent tools such as Typescript and RxJS has indirectly benefited Angular as these tools have grown rapidly.
  • Different styles of state management libraries.
  • Code quality tools such as Codelyzer
  • UI libraries, components, directives, pipes, and more
  • A huge library of IDE plug-ins
  • Test frameworks and utility libraries
  • Finally, the community and Angular team provide rich documentation on best practices, guides, examples, books, video lessons, and more. In the next section, we’ll see a detailed overview of some of the best tools we can use in Angular projects.

Angular CLI

Upgrading is easier than ever

According to a recent account by Mart Ganzevles, the Blueweb project, which serves 500 million users a year, was upgraded from version 7 to version 8 in just one working day, compared to the 30 days it took to upgrade from version 2 to version 4. This is further proof that the Angular CLI is a great tool for boosting our productivity to levels I have never personally experienced. It’s hard to imagine how difficult our current job would be without it.

Schematics

Angular Schematics is a feature you use every day. For example: I’m sure you often use ng generate Component my-component, which is a Schematics integrated into the CLI. What you may not know, though, is that you can be more productive by creating your own Schematics for frequently repeated snippets of code.

Builders

Generators allow you to extend or extend existing commands. For example, you could create a builder to use Jest and Cypress instead of Jasmine and Protractor to perform tests, or to use a different Linter.

New exciting features

At the time of this writing, Angular’s most recent release, version 8, has various improvements and features. Nothing affects how we use frameworks, which is good news most of the time, but the continual improvement of frameworks makes Angular projects smaller and smaller, improving the already excellent development experience, and almost complete new renderers.

Differential loading

The concept of differential loading is simpler than its name suggests. In a nutshell, the compiler generates two packages: one that supports a browser with all the modern features, without any polyfills; The other supports older browsers. The latest version of the browser loads the advanced version of the packaged file, and polyfill’s older version of the browser loads another old version of the packaged file. Since most users tend to use the latest browser, this is a big win and we only need to ship the old version of the package to a small number of users.

Web Workers

You’ve probably heard of Web Workers, so we’ll skip this section. What you may not know, however, is how much easier it is to integrate Web Workers with Angular thanks to the latest release. Take a look at this document.

CDK

CDK is a set of tools published by the Angular component team. They use Angular Material to provide a partial summary, but it is not explicit in style. For example, you can use:

  • Drag and Drop
  • Auto-resizable text area
  • Overlay for your popups
  • Virtual Scrolling

CDK is very useful because most applications can use well-done common functionality without having to use full, bloated, AD hoc components. Angular Material I is great, but you can implement your own components just using the building blocks provided by CDK.

Ivy renderer

Ivy is a very exciting new development that will be integrated into Angular as a third renderer. It is not currently available because it is not enabled by default, but you can choose to introduce and use it in version 7. It will be enabled by default in version 9. What can we expect from Ivy?

  • Smaller volume
  • Adjustable template
  • Faster packaging, faster testing
  • Here’s a screenshot of me placing a breakpoint in the Chrome console:

Angular on mobile

Ionic

Ionic is a mobile application framework, but its core components are written in Stencil. It provides documentation that you can develop using Angular or other frameworks.

NativeScript

NativeScript is a Framework similar to React Native for building mobile applications. Although they also support Vue and pure JavaScript, they provide deep integration for Angular. I don’t have a lot of experience with React Native, and I personally don’t recommend it compared to the same level of React Native, but if you’re a mobile developer, try it out.

test

Jasmine & Protractor

They need no introduction. Jasmine & Protractor and the testing framework are integrated with Angular by default. They test, update, and are surprisingly efficient in Angulaer.

Jest & Cypress

Because the Angular CLI provides a new custom builder, you can test Angular using Jest and Cypress. Jest is a unit testing framework based on Jasmine, developed on Facebook. It is actually a framework for testing React projects and is popular for its speed. Overall, a lot of people prefer it to Jasmine, so if it’s you, you can use it now! Cypress is a highly regarded E2E testing framework that is loved by many, and for good reason. It does not rely on Selenium or WebDriver, allows time to be transferred in command logs, allows network traffic control, and guarantees more consistent results without random failures.

Presents the test library

The Angular test library is a set of utilities that test UI components in a user-centric manner. This means that the library encourages you never to use components programmatically, and to test behavior by doing what the user will do. For example, you would never write:

myComponent.onClick();
Copy the code

However, you will simulate a click as a user would naturally do.

const { getByText, click } = await render(CounterComponent, {
    componentProperties: { counter: 5 }
});
click(getByText('+'));
Copy the code

State management

NgRx

NgRx is a Redux-inspired state manager that is often used in the Angular community. As its name suggests, it relies heavily on RXJS streams.

NGXS

NGXS is an optional library that also brings Redux-like state management to Angular. NGXS makes extensive use of classes and decorators in order to reduce boilerplate files, as opposed to NgRx, and if classes are your thing, this aspect may be an important factor in your choice.

Akita

Akita is a state management library for Rxjs provided by Datorama. It can also be used in non-Angular projects compared to the first two, which makes your code more reusable.

Just… RxJS?

Depending on whether you like the Redux library or whether your project needs a state management library, you can still build services that store state in RxJS!

The UI component library

Storybook

Storybook is not a library of UI components, but a tool that allows you to create isolated UI components and show all the components and their changes in a very simple way. It’s a great tool, and I’ve been envious of React developers for a long time, but now that it’s available, it’s hard not to recommend it.

Angular Material

The famous Angular Material is back with a nice set of UI component Settings in the new version of Angular.

Angular backend dependencies

Firebase

FireBase is a Google-owned application development platform. Finally, the power of RXJS observations based on streaming data releases a library, Angular Fire, that integrates seamlessly with Angular.

GraphQL

You might think GraphQL would be popular only in the Reatc community… You could be wrong. Apollo Library is also available in Angualr, which is a great alternative to Firebase if you want to use GraphQL.

NestJs

NestJs is a Node Web framework for building server-side applications. As you can see in the example, it is inspired by many of Angular’s core concepts, such as Modules, Controllers, Pipes, and so on. If you love Angular, you’ll love NestJs. If you use Nx Workspaces, setting up a full stack application with Angular and NestJS requires only one command!

The last

Overall, Angular has an incredibly high quality and rich ecosystem. Of course, I have yet to mention the dozens of libraries and tools I admire, but I am at the end of this article. I hope this article gives you an overview of the current state of Angular, and the possibilities that might power your next project. If you need any clarification, or if you think there is something unclear or wrong, please leave a message! If you enjoyed this post, follow me on Medium or Twitter for more articles about Angular, RXJS, TypeScript, and more!