Angular Air

How Service Workers will change the way you think about web apps

Panelists: Ari Lerner, Olivier Combe, Gleb Bahmatov

Guests: Minko GechevShow notes:

What Gleb and Minko have been up to lately

What is Service Worker?

Any relation to Web Worker?Are there other types of workers? 

Do they all rest on Sundays?

Differences with appCache

What is the current browsers support?

Can you use polyfills?

How can they be used?

You can find how existing websites use them right now by opening

chrome://serviceworker-internals/and clicking on script urls

             Smartcache and offline support

Image or video transcodingon the fly

Background data sync andpush messages

Instant application restartfrom last known HTML (bottle-service)

Transpiling code(babel-service)

Even running server-sideJavaScript server in the browser (express-service)

What are Progressive Web Apps?

      angular/progressive

What will mobile look like in 5 years when serviceworkers are fully supported?

When should we use service workers? When shouldn’t we use service workers?Tips &Picks

 Minko Gechev

https://github.com/angular/progressive

https://github.com/ngrx

https://www.packtpub.com/web-development/switching-angular-2

Gleb Bahmutov

The status of ServiceWorkers api implementation indifferent browsers: https://jakearchibald.github.io/isserviceworkerready/

Mozilla’s book of service workers demos and features https://serviceworke.rs/

WebWorkers + ServiceWorkers presentation video https://youtu.be/4axZ3D75Llg

Olivier Combe

Mix It: https://www.mix-it.fr/

Ng conf planning looks awesome o/

Using Web Workers for High Performance Angular 2 Web Apps

 

Panelists: Olivier Combe, PatrickJS,

Dmitry

Guest: Jason Teplitz

 

 

Who

are you?

What

are web workers?

What

is the support level in different browsers?

Web

worker polyfills?

What

types of tasks in general are web workers good for?

How will web workers be integrated into

Angular 2?

Do you think that we will get to a point

where a majority of your app is run in web workers by default?

How can you make your code work when you use

third party libraries not meant for that?

How web workers handle internal file imports,

and loading additional files possible with system.js? (currently it is loading

additional files several times, and this slowdowns application start time,

sample: check network tab here: http://www.syntaxsuccess.com/angular-2-samples/components/web-workers/web-worker-demo.html

)

Will it improve or should we bundle web

workers code?

What are the downsides of using web workers?

Web workers are bringing real multithread

concurrency with performance gains and know for C++Java mental overheads? What

JS devs should knew about it (patterns, access to shared resources)

Message queue like patterns or approaches?

     What

is web workers restrictions? (working with DOM, etc.)

Cool

implementations of using web workers...

What

is the best way to use web workers with Angular 1?

How

does this work on the server side with node.js?

How

was your experience as a junior working with the Angular Team?

Tips

& Picks

 

Jeff Whelpley

Ng-conf schedule

https://www.ng-conf.org/#/schedule

Tony

Robbins Ted Talk “Why We Do What We Do” https://youtu.be/Cpc-t-Uwv1I

 

Olivier

5 things Angular  http://5thingsangular.github.io/

Ui router for ng2  https://github.com/angular-ui/ui-router

Dmitry

https://github.com/angular/angular-electron

https://www.npmjs.com/package/webworker-threads

http://www.syntaxsuccess.com/angular-2-samples/components/web-workers/web-worker-demo.html

Jason

Rust https://www.rust-lang.org/

Angular

Universal

Intros for new people

 History: Jeff’s story with GetHuman, Jeff and Patrick join forces, Getting Universal project going

 Why Server Rendering?

SEO

Performance

Browser support

Preview (i.e. Facebook, etc.)

Cache

 Why Universal?

Why not just use service workers?

2 modes of server rendering

Can you use it to generate static websites?

(Olivier)

Pre-rendering vs re-rendering

Diff

between “universal” and “server rendering”

Abstracting

out your environment

 

How does it work? (not preboot)

Angular 2 Core Rendering Engine (NativeScript, WebWorker, etc.)

Universal bootstrap process

Preboot

What is left before release?

Production-ready

Documentation

Critical

3rd party services

Multi-app

support

Performance

Future

Non-node.js

back ends

Crazy

caching

Partial

page rendering and streaming

Ng-conf

20

minutes

Focused on patterns

(i.e. how to deal with common challenges when building universal app)

 

Tips & Picks

PatrickJS

Ng-Conf ng-conf.com

AngularConnect angularconnect.com

Jeff Whelpley

Original design doc - https://docs.google.com/document/d/1q6g9UlmEZDXgrkY88AJZ6MUrUxcnwhBGS0EXbVlYicY/edit#heading=h.19ijfd7mxdt4

GetHuman - https://gethuman.com

Wassim

Patrick video readthesource universal - https://www.youtube.com/watch?v=qOjtFjXoebY

Ari

Fullstackreact.com (product plug)

http://www.serverless.com (‘cause it’s cool)

Olivier

Ui router 1.0.0 alpha 1

All my libs are “unpublish” proof

Angular 2 testing using Protractor, Karma and more withJulie Ralph

 

Panelists: PatrickJS, Ed Conolly

Guests: Julie RalphOutline

Background

Testing landscape

Firstquestion...Jasmine or Mocha? j/k

Seriously, though, give us a layout of the testinglandscape. What are the major tools/libraries involved in testing an Angular 2web app?

When do you use Karma vs Protractor

How has the landscape evolved over theyears?

What is new with the latest Karma and Protractor?

New world of JavaScript

How doyou deal with the build process and testing?

Webpackor System offer advantages for testing?

Are thereare special features in Karma or Protractor for Angular 2?

Testing as a discipline

How doyou get developers to actually write tests?

Why don’tdevelopers write tests?

How doyou maintain discipline over time?

Generalguidelines for testing to follow?

Anythoughts or experiences with BDD / CucumberJS and protractor?

Testing strategy

When doyou use unit tests vs integration tests vs e2e (and server vs browser)

MockedAPIs vs Real APIs, should my protractor tests really be e2e?

Other frameworks

What doyou think of AVA? https://github.com/sindresorhus/ava

Future

What doesthe future hold for testing?Tips & Picks

PatrickJS

Zone.js0.6.x https://github.com/angular/zone.js/

How toTest RxJS http://staltz.com/how-to-debug-rxjs-code.html

Chaos Monkey http://techblog.netflix.com/2012/07/chaos-monkey-released-into-wild.html

Gremlins.jshttps://github.com/marmelab/gremlins.js

 

Jeff Whelpley

StraightOutta Compton

With latest TypeScript, you may not need Webpack https://medium.com/@vivainio/with-latest-typescript-you-may-not-need-webpack-417d2ef0e773#.2z0xbjndi

Ng2 testseed https://github.com/juliemr/ng2-test-seed

Web Workers and Service Works by Gleb https://www.youtube.com/watch?v=4axZ3D75Llg&list=UU_DH6Z_K_3JRgOdDnwHLrLw

 

Ed

Instanttest feedback in your IDE - http://wallabyjs.com/

ConfigurableAPI responses -  https://github.com/wongatech/angular-multimocks

AngularConnectScholarships / CFP

 

Julie

Angularmaterial is alpha: https://github.com/angular/material2

Niftyproject website from Seattle Times: http://projects.seattletimes.com/2016/elwha/

Juliepromises to update ng2-test-seed today :)

Using React Native with Angular 2

Panelists:Ari Lerner, Michael Cox

Guests:Mark Laval#main-content

Whoare you?

Whatmotivated you to create this project?

Howdoes it work?

Whereis the line between ReactNative and Angular 2?

Howmuch code can you re-use with other Angular 2 apps?

Areyou able to leverage all the ReactNative tooling?

Arethere any advantages to using this solution over:

ReactNativewith React

NativeScriptwith Angular 2

Hybridapps

Nativeapps

Whatdo you think about Angular 2?

Arethere any patterns in Angular 2 that are well suited to React Native (ex.Redux, reactive, etc.)

Hasanyone else started using your project yet?

Whatissues have you or do you see with your approach?

Whatadvice would you give someone who wants to get started working with RN andAngular 2?

Whatdoes the future hold?

 

Links:

https://github.com/angular/react-native-renderer

https://github.com/mlaval/poc-angular-react-nativeTips &Picks

AriLerner

Fullstackreact.com

JeffWhelpley

AngularSurvey https://angular.io/survey

ChangeDetection Explained https://www.youtube.com/watch?v=CUxD91DWkGM

MichaelCox

NodeDash Button

https://github.com/hortinstein/node-dash-button

RealmFor React Native

https://realm.io/docs/react-native/latest/

MarcLaval

POCof React Native with Angular 2 https://github.com/mlaval/poc-angular-react-native

ReactNative Scheduling by Andy Street: https://www.facebook.com/notes/andy-street/react-native-scheduling/10153916310914590

Why Ionic 2 is going to rock your world

Panelists: Olivier Combe, PatrickJS, Josh Moont (fromAngularConnect)

Guests: Adam Bradley, Brandy Carney, Tim Lancina, Mike Hartington#main-content

Intro

Ionic 2 Beta

How is it going?

Any numbers you can give us for adoption rates so far?

https://www.npmjs.com/package/ionic-angular

Just switched from ionic-framework npm to ionic-angular

https://www.npmjs.com/package/ionic

Any notable apps published with Ionic 2?

Navigation

Create own router

How does it work on the web?

Work with deep linking?

Work with UI Router or Component Router in the future?

Jeff note: mention working with universal

Cool stuff Ionic team has been working on:

Ionic Creator

Started off with subset of functionality. How has it gottenbetter over the past 4 months?

Works much better

Cleaned up a lot of bugs

Added more components and customizations

Way better now than 4 months ago and more polished,stabilized

Who is the target audience for this?

Two target, drastically different

Developers to speed up boilerplate code dev and focus oncoding hard stuff

Designers/Marketers: Starting up an app to create aclickable prototype to hand off to devs 

In the future, can you create simple apps and publishwithout opening an editor?

Ionic Playground

Really awesome, but when will it be available for 2.0?

Recent changes and Roadmap

Agnosticism Initiative

Why change name of package from ionic-framework toionic-angular?

 Will there bean ionic-react?

Have you looked at Touchstone?

Angular 1 bindings?

How does Web Workers and Serverside Rendering fit in? 

Why change webpack to browserify?

Has build complexity with webpack caused problems?

What other types of issues have people run into?

Ionic Market - brandy

How is the adoption?

Over 70k unique sessions/mo

Ionic View - Tim

What is the diff with TestFlight?

Do you plan on supporting Windows Phone?

What is the status of CodePush-like deployments?

How does that work?

Will Apple potentially crack down on this eventually? 

Themes / SASS

Sweet spot for Ionic apps?

Apps that require heavy use of the camera?

Memory intensive apps?

How do you compare yourself with NativeScript? (Olivier)

 Tips& Picks

 

Jeff Whelpley

(not a troll FYI, lots of Ionic love in this podcast) ReactNative Radio episode 6 - React Native vs Hybrid https://devchat.tv/react-native-radio/06-developing-with-react-native-vs-hybrid

Josh Moont

AngularConnect - just announced our workshops including anIonic workshop with Sani Yusuf called Building Mobile Apps With Ionic 2 - see www.angularconnect.comfor more info

Olivier Combe

Upgrading Your Application to Angular 2 with ng-upgrade: http://blog.rangle.io/upgrade-your-application-to-angular-2-with-ng-upgrade/

Universal Windows App + Angular 2 : https://github.com/preboot/angular2-universal-windows-app

Angular 2 RC milestone: https://github.com/angular/angular/milestones

Brandy

Windows phone support https://github.com/driftyco/ionic/blob/2.0/CHANGELOG.md#windows-mode

Mike

ionicworldwide.herokuapp.com

Adam

Help contribute to Ionic

Timionic-native

Is NativeScript the holy grail for mobile development?

Sponsors: Auth0, Thoughtram

Panel: Olivier Combe, Nathan Walker, Ari Lerner

Guest: TJ VanToll, Jen Looper#main-content

Intros

What is NativeScript?

What problem is it trying to solve?           

What makes NativeScript unique?

Accessing all APIs through JavaScript

How does NativeScript integrate with Angular 2?

Discuss setting up a cookbook for {N} + ng2 similar to whatangular team recently published: https://angular.io/docs/ts/latest/cookbook/

Any story of sharing code between the web and mobile?

NativeScript for the Web

https://github.com/NativeScript/NativeScript/issues/1612 

Comparisons

NativeScript vs Ionic?

Can you turn an Ionic app into a NativeScript app?

NativeScript vs React Native

How does it differ from something like fusetools.com orflutter.io? 

What does the future hold? (Angular 🤘)

How does Telerik make money? (Telerik Platform,NativeScript UI) Tips& Picks

Olivier

NG NL 2016 - A speaker’s point of view: http://blog.holimetrix.com/2016/03/01/ng-nl-2016-a-speakers-point-of-view/

Angular 2 unit testing recipes - by Gerard Sans: https://medium.com/google-developer-experts/angular-2-unit-testing-with-jasmine-defe20421584#.20pxvy13m

 

Nathan Walker

[Bleeding edge master branches from each {N} project](http://nativescript.rocks/)

[{N} plugins](http://plugins.nativescript.rocks/)

[nativescript-angular](https://github.com/NativeScript/nativescript-angular)

[nativescript-ezaudio - low-latency audio processing, trythe demo, good example of {N} performance](https://github.com/NathanWalker/nativescript-ezaudio)

[The War on Drugs iTunes](https://itunes.apple.com/us/album/lost-in-the-dream/id765568650)

[The War on Drugs Spotify](https://player.spotify.com/album/14xxjLlbGy8ACm4MorBjD5)

[City and Colour on iTunes]: (https://itunes.apple.com/us/artist/city-and-colour/id81842534)

[City and Colour on Spotify](https://player.spotify.com/artist/74gcBzlQza1bSfob90yRhR)

 

Jeff Whelpley

[John Oliver on Donald Drumpf](https://www.youtube.com/watch?v=DnpO_RTSNmQ)

[Angular 1 to 2 cookbooks](https://angular.io/docs/ts/latest/cookbook/a1-a2-quick-reference.html)

 

TJ VanToll

[The 5th Wave](http://www.amazon.com/5th-Wave-First-Book/dp/0142425834/)

[FiveThirtyEight Elections Podcast](https://itunes.apple.com/us/podcast/fivethirtyeight-elections/id1077418457?mt=2)

 

Jen Looper

Plugins for all the things! http://plugins.telerik.com(hybrid mobile and NativeScript)

My game crush right now: https://itunes.apple.com/us/app/neko-atsume-kitty-collector/id923917775?mt=8

Shotbot for managing iOS screenshots: http://shotbot.io/by the same folks who did makeappicon.com

Productivity tools: Wunderlist and https://keep.google.com/u/0/for notes

Full-stack Reactive Programming using Angular 2 + Meteor

 

Panelists: Dmitriy Shekhovtsov

Guest: Uri Goldshtein#main-content●     Intro

○     Who is Uri?

○     What is Meteor?

●     Meteor view layer

○     Will Blaze eventually go away in favor of React andAngular?

○     Is React or Angular getting more traction in the Meteorcommunity?

○     What about Angular makes it a good fit as a view layerfor Meteor?

●     Server rendering

○     How does server rendering work with Angular 1 Meteor?

○     Have you looked into integrating Angular Universal?

●     What is the Future of Meteor?

●     How does Angular Meteor compare to:

○     Firebase

○     RelayWrap Up●     Upcoming shows:

○     March 1st - NativeScript

○     March 8th - Ionic 2

○     March 15th - React NativeTips & Picks

 ●     Dmitri

○     http://neo4j.com/blog/open-cypher-sql-for-graphs/

●     Jeff Whelpley

○     new sponsors: Auth0 and Thoughtram

○     AngularConnect.com

●     Uri

○     GraphQL http://info.meteor.com/blog/reactive-graphql

○     Guthrie Govan https://www.youtube.com/watch?v=aA8fzsE7tWU

○     Bags http://www.coteetciel.com/en-IL/isar-backpack-raw-canvas-icelandic-ash-laptop-bag

53

ngAir - Angular 2 Reactive Redux with Victor Savkin and Dan Abramov

 

 What is state?

Is

there a difference between UI state and persisted state?

 

What

problems do people run into with state?

Why

is it hard to manage state?

How

to keep the state on the client in sync with the state on the server?

 

What are the

popular patterns for managing state?

What

is used in Angular 1?

Difference

between the core ideas and implementations

What

does unidirectional mean?

 

What is

Redux?

Benefits

of redux and similar patterns

Is redux for sync state updates only and is making an HTTP

request considered a non-pure inside   a reducer function?

What is

ngrx?

How

is the reactive version of redux different than traditional Redux?

 What

are your feelings on setting change detection strategy to OnPush?

How

would one go about debugging the state changes in Angular2?

 

Other general

questions

Thoughts

on cycle.js?

There

is a pattern in Redux if you have the same object in multiple places, you use

_id in everything but one.  How would this work with ngrx or another

reactive approach? (custom pipe and helpers?)

Rob/Victor:

I was starting to think about an Angular 2 decorator that does something

similar to the React Redux connect() function but then Rob said it was a bad

idea because it will mess with precompilation. What is the deal?

 

Predictions

for the future

What

approach will Angular 2 developers adopt?

Will

a reactive version of redux gain any traction in the React world?

 

Tips & Picks

 

Jeff

Whelpley

Links:

 Tips:

 Picks:

Our new sponsor, [Auth0](https://auth0.com/)

 

Victor

Savkin

 Links: [Managing State in

Angular 2 Apps.]

( http://victorsavkin.com/post/137821436516/managing-state-in-

    angular-2-applications)

 

Tips:

AceJump a great plugin for WebStorm.

 

Picks:

Kurt Vonnegut "Mother Night", Brad Mehldau "10 Years Solo

Live",

Woody

Allen "Manhattan Murder Mystery"

 

Gleb

Bahmutov

Links:

[Rob Warmald’s talks]

(http://www.roblog.io/angular2/talks/2015/11/29/angular2-data-talks.html) - Angular 2 data flow with nice examples

 

Tips:

Everything in your application could be a source of events: button clicks,

mouse movements, messages from the server, timer, etc.

 

Dan Abramov

 Tips:

No boilerplates

 

Picks: [Redux Saga](https://github.com/yelouafi/redux-saga)

[aphrodite](https://github.com/Khan/aphrodite)

 

Patrick

Stapleton

Picks: [What’s new in Webpack 2] (https://gist.github.com/sokra/27b24881210b56bbaff7)

 

Angular Air is a video podcast all about

Angular hosted by Jeff Whelpley.

Please visit the Angular Air website (http://angularair.com) to see upcoming

and past episodes. Also be sure to follow Angular Air on Twitter and Google+ to stay up to

date with future episodes. Also, all episodes are on the YouTube channel as well.

 

AngularClass

Learn

AngularJS, Angular 2, and Modern Web Development form the best. Looking for

corporate Angular training, want to host us, or Angular consulting?

twitter: @AngularClass

email: [email protected]

chat: Join AngularClass Chat

IoT

Hangout URL: https://hangouts.google.com/call/hlfajots7uwohxjlpphdk7pkrua

First 5-10 mins

Intros

Guests: Zach

Dunn, Atticus White

Panelists:

PatrickJS, Gleb Bahmutov, Ari Lerner

Announcements

Upcoming shows:

Thursday November 11th - Angular 2 Reactive Redux

with Victor Savkin, Dan Abramov and Rob Wormald

#topics

Intro

What is IoT?

Atticus: The “Things” in

Internet of Things

Smart devices (“dumb” hardware embedded with “smart”

electronics, ie: Hue Lights)

Information

providing devices (sensors, ie: motion sensor)

Service

that ties it all together 

Atticus: How IoT fits into

the JS ecosystem.

A comparison of the event driven characteristics found in both

Javascript and the IoT environment. IoT support in the open source community. 

Zach: How we think about

IoT application development: Personify rooms and devices, enable them to answer

questions. Environment data (i.e. sensors, occupants) result in frequent I/O

for apps. Lot of states to track. 

Atticus: Some IoT labs

worked on

Grocery

list automation: Barcode scanner + rPi + Node

Motion

sensor night light: Motion sensor + Arduino + rPi + Node + Hue lights 

How do you decide on what

to build next?

How do you guys use

Angular? 

Zach: Highly

task/location-centric apps running on dedicated devices. Interesting side

effect is more freedom to use new DOM safely.

IoT and security

IoT allows access to sometimes devices inside our homes and

businesses. Adding more libraries and frameworks on top adds to the security

headache. What precautions do we as developers should take? Good practices? How

to test it?

Where do you see IoT going

in the future? What’s next?

Final 10 Minutes

Links:

https://tessel.io

https://developer.nest.com

http://johnny-five.io

http://dweet.io

Tips

& Picks 

Ari          Picks: Go to Death Valley. It’s beautiful

Tips: http://perfect.org

is cool

Patrick

Stapleton

Picks: [Reactive Redux AngularAir]

(https://plus.google.com/events/cf3aue086abasnlah35lgr373fs)

Jeff

Whelpley

         Picks: http://onehungrymind.com/build-better-angular-2-application- redux-ngrx/

Atticus White

Links: https://github.com/rwaldron/johnny-five

https://github.com/samyk/skyjack 

Tips: Picks:[Johnny Five - JS Robotics & IoT programming framework]

(https://github.com/rwaldron/johnny-five)

[SkyJack - Drone autonomously seeks out other drones, taking

them over, creating an army of zombie drones under your control]

(https://github.com/samyk/skyjack)

Zach Dunn

Links: Search

engine for sensors, based on geolocation: [Thingful]

(https://thingful.net/)

Simple messaging for devices (think Twitter, but for sensor

data) [dweet.io](https://dweet.io/)

Tips:Picks: Hardware

development board, powered by NPM https://tessel.io/

Angular Air

is a video podcast all about Angular hosted by Jeff

Whelpley. Please visit the Angular Air website

(http://angularair.com) to see upcoming and past episodes. Also be sure to

follow Angular Air on Twitter and Google+ to stay up to date with future episodes. Also, all

episodes are on the YouTube channel as well.

 

AngularClass

Learn

AngularJS, Angular 2, and Modern Web Development form the best. Looking for

corporate Angular training, want to host us, or Angular consulting?

twitter:

@AngularClass

email: [email protected]

chat: Join

AngularClass Chat