Sessions in reverse order…

Angular Behind the Scenes - Rodric Haddad (Google) - 5:15pm

Video

What makes Angular special…

• Community makes Angular special: strong and growing
• Releases: manages cherrypicking of merged-PRS from master back onto stable branch. GitHub commits trigger Travis CI
  which runs tests on all major browsers (6 - IE9,10,11, Chrome, Firefox, Safari) for both jqLite and jQuery versions
• You can vote for a release name! http://bit.ly/ng-release-names

Ionic + Angular: Superpowers for Mobile App Development - Adam Bradley (Ionic) - 4:45pm

Slides Video

Allows you build HTML5 mobile apps and wrap them in native wrappers

• Web Standards have improved (caniuse.com)
• iOS 8 and Android 4.4 (and 5.0) are getting better and better (with ever-green browsers)
• Native SDKs are great, but not all the SDKs are available to HTML5 apps.

Ionic to the rescue

• Aims to provide the missing SDKs for HTML5 apps, so you don’t need to do it yourself
• Allows you to be a native developer if you are already a HTML5/CSS/JS developer
• Uses SASS for styling
• Built for platform continuity (e.g. iOS tabas at bottom, Android tabs at the top, code is the same), yet configurable
• Want you to build your unique looking app for multiple devices

Ionic Features

• Collection repeat: like ng-repeat but only renders the viewable items. Amazing performance!
• Navigation: uses ui-router, shows back button when available, transitions follow direction of the navigation (fwd or back),
  multi-history stack (each tab has it’s own history), updates the app URL
• Cached views: view elements and data is kept, not removed from the DOM. $scope is disconnected, scroll positions maintained, lifeCycle events
• Lots of other components, ionicons
• Spinners implemented using SVG
• Ionic CLI (NPM package)
• ngCordova: 60+ AngularJS extensions

Demo

• Can see iOS and Android views, in a browser, side-by-side
• Can use live-reload (of CSS, HTML, JS) in the iOS (and Android?) simulator!
• Can get console.log() to display in your terminal window

IonicIO

• Offers services like push notifications for Ionic apps
• IonicView: ability to view in-development app on your own phone (for non-dev team members)

Future

• Release Candidate 1.0 announced!
• Will support Angular 1.x and Angular 2

$asqwatch is real - William Scott Moss (Udacity) - 4:15pm

Video

Was in the Navy 2 years ago, medically discharged. Learnt how to program. Starting teaching people. Co-creator of AngularClass.

Background

• Initially performance is secondary when you first learn Angular.
• $digest cycle is responsible for rendering.
• the more watches, the longer the $digest cycle

What causes a digest?

• $scope.$apply()
• $scope.$digest()
• built-in directives like ng-click, ng-model, ng-show, ng-hide or $http

What is a $asqwatch?

• these are the watchers that you didn’t even know you were writing
• You always get 2 watches by default with Angular
• Using ng-repeat with filters can really affect performance

Optimizations

• Use ng-if instead of ng-show/ng-hide will reduce watches (but may affect CSS transitions?)
• Example of replacing ng-mousenter with own directive which doesn’t need to use digest (in specific use case)
• Limit your watchers and $digest() calls
• Don’t ng-overdoit
• Use jqLite for listeners instead of ng-event directives
• Avoid filters in ng-repeat, or limit to 1ms

For Angular 1.3

• one time bindings
• model-debounce
• don’t use stateful filters

Run digest cycle in web worker - Dr. Gleb Bahmutov PhD. (Kensho) - 4:05pm

Blog article Video

• If $digest is taking too long, move it into a WebWorker to free up the UI-thread
• basically need to post messages to the webworker, telling it when to start
• Worker has code/function to do the work
• Would only work with browser that supports WebWorkers

How to Teach Angular to your Kids - Katya Eames (16yo) - 4:00pm

Video

• Got into programming thru her dad, took a course at high school. Liked it, but no other courses available.
• Her Dad bribed her with a laptop to continue programming
• JATC course available, started that.
• Doing a course on DevMountain, dropped out of school and programming now.

ng-model-options - Kent C Dodds (Allianza) - 3:55pm

Video

• Provides more control over how Angular updates your model
• updateOn: blur/mouseover/default - update the model on blur rather than on change
• debounce: integer/{ default: 1000, blur: 0 }, can update model at different times based on update event
• getterSetter: true - allows you to do ng-model="obj.val.func()" + allowInvalid: true
• timezone: "UTC" - allows you to display timezone differently to how it is stored in the model

Building Realtime Apps with FireBase - James Tamplin (FireBase) - 3:35pm

Video

FireBase is 3 years old now. Angular is most engaged community. Google acquired FireBase in Oct 2014.

Realtime Data

• Data that is delivered immediately after collection
• Server pushes data to a client
• Modern applications are realtime
• Realtime experiences are expected now
• It increases context
• It allows collaboration

How to build realtime apps using FireBase

• You could use socket.io, but FireBase is… better
• At the core is a JSON, no-SQL database
• When writing to database, all clients get notified immediately
• Has OAuth integration, user management

AngularFire

• Services which help you talk to FireBase
• Bind your JavaScript models to the FireBase database, which then is sent to all other clients (3-way data binding)
• Examples all show how to put it directly into a controller - I don’t like this as it feels like an implementation detail
  appearing in my view-model
• AngularFire 1.0.0 announced! Out of beta, point releases will be backwards compatible, simplified API

Ionic

• realtime is helpful for mobile
  • Don’t like pull-to-refresh
  • When network connections are bad, keep working
• There’s an infinite scroll capability utility library in FireBase now

Angular 2

• Works well with FireBase, change detection is more performant

News

• Private Backups now available
• SEO support. Content now indexable (see

  Heading

  instead of
  )

Accessibility Design Made Easy - Julie Ralph (Google) - 2:50pm

Slides [Video](http://youtu.be/_2Pt6Xx94Bc?list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY70

Primary lead developer on Protractor. Protractor is an end-to-end test framework. It tests the real website like a real user.

How do we test accessibility?

• Protractor now has some plugins to help with this.
• In the config file, you can have a plugins: [] section. Beta available now in GitHub Protractor v1.8.
• Marcy Sutton (csunconference.org) wrote most of accessibility plugin.
• Can integrate into the Chrome Accessibility Audit tool, and can treat warnings as failures (or not)
• Plugin still under development

ng-wat? - Shai Reznik (hiRez.io) - 2:30pm

Video

Founded HiRez.io, for teaching Angular to people with short attention spans.
Funny guy :) Pointing out weird things in Angular. Light entertainment.

Building a Dev Community - Judy Tuan (Indigogo) - 2:10pm

Video

Story: How the Rails community attracted more women into the Rails community.

Strategies

• Have women only events
• Have women events where men can come as the ‘+1’
• Have general events where men & women are together, not segregated
• Learning from other communities

Proposal - ngBridge

Get more developers! Men and women! Everyone!

Workshop Ingredients

• Space: a main area with breakout rooms
• Food: get a sponsor, different food options
• Childcare: volunteered or hired
• Volunteers: facilitators, teachers, Teachers Assistants
• Curriculum: a working app
• Students: women, plus any man who comes as the +1 (or just people, if you don’t want to discriminate)
• Afterparty: optional, but nice.

Gradually students become TAs, then teachers, then get sponsors.

Benefits

• Can attract talent to your company, etc.

TypeScript and ES6 - Dan Wahlin (Google) and Andrew Connell - 1:45pm

Video

Why Typescript?

• Superset of Javascript, designed to make it easier to maintain larger apps
• Modular (using ES6)
• Scalable Application Structure
• Strong Typing (mentioned you should have tests to back you up)
• You don’t have to use everything that TypeScript offers
• ES6 Standards

Editor Note: They keep saying you can do this and that, but if you don’t want to, you don’t have to. E.g You don’t have to use classes,
you can take a functional approach. Then they talk about all these Java-OO concepts like Interfaces and Generics. So if I
don’t want those things either, what do I get? Answer: a pain-in-the-ass compiler that forces me to use a semi-ES6 code
structure which still requires me to include a runtime or a transpile step.
TL:DR; I’m not sold on this. Feels like a sales talk, in contrast to the Benchpress talk which was able to demonstrate
actual utility.

• Showed example of a Gulp task to do compilation for you automatically, aside from IDE integration.
• Type definition files: Community builds these (definitelytyped.org/com/don’t care). Just mental. How to make life harder for nothing.
• Example: Write a controller using class-syntax. Looks the same, but more keywords. Again, why are you doing this!?!

Summary

TypeScript is for current-and-former Java programmers that don’t want to learn (or can’t understand) functional programming. Go away.

ngTasty, building high performance measurable directives - Leonardo Zizzamia (Twitter) - 1:15pm

Video

ngTasty is a collection of UI components for Angular. But the interesting part is how it was benchmarked.

• npm install generator-benchpress gives you a Yeoman generator which can create a benchmark for you.
• It allows you to test the component and determine how your component compares to another.
• Easily allows you to specify different package versions of your component (e.g. angular-form-lib) to generate a benchmark for

Web Components - Rachel Moore, Kara Erickson (OpenTable) - 11:30am

Video

Challenge: Building a site-component which has head, nav, main and footer content.

• Web Components provide the ability to do this natively
• Native web components are using the shadow DOM to draw themselves

1
2
3
4
5
6
7
8
9
10
11
12

Template:
host.shadowRoot.innerHTML = `
  ...
  <content select="[head]"/>
  ...
`;

Tag:
<ot-site>
  <div head>My header content</div>
  ...
</ot-site>

Building in Angular 1.3

• Use transclusion to pass html content into a component
• Set directive’s transclude property to true
• But Angular can’t have multiple ng-transcude blocks in a template. So need a way to match head, menu, main to places in the template.
• Can do this inside the transclude() function
  • Can do this in directive controller or in link function. Link function is best in this case due to all the bindings existing at this point in time

Building in Angular 2

• Has component directive
• Transclusion replaced with Web Component functionality (Shadow DOM)
• Web components do most of the work for us
• Manually configuring scope replaced with a a default isolate scope.
• DDO syntax replaced with Component Class and annotation metadata

Fast from the Start - Jeff Cross (Angular Google) - 11:10am

Video

Talking about a tool called Benchpress to help measure Angular 2 fast from the start. Speed, Responsive, Smooth.

• It should be fast by default

Angular 1 Performance

• Performance became an issue in certain use cases
• Have to know a lot about Angular to work around issues
• Chrome Profiler is good for analysing, but looking for something to do measurement

Benchpress v1

• Allows the writing of macro-performance tests (test whole parts of app, whole use-cases, not just single functions)
• Script execution time, retained memory, garbage size, garbage collection time
• Started with benchmarking using a test called ‘large table’, and another called ‘deep tree’.
• Old version of Becnhpress had issues though: was completely web-based, difficult to automate

Benchpress v2

• Needed to be able to work on mobile browsers
• Collects data via Webdriver
• Targeting Angular 2
• Uses a library called perfUtil
• Can run during CI now

So what?

• Makes framework faster
• You can use in your own CI setup!
• Runs in Protractor
• Best practice: Only do this once component is functionaly complete, focus on most-used/worst components first
• npm install benchpress
• ngTasty uses it (upcoming presentation)

Prototyping with Angular - Kelly Knight, Dirk Ginader (Google UX Engineers) - 10:45am

Video

• Sometimes you don’t want to create a real app, you just want to do a prototype for an idea, quickly
• They’ve put together some tools to make it easy to prototype
• About doing the minimum amount of work to answer a question. It should be hacky.

Instrumentation

• We want to measure which prototype is the best
• Use Google Analytics as instrumentation tool
• Use angular-google-analytics module with event tracking. http://dir.kg/ng-ga
• Data driven design decisions

Changing the POC easily

• Using the prototype to design in the browser
• Put different options into the UI, so you can see how different designs look in real time. Can make the options stateParams/
  queryParams for quick testing.
• Can use the Speech API on mobile to listen for the parameter names and change the key-value pairs on-the-fly

Accessibility

• POSH: Plain old Semantic HTML
• If it’s a navigation, use a link. Anything else, is a button
• Use ARIA for rich apps. Use roles.
• Keyboard support is still necessary for POCs
• Use of ngAria, it adds extra properties based on role attribute

Data

• It’s important to use the most realistic data available, so that user’s don’t focus on the unrealistic-ness of the data
• Use Google Sheets as a data-source. Allows less-technical people to work on prototype.
  • Google App Scripts is how you get the data from Sheets, Docs, Maps, etc.
  • script.google.com
  • Create a script, deploy it as a web app. That gives you a URL, which your Angular App can then fetch.
  • But can create a directive to wrap all this functionality: <ux-data> (Not available publicly?)

Sponsor: McGraw-Hill

The New Router - Brian Ford (Angular Google) - 10:20am

Video

• History:

  • ngRoute is too simple for complex apps
  • Angular 2 needs better router, looked at other routers.
  • Based on Durandal, …
  • Could we migrate to 1.x?

• Yes: New router is transpiled to ES5 and implemented as Angular 1 module

How it works

• ngNewRouter module + .$routConfig array + <ng-viewport> + <ng-link>
• Relies on <base href="">
• Can parameterize path /path/:id
• Lifecycle Hooks:
  • canDeactivate function, on controller, which allows you to do dtuff like show a warning if there is unsaved data
  • canReactivate (old), canDeactivate (old), instantiate (new), canActivate (new), deactivate (old), activate (new)
• Can run Angular 2 inside Angular 1, or Angular 1 inside Angular 2.
• Based on Ember’s route-recognizer module

Future

• ngRoute not going anywhere, but not enhanced.
• Why not ui-router? It isn’t focused on migrating from 1 to 2. UI Router is focussed on 1 only. but there are plans to
  create a migration path.
• Router 1.0 released with Angular 1.4, and is just getting started

State of Angular 1 - Lucas Mirelmann & Pawel Kozlowski (Angular Google) - 10am

Slides Video

• PayPal Checkout is an Angular app.
• Community: in last 6 months, community on GitHub has doubled (PRs, issues, comments)
  • 50% of commits comes from the community, and growing
• Releases:
  • 1.3: a few small new features
  • 1.4: 35+ new features, 140+ bugs fixed, performance improvements

What’s in 1.4

• New Router - Fixes lots of issues that people struggle with (next presentation)
• Internationalization: Presentation tomorrow from the guys that did angular-translate
• ng-animate: more robust & dynamic & flexible (presentation tomorrow)
• ng-messages, more dynamic messages, with multiple “includes”
• ng-cookies: ability to set path and domain, easier cookie update process (fixes old issues)
• ~30% faster digest times compared to 1.3, 2-4% lower memory footprint (varies by browser/application)
• Supports same browsers as 1.3 (IE9 supported), very few breaking changes.

Future

• Community involvement is the key. Comment/vote on issues.
• 1.5 will be a step towards Angular 2.
• Shorter release cycles (within 6 months of previous release, and getting faster).
• How to

Sponsor: PluralSight. Looking for authors, all it takes is willingness to share knowledge.

ngConf 2015 is about to begin!

Domo is sponsoring the event. They do big-data analysis and visualisation, similar to SiteCatalyst.
in to the live stream. Conference is completely community driven, not by Google.

Core team keynote - Brad Green & Igor Minor (Project Manager & Lead Engineer) - 9am

Slides Video

Driving principles: Being good caretakers of Angular community & code.

Different project models, different levels of control. Angular is using ‘open source with community involvement’,
which has least control but caters for more use cases and more integration points, and fewer bugs.

Angular team has grown in last 12 months, and some companies have sponsored own employees to work on Angular inside Google,
but employed by own company. Pete Bacon Darwin is now Angular 1.x lead. Igor is Angular 2.x lead.

v1.4: Internationalisation, Routing, performance. New router coming. New 18n. RC coming in next week.

Angular Material design project - Google’s answer to single UI framework for mobile, tablet & desktop. Built to be accessible.
Layout based on Flexbox. Should be available by July.

Angular 1.5+ is about paving the way to Angular 2.

Almost 1 million hits on angularjs.org per day.

Angular 2 website: angular.io. Will be using usage stats to work out how long to keep supporting & releasing 1.x code.

Migration strategies: Big Bang, or incremental.
Incremental: You can mix and match views between angular 1 and angular 2 using the new router.

Style guide for Angular 1 by John Papa and Todd Motto will make it easier to migrate to v2.

Angular 2

Themes:

• simpler
• flexible
• faster
• more productivity

Now in alpha.

All key features in 1.x are in 2, plus new things:

• Productivity:
  • Making it easier for devs to build. AtScript is an extension of ES5 to make it like ES6 so you can use
    it now, plus types, plus annotations. But AtScript is not Angular specific, want to make it usable for all. Lots of
    other Google teams are interested in this, including FaceBook & Microsoft.
  • Jonathon Turner (TypeScript, Microsoft) is on stage to talk about collaboration between TypeScript and AtScript.
    Annotations help with separation of concerns. TypeScript 1.5+ has good support for Annotations now + more ES6 features.
  • AtScript is now retired, and has become TypeScript! TypeScript is still optional for development.
• Dart: Allows more people to work on Angular and get ideas/innovation
• See Ember, React as partners rather than competition. Make friends, not enemies.
• Simpler:
  • Making component model the default approach for building UI.
  • Generalising different kinds of components into 4 main types.
  • Better use of tools to help building. Using EmberCLI (for example).
  • Zones allow you to hook into browser events to trigger angular events (no more need to call scope.$apply() when dealing with external events).
  • Unidirectional event system (like React) to make code more predictable. ngModel will still feel the same.
  • Fixing typos automatically. APIs mirror your needs (better defaults).
  • Using browser standards to make things simpler. E.g. module system, with backwards compatibility. Shadow DOM
• Performance:
  • Benchmark suite: Deep Tree tool.
    • Speed Baseline: 1 (smaller is better) - hand coded, nasty, you would not want to write this yourself
    • Angular 1.3: 8.58
    • Angular 2 startup: 3.11
    • Angular 2 with view cache (after first load): 1.4. Plus better memory performance
  • Immutable data structures: Better performance

Angular 2 ships probably after May 2015 (after migrating a large Google Angular 1.x app and seeing how that goes).