ng-conf 2018 day #1 – The triumph of the enterprise SPA

If I had to put a finger on the pulse of the Angular community in 2018, it'd be the embrace of the open source community and the enterprise.

Consider where the framework has traveled: from the original, gutsy announcement back in late 2014 that they needed to rewrite AngularJS from the ground up, to the initial rollout of Angular 2 with the many feature-breaking RCs, to the renaming of the framework to "just Angular, please", to that question of "where did version 3 go?"

All of those moves generated concerns: was the team able to juggle both Angular and AngularJS? Were they going to catch up the APIs and get feature parity with AngularJS? I was very happy to see the HttpTestingController and Interceptors arrive in HttpClient in 4.x. Was the Angular platform going to achieve stability and become production-worthy? Turns out, the answer has been a resounding 'yes'.

So what we have in 2018 is a framework that has matured quite a bit, and is being thoroughly embraced by the enterprise. Yes, we could use more detailed API documentation, and nothing is perfect. But many companies are moving their AngularJS applications to Angular, or making the switch for new development. And the third-party component and API community is extremely strong.

What follows then is a collection of my notes of the novel and new. It's not exhaustive (for that, you can watch any of the conference content online in a few days or weeks), more about things I've found that resonate with me.

The Keynote

The central theme of the keynote is the embracing of the community. This year, teams like NgRx and StackBlitz are in the forefront. NgRx, headed by Brandon Roberts and Mike Ryan, has the very popular NgRx Store reactive data store API, as well as a number of other libraries surrounding and driving it. We got a good overview of the Angular community's support for Schematics, the new Ivy renderer, v6 features, and a commitment to version Angular, the CLI and Material together, starting with v6.0. A tease for John Papa's NgRx Data work got me bookmarking that API. More later…

Schematics

I can't wait for the rollout of 6.x and the embracing of the Schematics CLI extensions, which I think is the single most innovative announcement for the community. Install a library globally with schematic extensions, and you'll be able to do things like this:

# add material support to the app
ng add @angular/material
# create a nav bar
ng generate @angular/material:material-nav -name=nav-bar

Third party libraries will really take advantage of this in the coming months.

The Ivy Renderer

Ivy, a new drop-in replacement Renderer API, is coming. I think the official release will occur significantly after v6.0 is released. If you're counting, this is the third renderer (Renderer -> Renderer2 to the new Ivy Renderer). Unless you were doing DOM manipulation, you probably didn't even notice the replacement of Renderer with Renderer2. That is the goal here.

Ivy development genius Kara Erickson gave a great overview. Key takeaways: it's lighter weight and is designed with tree shaking in mind. Instead of running all templates through a single code path that can't eliminate unused symbols in the compile phase, now as each element is parsed, an atomic code generation function does the work for that feature alone. This means they can emit only what you use. If you're not using transclusion, pipes, listeners in a given component, the code won't be there at all. This kind of shaving really reduces code.

Ivy is Lean and Mean

Brad Green stated back in 2016 that their "audacious" goal was to get the Hello World build of Angular down to 10K, and he promised to bake a cake if the team got there. If you recall (I don’t) the build was at a compressed size of 36kb at that time. This tweet sums it up via the slides:

Angular went on a diet. DId those pushups. Hello World at 2.7kb!!!! #ngconf2018 pic.twitter.com/MXUj2FpgHE

— Chris Sevilleja (@chrisoncode) April 18, 2018

With the newest innovations to tree shaking in Ivy, which are nothing short of fantastic, the team got it down to around 7K, and compressed even further to 2.7K. So we all got our cake. It was tasty.

But here's the other takeaway: because of the refactoring effort by Kara and her team, we'll have extremely useful stack traces when things go wrong – even down to the line of HTML template that caused the problem. This is a significant advance.

Angular Elements

Rob Wormald, founder of NgRx, gave a great talk about Angular Elements, an API that embraces Web Components and lets you use them within an HTML page, sharing Angular components with other platforms that support them like Svelte, Polymer, and SkateJS. The details are on the Angular Next Elements Guide page.

Other Talks

Igor Minar had a talk on SEO with Angular. They use the Angular.IO website to try out various SEO strategies, so some of his learnings are from there. He reached out to the search team for the latest information. Key thing to keep in mind for SPAs: the crawler is based on an older build of Chrome, currently verison 41. They recommend you use polyfills in your app if you are expecting it to be crawled, so that the older crawler browser can understand your app. He had tips for handling 500 and 404 errors, and using the Google Search Console and Google Analytics and alerts to spot problems.

Jeremy Elbourn gave a talk on the Material Component Dev Kit or CDK. This is the base library used by Material and he states that you can use it for your own development, even if not using Material. While I don't buy into that concept yet (it's still a project in the Material GitHub and not a core Angular feature), they've done a lot of good work here. They are the team behind the schematics work for Material, and he gave an overview of the features.

There was a hair-raising talk on security and hacking Angular by Asim Hussain that should get you thinking about updating your Angular and AngularJS apps. He gave several scenarios on famous exploits and how they were used to attack Equifax and GitHub, and how exploits are chained together to do really evil things. I think every developer should watch this (or, for a much more scary view of the world, attend DevCon like some of my Chariot bretheren)… Key takeaways: don't trust anything, and update your open source libraries.

Sam Brennan, the developer with the best Twitter handle – @thelittlestdev – gave a fun talk on reusable animations. I really need to find her sample repo as I'm not an animations person. Will update the post here with the link when I find it. Great job, Sam!

Miscellany

Utah is an amazing land of mountains and snow. This is just one of the many views I snapped out of the plane as we approached. I love coming here for the conference – please don’t move it, ever!

The conference staff does a really great job at running the show, and I'm speaking as both an attendee and a sponsor with a table for three years running. I estimate we're between 1600 and 2000 people this year (I'm going to find out the number, so don't hold me to it).

There were a bunch of talks in the 5-10 minute range that mostly teased later talks. That schedule tends to lead to too many speakers and not enough in-depth discussion. This is the challenge of a conference with a single main room.

But this is just a nitpick, and if the goal is to give you things to research on your own, it still works for that purpose.

The good news on more depth is that there are longer talks in those multi-room sessions today. So I'll be taking notes and covering some of them later.

Oh, and honorable mention goes to the fortune cookie in the SWAG bag…