Salt Lake City is beautiful, mountains are lovely, everything is soooo clean

Being in Salt Lake City for a few days, it would be a shame not to explore the city a bit, especially with the weather servings us so nicely.

Whoever maintains the city deserves a medal. Everything was so clean that you can almost eat from the floor if you could find any food on the floor. Which you couldn’t.

If we were in the tulip bubble right now, Salt Lake City would be the richest city in the world with tulips, like good plated art pieces, all over the place, creating fairytale-looking scenes like this.

Angular team is committed

Being just stable is not good enough. The world is changing, the user expectations are changing, the developer experiences are also changing, we need to keep up. We need to make sure that Angular doesn’t stay behind and becomes stagnant.

Winter Ivy is coming

It’s not here yet, but when it comes it’s gonna be awesome. Maybe. Probably. It’s not going to fix everything, but it might. It’s gonna be awesome fo’ sho’. Maybe next year?

Seriously, tho… It’s going to be great, mostly.

The main, and very appreciated, reason for the delays is backwards compatibility. Nobody needs another AngularJS to Angular transition.

Check this table for more details.

Bazel is a thing

A build tool thing to be exact. Like Make, Maven and Gradle. Not like webpack. Webpack is a module bundler, it doesn’t replace webpack, it works with it. Modern bundlers kinda do things that build tools used to, but with Bazel they don’t have to/shouldn’t.

Among its superpowers are building only what’s necessary and remote execution. Think scaling by adding nodes for parallel actions, consistent execution environment for the whole team and reusing build output between members. These alone bring huge build time reductions for big projects and large development teams where build (and unit and e2e testing) time can go into hours.

Google is using it internally and betting on it big. See the getting started.

You can have your website in space

Eric Simons demoed StackBlitz, a progressive web app that’s a full development environment. If you like VSCode, you’ll love this.

It was the snappiest, smoothest demo of the conference with some quite complex deploy processes, and redirecting a few hundred people to their twitter profile thanks to hot reload. Very smooth, Eric.

But Z, I want to have my website in space!

Eric and his team teamed up with Interorbital Systems to lunch a computer into space and host your code on it. What it lacks in speed it makes up for in… actual speed, being on a rocket and all, and the cool factor.

They made a video, so take a look.

How do you get a website in space?

Click the “Deploy To Space” button on top-right of your StackBlitz project.

Cypress and time travel testing

Cypress is the test tool of ng-conf 2019. Dubbed a test runner built for humans. It’s an open source, front-end testing tool, built for the modern web.

It takes snapshots as your tests run. You can simply hover over commands in the command log to see exactly what happened at each step. That’s how you time travel in your tests.

Other notable features:

• Debuggability
• Real time reloads
• Automatic waiting
• Spies, stubs and clocks
• Network traffic control
• Consistent results
• Screenshots and videos

More info on cypress.

Google serverless backend testing

When you deploy to a server, you normally have (or can make) available all the tools that you have on your local machine, for seeing what’s happening and debugging live code. When developing serverless, you, well… don’t have a server… and can’t do any of that. So you’re left to guess what went wrong. You can’t ssh into serverless. But if you don’t have a server, you don’t have to pay for its time running.

To get closer to best of both worlds Google serverless now allows you to add breakpoints to your production, running, code and to add conditional logs without having to redeploy anything.

After you trigger that code by accessing the page you want to debug, you can then time travel (kinda) because your logs and stacks are saved for every breakpoint.

Really powerful and very nicely packed stuff that I would like to have even in a server environment.

Render on the server for speed and SEO (Angular universal)

If you deliver JavaScript code that builds your app, fetches the data and then renders it, your user has to wait all that time to see any content. What if search engine doesn’t execute your JavaScript before trying to read your data? Your website content doesn’t get indexed, search engine doesn’t have your content and your website doesn’t appear in search results, sorry!

Angular universal will render the initial page to the user (and to search engine) right away, then load your app code, render it and show in place instead of the initial code.

It fixes some problems and introduces some new ones. Angular team has some interesting potential solutions they are experimenting with. And Ivy, ah Ivy, will help with some of those ideas, maybe…

How to think reactively (RxJS)

RxJS is hot but most people don’t know how to think reactively. It’s a paradigm shift and we have to do it to get most out of it. subscribe is bad (if you can do it without it).

There’s a lot more to this and RxJS popped out all over the place throughout the conference but this was the overall theme that I picked up regarding it.

Schematics and CDK

Very underutilized items in my toolbox. Schematic is a template based code generator that supports complex logic. It’s useful for customizing Angular projects to suit a particular need of your own organization. Angular team thinks they are really powerful and wants you to use them more.

An item on my ToDo list.

Typescript on the backend

NestJS is a framework that embraces TypeScript and the power of Node. You can use it to write backends in a style that feels familiar to writing Angular apps all while embracing MVC architectures you can see in other modern backend frameworks. Since it’s based on Node, you can use all the familiar libraries you’re used to.

Write ones, run everywhere (cross platform development)

In a day to day life of a modern homo sapiens, we use multiple devices to get our information and interact with the digital/distant world. As developers, we want to provide our users with options. We want to give out the message: do it wherever you are, through whatever device you want it, with the best possible experience for the device you’re using.

To do that, it sometimes means the best experience is an app. A mobile app, a desktop app, on any platform. Different platforms require different native code. So how do we not duplicate our efforts?

Notable technologies to help with that, and they cross into each others territories in places:

• Angular Console
• Electron
• Ionic

Angular elements

In short, Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way.

This is great because it allows you to create a web component with the full power of Angular in it. You can then use that outside of Angular context which brings out some very powerful possibilities.

Downsides to that could be (depending what you do) large component sizes (since you’re packing Angular, which can be not very tree-shakeable). Ivy will help with that but it’s not going to make your JavaScript disappear.

There are possible workarounds, not yet promoted by the Angular team, like sharing Angular code on window object, like you used to do with jQuery.

Use it for what it’s good for 😉

Material is now Angular components, new stuff coming

People already call Material, Angular Components. Things around that aren’t going to change much, you’ll still use them the same way you’re used to. Angular team said they have stuff coming, though.

Those are not the only Angular components available (although they are supported by the Angular team), there’s been plenty at the conference.

There are some that weren’t (because the name speaks for itself?)

Shameless plug for free and open-source Carbon Design System and Carbon Components Angular.

Until next time

What else?

What did you find interesting or eye-opening that I didn’t mention here?