Angular Connect avec Douglas Duteil
Un peu de changement sur notre Mag SFEIR, avec le premier article publié en anglais. Ça arrivera de temps en temps, quand le sujet et la situation s’y prêtent. Pour cette première édition, le Sfeirien Douglas Duteil vous fait un reporting complet sur les conférences qui se sont déroulées lors de la dernière conférence Angular Connect, les 20 et 21 octobre derniers. De quoi en apprendre plus sur le focus évident de cette édition : Angular 2.0 !
Day one : Angular Connect
Track 1 : Keynote
Like always a pushy start for the conference. Having Brad Green coming back to Angular 1 to explain how much Angular 2 has learned from it to make it better. The word “performance” is used a lot to describe two things : human and computer performance.
Human performance through simplicity, using :
- Best practices from Angular 1 to simplify Angular 2 API
- Using cli build tools to enhance the accessibility for developers to Angular 2 stack
- Types, so that IDEs could help with the programming process
Computer performance through speed, using :
- Rendering of the app on servers (universality)
- Pre-caching of the app as a building task
- Web Workers for not blocking UI
Track 1 : What’s new in TypeScript
A good presentation by Bill Ticehurst going through TypeScript basics to explain what TypeScript 1.6 is. Some interesting notes: he is making a good demonstration of the Sublime Text Plugin for TypeScript, including syntax highlighting. So that if you use ES6 Modules syntax, TypeScript can automatically find the definition file from the file you are importing.
Track 1 : Angular 1.5 and beyond
Extremely good and positive presentation about the current Angular 1.x state and where it is going. The « forward-update » duo is the answer to most questions about migrations, in my opinion, for existing sites as well as existing libraries. Thinking about AngularUI or AngularStrap, the shift to Angular 2 can syntactically be made using ng-forward at first.
Track 1 : Routing in Eleven Dimensions with Component Router
Out of space presentation about the new rock solid ngRouter ! Brian Ford showed how they had made Components composition the gateway to complex app encapsulation. To me, the components of an app can be classified in the following way :
- « Top » component: the global encapsulation of the app state. It’s using « Middle » components.
- « Middle » component: the app logical layer. Makes a correspondence between your different Services and other “Middle” or « Low » components.
- « Low » component: the app agnostic layer. Just a component knowing how to render itself from its attributes of sub-low components. Nothing in here is bound to your app.
Each of them can be directly related to a state with parameters. And those states can be described independently at the same level (see the presentation ending for more info about auxiliary routes)
That was great. Brian Ford gave me more tips about using Matrix URIs in URLs to allow multiple state-to-state parameters. Mind-blowing! I met Igor and Pawel who encouraged me to come to the AMA session for more answers. And so I did.
AMA Room 1 with Brad Green, Igor Minar and Jules Kremer
- Is « di.js » going out of angular/angular core ? YES. Might be the first piece that actually goes out of Angular
- Topic: Angular and React mutual learning
- Topic: Microsoft using Angular internally and externally example of Office angular extensions: « yo office »
- Topic: HTML Semantic with custom tag components
- Q : Custom tags comparing to basic HTML tags for accessibility. Example with HTML tags with fixed structure. Hard to properly customize.
- A : Use of arias like the « role=grid » to describe what your custom component is.
Extra question to Igor
I came to Igor directly after the AMA to ask more questions :
- Q : « Is immutabile change detection strongly linked to the Immutable.js lib? »
- A : No. Angular doesn’t care about what you use for making immutability. You have to tell manually to your components which change detection strategy to use. It’s named « OnPush » for now. This strategy will detect change by reference change.
- Q : « Will Karma be updated to match ES6 standard? »
- A : Not for now. There’s too much research to do before that. The current solution is just using pre-pocessing or post-processing of the ES6 files for a performance benefit with the tsc command line to let Karma use the ES5 file directly
Track 1 : ngAnimate 2.0
A critical subject for me as I was presenting on this subject last year. In this presentation Matias comes back to all the different animation description methods they tried out : from HTML attributes, to CSS classes, to JS now. I’m very happy to see that they are going the Web Animation API way.
The animation system he presents is very appealing to me.
- a separate js animation file
- an animation selector
- an access to the component’s life and its attributes’ modifications
- an element getter inside the component by default
- an isolated event listening system
- use of observables/promises to deal with animation events
ngAnimate comes with some scripts to help you test your animations in a macro view (« it should animate when I change an attribute ») like in micro view (« it should animate and end with the .foo class when I click on it »).
Bref. Gorgeous! (see day 2 last notes for more goodies)
Track 1 : Protractor styleguide
Carmen and Andres came back on their experience of E2E testing with Protractor and made a presentation around the best practices they had agreed on. The merge of these styleguides is a contribution to the Protractor documentation.
I like the way they are advertising the use of PageObject for tests. PageObjects are interfaces to access to a section of your HTML. They map the accessor to elements in this section (or viewport) with simple names. So you can write your tests with an abstraction (a PageObject instance) that makes your tests more readable than if you repeat the element accessor with the low level API in each test.
PS: NEVER USE XPATH is the leitmotiv here.
Track 1 : Testing strategies with Angular 2
Interesting first view of how Angular 2 services and components can be tested. The API is looking good. Nothing really surprising. It’s good to have promises directly supported by the injectAsync function. However no details were given about how to write tests with other injection strategies.
For example, if I were using a standalone injection system (angular/di.js) I would have wanted to have more details about injection testing.
Track 1 : Creating User Interface Component APIs in Angular and Web Components
Interesting analysis of the DOM Element API using a modal component example. It was a relevant example to demonstrate how difficult it is to handle directives communication in Angular 1.
The Angular 2 references feels like the correct answer. It allows access to the DOM Element API that can actually be expanded through the Angular Components.
Track 1 : The REAL Angular Keynote
Having Lukas, the showman, and Shai, the ngWAT man, on the same stage was a bad idea :). They just mind blown us for 20 minutes with an exclusive theatrical performance.
Very surprised to have a private RnR band and Angular brewed beers ! Awesome :D
I just stayed in that « Chill out » room (an extra room of the conference) to start writing these lines. I talked a lot with Sander Elias there. He is a Dutch AngularJS meetup organizer. He loved the concept of those rooms to actually connect (talk) with each over. I told him about my tomorrow role as host for the AMA on the morning. He encouraged me to change my plans for tomorrow afternoon prioritizing AMA and Unconf session anyway. Like he said: « the recorded videos of the talks are going online so fast that it makes no sense to attempt to attend all of them. Prioritize on the subjects you are very interested in and go to their AMA session. »
Day two : Angular Connect
Track 1 : Building native mobile apps with Angular 2.0 and NativeScript
This talk is a good introduction to NativeScript. It’s describing where to place NativeScript compared with the over JS to Native competitors (like Cordova or ReactNative). It’s an interesting technology that wants to promote the use of Angular 2 components to compile similar logic between web and native but with another view made with XML native view description.
[STAFF DUTY] AMA room 1 with Rado Kirov and Naomi Black
The first AMA session I hosted was a failure at the beginning because the speakers were still on their way to the conference and the room was almost empty. However 15 minutes later Naomi arrived with a « fake Rado » who was none other than Tobias Bosch!
Naomi answered some questions and helped debugging JS crawl of Angular 1 app with the google webmasters tool.
[STAFF DUTY] AMA room 1 with Hristo Deshev and Sebastian Witalec
- Topic: NativeScript without TypeScript nor Angular 2
- Topic: Making NativeScript modules for cross platform JS API
- Topic: Debugging NativeScript app with the Chrome Dev Tools
- Topic: NativeScript funds
- Topic: Possible auto conversion of HTML tags to NativeScript XML tags for code reuse
[STAFF DUTY] AMA room 1 with Alex Eagle, Martin Probst and Bill Ticehurst
- Topic: The fastest way to transpile large amount of source code
- Topic: Generation of definition type files from existing ES5 code for migration
- Topic: Auto concatenation of definition type files
- Topic: Angular 1 and Typescript
Track 2 : Using Web Workers for more responsive apps
While I saw at the AMA a lot of tweets discussing the Track 2. So I decided to check it out. I arrived in the middle of Jason’s talk in a packed room.
The Web Worker is a technology we all heard about but never took the time to use it. It’s great to know that Angular 2 is pushing it forward in one of their experimental branches.
AMA room 2 with Pawel Kozlowski and Ben Lesh
I arrived at the last minute before lunch. The last topic was about Promises vs. Observables with Ben saying that « Promise smells ». His point was especially about Ajax requests returning promises. There is a big debate around the fact that the Promise API web standard in browsers today doesn’t allow Promises to be canceled. Ben argues that it’s normal. They are not supposed to. If I’m making a promise to you, I won’t cancel it because it’s a promise! If you want this behavior, it’s better to use Observables that you can cancel, throttle, map, etc.
Lunch in front of the Angular Air live from AngularConnect !
Track 1 : Better concepts, less code in Angular 2
Today Victor and Tobias are the top contributors to Angular 2 (see GitHub Stats). In their talk they went through analyzing how to consider writing complex components with the Angular element accessors. For me, that echoes with Bryan talk about the new router.
Track 1 : ngDarwinAward
Entertaining talk about how we all learnt Angular back in the days. Principally highlighting ugly hacks we all made with Angular
Unconf : « More over babbage (Angular as a computation engine) » by Rado Kirov (@radokirov)
Rado starts by talking about a Strange Loop talk he saw, named: « Unconventional Programming with Chemical Computing » by Carin Meier (https://www.youtube.com/watch?v=cHoYNStQOEc). The idea is to visually model how program evolves to a solution through the DOM. So he tries to do the same thing using Angular 2 and program algorithms in the view. With a little identity component trick (receive a input and send it back) he made some interesting demos:
- N Queens
Check out his repo for more info : https://github.com/rkirov/ng-compute
Unconf : « Where are all the women ? » by Sarah Doran (@sarahd0ran)
Feedback about Sarah’s life as a programmer in Ireland. How she got involved in a coding club (CoderDojo) and realized that girls were a minority around kids there. She went in the process of reserving seats for girls and involve parents so that they understand that coding is for girls too. The result is encouraging because most of the girls end up being mentors for all the children (boys like girls).
AMA room 1 with Gleb Bahmutov, Tobias Bosch, Niall Crosby and Victor Savkin
- Q: What is the recommended process to find and correct performance problems.
- A : Isolate in your app performance bottlenecks, isolate them in your app and reproduce them one by one in an independent space.
- Topic: Use of angular/benchpress in your continuous integration system to detect the introduction of performance issues during your developpement.
- Topic: Dynamic templates in Angular 2. Pushing forward the use of components as separate templates to benefit of post-compiled templates.
- Topic: My Component classification (Top, Middle, Bottom) comparing to React Dummy component that only knows how to render one thing (no logic at all).
Victor approves and recommends me to use components as pure functions (the functional programming way).
Track 1 : Reactive Streams in Angular 1 and 2
Deep inside the Observable API and their use. A reference presentation about Observable for me. Specially for the last demo he shows how to wrap a web socket communication with a « hot » Observable. I definitely consider to stop using Promises for client-server communication in favor of Observables for my next projects.
Track 1 : Google Angular team panel
The last event of the day with the whole angular team on stage. A lot of questions have been asked with the #askangular hashtag.
— Douglas Duteil (@douglasduteil) October 21, 2015
One of mine has been picked (https://twitter.com/douglasduteil/status/656863544529547269) about changing the default Angular 2 change detection strategy. Victor answered positively but didn’t give much more detail about how to switch to « ChangeDetectionStrategy.OnPush » by default. I’ll have to post an issue on the repo to have a complete answer.