Angular_870x220_3

Dive into Angular's core concepts and hot topics: Angular Labs, Angular Elements, Progressive Web Apps, Service Workers, AoT Compilation, UI Libraries and more.

Line__Blue 2.3

Your Roadmap to Angular Success

Whether you're currently using Angular or not, if you're doing any kind of frontend development these days, you've no doubt heard about this framework. One of the most popular frameworks around, Angular is a TypeScript-based, open-source library for web application development. The Angular ecosystem is huge; there are a ton of tutorials, resources and sites that cover everything from the basics to the cutting-edge of Angular. It can be exhausting to keep up with them all and determine what's worth your time, so we've done the hard work for you. This page collects the best resources we could find, and provides a comprehensive resource for newcomers and seasoned Angular developers alike.

Line__Blue 2.3

Table of Contents

  1. Angular Hot Topics
  2. What is Angular, Anyway?
  3. Where Did Angular Come From?
  4. What's the Latest and Greatest with Angular?
  5. Should I Even be Using Angular for My App?
  6. OK, I'm In. How Do I Get Started?
  7. Beautiful UI for Angular Apps
  8. Keeping Up-to-Date with Angular

Line__Blue 2.3

__Angular Hot Topics-180x192

1. Angular Hot Topics

Looking for just the latest, hottest Angular news? This is the section for you. The Angular world moves fast, and today's big trend is tomorrow's old news. In this section, we've provided an overview of the most active developments and tidbits in the Angular space. If you don't read anything else on this page, be sure to read this section.

Angular Labs

In the Fall of 2017, the Angular team announced "Angular Labs," an umbrella category for many of the experimental and in-flux features the Angular team is working on. The goal is to create a clear dividing line between the stable and production-ready aspects of the Angular ecosystem, while allowing for experimentation and iteration on emerging ideas that may make their way into Angular proper in the future.

If keeping tabs on the cutting edge of Angular excites you, definitely keep an eye on everything under the Angular Labs umbrella.

Angular Elements

When Angular Labs was announced, the team organized three existing initiatives under that label: Schematics, Component Dev Kit and the ABC project. They also announced on new initiative that's quite exciting, and worth mentioning here: Angular Elements.

The goal of the Angular Elements project is to allow developers to build Angular Components that can be packaged up and used outside of an Angular application. Under the hood, Elements relies on the Custom Elements specification, which is not quite yet implemented in all browsers, though support is coming soon.

As an example of how this would work, in practice, let's assume that you've built a calendar widget for an Angular application, and another team - this one building a React app - needs to create a calendar widget as well. With Angular Elements, you can bundle that widget into a self-contained, custom element that the React team could drop into their app.

In a GitHub thread on the status and roadmap for Angular Elements, Rob Wormald said that Elements should be released with Angular 6, although it would remain experimental for a time. There's a lot of excitement around the potential of Angular Elements, but the Angular team wants to proceed deliberately and with caution, and not fall into the trap of releasing anything before its ready.

If you're interested in keeping tabs on Angular Elements, make sure to follow the Elements branch in the Angular GitHub repo, though you should expect this to be merged with the master around the time of the Angular 6 release.

Progressive Web Apps

Progressive Web Apps (PWAs) represent a new way to approach web development, especially for responsive and mobile web apps. By following a few new web APIs and a number of development practices and guidelines, PWAs are intended to allow developers to build mobile web apps that behave a lot more like natively-installed applications.

Why does this matter? Because, in reality, people primarily use native apps, not web apps, on their phones. According to comScore, people spend 87% of their on-device time in native apps, and only 13% on the mobile web.

And while we can't completely generalize why this is, native apps have a number of built-in advantages that make users more likely to engage with them over a mobile web experience, including home screen launch icons, push notifications, offline support and better performance. Generally speaking, in the eyes of consumers, native apps are more dependable.

But the other side of this coin is that native app usage is highly concentrated among a few apps, for most consumers. Many studies have found that users tend to use only a few installed apps on a regular basis, meaning that all that time and money you are looking to spend to create a fully-native app that mimics what your web app already does might be a waste if you're not immensely sticky.

Thankfully, PWAs exist to make it easier for web developers to create mobile web apps that have many of the advantages of native apps, including installability and offline support, without having to creative a fully-native mobile app.

In practice, PWAs center around a new level of care for the experiences your users have while using your app. According to Google, one of the primary drivers of PWAs, PWAs are all about delivering user experiences that are reliable, fast and engaging. They are experiences that have the reach of the web, and which:

  • Load instantly and never become nonfunctional, even in uncertain network conditions
  • Respond quickly to user interactions with smooth, fluid animations and no jank
  • Feel like a native app on the device, and provide an immersive experience

For more guidance on building a PWA, or adapting an existing app to the PWA model, you can follow this checklist from Google.

There are some good resources available to help take you through the process of creating a PWA, and you can find a great tutorial series here, complete with code samples you can download.

Service Workers

One of the key technologies in the PWA umbrella is Service Workers. A Service Worker is essentially a programmable network proxy inside the browser, which allows you to "catch" when the browser needs to make a network request and either dispatch the request, or retrieve the requested information from a cache or local store. What this means is that Service Workers enable developers to deliver an offline capable experience by being able to detect and respond to offline or high-latency conditions in an app. For an in-depth introduction to Service Workers, check out this article from Matt Gaunt at Google.

Angular has built-in support for Service Workers and is something you should consider enabling, even if you don't go for the full PWA approach.

Service Workers have support in Chrome and Firefox, but are not yet supported in Safari or Edge. That's about to change, however. As of version 11.1 for desktop and 11.3 for iOS, Safari will support Service Workers, which is a huge boon for mobile web developers building PWAs. Edge version 17 should provide support for Service Workers, as well.

Line__Blue 2.3

__What is Angular, Anyway-180x192

2. What is Angular, Anyway?

Even if you're not yet using it, you've certainly heard a lot about Angular over the last several years. But what is it, really? And where did it come from? In this section and the next, we'll provide a gentle overview of core concepts in Angular, and a bit of its history.

Angular is a large, complex framework that provides a lot of great features. At its core, however, much of the power of Angular comes from four key concepts that any aspiring Angular developer will want to be familiar with. They are:

  1. Components
  2. Dependency Injection
  3. Property Bindings
  4. TypeScript

Components

Nearly everything in Angular is a component, including the root element of your application itself. Whether a custom element you create or an entire single-page app, everything in Angular is either a component, or a collection of components. There are aspects of Angular that are not components, per se, but the component is a central concept to the framework, and represents the majority of what Angular developers will write and work with when creating an Angular app.

Components are the #1 key concept and are also a common foundational feature in other frameworks as well. Take a look at this comparison of components in different frameworks for additional info.

Dependency Injection

One of the toughest aspects of building a complex application is dependency management. Not only because complex apps tend to have a lot of dependencies, but also because our traditional approaches of including dependencies in our apps - via in-line imports and declarations - tend to be brittle and create a lot of places to touch when dependencies need to be updated or changed.

In contrast, Angular uses something called Dependency Injection (DI) at its core. With DI, developers declare dependencies in a central location or locations, and when new objects are created, dependencies are automatically created and "injected" into the app. DI can be a daunting topic for newcomers, but is quite elegant and powerful once you grasp it. Thankfully, the Angular team has a great resource you can code along with to learn how DI works in Angular.

Property Bindings

Property Bindings have been a key construct of single-page apps (SPAs) from the beginning, and Angular is no different. Central to the framework is the idea that app data is separate from presentation logic, and that changes to data should automatically update every place where that data is displayed or used in an app. This is accomplished through property bindings on templates in custom elements. By default, Angular bindings are one-way, though two-way bindings are supported using the ngModel directive.

TypeScript

TypeScript is a superset of JavaScript that provides support for complex types, and which compiles to plain JavaScript for execution in the browser. Created by Microsoft, TypeScript provides static typing and structuring to JavaScript. The goal of the language is to help developers building large, complex web applications, and it is a popular choice among enterprise development teams, especially those coming from a C# or Java background.

For the 1.x to 2.0 rewrite, the Angular team choose to build the entire framework with TypeScript. You can use vanilla JavaScript (or even ES6+ with Babel) for your own apps, but it's quite common for developers working with Angular to also use TypeScript. Many online samples, blogs, articles and community resources are written with TypeScript, so we recommend serious consideration of adopting TypeScript in your Angular apps.

Line__Blue 2.3

__Where Did Angular Come From-180x192

3. Where Did Angular Come From?

It's hard to believe that Angular has been around for almost 10 years, but it's true! There's a great article that covers much of the history of Angular, but we'll give you a quick overview here.

As with many great tools and libraries over the years, Angular started as a side project. In 2009, Miško Hevery and Adam Abrons released a a project they called <angular/>, a library meant to help developers and designers build web apps with simple HTML. The name "Angular" was inspired by the angle brackets (<>) that surround all HTML tags like <div>, <script> and <ol>.

During an interview he did with InfoWorld in 2013, Miško had this to say about the inspiration for Angular:

"We wanted to see if we could make it easier for Web designers, not necessarily Web developers, but Web designers, to sprinkle a little bit of extra HTML into their code so that they could turn a static form to something they could actually send in an email. The idea would be that you could [for example] have a mom-and-pop shop that sells pizza or something, maybe you could [have] a simple ordering system just by adding a bunch of these tags and they could send an email to the server."

Soon after releasing Angular, Miško began working at Google. By 2010, he was working on the Google Feedback application and he convinced his manager at the time, Brad Green, to give Angular a try during a rewrite of the application. In that single project, the amount of time and code the team saved was plenty to convince Google of the power and potential of Angular.

On the heels of the Google Feedback rewrite, the team open-sourced the library that Angular had grown into over the course of the project, before officially releasing v1.0 in May of 2011. Adoption was fast and furious, and today Google boasts that over 1.5 million developers use Angular.

Angular was originally released as AngularJS - the 1.x version. Anything with a 1.x version is still referred to as AngularJS. There are still many projects using AngularJS, but the final release is coming in mid-2018 and it will enter long term support mode at that point.

The 2.0 version represented a complete rewrite of the library and, as such, is referred to simply as "Angular." The latest version of Angular is 5.x at the time of this writing.

But What Does Angular Do?

Simply put, Angular is a JavaScript framework designed to make it easier for developers to build apps. The framework contains a bevy of features that make the complex aspects of modern apps, like data binding, routing and animation, trivial to implement.

Angular also provides a number of conventions for you to use when approaching your own app development. These conventions, or opinions, can be especially helpful for large teams working together on a single code base. Angular provides a very comprehensive style guide with a number of options that cover nearly all aspects of modern web app development. For more information about the "what" of Angular, there's no better place to start than the Angular home page.

Line__Blue 2.3

__The Latest with Angular-180x192

4. What's the Latest and Greatest with Angular?

As of this writing, the current major release version of Angular is version 5, which was released on November 1st, 2017, just a few days off the originally-planned release date of October 23rd. Not bad for one of the largest open-source projects around. And while Angular 5 is a big release, the upgrade path from 4.x versions is quite straightforward.

What has been going on in Angular in 2017? And what is coming in 2018? Here's a look at the recent changes in the Angular world.

So, what's new in Angular 5? Here's a breakdown of some of the new goodies.

Optimization of Bundle Sizes

Angular's improved build optimizer now makes your app bundles even smaller. For those new to the tool, it's a feature of the Angular CLI tool that helps produce the smallest version of your production scripts, CSS and other assets. And the best part is that all you need to do to take advantage of this improved feature is to upgrade to the latest CLI (v1.5) and use it to create production bundles before deploying. If you're concerned about the runtime cost of Angular, give this feature a try!

AoT Compilation - Enabled by Default

Ahead of Time compilation (AoT) is the process of compiling components and HTML templates at build-time so that an app and its components or templates are delivered as executable JavaScript code before being rendered by the browser, at runtime. This form of compilation can lead to huge gains in runtime performance, and is now enabled by default for production builds of Angular. Even better? Kendo UI also supports AoT compilation for your apps.

Progressive Web Apps (PWAs)

Angular 5 introduces the @angular/service-worker package to bring service workers into any and all Angular applications. As we discussed earlier, service workers are a key aspect of PWAs, and formal support out-of-the-box is a huge step towards making PWAs even easier to build with Angular.

And More!

The three items above are some of the most notable features in Angular 5, but there's a lot more to get excited about, big and small. Here are some highlights:

  • Angular Universal, a feature for server-side rendering (SSR) provides a new API to transfer app state from the server
  • Angular Universal has also implemented a server-side DOM for easier creation of SSR apps
  • Angular 5 has switched to use the native addEventListener api for improved rendering
  • The Angular Router has added events that allow you to keep tabs on individual routes, including ActuvationStart and ActivationEnd events

For an exhaustive list and more information about what's available in the Angular 5 release, you can check out the official changelog.

Line__Blue 2.3

__Should I Even be Using Angular for My App-180x192

5. Should I Even be Using Angular for My App?

If you're reading this and asking yourself this question, chances are you're wondering a few things about Angular. Like:

  • Does anyone use Angular?
  • Can or should I migrate from AngularJS (1.x)?
  • What about React and Vue? Should I use those instead?

Let's look at each of these questions, in turn.

Does Anyone Use Angular?

Angular has been around for a while - nearly a decade! - so it's natural to wonder if its best days are behind it. And while the answer to that question is largely in the eye of the beholder, Angular's progress from 2.x to today (5.x) should paint a clear picture that the team is quite active and that the development community is healthier than ever. What's more, the 2017 State of JavaScript and 2018 StackOverflow developer surveys underscore that interest in and usage of Angular remains strong.

Can I Migrate from AngularJS?

Another common question comes from developers and teams that adopted AngularJS versions in the 1.x timeframe. In the early days of the rewrite, the official word from Google was that there would be no migration assistance or tooling provided for those looking to go from AngularJS to Angular 2 and above. Thankfully, the team has since backed away from that stance, and there are a number of migration resources available. While we recommend moving to Angular 2+ when starting new projects, we recognize that, even in these cases, there are likely legacy modules and features that you'll want to carry forward.

Quite a bit has been written on migration. For more information on the ins and outs of migration, take a look at this blog post on migration methodologies.

What about React and Vue?

Finally, if you're evaluating web frameworks, you're probably considering React and Vue, along with Angular. And while this page is targeted towards the Angular ecosystem, we recognize that Angular doesn't make sense for every type of app and every team. There are many factors to evaluate when selecting Angular, React or Vue. And while there are areas where the libraries stack up well against each other, there are some where one is a clear choice.

More importantly, the context of your organization, the needs of your customers and the skills of your development team should factor heavily into the framework you choose for your next app. With that in mind, here are some bullets to consider when making a choice between Angular, React and Vue.

  • If you're looking for an all-in-one solution for a complex app, Angular is a solid choice
  • If you want a UI-leaning framework that works well with an ecosystem of companion tools and libraries, React is probably your best choice
  • If you're looking for a solution that feels like Angular in many ways, includes some simple defaults and can be extended as your app gets more complex, Vue's progressive approach makes it a solid choice
  • If you need something that has the assurance of corporate backing, Angular and React provide just that
  • If your development team is fluent in C# or Java and prefers statically-typed languages, they'll be most comfortable with Angular and TypeScript
  • If your team is made up of experienced JavaScript developers who are well-versed in the latest and greatest language features, React will be a comfortable place to work
  • If your team insists upon separation of HTML, JS and CSS, or operates in an environment where designers and developers collaborate on components, Vue is a good fit
  • If your organization needs long-term support and a security focus, Angular is the best choice.

As with most things, your context is key, here. There is no incorrect choice between Angular, React and Vue, so long as it is informed by your needs. As you consider your choice, we recommend this whitepaper for an in-depth comparison, as well as this video, which provides an overview of a few other popular web frameworks.

Angular and SPAs

As webpages got smarter and smarter and morphed from a static display of information to interactive experiences, the overall structure changed as well. A series of interlinked HTML pages began to be replaced with fewer and fewer pages that were able to dynamically change what was being displayed. Eventually, all functionality started to be stuffed into what is - literally - a single page application (SPA).

There are many efficiencies to using an SPA from a developer's perspective. First of all, there is no duplication. Even using includes, multiple pages often results in multiple instances of the same thing. Wasteful. This also includes the environment. Passing state and other information between individual pages adds another level of complexity. An SPA can (note "can," not "is") also be easier to maintain and deploy than a series of individual web pages. This does require some discipline, however, since the JavaScript, CSS, and other assorted functions can also be spread out across a dizzying array of files that are all across the internet. But an SPA *can* be implemented with a small number of files, and a complex website implemented strictly in HTML files just can't. One other result of this is bandwidth savings. An SPA can load the entire web application and then only go to the internet for any data it has to pull (or write) from a server. A multi-page site will require a download of each new page that is loaded (+/- caching).

Downsides? For starters, goodbye usable URLs. No more linking to specific "bookmarks" in the flow like "mysite.com/products/training_bat," for example. Your SPA only has one URL - "mysite.com." And creating content on the fly programmatically is almost thumbing your nose at Google and daring it to try to figure out what's actually on your site. Still, there are ways to get around both of these with a little care.

Do you need Angular to create an SPA? Of course not. But the path to an SPA means that you are stuffing more and more functionality into your one webpage that is being driven not by HTML but by JavaScript. The code becomes more and more complex, which means that not only do you need ways to manage the complexity, but you also require more "firepower" to implement complex functions. This is where Angular comes in, and here I will merely reference the other sections on what Angular brings to the table. When you look at everything that Angular brings to a JavaScript development effort, that's what you need. Your website is no longer a series of static pages that might have some code on it. Your website is now a complex program and needs to be treated as such, and that means using all the tools a real grown-up development project would use (and typed language like TypeScript). That's why you need Angular for an SPA. Not because your website is an SPA, but because your website is a complex program.

Line__Blue 2.3

__How Do I Get Started-180x193

6. Ok, I'm In. How Do I Get Started?

Assuming you've decided to go with Angular, you're probably ready to jump in and get coding. Before you do, however, we suggest taking a few minutes to plan out your Angular app and think through some of the key decisions you'll need to make as you build out your app.

These include:

  • Your software development tools, including bug trackers, version control, communication and task management
  • Package managers, or tools that help track and manage dependencies from external sources
  • Task runners to help you automate things like testing, linting and more
  • Linters and style checkers, to maintain consistency throughout your team
  • UI components like Material, Bootstrap and Kendo UI
  • Testing tools for units of code and even end-to-end browser testing
  • Your targets and distribution strategy - are you building a mobile app, a PWA?
  • Style guides, state management, performance and more

Once you have considered these factors and more, you're ready to roll with Angular. Thankfully, there's an extensive quickstart and some awesome docs.

Line__Blue 2.3

__Beautiful UI for Angular Apps-180x192

7. Beautiful UI for Angular Apps

In 2018, building a web app isn't just about creating something that's functional. In fact, nowadays, if you have an app that works with a terrible user experience, you might as well not have an app at all. Fortunately, there are some great options for helping you put the best face on your app. Two of the leading options are Angular Material and Kendo UI.

Angular Material

The "Material" in Angular Material refers to Google's Material Design language, a set of design patterns and styles that Google uses for its mobile, desktop and web apps. It's become quite popular for both Android and iOS and the Angular Material library provides an extensive color palette, components, animations, icons, gestures, and more.

Building Your Interface with Kendo UI

Whether you've decided to use Angular Material, Bootstrap or another UI library, chances are that your UI and functional needs extend beyond the built-in HTML components. Instead of building your own components, or cobbling them together from an uncoordinated mess of single-feature libraries and components, the faster approach is to use a robust library of UI components. Kendo UI provides the most popular UI library of native and purpose-built UI components, and is worth considering for your next app. Here are a few of the stellar features of Kendo UI for Angular:

  • The Kendo UI library for Angular consists of true Angular UI Components, built from the ground-up for Angular and not based on jQuery or other libraries.
  • Performance and Speed: the components are engineered specifically for Angular, enabling them to take full advantage of the framework's native performance capabilities like Ahead of Time Compilation (AOT), Angular Universal, and Tree Shaking.
  • Installation and Updates: Kendo UI for Angular is installed as discrete, scoped npm packages. It is easy and unobtrusive to get the latest bits: no need for time-consuming installations. This also means that the latest code is always available immediately.
  • Kendo UI for Angular supports both JavaScript and TypeScript.
  • We've been doing this for a long time. Progress has been creating UI components for 15 years. Kendo UI has been used in tons of apps so you get all this experience and user feedback folded into the Kendo UI Angular components.

Check out Kendo UI for Angular yourself by downloading a free trial today.

Line__Blue 2.3

__Keeping Up-to-Date with Angular-180x192

8. Keeping Up-to-Date with Angular

The web world moves fast, and Angular is no different, so if you jump into the ecosystem, you should know how to keep up-to-date.

Here's a list of places and resources to keep an eye on as you embark on your Angular journey:

And, of course, you can keep an eye on what people are saying about Angular. Here are a few suggestions (some of the Angular team members) for who to follow on Twitter, and there are lots of other people who are contributors to the Angular community that you will find:

Line__Blue 2.3

Authors

This resource was assembled with the hard work of many people, and we want to recognize John Willoughby, Alyssa Nicoll and Brandon Satrom for their contributions as co-authors. Questions or comments for any of them? Let us know in the comments below.

Back to Top


John Willoughby
About the Author

John Willoughby

John Willoughby is a product marketing manager and a software developer based in the Boston area. He is passionate about helping to give other developers better tools which is why he loves working with Kendo UI.

Related Posts

Comments

Comments are disabled in preview mode.