Why Do I Need a Framework?
If you’re not sure what a JavaScript (or client-side) framework is, that’s a technology providing us the right tools to build a web application while also defining how it should be designed and how the code should be organized. Most JS frameworks these days are opinionated, meaning they have their own philosophy of how the web app should be built and you may need to spend some time to learn the core concepts. Other solutions, like Backbone, do not instruct developers on how they should craft the project, thus some people even call such technologies simply libraries, rather than frameworks. Actually, JavaScript frameworks emerged not that long ago. I remember times where websites were built with poorly structured JS code (in many cases, powered by jQuery). However, client-side UIs have become more and more complex, and JavaScript lost its reputation as a “toy” language. Modern websites rely heavily on JS and the need to properly organize (and test!) the code has arisen. Therefore, client-side frameworks have become popular and nowadays there are at least dozen of them.Angular Introduction: What Angular IS
AngularJS used to be the “golden child” among JavaScript frameworks, as it was initially introduced by Google corporation in 2012. It was built with the Model-View-Controller concept in mind, though authors of the framework often called it “Model-View-*” or even “Model-View-Whatever”. The framework, written in pure JavaScript, was intended to decouple an application’s logic from DOM manipulation, and aimed at dynamic page updates. Still, it wasn’t very intrusive: you could have only a part of the page controlled by AngularJS. This framework introduced many powerful features allowing the developer to create rich, single-page applications quite easily. Specifically, an interesting concept of data binding was introduced that meant automatic updates of the view whenever the model (data) changed, and vice versa. On top of that, the idea of directives was presented, which allowed inventing your own HTML tags, brought to life by JavaScript. For example, you may write:<calendar></calendar>
This is a custom tag that will be processed by AngularJS and turned to a full-fledged calendar as instructed by the underlying code. (Of course, your job would be to code the appropriate directive.)
Another quite important thing was Dependency Injection, which allowed application components to be wired together in a way that facilitated reusable and testable code. Of course, there’s much more to AngularJS, but we’re not going to discuss it thoroughly in this article.
AngularJS became popular very quickly and received a lot of traction. Still, its maintainers decided to take another step further and proceeded to develop a new version which was initially named Angular 2 (later, simply Angular without the “JS” part). It’s no coincidence the framework received a new name: actually, it was fully re-written and redesigned, while many concepts were reconsidered.
The first stable release of Angular 2 was published in 2016, and since then AngularJS started to lose its popularity in favor of a new version. One of the main features of Angular 2 was the ability to develop for multiple platforms: web, mobile, and native desktop (whereas AngularJS has no mobile support out of the box).
Then, to make things even more complex, by the end of 2016, Angular 4
was released. “So, where is version 3?”, you might wonder. I was asking the same question, as it appears that version 3 was never published at all! How could this happen? As explained in the official blog post, maintainers decided to stick with the semantic versioning since Angular 2.
Following this principle, changing the major version (for example, “2.x.x” becomes “3.x.x”) means that some breaking changes were introduced. The problem is that the Angular Router component was already on version 3. Therefore, to fix this misalignment it was decided to skip Angular 3 altogether. Luckily, the transition from Angular 2 to 4 was less painful than from AngularJS to Angular 2, though many developers were still quite confused about all this mess.
Angular 5 was released in November 2017. It is also backwards compatible with prior Angular versions. Angular 6 should be released quite soon, hopefully giving us even more cool features and enhancements.
Angular Introduction: the Advantages of Angular
So, why Angular? Well, because it’s supported on various platforms (web, mobile, desktop native), it’s powerful, modern, has a nice ecosystem, and it’s just cool. Not convinced? Let me be a bit more eloquent then:- Angular presents you not only the tools but also design patterns to build your project in a maintainable way. When an Angular application is crafted properly, you don’t end up with a tangle of classes and methods that are hard to modify and even harder to test. The code is structured conveniently and you won’t need to spend much time in order to understand what is going on.
- It’s JavaScript, but better. Angular is built with TypeScript, which in turn relies on JS ES6. You don’t need to learn a totally new language, but you still receive features like static typing, interfaces, classes, namespaces, decorators etc.
- No need to reinvent the bicycle. With Angular, you already have lots of tools to start crafting the application right away. You have directives to give HTML elements dynamic behavior. You can power up the forms using
FormControl
and introduce various validation rules. You may easily send asynchronous HTTP requests of various types. You can set up routing with little hassle. And there are many more goodies that Angular can offer us! - Components are decoupled. Angular strived to remove tight coupling between various components of the application. Injection happens in NodeJS-style and you may replace various components with ease.
- All DOM manipulation happens where it should happen. With Angular, you don’t tightly couple presentation and the application’s logic making your markup much cleaner and simpler.
- Testing is at the heart. Angular is meant to be thoroughly tested and it supports both unit and end-to-end testing with tools like Jasmine and Protractor.
- Angular is mobile and desktop-ready, meaning you have one framework for multiple platforms.
- Angular is actively maintained and has a large community and ecosystem. You can find lots of materials on this framework as well as many useful third-party tools.
Angular Introduction: Angular’s Complexities
I have to say that, unfortunately, Angular is quite a big and complex framework with its own philosophy, which can be challenging for newcomers to understand and get used to. Learning the framework’s concepts is not the only task, however; on top of this, you also have to be comfortable with a handful of additional technologies:- It’s recommended to code Angular apps in TypeScript, so you must understand it. It is possible to write the code with modern JavaScript (ES6), though I rarely see people doing this.
- TypeScript is a superset of JavaScript, so you’ll need to be comfortable with it as well.
- It’s a good idea to get the grasp of the Angular CLI to speed up the development process even further.
- Node’s package manager npm is used extensively to install Angular itself and other components, so you’ll need to be comfortable with that as well.
- Learning how to set up a task runner like Gulp or Grunt can come in really handy, as there can be lots of things to be done before the application is actually deployed to production.
- Using minifiers (like UglifyJS) and bundlers (like Webpack) is also very common these days.
- While developing the app, it’s vital to be able to debug the code, so you should know how to work with debugging tools like Augury.
- Of course, it’s very important to test Angular applications, which can become very complex. One of the most popular testing tools out there are called Jasmine (which is a framework for testing) and Protractor (which is used for end-to-end testing).
Conclusion
In this Angular introduction, we’ve discussed Angular, a client-side framework supporting multiple platforms. We’ve covered some of its features and concepts, and also have seen how it differs from AngularJS, the previous version of the framework. Hopefully you’ve now got a basic idea of what Angular is and in what cases it may come in handy! If you would like to start learning this framework today, check out the SitePoint Angular tutorial series. And, of course, there are many additional learning materials on the site, so make sure to check them out too.Frequently Asked Questions about Angular
What are the key components of Angular architecture?
Angular architecture is composed of several key components. These include modules, components, templates, metadata, data binding, directives, services, and dependency injection. Modules are the basic building blocks of an Angular application. Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data. Templates, written with HTML, define views. Metadata is used to decorate a class to show what those classes do and how they should work. Data binding is the automatic synchronization of data between the model and view components. Directives are instructions in the DOM. Services are a broad category encompassing any value, function, or feature that your application needs. Dependency injection is a design pattern in which a class requests dependencies from external sources rather than creating them itself.
What is Angular used for?
Angular is a platform for building web applications. It is used to develop single-page applications (SPAs), which are web applications or websites that interact with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. This leads to a faster, more seamless user experience. Angular is also used for creating mobile and desktop web applications. It’s particularly useful for enterprise-scale applications due to its robustness and scalability.
Why should I choose Angular for my next development project?
Angular offers several advantages for web development. It provides a clean and easy-to-understand coding structure, which makes it easier for developers to write and maintain code. Angular also supports two-way data binding, which means changes in the model are automatically reflected in the view and vice versa. This reduces the amount of boilerplate code developers have to write. Angular’s modular architecture allows for better code organization and reuse. It also has a large and active community, which means you can find plenty of resources and support.
How does Angular compare to other JavaScript frameworks?
Angular is often compared to other JavaScript frameworks like React and Vue.js. One of the main differences is that Angular is a full-fledged MVC (Model-View-Controller) framework, while React and Vue.js are primarily libraries for building user interfaces. This means Angular provides more out-of-the-box functionality, but it also has a steeper learning curve. Angular also uses TypeScript, a statically typed superset of JavaScript, which can improve code quality and maintainability, but it may also be more difficult for beginners.
What is AngularJS and how does it differ from Angular?
AngularJS is the first version of Angular, released in 2010. It is a JavaScript-based open-source front-end web application framework. Angular, often referred to as “Angular 2+” or simply “Angular”, is a complete rewrite of AngularJS. It introduces a number of new concepts and features, such as a component-based architecture, reactive programming with RxJS, and improved performance through change detection. While AngularJS is still being used in many existing projects, new development is generally done in Angular.
What is TypeScript and why does Angular use it?
TypeScript is a statically typed superset of JavaScript developed by Microsoft. It adds static types, classes, and interfaces to JavaScript, which can help catch errors during development and improve code quality and maintainability. Angular uses TypeScript because it can take advantage of these features to provide a better development experience. However, it’s worth noting that you can still write Angular applications in plain JavaScript or Dart if you prefer.
What is two-way data binding in Angular?
Two-way data binding is a feature of Angular that allows changes in the model to automatically update the view, and changes in the view to update the model. This can greatly simplify the code and reduce the amount of boilerplate code developers have to write. However, it can also lead to performance issues if not used carefully, as every change to the model or view can trigger a change detection cycle.
What are directives in Angular?
Directives are a unique and powerful feature of Angular. They are functions that are executed when the Angular compiler finds them in the DOM. There are three types of directives in Angular: component directives, attribute directives, and structural directives. Component directives are essentially custom HTML elements. Attribute directives change the appearance or behavior of an element, component, or another directive. Structural directives change the DOM layout by adding and removing DOM elements.
What are services in Angular?
Services are a fundamental part of Angular applications. They are objects that encapsulate specific functionality or behavior that is common to multiple components. Services can be injected into components as dependencies, allowing you to keep your components lean and efficient by outsourcing common tasks to services. This also promotes code reuse and separation of concerns.
What is dependency injection in Angular?
Dependency injection is a design pattern used in Angular to increase efficiency and modularity. It is a way to supply a new instance of a class with the fully-formed dependencies it requires. Angular’s injector subsystem is responsible for creating components, resolving their dependencies, and providing them to other components. This allows you to keep your components decoupled and easier to test and maintain.
Ilya Bodrov is personal IT teacher, a senior engineer working at Campaigner LLC, author and teaching assistant at Sitepoint and lecturer at Moscow Aviations Institute. His primary programming languages are Ruby (with Rails) and JavaScript. He enjoys coding, teaching people and learning new things. Ilya also has some Cisco and Microsoft certificates and was working as a tutor in an educational center for a couple of years. In his free time he tweets, writes posts for his website, participates in OpenSource projects, goes in for sports and plays music.