Updated March 14th 2015:

Angular Panel Questions

Video

  • Lazy loading for Angular 2 will be built in, and Brian Ford is looking at creating a spec for Angular 1.x to do this more easily
  • Angular 2 is designed for ever-green browsers, including IE11+
  • Angular team is investigating ways to use alternative ES6 transpilers (like Babel)
    instead of Traceur + TypeScript.

(Super) Power Management - Igor Minar (Google) - 4:45pm

Video

Reflective talk. Angular team are just people. They are not super-human.

Talent

  • Talent == Superpower
  • Talent is made
  • Once acquired, it is easier to acquire other talents
  • So to get talent, work hard. But that is tiring.

Burnout

  • Working hard can lead to burnout & depression
  • Being able to change how you think is important
  • His solution: meditation and mindfulness. Ed note: meditation - thanking about God and having a relationship with your
    creator does help with mental health, in my experience.

Meditation & Mental Exercise

  • Neuroplasticity == ability to re-wire brain
  • Meditation for Igor went from a hippie-activity to a form of exercise
  • Mindfulness is about paying attention to the present, in a non-judgemental way.
    • Train breathing, focus on it
    • Conference does a 30-second trial
    • Hard to not think about anything other than your breathing

Skills needed

  • Self-awareness == logging & profiling. But how to change?
  • Self-regulation
    • Making conscious decision to take a positive course of action instead of a typical, negative reaction

Ed: A humanist’s attempt to achieve inner-peace.

Change Detection Reinvented in Angular 2 - Victor Savkin (Google) - 4:20pm

Slides Video

What is change detection?

  • Algorithm which looks at which properties in an object model changed. Then updates the DOM as part of the $digest
  • Angular 2: Model > Components > DOM
    • Unidirectional check, no cycles
    • Parent always checked before child
    • Number of digest cycles = 1
  • Angular 1: Model <> Directive <> DOM
    • Or more formally, the update graph is cyclic, not unidirectional
    • Because of these cycles, it’s hard to know what gets updated first. E.g. does parent get updated or child?
    • Number of digest cycles = 10

Summary

  • Tree, not Graph
  • Predictable
  • One digest cycle

Performance

  • Change Detection Time (CDT) = C * N, where C is number of checks, and N is number of things to check
  • When dealing with binding expressions, we generate a detection function automatically, which contains code which
    allows for JS VM optimisations
  • Mutable POJOs mean that the change-detection system needs to check both the object reference for changes, and each of the
    POJO’s properties. Bad for performance.
  • Angular 2 compiles templates like *foreach" var t in talks such that the talk in [talk]="t" is immutable. This is
    great for performance.
  • When using only immutable objects, CDT = C * M, where M is the nubmer of changed bindings and is always less than N.
  • Observables are diff to immutables in one important way: Observables can be changed at any point in the object tree, but
    immutables are always changed at the root.
    • So possible problem with Observables is “cascading updates”. One update triggers another update. How to solve?
    • Solution: Update the model first, cascades can still happen. But once finished, then the view is updated.
  • Angular 2 is faster with Immutables and Observables, and you can mix and match them

Summary

  • CDT is now 3-10 times faster than in Angular 1
  • Check out his blog about how this is working in Angular

He’s a smart guy :)

Angular + React = Speed - Dave Smith - 3:55pm

Video

Engineering is the intersection of economics and science.

React in 90 seconds

  • Premise: the performance of the real DOM is not great. A virtual one will be faster
  • Allows you to compare two virtual DOMs, apply difference to real DOM

Do not automatically add React to make a page faster

  • React has to control the outer DOM for it be able to do batch updates
  • Need to consider how to integrate

Example: Calandar scheduler

  • Angular rendering: 300-500ms
  • React: < 100ms

Drawbacks

  • Adds 500kB of code to your site
  • It’s another framework
  • JSX build step
  • You might have to change how you do i18n

Pros

  • Fast for DOM manipulation

Angular 2

  • Slightly faster than React! (video was edited to include an apples/pears comparison, instead of the original apples/oranges comparison)
  • Performance of v2 in this example was slightly better than an un-tuned React example.

Build an Angular Material App - Thomas Burleson & Naomi Black (Google) - 3:30pm

Video

Demo of building an Angular Material app.

  • Lots of components
  • Many transitions built-in
  • Flex-box layout is available
  • You can configure an icon set for use in your app
  • v1.0 should be available by July 2015

Badges? We don’t need no stinkin’ badges! - Lukas Ruebbelke & Geoff Goodman (Google?, wrote Plunkr) - 2:35pm

Video

Story presentation

You will never receive a badge in the mail saying, “You are now allowed to share knowledge with other people!”.
Plunkr was written by Geoff Goodman, who is accountant who wrote Plunkr in his spare time! It is in the top 10,000
visited websites in the world.

You do not need permission to awesome!

  • Think of the developer you admire. What is stopping you from being that guy?

How to get to where you want to be

  • Feedback loop
    • Success always starts with Failure
    • Agile process, training (initially you know nothing, then you acquire knowledge to do better)
    • Use a feedback loop to help you
    • “Do not let the potential outcome of an action keep you from taking that action”
    • PRs are feedback
  • First rule of “Club awesome” is: Do something. Make mistakes.
    • You will make mistakes. Accept it. You will built things the wrong way, initially
    • Something that works kinda is better than something that doesn’t exist
  • Second rule: Compose your software
    • Stand on the shoulders of giants
    • It’s faster, more people have worked on the components, no need to re-invent the wheel
  • Third rule: Make friends
    • Quality of friends affects quality of output

Better i18n for your Angular apps - Chirayu Krishnappa & Pascal Precht (Google, ) - 2:10pm

Slides Video

  • It’s not just about translating messages from one language to another. There’s more involved.
  • There are two ways to get translation strings into app:
    • Angular Translate: JSON files
    • Generate Templates in each language

Talking about a translation process & tool for extracting translation strings from code,
so that translation strings are provided with more context for the translator:

  • Translation messages require context to enable correct translation
  • Add attribute to elements which contains the i18n content description (much like how aria-desc works)
  • Plural rules vary significantly across languages.
  • New declarative syntax to support multiple plural strings. Works for gender as well

Translation (by humans) takes time. We want something faster so we can test.

  • “Pseudotranslation” tool to the rescue. It provides instant gibberish to help see how app will layout with different sized strings

Summary

  • Angular 1.4 is shipping with declarative support for plurals and gender (MessageFormat)
  • Tools to extract strings are common later
  • Angular 2 support starts next month

Digging into Angular Style Guide Decisions - John Papa & Todd Motto - 1:45pm

Styleguide Video

  • Code isn’t just for computers. It’s a channel of communication between two people too. Sometimes it’s you and
    yourself-later, most times it’s you & someone else.
  • Fast and effective communication

Styleguide example

  • “One component per file”
    • Everything is encapsulated inside that file
    • Easier to identify, read and code

Styleguide is attempt to reduce the “10 ways to do everything”

  • Readability
  • Communication

  • Prepare for Angular 2

    • It’s nice to have a path which is not a dead end

  • Remove implementation details from a controller

Always ask “Why” when reading the styleguide

  • It’s not good enough to say, “Because I prefer it”
  • Style guide must:
    • Explain what you should do
    • Why
    • How

Readability

  • clarity, inconsistent naming and spelling are important
  • put important stuff at the top
  • Why? It quickly tells me what the code is and what it’s doing, avoids lots of scrolling
  • We read code 10x more often than we write it. Reading should be easier.

Context is important

  • Create a modular folder structure by-feature (YES!)
  • 4 rules for organising: LIFT
    • Locating code is easy
    • Identify code at a glance
    • Flat structure as much as possible
    • Try to stay DRY
  • Modular structure helps allow multiple people to work on codebase at the same time (on different feature modules)
  • Quickly locating and finding code is HUGE for productivity
  • eslint-style-checker - tool to validate style guide

Angular 1.3 meets Angular 2.0 - Michał Gołębiowski, Andrew Joslin (Google, Ionic) - 1:20pm

Video

How can we prepare for Angular 2?

  • You can write in ES6 code now. ES5 is a subset of ES6, so you shouldn’t need to change existing code.
    • Need to transpile ES6 to ES5. E.g. use babel compiler
  • Use the Angular 1.4 router now
  • If you have an existing 1.x service, how to convert?
    • Convert function to a class, constructor function
    • $q has changed to work like ES6 syntax
    • Use import to import dependencies
    • Looking at the diff, not too much change
  • Converting a directive?
    • New syntax is shorter, most DDO code disappears
    • $scope is dead.
    • First step, convert DDO function to a class.
    • Code in link() function move into controller class/function
    • Then use controllerAs property to replace references to $scope with controllerAsName

Reactive all the things - Ben Lesh & Martin Gontovnikas (Netflix / Auth0) - 11:30am

Slides Video

Reactive programming, observables, streams…

Why go functional (instead of imperative)?

  • JavaScript is going to change. At the moment it is single threaded. Real concurrency will come. One day. Soon.
  • Functional programming helps with parallelism
  • Array .map(), .filter(), .reduce(), immutable state - you can do this now.
  • But too much map+filter+reduce will kill performance due to increased memory usage due to temporary arrays created
  • Solution: Stream processing. RxJS Observables provide this.

Observables

  • They are a representation of any values over a range of time
  • They are a pattern to start a data stream, emit messages, teardown the data stream
  • Data streams: mouse events, DOM Events, network I/O
  • Problem: Sockets die.
    • Multiplexed socket reconnection is complicated. Need to knwo what you were connected to previously
    • Solution: socket observable, wrapped in a multiplexed data observable
    • Nice thing about observables is the setup, teardown and retry capability (if setup fails)
  • Angular 2 will support observables

Warning

  • RxJS has a decent learning curve
  • need to change how you think about problems
  • behaviour is sometimes sync, sometimes async

What is Reactive programming?

  • Imperative: var c = a + b;
  • Reactive:
    1
    var cStream = Observable.combineLatest(aStream, bStream, function (a, b) { return a + b; });`

We can use this today

  • Library: rxjs.js ???
  • Module: ['rx']
    1
    2
    3
    4
    5
    var disposable = $scope.$createObservableFunction('increaseCounter')
                           .flatMap(fn)
                           .do(apiService.method)
                           .scan(fn)
                           .subscribe(fn);

Large App Challenges - Jen Bourney (Google) - 11:05am

Video

Works on Google Cloud Platform. Project has about 200K JS + template LOC
About 25MB of uncompressed code. Dozens of teams, multiple offices.

Managing code size

  • Having an SPA with 25MB of code is too large to download for a user. and not all of that code is used on every view
  • Solution:
    • Divide code into modules
    • Lazy-load modules
    • Register a placeholder-route for each module
    • When module is loaded, register real routes, delete placeholder ones, call route.reload()
    • Example: /pizza, downloads module JS files, replaces /pizza with a bunch of additional routes

Sharing code

  • You need a plan to share code
  • Benefits:
    • Consistency across site
    • Increases feature developer velocity
    • Keeps code size down
    • Can fix bugs in one place
    • UI libraries are key shareable things, as well as services

Avoiding Conflicts

  • Namespace collisions!
  • Have a /common module, which is usable by other modules, but other modules cannot be shared with each other
  • Pick a unique namespace: namespace.Feature<Type> E.g. com.MyFeatureService
  • Avoid using $rootScope
  • Encourage isolate scopes

Global Changes

  • Use a flag approach to turn on/off features
  • Configurable components use a flag service to get the flags for that component, and then configure themselves.
  • Upgrading Angular
    • Relied heavily on unit and integration tests
  • Can adopt Angular if not using already
    • page-by-page conversion strategy

Catching Errors

  • Presubmit checks (lint, hooks)
  • Compiler checks
  • Running tests before submission
  • CI server to run integration test
  • Subtle failures:
    • missing directives
    • Solution: use screenshot comparison for directives

Summary

  • Create shared abstraction layers
  • Watch JS download size
  • Ensure thorough test coverage

What’s new in ngAnimate - Matias Niemelä (Google) - 10:45am

Slides Video

ngAnimate in 1.4

  • Internal code is better, allows future extension, lots of bugs fixed
  • More componentised
  • $animate callbacks, allow you wait for a view to load in before doing something else
  • $animateCSS:
    • replace need for Greensock, can do complex CSS animations in JavaScript. E.g. collapse animation on a panel, when the height is not known by CSS
  • Anchoring
    • Ability to move an item from one view to another
    • Lots of stuff… can’t keep up
    • Allows you to move components and see them move from one component into another (kind of like drag-and-drop)

Future features

  • Animation runners (players)
    • soon you will be able to pause, resume, skip animations
  • Custom Drivers
  • 1.5 and 2.0 code will be the same, just like the new router
  • ngTimeline still being developed, will take time
    • Sequence events, run things in parallel
    • Reminds me of Flex animation declarative syntax

TypeScript and Angular 2.0 - Jonathan Turner (Microsoft) - 10:20am

Demo Video

  • Keeps stressing that everything is optional, use as little or as much as you want.
  • Angular 2 works fine without it

Status & Future

  • Angular 2 building in TypeScript now
  • Currently has lowest support for ES5 (version 1.4)
  • TS 1.5 has much better ES6 support
  • TS 1.5 Beta will be released in a few weeks
  • TS 1.6 will add Generators and Async/Wait

Binding to the Cloud with Falcor - Jafar Husain (NetFlix) - 9:55am

Video

Every user wants to believe that the data they want is already on their device.

Does MVC really separate concerns? Netflix case study.

Basically saying that the controller needs to know what the view wants to present, so that it can ask for the right amount
of data. In reality, the controller and the view are normally coupled (e.g. a Web Component has a controller and a view).

Falcor

  • An async model for your app. A view requests data, Falcor gets it and async sends it back. The view decides how much
    data it wants.
  • Falcor caches the data.
  • It implements model as a JSON object, where addressing the data is like person.movie.related
  • Ed Note: Feels similar to FireBase, but a little different
  • Controller is responsible for choosing the root node in the object graph, view decides what to show
  • Angular v2 will allow you to bind to asynchronous models / promises / observables
  • You don’t need to create all these little services that return a subset of the data model anymore. Now you address the
    data that you want directly. Means that your caching is always in sync too.
  • Allows you to work with the data whether it is local or remote.

NetFlix is using Falcor today in production. Falcor will become open-source soon.

Noticing a trend: The services layer is being bypassed with components talking directly to data-model-implementations.
For example, FireBase, Falcor, Web Components. Now I don’t know if this is because we are looking at demos, or whether
this is deliberate. My basic concern is this: I don’t want my business logic to be mixed with a specific data-fetching mechanism.

##Keynote - Miško Hevery & Rado Kirov (Google) - 9am

Video

Angular 2

  • It is in the open. You can fork it, send PRs, etc.

Syntax

  • Why are we changing it? It’s about the semantics, not just a preference.
  • Familiar vs simple - we tend to confuse these two things in our mind
  • Av2 has simpler syntax rools, easier for tools to work with

Data Binding

  • You could write a data-bound attribute as a literal, an expression, or an interpolation expression. This is confusing.
  • Now there’s only 2 kinds: literal or expression. Makes it easier for component user and component author
  • Why [property] not ?
    • Browser knows about ‘real’ attributes (like src=””) and tries to use attribute.
    • This can be worked around with ng-src for certain components, but ultimately the problem is the browser knows the attribute’s key
    • So by renaming the key, we can avoid the browser default behaviour. Hence [attr]="expr" is the new syntax
    • The proper way to handle this is to always bind to properties, not attributes.
    • We want to use Web Components in the future. They should work just like native component syntax
      • Properties, events and methods is the interface. We want to preserve this.
    • What about ? Av2 will handle this for you, without the brackets.
  • <div [text]="exp"> <div [inner-html]="exp"> <div [hidden]="exp"> Av2 gets rid of a bunch of directives due to this new syntax.
  • Tooling has trouble determining whether an expression is a statement, event or bindable-property.
    • <component [select]="user.name(current) = expression (also written as bind-select=””). No side effects.
    • <component (select)="user.name(current) = statement (also written as on-select=””). Side effects (assignment).
    • This allows most of the event directives to be removed e.g. ng-blur
  • Reference Binding
    • Problem: How do you get a reference to an input field that is bound to a model property, so that you can focus it?
      • <input #ref type=text> <div click="ref.focus()"
    • Typos can be more easily detected now because component references are exposed.
  • Summary: Property binding, event binding and reference binding

Micro-syntax

  • Problem: ng-repeat="item in items", what is item in items? It’s complicated!
  • Solution: Explicit templates.
    • <template foreach #item [in]="items">, this builds on existing syntax, but is quite wordy.
    • Short hand syntax: <li template="foreach; #item; in=items" compiles to above.
    • Better syntax: <li *foreach="#item in items" compiles to above.

Summary: Goal is to make syntax Predicatable, Simpler, Toolable.

Youtube Demo.

Building the Demo

  • Index.html, <app> tag instead of ng-app. Name is not special. It is a top-level component.
  • Demo is in ES6, but you can write in ES5 too
  • Component implementation declares it’s tag selector as ‘app’
  • Transclusion replaced with shadowDOM content element
  • Components/Directives declare the components/directives that they use. This means you no-longer have a global namespace of
    components, with the possibility of name collisions.
  • Ed Note: Component definition and usage looks and feels more & more like Adobe Flex.
  • This binding syntax effectively makes data-flow uni-directional, and a-cyclic. It’s not possible to get into the situation
    where one binding property affects another and gets into an infinite loop.
  • Components can emit events, and the component defines which events it will emit (like Flex)
  • Following Web-Components style means that you can directly mix/use other web components inside Angular, such as Polymer components.
    One syntax to use Angular components and Web Components.
  • But what about browsers that don’t have ShadowDOM? Av2 will emulate this for all the browsers, so it should still work.