After a few years of working on Angular apps, I was really excited to get the opportunity to head to London for AngularConnect 2016, especially as Angular 2 was fully released less than 2 weeks prior. After checking out the schedule online, I could already see a ton of stuff that I was interested in seeing. There were so many useful talks on the day that I had to cover it all, so have a great time learning all about my time at AngularConnect and I would definitely recommend checking out the slides and videos for each of the talks!
Angular Team Panel
I've been a huge fan of Angular (often shortened to 'ng') since I was first introduced to it a few years ago. Initially it was a steep learning curve, but it wasn't long before "Woah, this is all alien" became "This feels just right" and Angular became my 'Goldilocks' framework. Therefore, it's no surprise that I set off for London with a feeling of excitement and expecting to learn a lot from the talks over the two days. I was not disappointed!
Upon arrival at the ExCel centre, we were greeted by friendly and helpful staff and after a really quick and simple registration we were handed our lanyards and goodie bags before heading into the refreshments area for a cup of tea.
I had a good chat with the folk at the ag-grid and Ionic stands about their products, they were all friendly and approachable and took time to ask about what type of apps I was using Angular for and what my level of experience was.
Jules Kremer, Technical Program Manager for Angular, took to the stage to talk about the recent Angular 2 release and the move to semantic versioning to allow a 6 month warning period for any major revisions with breaking changes. I think this was an important thing to introduce, judging from some of the grumblings I've heard about the beta changes.
Some interesting points raised:
- Angular is ranked 4th highest on GitHub for contributions.
- As of Sep 2016, there are 1.2 million users of ng1, and already 623k users of ng2.
Jules then talked about the Core Features of ng2, followed by various Extensions (such as Material, Router, Forms, etc.) and Dev Tools (CLI, Protractor, Augury, etc.).
Performance is not just a number.
The creator of Angular, Miško Hevery, then took over to talk about performance and the improvements that ng2 has made over ng1, including helpful error reporting; something that anyone who's used Angular 1 will tell you is much needed. Following on from this, we had a couple of brief talks by Stephen Fluin (Developer Advocate) on how Angular has been designed to run on all devices and Uri Goldstein and GraphQL integration for API querying.
With some enthusiastic and informative talks, it was a really strong opening to kickstart the conference.
The mid-morning break gave me an opportunity to check out the other areas of the conference. There was a room for workshops and a room for Q&A sessions, plus a chill-out room with meditation sessions and a games room with a bunch of retro consoles and a pinball table. I attempted to strike up a conversation with a fellow attendee while playing Street Fighter 2 on the SNES, but it was quite hard to have a conversation while you're getting pummelled into the ground by Ryu (I don't care what anyone says, spamming fireballs is a douche move). Cursing my lack of practice, I headed to the main conference room to wait for the next talk.
Mobile Apps? Trust no one... except me
After the first tea-break, I sat in on a couple of mobile-oriented talks. In the first, Jeff Cross (Angular Mobile Tech Lead) talked about the 3 different ways to approach mobile; progressive web apps, hybrid apps and native apps. It was a really well-delivered talk that laid the foundations for a lot of the sessions I'd see throughout the day.
53% of mobile site visits are abandoned if pages take longer than 3 seconds to load.
3 out of 4 mobile sites take longer than 10 seconds to load and the average time to load is 19 seconds.
Rescue your mobile experience!
Alex Rickabaugh (Angular Mobile Developer) built on Jeff's talk to deliver an overview of how ng2 can improve your mobile offering. We were shown Angular Universal (allowing you to render ng apps server-side), Service Workers (including a preview of some yet-to-be-released caching updates), and introduced to 2 concepts that would be repeated in many other sessions; AOT (Ahead of Time) compilation, and Treeshaking. Treeshaking deals with the concept of automatically filtering out the bits of JS that aren't being used during compilation, dramatically reducing the size of JS that you push to the client. It's maybe not a brand new concept, but having it automated in this manner seems like a valuable addition.
Angulr 2.0 Animations
Over to Matias Neimela, Angular's resident animation expert and author of the NgAnimate API, for a look at adding animations in Angular 2. In Angular 2 they've introduced a DSL (domain-specific language) for animations to allow them to run in a platform-agnostic way, rather than being tightly coupled with HTML & CSS.
SEO best practices and requirements for modern sites
For my first talk in room 2, John Mueller (Senior Trends Analyst at Google) busted some myths about how Angular affects/'breaks' SEO, and then talked about best SEO practices for Angular apps.
One interesting point in particular was that Googlebot can actually parse the Angular JS code effectively, but struggles with ES6, promises and service workers and so we have to employ polyfills or degradation for these.
Cross-Site Request Funkery
One of the highlights of the day was undoubtedly Dave Smith's session on 'Cross Site Request Funkery: Securing Your Angular Apps From Evil Doers'. This was a superb talk, illustrating a clear example of using a cross-site request to use a cookie for nefarious purposes. The explanation was speedily delivered, yet clear and concise, and the solution was made to seem very simple.
Dave also mentioned the SameSite attribute, which is currently in draft specification and would negate the need for this solution in the future.
Why Common Sense Is Not Enough
In the interests of fairness, I have to say that not all of the sessions were up to the high standard set thus far. I was really looking forward to this talk on user testing and prototyping as they're two things that I'm very interested in. It was a shame that this talk turned out to be a glorified product demo, but you can't win 'em all.
Building Progressive Web Apps and Hybrid Apps with Ionic
Over to the team of Brandy Carney and Adam Bradley for an introduction to the Ionic framework. I'd chatted to these guys earlier in the day at their stand and was very interested to hear more about it. They talked about progressive web apps, hybrid apps and how to create these using Ionic. It was a very interesting talk, although perhaps not quite as in depth as I was hoping, but I left wanting to give Ionic a go as soon as I could.
Storytelling with Your Data
Another damp squid, sadly. This was meant to be a talk about data visualisation, but there was very little about this or about the storytelling aspect. Again, this came across as more of a product showcase, which is the danger when getting speakers in who aren't part of the core team.
Optimising Angular 2 Apps
Thankfully, the next session was a belter! Martin Probst (Senior Software Engineer on the Angular Core Team) delivered a superb talk about 'Optimising Angular 2 Apps', starting with the warning:
Optimisation is not a panacea. Crappy code in -> crappy code out.
Martin talked in detail about the techniques they'd used to reduce the payload of the angular seed from an initial 2.5MB to 30KB, the reasons why they needed to do that, and how to approach doing this to your own apps (including a great tool called source-map-explorer that I advise you to check out if you haven't come across it before).
Why I am betting my future on Angular 2
Shai Reznik runs an amusing series of training videos on his hirez.io site, and his 'Why I am betting my future on Angular 2' talk turned out to be a highly entertaining appraisal of the Angular community and core team and why they should a big consideration for anyone deciding which framework to invest time/money in. With a lot of charisma and energy, a slight obsession with Julio Iglesias, and some nice little jokes thrown in, this was a perfect way to round off the day in a positive frame of mind.
End of Day One
At the end of the talks, the music was turned up as snacks, drinks and giant Rubiks Cubes were brought out in preparation for the 80s themed party. There was also a hackathon running through the evening and after-hours for anyone who fancied taking part.
All of the talks from the conference were live-streamed and then put up on YouTube, which meant I was able to catch up on some of the talks I'd missed due to clashes. Here are a couple of the notable ones:
Angular Material 2
A really good live-coding demo of some of the new material design components for Angular 2. Jeremy Elbourn and Kara Erickson made it seem like a remarkably simple tool for scaffolding Angular apps.
Go Beast Mode with Realtime Reactive Interfaces
A talk by Lukas Ruebbelke on using observables to communicate state over time. An entertaining talk with some interesting real-world examples.
Building Intelligent Angular Applications
Carmen Popoviciu with an interesting talk on machine learning and how this can be achieved. More of a general overview and was missing some practical examples, but it was a talk that made me want to go and find out more, and the speaker was more than happy to point me in the direction of other resources after the presentation.
For the keynote presentation on day two, Igor Minar (Angular Team Lead) and Rob Wormald (Developer Advocate) talked us through how to get started on an Angular 2 project without using the CLI, working through a live-coding demo of component creation, routing and lazy-loading of routes. They went into a bit more detail on the dependency injection/unit testing setup, and expanded more on the useful output stack for error messaging that was mentioned in yesterday's keynote.
NativeScript and Angular 2
I came into the conference having heard of both Ionic and NativeScript without actually spending any time playing with either, so it was good to see talks about both products. Jen Looper went through the process of setting up a cross-platform application (native mobile and web) using NativeScript. It was a good demo, and although there are pros and cons for each, I did come away from it thinking that Ionic is probably the easier of the two to use.
Angular 2 Forms
I think it's fair to say that Kara Erickson wowed everyone with her live-coding skills (seriously, just check out the video and imagine coding that quickly in front of a few hundred people!). This demo/talk was incredibly informative as well; comparing the differences between the standard forms module and the reactive forms module in Angular 2, while demonstrating how to set up form controls, groups and arrays and clearly explaining what they would all be used for. Probably not a talk pitched at advanced users or people already familiar with this stuff, but I found it very helpful.
Stephen Fluin walked us through all the different things the CLI can do. Its main function is to act as a bootstrapper/scaffolder for a new project, in the same vein as tools such as Yeoman. There are some powerful options that can be pushed into this function though, allowing you to customise the type of project you want to setup to begin with, and there are functions to generate new components and tests for an existing project. The CLI looks incredible and although it's still a work in progress, I can already see how beneficial it's going to be not just at the start of projects, but all the way through the lifecycle.
360 & VR Video with Angular 2
Sadly, we didn't get the Google Cardboard demo we were promised, but Raul Jiminez provided a lot of insight into how easy it is to create animated components and captions within a 360 video, as well as some neat tricks such as using VTT tracks to synchronise data. I can't wait to try some of this stuff out!
Look Deeply Into Your App with Augury
After a brief interlude from ag-grid demoing their enterprise datagrid for Angular 2, Igor Kamenetsky from rangle.io gave us a demo of Augury. This was a slightly different (and very welcome) product demo though, as Augury (previously Batarangle) is a Chrome developer extension created to allow devs to debug and profile Angular 2 apps. I have to say, it looks like it's an absolutely vital tool for anyone working on Angular, and it has some nice visualisation features, such as being able to view the component tree or the routing tree.
Testing Angular 2
Julie Ralph (Lead Developer on Protractor) talked us through the different testing strategies we have available to us, and gave a live demo of how to set up some tests. It's apparent that Angular 2 has been designed with testing in mind, which can only be a good thing. It was more of an informative talk than insightful, but let's face it, testing is quite a dry subject. Overall, a really helpful talk and one that I can imagine referring back to in the future.
How Fast Can Web-Apps Be?
A genuinely brilliant talk by Tim Ruffles, looking at performance of websites on mobile and how rendering and network limitations affect the perception of performance.
Untested beliefs on performance are mostly wrong.
Tim went into detail about how multiple handshakes can slow down your app, and how bandwidth isn't really the issue, it's the time to grab the first frame. He then pushed on to talking about developing with network empathy, and the concept of loading the most important bits (i.e. the data) in the first frame to allow people on slower networks to be able to use your app quicker. He also talked about how we often test on new devices, whereas we should be testing on average or cheap devices to ensure we get the performance aspects correct.
I cannot emphasise just how important it is to keep this kind of thing in mind, it's something that should be reiterated on a regular basis to all developers, from beginners to experts.
Testing for Accessibility in Angular 1 and 2
This was a good companion piece to the testing presentation earlier, with Marcy Sutton expanding on this to talk about how to build and then test for accessibility. Again, a very informative talk that I can imagine coming back to in the future.
Angular Team Panel
The conference ended with the Angular Core Team taking the stage for a Q&A session. A few interesting points to take away from this:
- The CLI will be updated in the future with additional add-ons to give even more options.
- Angular 1 still has a roadmap and will continue to be updated. This will largely depend on the uptake for Angular 2 though.
- The master repo on GitHub is the version that's used by various Google apps, so any merging changes get checked against those apps.
- Official confirmation that it's Angular, not AngularJS!
- The Angular team have some great geeky programming jokes:
- How do functions break up? They stop calling each other.
- Why did they stop calling each other? They have constant arguments.
For my first proper tech conference, it's fair to say that AngularConnect far surpassed my expectations. I'm sure it helped that Angular 2 had just been released so there was a lot of new and exciting stuff to take in, but it was a really inspiring couple of days that gave me a bunch of new things to go away and try out, and a ton of new information to absorb. Angular 2 seems like they've made all the right kinds of improvements on Angular 1 and although there's a bit of a steep learning curve between the two, it definitely seems like it's worth the effort.
AngularConnect 2017 will be on 7th and 8th November. I'll be there, come and say hi!