This is the first IV Openathon Custom Software Engineering "laboratory".
But it's theory! - You could say.
Yes, theory is boring for a lot of coders. But there is an exam at the end…
We are going to design and develop a solution in two parts where the current Openathon IV will cover the Frontend while the Openathon V will cover the Backend. We consider that no Frontend technology can focus only on the coding point of view. This is not a training for JavaScript TypeScript, it’s not only about a framework like *Angular. It also includes the architecture and good practises required for QUALITY see Boring Theory 2.
So, let's start with Angular itself.
What about the exam?
There is not any exam.
Angular is a very popular framework focused on the creation of SPAs based heavily on its own Dependency Injection Framework, Angular three main pillars: Modules - Components - Services, and TypeScript.
The official Angular site states:
"Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop".
And you:
That's nice, official documentation. Where is the code?
Not yet! First,
It's important to notice that Angular was created by Google in 2010 taking the Frontend development world by storm having an easy-to-use JavaScript framework that treated HTML as a first-class citizen.
When you decide to bet for a technology (and there are new Frontend technologies each Tuesday) two of the parameters you need to think about are:
- who is behind it? will it last 1 year?
- what's different from what already we have? Is it a new trend wave?
Ok, Angular had Google but what offered? Why was it very popular?
The keys were:
- Easy binding of data to HTML elements.
- Directives providing an easy way to create reusable HTML + CSS components.
- Client-side reusable components very popular in server-side.
- Dependency injection also popular in enterprise applications.
During two centuries, that is, 3 years in Frontend terms, Angular became one of the most popular Frontend technologies. But because of its popularity and the older JavaScript versions in that time (like ES5), developers were starting to run into severe performance problems. Why? because of the overuse of the main original key benefits: binding too many model objects to too many DOM elements.
When Angular performance problems were at its peak, Facebook released React in 2013 and Vue was released a bit lated by a single developer, Evan You backed in Patreon, in 2014.
It's very interesting to know why those frameworks/libraries arose but to keep focused on Angular I'll let some comparisons in Medium for you instead:
- React vs Angular vs Vue.js — What to choose in 2019?
- React vs Angular vs Vue.js: A Complete Comparison Guide
Angular was still in a better position but to complicate things even more, Google Angular Team itself decided to release a breaking version in 2016: Angular 2.
That was the debacle for Angular: a new framework not compatible with previous versions, two new languages (TypeScript and Dart) not having clear which could be the official one…
This situation gave a lot of Angular developers reasons to try other options. Also, to complicate it more, Angular 1.x was renamed to Angular.js while Angular 2 kept Angular.
Luckily, Angular (Angular 2, not Angular.js) slowly started to recover but currently is still very far from React as you can see in the next graph that shows the number of times each package has been downloaded from NPM.
See npm trends for more information.
Have a look at the main actors in Frontend history and when they appeared.
... Apart from React, Angular y Vue, guess who is still the king, the most used Frontend technology since 2006?
Click to know it!
Yes...
- It’s NEITHER Java nor Angular.js!!!
- It’s a Framework. Suck that React!
- JavaScript is dead. Long life TypeScript! 👍
- It’s NOT Java...
MVC, is MVVM = Model–View–ViewModel.- It’s NOT Java!!! LinkedIn recruiters, please, stop sending Frontend positions as "Java CVs" ;)
Angular is packed together with a set of robust technologies and libraries, for example:
- Karma, testing environment.
- Jasmine, behavior-driven development framework for testing.
- Protractor, end-to-end test framework.
- Istambul, unit-test test coverage library.
- TSLint, extensible static analysis tool.
- Webpack, static module bundler.
They are not the target of this training and we can't enter into each of them so I will let you a nice diagram architects like to show talking about Angular Technology Stack:
One colleague of mine explained some time ago that it’s nice to create diagrams full of boxes… and let others implement them :)
In that diagram, you can see that appears TypeScript, one of the languages you can use with Angular. Let's stop a moment to talk about them.
TypeScript is a typed superset of JavaScript that compiles directly to JavaScript code. It was created by Microsoft as a way for C# and Java developers to easily move to JavaScript world with a more powerful and type language.
TypeScript makes JavaScript more like a strongly-typed, object-oriented language easier to debug and maintain, two of the weakest points of standard JavaScript.
Dart is an object-oriented, class defined, garbage-collected language using a C-style syntax that transcompiles optionally into JavaScript. It supports interfaces, mixins, abstract classes, reified generics, static typing, and a sound type system.
See Angular Dart for more information.
Notice that we will focus only on TypeScript in this Openathon, and yes, you can also use vanilla JavaScript (ES6) but I prefer to ignore it.
In order to truly understand Angular we need to previously understand it's main concepts.
A Single-Page Application is a web app compiled to JavaScript that dynamically renders sections of a page without requiring a full reload from a server.
What generally happens is that the SPA framework (Angular, for example) intercepts the browser events and instead of making a new request to the server (a new document/page), requests some JSON or performs an action on the server but the page that the user sees is never completely wiped away, and behaves more like a desktop application.
Dependency Injection (DI) is an application design pattern where users don't need to create instances by themselves. Is a way to create objects that depend on other objects. A DI system (Angular DI, for example) supplies the dependent objects (called the dependencies) when it creates an instance of an object .
NgModules are the basic building blocks of an Angular application, which provide a compilation context for Components and Services.
Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.
Components defines a class that contains application data and logic, and is associated with an HTML template that defines a view or view hierarchy. This hierarchy allows the definition of arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit.
Services encapsulates non-UI logic and code that can be reused across an application. Angular distinguishes components from services to increase modularity and reusability.
Services can be reused and injected into components as dependencies, making code modular, reusable, and efficient.
At last, this theory laboratory has finished. Next section is for extending your knowledge but I sincerely recommend to have a look at it.
- Angular website
- Official docs
- 5-minute Quickstart
- Cheat Sheet
- Github Repo
- Angular Roadmap because it's important to know when your code will be deprecated :)
- Official Angular Blog
TypeScript Notes for Professionals
Angular 2+ Notes for Professional
CSS Notes for Professionals
HTML5 Notes for Professionals- Angular In Depth
- Angular Articles in Thoughtram
- Angular University to learn more...
This is a series of books diving deep into the core mechanisms of the JavaScript language. It's JavaScript... but it's free!
After all of that:
< Home Page | Main Principles, Solid Practises and Code Quality >