Angular 2 VS Angular 4: Features, Performance

In the world of web application development, Angular is considered one of the best open-source JavaScript frameworks.
Google’s Angular team announced that Angular 4 would be released on 23 March. Actually, they skipped version 3. As all of you know, the long awaited release of Angular 2 was a complete makeover of its previous version.


Firebase: Real-Time Database Using Angular 2

What’s up guys, Eze is here. Those who follow me on Twitter (if you are not a follower you better do it now @skielo) already know I’ve been working on an app to show you how to use Firebase from an Angular 2 app. I have several posts talking about Firebase and how to use almost all its functionalities from an AngularJS app, in case you missed it you can check it here. Today, I want to show you how easy is to get an Angular 2 app up and running and connected to Firebase. This will be the first out of a series of posts where we are going to find out more about those tools.
The Skeleton of Our App
I want to show you first how to create a new Angular 2 app from the scratch. To do that we will need to install the angular cli tool onto our machines. The installation of this tool is really simple – we just need run the following command npm install -g @angular/cli. Please be sure you have a node version higher than 4 because it’s a requirement for this tool to run.


Learn ASP.NET Core Using Angular 2

In this article, we will learn ASP.NET Core using Angular 2 in Visual Studio 2017.

Why should we use Angular 2?
Why should we use ASP.NET Core?
What should we know about?
How do we use Angular 2 in ASP.NET Core?

Why Should We Use Angular 2?
Angular 2 is a great framework to use for getting the most out of the latest browsers and thus for creating better applications. Angular 2 can build applications that live on:


Angular 4: Front End for the Enterprise

When Angular 2 was released in September of 2016, it signalled a dramatic shift in enterprise front-end development. Not only was it a complete rewrite of AngularJS, but it was also built from the ground up with Typescript – Microsoft’s strongly typed superset of JavaScript.
Suddenly, enterprise developers experienced with type-safe languages such as Java, C# and Scala, were welcomed into the world of modern front-end development with a framework that seemed immediately familiar to them.
In March of 2017, Google announced the release of Angular 4, now known as simply Angular, which introduced many optimizations and improvements to the developer experience and the user experience, solidifying Angular’s stance as an ideal, front-end development framework for the enterprise.
This post highlights the benefits of Angular from both a development and a user-experience standpoint and reviews the improvements over Angular 2 that Angular 4 introduced to the framework.
Typescript and the Benefits of Strongly Typed Languages
Enabling developers to assign types, interfaces, classes and inheritance to their front end code, Angular 2 made complex applications both easier to develop across large teams and more importantly, easier to maintain and refactor.
The introduction of static types ensured that developers could be confident that any errors they might introduce into a code base would be caught immediately by the TypeScript compiler, and that code written by a colleague was well defined, easy to understand, and simple to consume.
Libraries vs Frameworks
In addition to the introduction of static typing, Angular 2 introduced common design patterns based on lessons learned from AngularJS’s evolution and the emergence of other front-end libraries such as React and Ember.
This difference is what makes Angular a framework and React a library. React does not dictate any decisions outside of the view layer. Where developing a complex application with React would require bringing in any number of external libraries in any number of ways, Angular provides modules and conventions that offer solutions to everything required of a complex front-end application, allowing developers to start delivering features straight out of the gate.
As a result, an Angular developer can be brought into any Angular project and will be immediately familiar with the code and conventions used to make it work. Developers will be familiar with the framework and many of the standard conventions that are used on any project; whereas a large React project would require significant time for a developer to familiarize themselves with the architectural decisions made to any particular project.
Angular 2… Angular 4…. Let’s Just Call it Angular
In December of 2016, the Angular team announced that they would be adopting semantic versioning, also know as Sem-ver, which prescribes a strict semantic relationship between code changes and version numbers. This numbering system aligns major numbers with breaking changes, minor numbers with new features without breaking changes, and patch numbers that represent bug fixes, Sem-ver lets a developer know whether or not upgrading a library will break their code.
So why the jump to Angular 4? Angular is a collection of distinctly separate modules, and one of these modules, the router, had gotten ahead of the rest of the library and had already made the jump to version 3. To get everything back in sync, and to fully support Sem-ver across all of the Angular framework, the core team decided to bump both the Angular framework and the router to version 4.
This jump in major numbering was confusing at first, but a necessary step for Angular’s version numbers to be truly representative of the changes being made to its codebase.
As a result, Angular 4 is now simply referred to as Angular. This is in contrast to AngularJS, which represents all 1.x versions of Angular. Whereas Angular 2 is a complete rewrite of AngularJS, all future major versions of Angular will not represent rewrites of the framework, but rather, further improvements, and the core team has a release schedule that includes major version upgrades every six months. Angular 5 is slated for release in September of 2017 and Angular 6 is due in March of 2018.
So What’s New in Angular 4?
Angular 4’s focus is on improving the performance and bundle size of Angular 2. It’s possible to consider Angular 2 a beta version of Angular itself, with Angular 4 introducing optimizations and improvements that the Angular community asked for.
Long-term Support (LTS)
At ng-conf 2017, the Angular Core team announced that Angular 4 will be its first version of Angular with LTS. This means that enterprises that don’t have the ability to constantly upgrade Angular and their applications can commit to Angular 4.
Faster Rendering and Smaller Bundle Sizes
Changes in the compiler reduce the size of the generated code for your components up to 60% in most cases – the more complex the template, the higher the savings. Further, by removing the animations package from @angular/core, your bundles won’t have to include it unless they require it, saving additional file size.
Better Minification
Angular 4 now ships with Closure annotations, which allows developers to use Google’s Closure compiler to drastically reduce the size of their bundles even more than what was previously possible with UglifyJS, thanks to smarter tree shaking.
TypeScript 2.3
Angular 4 uses a more recent version of TypeScript than Angular 2, and this allows for faster compilation time with the ngc compiler and better type checking.
Better Error Messages
A common source of frustration with Angular 2 was its somewhat cryptic set of error messages. With Angular 4, not only are error messages clearer and more informative but now thanks to new template source maps, they also point directly to lines of code within templates.
Server-side Rendering
Angular Universal, Google’s server-side rendering library, is now compatible with Angular 4. Universal allows developers to render their applications on the server side, benefiting both search engines and users alike.
*ngIf, Now With More Else
The *ngIf structural directive, a very commonly used part of any Angular application, now has an else statement. This means that developers can now simplify their conditional templates, no longer needing to use two *ngIf’s with opposite evaluations.
Angular 4 Is an Ideal Enterprise Front-end Framework
With the improvements made to Angular by the Angular Core team in Angular 4, Angular has solidified its position as the ideal front-end framework for enterprise applications.
Based on standard conventions, familiar design patterns, strongly typed code, and server-side rendering, enterprises can develop scalable applications across large teams that are highly performant and optimized for the server side and client side alike.
With a clear release schedule and the recent announcement for LTS versions, enterprises can adopt Angular for their front-end applications with full confidence that they are choosing the best framework for the job.


Web Applications Frontend and Backend Communication Using Angular 2 HTTP Observables

A frequent operation in most web and mobile applications is data request and response from/to a server using a REST architectural style via an HTTP protocol. Angular 2 implements Observables in its HTTP module for working with HTTP response and request. In this tutorial, we’ll look at how to get and post data from/to backend servers using Observables.
What you’ll learn in this tutorial:


The Recipe for Angular 2 in a Java EE Environment: Maven Build

This is the fifth article in our “The Recipe for Angular 2 in a Java EE Environment" series, with a more detailed description of the build of the Angular2 and JavaEE Project. It follows my fourth article about Angular 2 and Java EE that gave a detailed overview of the Frontend infrastructure of the Car Rental Project.
In this article, the build of the project is covered. That might not be considered the fun stuff, but to get Angular approved in a corporate environment you will have to learn to integrate with the existing Continuous Integration Infrastructure. The Deployment and Testing requirements also need to be met. This article should give you an example of how this could be done. 


Three Books on Angular

Programmers routinely use Stack Overflow as a brain extender these days, but there is still a place for long-form tutorials and well-organized reference guides. These can do more than inform: they can shape how a technology develops by guiding readers in particular directions, and simply by existing, they tell developers what their peers find interesting.
By this last measure, Angular is doing pretty well these days. Rangle’s Angular Training Book had the field pretty much to itself a year ago, but good alternatives are now on the market. As someone who was new to Angular six weeks ago, I found two particularly useful.
The first is Asim Hussain’s Angular 4: From Theory to Practice. This short, lively introduction to Angular covers everything you need to know to build your first Angular application, from components and data binding through dependency injection and services to routing, forms, and testing. The framework’s capabilities are introduced in a logical order, and the writing is light without being shallow. It took me a couple of tries to get through some parts, but that had more to do with the complexity inherent in an enterprise-scale framework like Angular (and in my unfamiliarity with modern JavaScript) than with the book itself.
The second book I would recommend is Frisbie’s Angular 2 Cookbook. As the title suggests, this is a collection of recipes for people who already have some idea of what they want to do, but aren’t sure how (or how best) to do it. The first chapter discusses upgrading from earlier versions of Angular; subsequent chapters cover the same topics as Hussain’s book, but in more depth. The author presents each example in small steps with changes highlighted to make it easy to follow along. I found Chapters 6 (routing), 8 (organizing and managing applications), and 10 (performance) particularly helpful, but have lots of sticky notes marking other places as well.
Note: this book was written before CLI 1.0. The CLI has become an essential part of Angular development and offers a good starting point for most applications. It might not matter as much for advanced users who care a lot about webpack configs and customizing the testing tools, but it should still be in every developer’s toolbox.
One book that I wouldn’t recommend is Fain and Moiseev’s Angular 2 Development with TypeScript. The authors clearly know their way around Angular, and individual sections of the book are quite useful, but the overall organization is confused, and terms and features are often used before they are explained. I liked the use of callouts to draw attention to particular aspects of example code, but found myself doubling back much more often than I wanted to.
Angular is complicated because the problems it solves are complicated. Its internal documentation is much better than it used to be, and tools like Augury dispel a lot of mystery, but there will always be a place for good tutorials and reference works. With Hussain and Frisbie’s books, Angular has at least one of each.

Yakov Fain and Anton Moiseev: Angular 2 Development with TypeScript. Manning, 2016, 978-1617293122.
Matt Frisbie: Angular 2 Cookbook (2nd ed). Packt, 2017, 978-1785881923.
Asim Hussein: Angular 4: From Theory to Practice. CodeCraft, 2017, B01N9S0CZN.

Learn More
If you’re looking for more Angular learning opportunities and in-depth tutorials, check out our various training options. Better yet, inquire about custom training to ramp up your knowledge of the fundamentals and best practices with custom course material designed and delivered to address your immediate needs.


A Look Back on Rangle’s Success at ng-conf

Rangle’s presence was front and centre at this year’s ng-conf 2017, the world’s original Angular conference. Six Ranglers took to the stage to share their knowledge and expertise in front of 1,000+ developers. Here’s what our experts had to say:
FormControl Freaks: Redux Edition
Daniel Figueiredo Caetano and Renee Vrantsidis
Enterprises are adopting Angular, and they love (LOVE) forms. While Angular form controls are really powerful, form-based applications can be vast and difficult to manage due to the complexity of business requirements. Add Redux into the equation and now you have to worry about form/store synchronization too! Luckily, Angular provides a way to seamlessly integrate Redux into your forms.
Daniel and Renee examine how using Redux store as a centralized source of truth for form data will reduce maintenance cost, make your forms framework-agnostic, and keep you from tearing your hair out.
You can watch the full presentation here: FormControl Freaks: Redux Edition
Super Typescript II Turbo – FP Remix
Sean May
Calling all fans of Street Fighter II, and future fans of functional programming (FP) with TypeScript. If you have always seen FP as too mathematical to make sense, or if you feel like you have a handle on it in JavaScript but keep getting thwarted by adding types, this talk attempts to bridge the gap between the two, at a high level.
You can watch the full presentation here: Super Typescript II Turbo – FP Remix
RxJS: The Good Parts
Christopher Gosselin and Daniel Figueiredo Caetano
RxJS and the Reactive Programming methodology have become an integral part of the Angular ecosystem. Its usage can be found in the Angular Http, Form, EventEmitter, and Router modules. Like any extensive library or language, there is a small portion of functionality that provides the majority of the benefit. Chris and Daniel address core principles of RxJS that would provide the most benefit in the shortest amount of time.
You can watch the full presentation here: RxJS: The Good Parts
Build, Measure, and Machine Learn with Angular
Anna Karpacheva and Sumit Arora
This talk takes the audience on a journey from the simple concept of Build, Measure & Learn to tracking with open source Redux-Beacon library, built at Rangle. Anna and Sumit introduce A/B testing and personalization and demonstrate how to use machine learning for predictions of the user behaviour on the replicated demo website.
You can watch the full presentation here: Build, Measure, and Machine Learn with Angular
To hear more from Rangle, join us at FITC from April 23-25 where Mike Costanzo and Varun Vachhar will be speaking.