Each section of this chapter will introduce you to new concepts, best practices, and optimal ways of leveraging these technologies and cover the bases to close any knowledge gaps you may have about web and modern JavaScript development basics.
In this chapter, you will learn Angular fundamentals to build a simple web app and become familiar with the new Angular platform and full-stack architecture.
The code samples provided in this book require Angular version 5 and 6. Angular 5 code is runtime compatible with Angular 6. Angular 6 will be supported in LTS until October 2019. The most up-to-date versions of the code repositories may be found at the following:
Angular is an open source project maintained by Google and a community of developers. The new Angular platform is vastly different from the legacy framework you may have used in the past. A collaboration with Microsoft makes TypeScript, which is a superset of JavaScript, the default development language, enabling developers to target legacy browsers such as Internet Explorer 11, while writing modern JavaScript code that is supported in evergreen browsers such as Chrome, Firefox, and Edge. The legacy versions of Angular, versions in the 1.x.x range, are now referred to as AngularJS. Version 2.0.0 and higher versions are simply called Angular. Where AngularJS is a monolithic JavaScript Single Page Application (SPA) framework, Angular is a platform that is capable of targeting browsers, hybrid-mobile frameworks, desktop applications, and server-side rendered views.
Each minor version increment in AngularJS meant risky updates with costly deprecations and major new features delivered at uncertain intervals. This led to an unpredictable, ever evolving framework with seemingly no guiding hand to carry code bases forward. If you used AngularJS, you likely got stuck on a particular version, because the specific architecture of your code base made it very difficult to move to a new version. In the spring/summer of 2018, the last major update to AngularJS will be released with version 1.7. This release will mark the beginning of the end for the legacy framework, with a planned end-of-life in July 2021.
Angular improves upon AngularJS in every way imaginable. The platform follows semver, as defined at https://semver.org/, where minor version increments denote new feature additions and potential deprecation notices for the second next major version, but no breaking changes. Furthermore, the Angular team at Google has committed to a deterministic release schedule for major version increments to be released every 6 months. After this 6-month development window, starting with Angular 4, all major releases receive long-term support (LTS) with bug fixes and security patches for an additional 12 months. From release to end-of-life, each major version is supported for 18 months. Refer to the following chart for the tentative release and support schedule for AngularJS and Angular:
Tentative Angular Release and Support Schedule
So, what does this mean for you? You can be confident that the code you write in Angular will be supported and backwards compatible for an approximate time frame of 24 months, even if you make no changes to it. So, if you wrote an Angular app in version 4 in April 2017, your code is now runtime compatible with Angular 5, which itself is supported until April 2019. In order to upgrade your Angular 4 code to Angular 6, you will need to ensure that you're not using any of the deprecated APIs that were announced as deprecated in Angular 5. In reality, the deprecations are minor and unless you are working with low-level APIs for a highly specialized user experience, the time and effort it takes to update your code base should be minimal. However, this is a promise made by Google and not a contract. The Angular team has a major incentive to ensure backwards compatibility, because Google runs around 600+ Angular apps with a single version of Angular active at any one time throughout the organization. This means, by the time you read this, all of those 600+ apps will be running in Angular 6. You may think Google has infinite resources to make this happen, but like any other organization, they too have limited resources and not every app is actively maintained with a dedicated team. This means the Angular team must ensure compatibility through automated tests and make it as painless as possible to move through major releases going forward. In Angular 6, the update process was made much easier with the introduction of ng update. In the future, the team will release automated CLI tools to make upgrades of deprecated functionality a reasonable endeavor.
This is great news for developers and organizations alike. Now, instead of being perpetually stuck on a legacy version of Angular, you can actually plan and allocate the necessary resources to keep moving your application to the future without costly rewrites. As I wrote in a 2017 blog post, The Best New Feature of Angular 4, at bit.ly/NgBestFeature, the message is clear:
For Developers & Managers: Angular is here to stay, so you should be investing your time, attention, and money in learning it – even if you’re currently in love with some other framework.
For Decision Makers (CIOs, CTOs, etc.): Plan to begin your transition to Angular in the next 6 months. It’ll be an investment you’ll be able to explain to business minded people, and your investment will pay dividends for many years to come, long after the initial LTS window expires, with graceful upgrade paths to Angular vNext and beyond.
So, why does Google (Angular) and Microsoft (TypeScript, Visual Studio Code) give away such technologies for free? There are multiple reasons, some including demonstration of technical proves to retain and attract talent, proving and debugging new ideas and tools with millions of developers at scale, and ultimately allowing developers to more easily create great web experiences that ultimately drive more business for Google and Microsoft. I personally don't see any nefarious intent here and welcome open, mature, and high-quality tools that I can tinker with and bend to my own will, if necessary, and not have to pay for a support contract for a proprietary piece of tech.
Bewar...