Already like a good tradition I visited ng-nl conference (ng-nl 2015, ng-nl 2016).

Same as previous year it was great place and awesome people around.

But this time they really messed up with the schedule. I expected to have order of the topics that is provided on official web site, but appeared that it’s not actual and I had to follow the app one, basically the only place. And the app was lagging :(

Strange that this year I did not see anybody from the core Angular team. Also no old good Pascal Precht and Tero Parviainen in the list. At least we had good presentation by Todd Motto about Reactive Forms and really inspiring GraphQL talk by Uri Goldshtein.

…Instead of a keynote it was a talk…

Angular’s Reactive Forms by Todd Motto (code, video)

It was the same talk that Todd gave on ng-be. (see ng-be 2016 brief review). But today he was in a hurry to present all the materials and did not really keep the focus of audience. It might be some difficulties with understanding for developers who did not try Angular Forms before.

Good part comparing to ng-be talk was general architectural overview and going deep into real code from the high level.

some Q&A:

• automatic generation HTML(not to duplicate form-model description twice)
  • no solution for now
• good example of structural directive and dynamic component
  • structural directive – reimplementation of ngFor is pretty nice one
  • dynamic component – wizard or toster concepts
• opinion about Augury
  • did not have time for it. Working hard on the course.

Demystifying Ahead-Of-Time compilation in Angular by Wassim Chegham ( slides, video)

Quick intro about JIT.

JIT bad points

• bundle size
• perfomance
• bootstrapping
• security

AOT generates VM friendly code, but needs context, and context is provided by ngModules.

some words about Tree Shaking (30-60% less code)

So good points about AOT:

• no security eval issue
• faster time to interaction
• smaller vendor bundle size

Easy use with angular-cli:

ng build --aot

Problems to make code “AOT ready”

• lambda expression (must be export )
• access modifiers (template properties should be public)
• no variable exports

Q&A:

• security: looking for interesting compiler injection examples
  • don’t know any, but evals are always evil.
• bundle size: AOT makes only vendor part smaller, but your app code became bigger
  • yes, that was mentioned with asterisk on the slides
• angular universal: what’s the status?
  • now SSR is part of ng4, but Angular Universal still exists like something bigger. We are working on different server rendering engines right now. Current implementation is on express. We would love to get as much feedback as possible from real projects.

Building a dynamic SPA with Angular by Filip Bech-Larsen (slides, video)

It was creasy talk about wrong way of doing things in Angular and reinventing own wheel.

So general, about everything…

about aot, about ssr…

need to review the video and return back to you with more details. for now have unstructured mess in my mind.

Addicted to AngularJS by Pete Bacon Darwin and George Kalpakas (video)

What’s wrong with AngularJs?

• scaling to large teams
• scaling to large applications
• different platforms are not supported

Why not just go Angular right away

• apps are really large
• a lot of 3rd party dependancies
• code base is large (other projects also on AngularJs as well)

ngUpgrade, steps to go:

• correct structure with typescript
• bootstrapping
• downgrading components (so you create new components in Angular style but downgrade to AngularJs to make it work all together inside one app )
• downgrading services
• upgrade components (it works with AOT!!!)
• upgrade services
• rewrite all to Angular

Future

• lazy loading
• better testing story
• better dual-router story
• less boilerplate (better compiler integration + tooling)
• better docs and examples

Q&A with George:

• Is ngUpgrade for upgrading old components fixes templates as well?
  • Yes
• Seriously?!
  • Yes.
• So we will be able to run AOT for old components?!
  • Yes!

ACME (Angular CLI to Manage Everything) by David Müllerchen (code, video)

Funny Lego story about about Angular CLI and back to command line running all the commands one by one:

npm i -g @angular/cil
ng new ng-nl-demo --routing
cd ng-nl-demo
ng serve

Also code generation

ng g component hi-nl
ng g module foo

…and runinng on diffrent environments.

Could be handy for newbies, but for people who already tried angular-cli quite a boring talk.

Q&A:

• Do you know about any plans to have 3rd party module installation via angular-cli (like ng install angular-material)
  • Don’t know.
• Same about libraries. It would be really convenient to see environment ready for library creation.
  • Don’t know.

Component based API for your Angular Components with GraphQL by Uri Goldshtein (videos)

Why not REST:

• lots of calls
• lots of nested unneeded data

Key points:

• it’s only single request, and no useless overfetching.
• Schema to describe data/request structure.
• nice tool to check our graphQL requests
• some documentation on Angular Cookbook.
• Apollo Client chrome extension.
• easy to use with angular. (Example are coming…)
• the way to synchronise the state
• Any backend – Any client – Any language.

Improving Startup Performance with Lazy Loading in Angular by Manfred Steyer ( code , video )

I’ve already saw this talk on ng-be, so I decided to go to workshop instead.

Strictly recommend you to watch part about preloading of lazy modules.

Workshop: Maxim Salnikov – Progressive Web  Apps using the Angular Mobile Toolkit

It was just a disaster for audience and for Maxim. He prepared such a great workshop, but to do it in a proper way we would need 4-6 hours, but had to manage to finish in about 30 minutes.

You can check here detailed step-by-step description of the workshop.

Breaking Bias by Joy Eames ( video )

Nothing todo with Angular, just talk about psychology and our stereotypes/biases

• difference between tables

these 2 tetragons have the same sides!

• monkeysphere concept
• implicit association test

This year I also visited NG-NL Conference in Amsterdam and to keep the tradition will share my notes/thoughts about it.

Basically the conference was dedicated to looking deep in Angular2 parts and reactive programming experiments.

All the topics were split into 2 tracks. You can find all the program details here. My route was the following:

Because keynote talks were not separated and columns were not sync in time you could get the illusion of time jump.

Awesome Productivity with Angular 2 (video)

Martin Probst started keynote with kind of excuse why we need to do step forward -“frameworks have to move” – that sounds really funny. Probably it was soft launch or preparation not to scary developers with new features.

After it was quick introduction of all new things in Angular2. New template syntax that gets rid of tons nested directives and uses explicit attribute binding, and you always know whether it is property, event or two-way binding:

• [property] – property binding
• (event) – event binding
• [(two-way)] – two-way biding (still confusing)

Some words about the component concept that will kill old directives, scopes, controllers. Exact announcement about performance: Angular2 is 4-times faster than Angular1.

Martin also said that team works not only on framework but also on the environment. To make dev tools unified and productive. So angular-cli.

And it was a part why we should use TypeScript:

• makes code more reliable
• much better doc generation
• allows autocompletion
• gives safer API changes
• fast API renaming

And, of course, the statement that we can easily use Angular2 without TypeScript is not true, using Angular2 without TypeScript is hard pain: even examples on official site are not always up-to-date.

Well, it was quite informative, thank you!

ngUpgrade Your App to Angular 2 (slides coming soon, video coming soon)

It was light talk by Tero Parviainen who showed the step by step migration to Angular2 with help of ngUpgrade.

When you have ideal decoupled component application you can start with ngUpgrade:

[javascript]
import {UpgradeAdapter} from ‘angular2/upgrade’;

var adapter = new UpgradeAdapter();
var app = angular.module(‘myApp’, []);

adapter.bootstrap(document.body, [‘myApp’]);
[/javascript]

and to have new components in old project you should you such hack:

[javascript]
app.directive(‘productDetail’,
adapter.downgradeNg2Component(ProductDetail));
[/javascript]

and the same goes for services:

[javascript]
adapter.addProvider(ProductService);
[/javascript]

But when you code is not ideal (that we usually call real life) you have to solve all architectural issues first and only then do ngUpgrade manipulations.

Fist step could be to remove all ng-include and ng-controller statements and replace them into components. For more detailed instructions check this Tero’s article.

@Tero, the way of presenting information by commenting code videos works perfectly!

How to Write a Library for Angular 2 (slides, video coming soon)

Olivier Combe was making fast coding talk about steps of Angular2 library creation.

First of all it would be better to make workshop out of this talk, to let everyone do the same steps. Because when you don’t do it simultaneously all the steps looks so obvious.

I know Olivier, that’s not his first conference in speaker role, but he was nervous and all talk was in a hurry, it looked like he’d prepared presentation for an hour and was told to make it in 15 minutes.

There were some hint how to setup Karma preprocessors for TypeScript.

Did not know about .nmpignore file before.

@Olivier, it would be really nice addition if you put some code and commands into your presentation.

Angular 2 Change Detection Explained (slides, video)

Couldn’t miss Pascal Precht talk and switched to track2 for it. Should also say that room was overcrowded.

The talk started with explaining the problem that we want to solve – basically it’s Model – DOM synchronisation. (recommended reading “Change And Its Detection In JavaScript Frameworks” by Tero Parviainen) Model could be changed by:

• events (click, submit)
• ajax requests and fetching data from remote source
• timers

and how Angular gets known about it? –  ZONES!

Some explanation about async flow magic and back to zones:

[javascript]
zone.run(() => {
foo();
setTimeout(doSth, 0);
bar();
});
[/javascript]

and for Angular2 it’s ngZone.

More details in Understanding Zones and Zones in Angular 2.

Smart change detection with immutable objects: it’s easy to check whether object has changed or not.

ChangeDetectionStrategy.OnPush – where you could setup logic and do not update component each time.

Observables to setup change “listener” only for specific component.

@Pascal, waiting for your superduper demo examples code :)

Lunch

During lunch brake I had a chance to speak to Igor Minar and Martin Probst, asked them about TypeScript like an extra complexity to move a project to Angular2. It looks like they are going solid for it, even with future ES7 and decorators. So if you want to use Angular2 you MUST learn TypeScript. It was a good advice from Martin to try TypeScript with current Angular1.X version and only after, when we are confident enough move to Angular2 and use it together. Let’s see how far we will go.

Reactive Angular 2 (slides, video)

It was life coding with Rob Wormald. He lifted the curtain of reactive programming. We made Typeahead component with Observables, it was really nice example to show how to put everything in one stream. Then we created chat app with firebase. And after it was Todo app with Redux. Third one was really difficult to follow.

Related example from Rob suddenly found on internet – plnk.

Introduction to RxJS 5 (slides, video)

More reactive stuff from Gerard Sans. History of streams: pipes(unix, 1973) – > streams(node.js, 2009) -> observables (Microsoft, 2012) ->observables (Angular2, 2014). Some obvious things that you can do with array in ES5 like forEach, map, filter, reduce. Examples with Observables. Subscribe. No debugger support yet.

RxJs could be implementation in Angular2 for:

• asynchronous processing
• http
• forms: controls, validation
• component events

…and again Typeahead component example (plnk), now with nicer styles.

Angular 2 and the Single Immutable State Tree (slides, video coming soon)

Talk of Ciro Nunes about immutables has a lot in common with Pascal’s “Angular 2 Change Detection Explained”.

pure function – returns new object.

ChangeDetectionStrategy.OnPush

Redux – unidirectional data flow.

Angular implementation

[javascript]
const appStore = createStore(rootReducer);
bootstrap(App, [
provide(‘AppStore’, {userValue: appStore}),
Actions
]);
[/javascript]

or

• ngrx/store
• Managing state in Angular2 applications 

@Ciro, it looks like 3rd link under presentation is broken.

The new Component Router for Angular 2 and 1.x (slides, video coming soon)

Manfred Steyer started with some kind of fast slides, some of them with German notation.

Router LIfe Cycle Callbacks:

• onActivate
• onDeactivate
• canDeactivate
• @canActivate

Nice concept of honest authorisation with checkbox only :)

Lazy loading for components is there.

Router part inside each component:

[javascript]
app.component(‘bookFlight’, {
controller: BookFlightController,
templateUrl: ‘components/book-flight/book-flight.html’,
$routeConfig: [
{ path: ‘/’, component: ‘passenger’, name: ‘Passenger’ },
{ path: ‘/flight’, component: ‘flight’, name: ‘Flight’, useAsDefault: true },
{ path: ‘/booking’, component: ‘booking’, name: ‘Booking’ },
{ path: ‘/passenger/:id’, component: ‘passengerEdit’, name: ‘PassengerEdit’ }
]
});

[/javascript]

Access control could be done via @canActivate:

[javascript]
app.component(‘passengerEdit’, {
controller: PassengerEditController,
template: passengerEditTemplate,
$canActivate: () => {
console.debug("$canActivate");
return true;
}
});
[/javascript]

Can be installed in Angular1 via ng-controller, unfortunately did not find this place in your code.

Link to router config examples: Angular2 and Angular1.5

@Manfred, I think it should be some piece of code that goes after each model slide for better understanding. Second thing – we don’t need ControllerAs for Angular1.5 anymore.

Rendering in Angular 2  (slides, video)

Leonardo Zizzamia presented one more topic about trying to solve problem of synchronising Model and UI.

Render decoupling to make it possible to use different renders. Make it possible to have the same code base, same templates for different platforms.

Canvas Root Render

Angular2 Rendering is still in beta

and nice app – https://getplan.co based on Angualr1.4.9 (still migrating to 2)

Which Way Is Up? (video)

Todd Motto told us a nice story about Jerry, a pirat-packman-developer

I’ll not retell you the story, better wait for the video ;)

Todd just assembled all our doubts and fears about JS boom(what technology to use?), open source and participating in community life.

Some lessons from the story:

• don’t be scared of new technologies
• but don’t try to use them all at once, just keep an eye on them
• contribute to open source projects – the great way of knowledge sharing
• you know it well only when you can explain it well – write a blog, explain your thoughts
• and keep in mind:

Nothing was achieved in comfort zone!

I was happy to visit NG-NL Conference in Amsterdam (the first AngularJS one in NL) and would like to share my thoughts with you.

As far as there were a lot of topics to discuss conference was run in 2 tracks. Here you can find the whole schedule. I followed next route:

 so several words about each one.

Intro + Welcome (slides, video)

It was great speech by Aaron Frost. We can say that it was about everything and nothing(from tech side) the same time. He provided good structured way how everyone can grow as a professional inside AngularJS/JavaScript(and probably not only) community.

After several days/weeks/months listeners could forget the context, but they never forget awesome comparison that authors of frameworks and tools like builders who are constructing a bridge across the river, river of different development issues. And they know that these bridges would be used not only by them but mostly by juniors. So he wished us create our own bridges, help to improve existing ones and never troll builders.

Very inspiring! Thank you, Aaron.

Videogular and the future of HTML5 video (slides, video)

It was presentation of Videogular – HTML5 video player for AngularJS by Raúl Jiménez. First part of the presentation for me was like “reading” documentation for component and explaining obvious things. Second part was more interesting with life coding and real example. Site sawfish.stimme.de shows Videogular connected to google maps API that is really impressing!

@Raul, I will definitely have more detailed look on your project.

Lazy load anything using ocLazyLoad (slides, video)

A very short talk by Olivier Combe. He presented his extension ocLazyLoad that allows to do lazy loading for modules in AngularJS. Pointed out how important lazy loading is, especially for mobile limited network connection. Also it was some explanation how it could work with router (both ngRoute and ui-router). It’s nice that ocLazyLoad also support dependancy injection for loaded modules.

There are some expectations to get similar functionality in Angular1.5, we’ll see.

@Olivier, why only 20 min for such a fundamental concept? Already dived into the source code.

Visual Review – Automated GUI testing with Protractor

Daniel Marjenburgh presented Visual Review – tool to check visual changes between different project builds (btw name is terrible extremely difficult to google it :). The tool works together with protractor (thanks to special plugin VisualReview-protractor) that makes it really tasty. The base idea is quite simple: to make and compare screenshots. In protractor scenario code it looks simply like:

[javascript]
vr.takeScreenshot(‘AngularJS-homepage’);
[/javascript]

@Daniel, I liked the idea. Only one question is still open for me: how could I make it work with remote browsers (for example Browserstack service)?

TDD in javascript – Not a myth (slides)

In all the details and for the very basics – TDD in JavaScript by Ofir Dagan. In this presentation you could find answers for all the questions: “why to do testing?”, “how to do it right?”, “which tools to use?”, “how to analyse the coverage?” and even “how mother nature do TDD”. It’s really good and quick introduction for developers who want to start with testing.

@Ofir, I wish I met you 2 years ago when I started my “trial and error method” with TDD.

Inside The Angular Directive Compiler (video)

I even could not imaging that this lecture about Directive Compiler would be so interesting for me. Step by step together with Tero Parviainen we recreated functionality of $compileProvider.$compile method. It consists of 4 steps:

• compile (parse html template for directives)
• link (link them to the scope)
• inheritance (create new scope if needed and operate with it)
• isolation (not provide the scope by itself but do attribute binding)

@Tero, you pushed me to look into source code more often :) And of course thank you for the book!

Domain Model Objects in AngularJS (video)

Gert Hengeveld showed how we could create Model layer based on javascript classes (or constructor functions). During all the presentation I had filling that backend developer wants to bring his concepts to client side(To be sure that I understood concept correctly I went to original article). I was not convinced that I should try this approach. There were so many theoretical things that we ostensibly would be able to do with this structure(I even don’t remember the whole list): validation, relations, etc… I would like to see your implementation of this concepts. Because without implementation it’s nothing to discuss. In our applications for data layer we are using Restangular wrapped with our services where we do validation and all this stuff, and it works pretty well.

@Gert, if you have some code to share – please show it, I really would like to have a look.

How I made a mess of my Angular application (slides, video)

Very funny speech by Dave Smith about past Angular mistakes and ruler punishment. I just provide the list of mentioned mistakes and solution(in brackets) for them:

• scope abuse ( do not create scope everywhere)
• global controller functions ( use another syntax )
• shadow scope ( use “controllers as ” or nested model)
• $watch abuse ( use ng-change, events, flux pattern)
• ng-include ( just don’t use ng-include)
• pass scope like param to services ( never do so)
• home grown build tools ( many existing proven tools)

btw, it was a suggestion to put own Angular mistakes on twitter with tag #ngoops (not much for now)

@Dave, mine were(except several from your list):

• bad file structure
• everything in controller (DOM manipulations and business logic)
• used jQuery a lot instead native directives

Modern authentication solutions (slides, video)

Manfred Steyer told us a lot about OAuth 2.0 and OpenID and not much about AngularJS implementation.  And it would be also interesting to hear about some existing solutions for Angular and compare them.

@Manfred, 45 min definitely not enough for OAuth specific. I guess audience divided into 2 parts: who worked with OAuth before – for them it was boring, and who did not know this protocol – they still don’t know it.

AngularJS Lab

I don’t know why, but we skipped this.

But still I had quite interesting talk with Christoph Burgdorf. Christoph, thank you for advise about detecting language for authorised user.

Closing Keynote (video)

I’m glad to be with Carmen Popoviciu in one community.

@organisers, @speakers, thank you very much for such a great event!