Explain Angular to Me

twitter logo github logo ・1 min read

Explain JavaScript (5 Part Series)

1) Explain React to Me 2) Explain Vue to Me 3) Explain Angular to Me 4) Explain the Frontend Webdev Ecosystem to Me 5) Explain the State of WebAssembly to Me

Angular has been around a while and has been through a journey of iterations and new approaches.

Can folks explain to me the state of Angular, its core concepts and possible future plans?

twitter logo DISCUSS (16)
markdown guide
 

Before I start I have to point out that Angular is version 2+ of the framework, where-as AngularJs is version 1 of the framework. They have similar ideas (modules, directives, services) but the underlying code and tooling is totally different. I've heard Vue is closer to AngularJS 1 in many regards, where-as Angular is its own thing in most cases.

I will only be talking about Angular, as AngularJS has been a legacy framework for a while now, and is now more or less in LTS.

Angular is a web application framework

Angular's goal isn't necessarily to build SPA apps, but applications using web technologies.

  1. Angular provides top of the line tooling, to the point you can use its tooling to build React and Nodejs applications using the same commands as you would to develop an Angular app. By default it uses webpack under the hood, but is flexible enough to use other build systems such as bazel (Google's builder for most projects). The tooling also supports mono-repo development and library sharing out of the box.

  2. Angular is built for scale of apps. Almost every major standout feature was added to support building large complex apps.

    • TypeScript scales better than normal JS
    • Dependency Injection system to better facilitate sharing code and testing
    • Reactive code (rxjs) provides more power to handle more complex use-cases.
    • The module system provides more context to the build system, thus providing stuff like lazy-loading support out of the box
    • built in or 1st party support for web-workers, service workers, and server-side rendering
    • the entire framework was re-written (from AngularJs) due to AngularJs' issues with scaling, a newer render engine has been written (ivy) and should help improve performance of apps in most cases (who knows when Ivy get's here tho, since its been in development for years haha)
  3. Angular's goal isn't really to focus on UI's, or even components. It's to build apps. This explains a lot of the verbosity for many use-cases that are solved with simpler syntax in the other two frameworks, but simply put taking the out of the box approach is usually better for larger projects, rather than rolling your own solution with VueJs or React.


Disadvantages of Angular

  1. Reactive Programming/rxjs is complex as hell
  2. The framework has a huge API surface
  3. It's more verbose than necessary for most simple use-cases, and is simply overkill most of the time
  4. Angular doesn't provide any out of the box opinionated state management solution. Its easy to build your own, but its not structured like the rest of the approaches that are already picked in the framework.

I'm an Angular developer and I personally like Angular's structured approach to building applications. Its very easy to run into a problem and find a solution already built into the framework. No need for external libs for important use-cases. (besides state management hehe) Angular's got your back, as long as you stick through learning all the core bells and whistles.

Edit I never noticed anything of the usual like "explain it to me like I'm five" when writing this reply. I personally don't think 5 year olds are a very good target audience for Angular so I wrote my reply for anyone interested in web development, with enough experience under their belt to be able to google-fu their way to understanding hehe. Sorry to any 5 year old reading this, but this post isn't for you. ;)

 

Regarding state management, NGRX is the de-facto library for redux-like state management on Angular: ngrx.io/

I particularly like the effects mechanism on ngrx, which is used to trigger side-effects in the store in a clean way!

Also, I'd like to point out that NestJS is a backend strongly inspired by the Angular architecture, and they go very well together!

 

Oh man I totally forgot about mentioning which state management solutions are available and most popular, thanks for pointing it out! 😄

I also like NestJS for the same reasons I like Angular :D

 

Angular is what you get, when a Java developer shoehorns best practices into Javascript to give your JS mess at least a bit of structure and accidentally creates one of the three biggest and most successful frontend frameworks to build contemporary web applications.

(vis comica 😉)

 

I'm glad you didn't wrote "AngularJS" 🎉

As it was already mentioned, it forces you think a bit more structured.

You can split everything into components / services / redux (ngrx, ngxs and many more) but if you like you can also put everything in just one AppComponent (not recommended xD)

You can use dependency injection, if you have a shared component, which uses a data-service (interface) you can provide a different service implementation based on what different app / place you want to use it.

Thanks to TypeScript you are also forced to be type-safe, which helps a lot! (Unless you want to type everything in : any , please don't do it xD)

Hmm..., guess I can't explain it to a 5yo.

 

Walking a tight rope of SEO testing with phrases with this one. But here goes! Checkout my article called "Explain Explain to Me" to test the algo-rhymes offered by the great google bot and the weight of Dev.to and this cool series of posts by Ben of Dev.to dev.to/ratherbsurfing/explain-expl...

 

Framework .
Especially for SPAs.
Contains modules consist of components (templates) , services .
Follows MVC .
Child components can be lazy loaded for good performance.
Differential loading is supported with the new IVY engine.

For a 5 year old i would say Its maybe like your school bag. Inside there are different notebooks for different purposes. You can write english in english notebook or math in math notebook. You dont need to take all at once . You can take one by one when the corresponding subject tutor enters the class . Everything stays inside your bag which comes with a super cool features.

Angular devs, Gather around here

 

To me it's not really clear that Angular follows "MVC". We can consider the HTML to be the view, the component.ts file to be the controller, but then, what's the model ?
I'd simply say that Angular is focused on Components, and that it brings Modules to organize them in cohesive blocks.
Then, Angular enables us to build Services, that provide functions and data to Components (thanks to Dependency Injection).

To a 5 y.o., I'd say that components are Lego blocks. We use multiple blocks to build applications. Angular is a tool that helps building those blocks, and then helps putting all those blocks together.

Computer keyboard with Lego characters coming out of it

(Photo by James Pond on Unsplash)

 

I've learned AngularJS as my first frontend framework, then moved to React. But I have learned Angular as part of an intership last year.
My Understanding:
When designing a web app with React, it boils down to a component tree. You can hook things in the various node of the tree or pass extra objects to it via the context. it feels like writing HTML. But Angular feels like writing Java Code. You have modules that are very similar to packages, they are basically a complete subset of the business domain. Inside those modules, you have services that are the core logic of the app, and components which are responsible for the views.

 

Yeah, you are spot on. Angular is like Spring for frontend: you define services, modules, etc, and then tell Angular the bits you want it to fill in (i.e., dependency injection) using, surprise surprise, annotations.

This may just be personal preference, but I quite dislike it.

 

Its just Javascript to Typescript and then Converted to MVC (Model View Controller), nothing fancy nothing special. Take is as just code organised.

 

Just organised...from my point of view that is exactly what web development lacked before all these frameworks/libraries.

And that is what I love about Angular that it kind of forces you to stay organized.

Evidently I've seen really messy Angular apps as well ..but most are pre 4

 

I am glad someone agrees to my Point of View... Cheers Man!

 

I am sort of a newbie here but I will try to explain it simply.

  1. It lets us write single page applications.
  2. Basically angular lets you DOM manipulation.
  3. Above point can be done thru data binding (kinda like states in react)
  4. Obviously routing is core concept
  5. we can write html tags called components and can reuse the same
  6. The architecture is like i. Application can contain one or more modules ii. A module is a collection of components (or pipes or services and so on) iii. A basic component consists of a template, its typescript and a stylesheet

Oh yeah! I forgot , it first loads the index.html

 

A framework that helps startups build their app up and running fast, so they can have funds to hire React developers to refactor their app.

 
Classic DEV Post from Apr 22

Is your Django app slow? Think like a data scientist, not an engineer

Instead of relying on an engineer's intuition, what if we approached a performance investigation like a data scientist?

Ben Halpern profile image
A Canadian software developer who thinks he’s funny. He/Him.