Angular Connect London - Day 2
Directly from Europe's biggest Angular Developer Conference
11 min read
11 min read
I’m lucky enough to be able to attend AngularConnect here in London. This article is my notebook from the sessions I attended on day 2. You might also want to check out my refined notes from day 1.
Speaker: @sebawita
Angular 2 is platform agnostic. That what makes it possible to “compile” it to other tech such as native mobile applications.
NativeScript: use JavaScript to build a native UI. It is not Cordova, PhoneGap..no browser, no DOM. It’s also not Xamarin. There’s no cross-compilation, the JavaScript runs and transforms at runtime. There are also no wrappers, but there’s direct access to the native API. Not cool enough? You can use npm packages! And it’s open source.
Everything runs on the JavaScript Virtual Machine. There’s a type conversion service which translates JavaScript -> Android Java.
NativeScript modules can be “required” which then translate to the specific platform the code is running on. So it’s like an abstraction layer s.t. you don’t have to write iOS/Android specific JavaScript code.
Important, Web UI != Mobile UI: Mobile applications have different navigation scenarios, different requirements from the UI perspective than a web application.
Also, there are no <div> as there is no DOM/browser. The UI is made of custom components like
<StackPanel>
<Label...>
<Button></Button>
</StackPanel>Although the elements are very HTML alike. A huge feature, LiveSync between the editor and Android emulator that executes the native components.
Speaker: @mgonto
Not about RxJS and/or Immutability, but on mutability.
What’s currently done by many that are developing Angular applications:
function SomeController($scope) {
$scope.person = {
firstname: 'Juri',
lastname: 'Strumpflohner'
};
$scope.changeName = function(newName) {
// some validation
if(isValid){
$scope.person.firstname = newName;
...
}
...
};
}
The model is directly bound to the scope as plain JavaScript object. Furthermore note the changeName function that acts upon the model. Problem: the code sits within the controller and is therefore hardly reusable by other parts of the application. Instead, it’s the models’ responsibility to “change its name”.
ES6 offers classes for that. For instance:
export class User {
name: string;
email: string;
rating: number;
constructor(userInfo: UserConfig) {
this.userInfo = userInfo;
}
calculateRating() {
...
}
public static getUsersByName(name) {
...
}
}
Note, these are concepts I’m already trying to embrace with the angular-model-factory library.
Speakers: @martin_probst, @jakeherringbone
TypeScript is..
Angular team uses TypeScript for..
TypeScript can be directly installed from npm and then used from the command line.
$ tsc --init --target es5 --experimantalDecorators --emitDecoratorMetadata
This creates a tsconfig.json which is used by TypeScript to know how the structure of the project is about.
Some gimmicks you get
Oh…create a “build/src/app” containing the build files..
Speakers: pkozlowski_os
Slides: http://g.co/ng/ac-packaging
In order to write ES6 code we need to “transpile” it to ES5 compatible code.
Module loader has been removed from the ES2015 spec. It’s now a work in progress: http://whatwg.github.io/loader/
Webpack
<script src="reflect-metadata/Reflect.js"></script>
<script src="zone.js/dist/zone.js"></script>
...
<script src="bundle.js"></script>SystemJS loader + Angular2 bundles because it’s most used (Plunkers, in the docs,…). But mostly choose the tool you’re most comfortable with.
Advantages and disadvantages.
CommonJS output is much more concise than the CommonJS output. That’s because SystemJS tries to be “correct” with the ES2015 semantics. It also knows how to properly deal with circular dependencies. CommonJS has less noise, but all kind of rich tooling around like WebPack and Browserify. Bundling in SystemJS is as easy as concatenating files as it handles everything already internally by keeping a register of modules.
“System” insanity warning - lots of stuff packed into this term, from the original spec format, to the bundler, loading etc…
The (near) future will be different maybe and that might change how we think about bundling. HTTP/2, what bundler will be used in Angular 2 (CLI), …
Speaker: @UriGoldshtein
The kind of connected client architecture is still missing. People decouple it through request/response patterns and REST.
Meteor is based on
Push live. On the usual architectures this would require a lot of work. Meteor builds this in with Livequery. It’s like a $watch on the database.
Then the synched client data cache takes care to propagate the changes from the Livequery to the application. This is done through publish/subscribe patterns. Communication happens through WebSockets. We should not care about network latency, just synch immediately.
Meteor takes care of the server, mobile, web clients. This is done by combining isomorphic JavaScript and optimistic UI (like button scenario).
When you click the Like button, changes update in the local cache and happen immediately, by executing the “addOne()” method. Through the synching approach, the same “addOne()” method is executed on the server as well. It’ll update the data and then later update the local cache again.
Meteor is the infrastructure team you never had! it is the platform for JavaScript like the JVM is for Java or the CLR for .Net.
deeply integrate into the change detection process of Angular 2. When Meteor gets the change, it notifies the Angular 2 change detection mechanism.
Tutorial for having a full-stack Meteor+Angular tutorial, moving from Angular v1 to Angular v2 on http://angular-meteor.com/.
Speaker: @jteplitz
Slides: https://goo.gl/m6GNNu
Starter pack: https://github.com/jteplitz602/ng2_web_worker_starter_pack
60FPS is what you strive for to keep things smooth. Means you have 16ms to do your stuff, but the browser needs about 8ms do update the DOM.
Modern web applications require stuff like sound/image processing, running prediction algorithms etc…that’s stuff that easily takes more than 8ms.
A WebWorker is a separate execution context, running in a totally different process. Those processes don’t touch the DOM. Integration tests will be a lot faster.
Don’t just push heavy stuff to the server. May work for a webapp, but not for client apps. You pay for server CPU after all, not for the client ones! “It costs more to transmit a byte than to compute it”. Moreover transmitting means more energy cost, thus reduced battery live (radio transmitters consume a lot of battery).
Challenges
Therefore the strategy is to..
Communication between WebWorkers and UI happens through a Message Bus. MessageBroker helps dealing with that.
Speaker: @victorsavkin, @tbosch1009
ng-content selects elements
Like when you have
@Component({
template: `
<tabs>
<tabs-title />
<tabs-content>..</tabs-content>
...
</tabs>`
})
You can select tabs with ng-content (it’s a bit like transclusion)
<div class="navbar">
<ng-content select="tab-title" />
</div>The parent component can get hold of child components through the
class Tabs {
@ContentChildren(TabsTitle);
tabsTitleCmps: QueryList
...
}
annotation. Note the QueryList object. Also, the difference between ContentChild and ViewChild?? Didn’t get that…
ContentChild
View Children
Docs have more info: [](https://angular.io/docs/js/latest/api/core/ContentChild-var.html)https://angular.io/docs/js/latest/api/core/ContentChild-var.html
Angular 2 provides a concept called TemplateRef.
@Component({
selector: 'conf-talks',
template: `
<ul>
<template ng-for [ng-for-of]="talks"
ng-for-template="itemTmpl" />
</template>
</ul>
`
})
class ConfTalks {
@ContentChild(TemplateRef) itemTmpl;
}
(cool talk about some things you shouldn’t do. Just check out the vid)
Speaker: @timruffles
d3 is something like jQuery + data. Hence its API is very jquery-ish.
Callbacks allow to change the appearance of elements based on the data.
d3.selectAll('.bars')
.style('background', function(){
...
});
Basically sync DOM with data. There are 3 contexts
Angular comes into play: d3.angularize().
Invert the hierarchy. Use d3 to keep control and angular for the “easy” stuff.
Features
Working with Angular 2
Angular 2 is nearly directly integrating with Firebase
It gets as neat as:
No code in the controller needed.
by Ben Lesh (from Netflix)
Project lead of RxJS Next: [](https://github.com/ReactiveX/RxJS)http[s://github.com/ReactiveX/RxJS](http://github.com/React)
RxJS 5
Community driven by Google, Netflix,…
Rewritten from ground-up with goals for
Will be beta the next months or so…Mainly work on tests and docs. Api isn’t going to change that much.
Observables
The only thing Promises make sense for is Ajax. But there’s a problem. They are hardly cancellable which is often an issue when people quickly switch through different views where each is going to start some Ajax calls for loading data.
Observables can be cancelled: simply unsubscribe!
Creating an Observable is nearly identical as creating a Promise object. The moment subscribe is called, the Observable body is executed, not before (they’re lazy).
Huge plus. Observables can simply be retried calling
With promises that’s doable but a bit more tricky.
Operators
“operations” that return Observables themselves. Observables work a bit differently when you pipe through different operators. Basically values are passed one by one rather then the entire data as the map function on an array would work like.
When the operations like filter/map are used (the traditional ones) they create intermediary data structures in memory which will need to be garbage collected. Observables instead process all of the values directly through the entire chain, one by one (don’t use it for small arrays though, tends to be slower).
There are buffering strategies like buffer, throttle, debounce, sample.
hot vs. cold observables
By default “cold”: when you subscribe, it sets up one producer for one consumer (for each consumer.
Calling .share() on it, there’s one producer for all consumers.
Multiplexed WebSocket
Basically sending multiple messages over the same stream, so there’s filtering going on.
Bad
*
What feature not present would you love to borrow and add to Angular?
Being released.
Widget libraries? Material, UI-Bootstrap?
Angular material in early experimental phase. They’re working with the UI-Bootstrap team for ng2 as well as with Telerik.
ng-touch in Angular 2?
doing some research currently.
transclusion is now projection?
Yep, it was to align with web standards spec. It’s called “content projection” there.
When will be the component router be available for ng1?
Not yet ready. Going along with ng2. Within a week you should be able to use it in ng1 as well. Will be stable along with ng2’s status.
Why template strings rather than a pre-processor?
…
Will ng2 form controls be backported to ng1?
Not yet convinced whether it’s benefitial for ng1…still being discussed.
Where is community help most needed?
There’s a GitHub label specific for that. (comunity-help)
Internationalisation?
Good progress by the end of the year.
Release?
p1 labeled bugs are those that need to be done before beta.
Should I start using Angular 2 now?
If you start going into production after Q1 next year…then it might be plausible. Core works quite well, but docs are still lacking and obviously there are bugs.
Event Streams vs. traditional data approaches?
Depends on the team…
What is the plan for tidying up the need to list the components that exist in the template?
It’s to avoid bugs and errors. But they admit it’s a bit bugging them as well. The hope to solve it with tooling, like angular-cli.
