Angular at a glance
Four things I learned trying Angular for the first time.
I’ve been working professionally and using React exclusively for about two and a half years. Last week I applied for my dream job that came with a caveat — they use Angular. No, not AngularJS! That would be a deal breaker — fortunately the latest versions (currently 11).
I was asked to do a technical test which they said I could complete in React (a green light for a solid company if you’re interviewing). But I wanted to test myself so I committed to doing it in Angular as well. I reached into the docs and time boxed my attempt to 3 hours. Along the way I learned four things that I want to share:
- The CLI is awesome
- Even a simple project has a mountain of files
3. Operations called pipes make manipulating data in html really easy
4. Component composition is not very intuitive
I don’t think Angular is better or worse than React. It’s definitely different and, hopefully I’ll get a chance to dig in and see why you’d choose one over the other.
1. The Angular CLI
The CLI is great. It’s used for everything from creating a new project with ng new <project-name> to adding a new component using ng generate component <component-name>. I’ve always looked for a similar tool in React with out any luck. Being able to generate boiler plate code consistently for common tasks is useful for the time strapped dev.
Above all I love that it’s all encapsulated into the same tool. There’s no need to remember which binary should run what command. Hopefully it also avoids an oversized, unreadable scripts object in the package.json too. Check out the docs for a full list of what the CLI has to offer.
2. Component Composition
Reacts composition model is outstanding. It’s intuitive because if you’ve worked with HTML you can use it. JSX also makes it easy because you’re writing what looks like HTML inside your components return statement. In Angular this isn’t so simple. Firstly, there is no JSX. All HTML is written as a template so you can’t simply import a custom component and wrap it around other components or tags. What confuses me the most is, Angular components have a selector to use it in any other component. This is as simple as doing:
But you cannot do this without some effort:
So much effort in fact, that I cannot find a simple example of how it’s done.
3. Files, Files, Files and more Files
The CLI certainly simplifies the workflow, but! It generates a huge number of files. By example, every new component comes with all these files:
- .spec.ts
- .component.html
- .component.css
- .component.ts
I’m all for breaking very large components into technology specific files — but not in a tiny app. There are other files for environments, polyfills, and no less than 12 config files. No doubt each of them serves a purpose but it can be overwhelming the first time you encounter it.
4. Pipes
My favourite feature so far has to be pipes. Pipes are simple functions used in templates to transform data for display. I stumbled across them while needing to format a time stamp into a readable date string. It was for a table where the template to render the row looked like this:
The equivalent React code would be:
To format the time stamp I’d need to add moment or dateFns. Import the relevant function and use it directly in the JSX. This didn’t look feasible in the Angular template. How was I going to import a function? Pipes solved this in an elegant way — no need for additional libraries either.
It’s used by adding a | after the data declaration — in this case sensor.reading_ts. The name of the pipe is date, after which I added the format I needed. You can build your own pipes too. Declare them once in the app.modules.ts and use it in any template. Awesome!
I have no doubt that my initial assumptions will be wrong. There will be plenty to learn if I get the gig, but I’m excited to give it a go. A belief of mine is, they with the most experience “wins”. And it’s more important to use the right technology for the right job. And not to pour more fuel on the Javascript Wars.
Would love to hear any comments below.
