In Product Research at Just Eat we aim to research, design and prototype rapidly. The more prototypes we can put in users’ hands, the more chance we’ll have of discovering a good idea. Hopefully we’ll do just that and start to iterate, but in reality most prototypes are binned. So the more we build, the more likely we are to find something that people want.
Angular could be a great fit for us, and the recent excitement around the Angular2 release meant it was high time for us to immerse ourselves in the community for a few days at ng-europe. Here’s a quick summary of the bits that jumped out for me along with some notes on things I plan to research.
The first day
I woke up quite early on my first morning in Paris and headed down to breakfast. Happily, Miško Hevery, who created Angular, and his Google colleague Alex Eagle were also awake, (I think they had jet lag). Over a serendipitous breakfast we talked about Angular but also about sugar, autonomous cars and the number of atoms in the universe. This was a good start!
Keynote
In his keynote to a packed hall Miško’s talked about how Angular has grown, both the community and the platform itself in its ambition and potential. It’s now everywhere: we can build Angular web apps, iOS and Android apps and desktop apps. Performance is hugely improved and experiences are native.
Things to research: Benchpress, Augury.
RxJS
Rob Wormald gave a standout talk on RxJS and observables, here are his slides. I really like his style, making a complex subject accessible. Observables have had a massive impact on Angular’s architecture, and would feature in many of the later talks.
Things to research: RxJS; using the switchMap operator in requests and in the router; avoiding the elvis operator in templates with smart and dumb components.
ng-bootstrap
The ng-bootstrap project powers Bootstrap 4 components natively with Angular2. Pawel Kozlowski described how, because they were especially written for Angular2, these components get the most from the framework. A good example is only rendering expensive content when it’s needed. Here are his slides.
(He talked about how well tested the components are, but he didn’t mention accessibility, a special interest — I looked at the repo and don’t worry, it’s well in hand!)
Things to research: components with observable children; components with a programmatic API; alternatives like Material.
Data science
Ari Lerner first plugged his company’s book (looks good, I’ve a sample to read, I’ll let you know) and then really caught my attention in his talk on data science.
At Just Eat we have access to huge amounts of rich data which we analyse intelligently to drive and validate change. Ari described pages that randomly reorder themselves until an optimal variation — one that best suited conversion goals — is found with machine learning. I couldn’t track Ari down to ask him more about this, I have a load of questions, I’ll try and find him tomorrow.
Things to research: this work (it’s open source, I’ll update with a link once I get one).
TypeScript
Live coding while public speaking goes badly wrong for some, but not for Daniel Rosenwasser. His talk on TypeScript was excellent, lots of smiles in the crowd. I already liked the idea of TypeScript (a superset of JavaScript) but had no idea of how awesome it has become, especially in combination with good tooling.
Daniel renamed a .js file to a .ts file then quickly worked through the compiler warnings and refactored into way more robust idiomatic TypeScript. He showed off some new features of which improved type inference really impressed, clever compiler.
Things to research: VS Code, the latest TypeScript.
The rest of day one
Other talks, all really interesting, covered BatScanner, unit testing, hybrid apps, security, migration and AngularFire2; all were recorded if you feel you’ve missed out. Looking forward to tomorrow!
The second day
Angular CLI
The day began with Hans Larsen reminding everyone that setting up tooling is really painful and robs way too much time from app development. Great to hear this isn’t just me.
The Angular team are taking this seriously. Angular CLI aims to stay out of your way, to understand your app and evolve with it by understanding your intent to generate, serve, test and build. You can generate classes, directives, enums, modules, pipes, services — and generation code adapts to its context. Here’s what it looks like:
ng new prototype cd prototype ng serve
Out of the box, Angular CLI can compile Less or Sass, transpile TypeScript, optimise assets, understand environments and serve a live reloading dev server. The compiler tree-shakes and compiles ahead of time, so the bundle is small and no renderer is needed on the client — users experience apps that load and render quickly.
Hans talked about the future, the CLI is getting smaller and more interoperable. Progressive web apps and server-side rendering will use ‘add-ons’ to change CLI behaviour. Add-ons and scripting will open the CLI to the community. I really like the fact that the CLI is part of Angular, it will always be in sync as Angular evolves. Learning just one tool is going to seriously speed up web app development.
Things to research: Angular CLI
Auguary
Vanessa Yuen showed us Augury, an open source Angular2 Chrome Extension built by Rangle.io and Google. Augury uses the debug API so that you can inspect and debug an Angular2 app in DevTools.
We watched as Vanessa used Augury to navigate an app’s component hierarchy, inspect state, change properties, invoke events, understand dependencies and view a router tree. One especially cool feature was using $a to reference a selected component in the console.
Augury looks pretty essential, especially when apps grow in complexity. Reassuring to hear how committed Rangle.io are to keep it in sync as Angular changes.
Things to research: Vanessa’s slides, Augury on GitHub.
Angular Universal
Next up, Wassim Chegham discussed Angular Universal: server-side rendering for Angular2. Not so relevant in product research, but still really impressive to hear about the latest.
SEO and link previews are the obvious problems that Universal solves for Angular apps. But more than that, it improves the user experience by removing the ‘web app gap’, the several seconds of blank screen a user experiences while an app bootstraps and renders. By rendering on the server the user sees the page immediately, before the app bootstraps. If they interact with the page before the app’s ready, those events are captured by Preboot until they may be safely replayed.
Things to research: Wassim’s slides, universal-starter seed.
The new router
Nir Kaufman gave us the lowdown on Angular2’s powerful root matching. This looks way easier to use with a consistent API and patterns. Lazy loading is new and as easy as replacing children with loadChildren. Params and query params now use observables which you pluck inside the component. It’s easier to secure states and prevent children activating or loading with ‘guards’. Especially cool, multiple views may now be serialised in the URL. I couldn’t quite get some of this talk, luckily Nir pointed us at some excellent guidance.
Things to research: Victor Savkin’s Articles and book.
Generative music
As a musician and someone who’s played around with music technology quite a bit, the talk by Tero Parviainen was by far the most entertaining and inspiring. Tero took us through his project In C, an Angular2 WebAudio app inspired by Terry Riley’s In C in which the user starts ‘players’ and advances them through patterns to produce a divergent generative composition.
Tero explained beautifully and with great clarity how Redux inspired the architecture of the app’s four decoupled component parts: a metronomic pulse, an immutable observable store, audio generation, and the UI. This architecture let him time travel through historic state and hot load code changes as he developed — awesome.
So no, this probably isn’t going to be relevant at work but just fantastic to see such a talent, much cheering and applause from everyone for Tero.
Things to research: Redux, ngrx/store.
Animation
Matias Niemelä discussed how animation in Angular2 uses a declarative domain specific language (DSL) inside the component. Testable, ahead-of-time compilable, independent from the DOM and web worker friendly.
This was the point in the conference when it really started to sink in for me what it means to for Angular to be platform agnostic. That was a nice moment, seriously impressive engineering.
The DSL composes states and transitions into triggers that are triggered from the component or from a property change in the template. For the web the implementation uses the Web Animations API — there’s a polyfill for lagging browsers.
Matias described a slew of upcoming features, a couple that jumped out were pulling animations from CSS and animating layout. I’m excited enough about playing around with what’s here today.
Things to research: Angular’s animation system, Matias’s slides.
Mobile apps
Adam Bradley from Ionic talked passionately about web standards and pointed out how fast and responsive the mobile web now is. Later, Christian Weyer and Thorsten Hans compiled the same codebase with Cordova and Electron yielding the same app across Mac OS, Windows, iOS, Android and web. Great talks but my issue with all these techniques is that apps don’t quite feel native enough, that you’re always dealing with web view’s shortcomings or chasing platform conventions and evolution.
So I was more interested in Marc Laval’s talk on custom renderers. In Angular2 the renderer is separated from Angular core and your app (in the browser they’re separated in the UI thread and a web worker). That renderer may be swapped so that Angular2 can work where there is no DOM, for example on Node, where Universal uses a server renderer, or on a mobile phone.
Both React Native and NativeScript work with Angular and render UIs natively with no web view. That’s a truly native experience and much more appealing to me. Neither need Angular to work, but how awesome would it be to master one framework for all three platforms?
Things to research: Marc’s slides, Angular2 &React Native, Angular2 & NativeScript.
Building RxJS
By now I was getting my head around observables, so André Staltz’s talk was well timed. Starting with an explanation of callback types, he flawlessly hacked away from simple JavaScript to a basic implementation of RxJS. He changed the code step-by-step, for example giveMeSomeData() became subscribe(). Really funny, and did the trick, definitely some lights going on all around.
Fast loading apps
Alex Eagle’s pointed at stats that give us about two seconds to make our apps responsive before users leave. At 2G or 250 kb/s that’s 500 k for JS and assets. That’s not very much so we need static analysis techniques, lazy loading, tree-shaking, bundling and minification to help us spend the budget.
As he dug into the complexity of these things I felt massively relieved that people as smart as Alex are figuring out how to do all this – even more relieved to learn that Angular CLI will take care of everything and I don’t need to worry.
Wrapping up
And that was it! It’s all recorded if you any of that piqued your interest. The Q&A at the end was really interesting. What most stuck with me was that AngularJS to Angular2 has been painful for everyone, but that this kind of upgrade won’t happen again. Angular2 is now a platform that will just grow in its power and reach as it shields us from turbulent and rapidly changing platforms.
Farewell Paris
Thanks ng-europe for a fascinating couple of days, it was great to spend time with such a friendly, smart and supportive community.
Ben Glynn is a Principal UI Engineer for Product Research at Just Eat. He’s passionate about product discovery, the user interface and user experience.