Brighton / Worthing
Angular 2+ Meetup

@Angular2bes - a group for Angular Enthusiasts in Sussex

Structuring Angular Apps

Meetup June 27, 2018

­

Project

In most cases, use the Angular CLI https://cli.angular.io/

If using the Angular CLI, utilize 'ng update' when possible

Follow the Angular Style Guide https://angular.io/guide/styleguide

Visual Studio Code is the recommended IDE

Use Prettier, code formatter

Use Move TS to simplify refactoring: https://marketplace.visualstudio.com/items?itemName=stringham.move-ts

Use John Papa’s Angular Essentials: https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials

Consider folder structure: https://johnpapa.net/angular-2-styles/

Review your project output with source map explorer https://www.npmjs.com/package/source-map-explorer

 

Angular

Utilize Component Architecture and Feature Modules.

Lazy load resources whenever possible

Smart / Container Components : Communicate with Services and render child components
Dumb / Presentation Components: Accepts data via inputs Emit data change via event outputs

Data flows down and Events emit up. 
One-way dataflow promotes reusable components and can increase performance

Make use of TypeScripts advanced features when possible. ES6 and ES7 commands means less code, and clearer intent.

Avoid doing much in the constructor of a component. Utilize the lifetime hooks e.g. ngOnInit

Use trackBy option for *ngFor directive - “Angular 2 — Improve performance with trackBy” https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

Recommended Virtual Scroll component: https://github.com/rintoj/angular2-virtual-scroll

Wildcard routes for 404 handling

Use Environment Variables when you have to change values for dev or prod

 

RxJS

Use Async Pipe as much as possible - it reduces boilerplate. But if you can't, remember to unsubscribe any observables that can still be running in ngOnDestroy

ShareReplay() - https://blog.strongbrew.io/rxjs-best-practices-in-angular/

Gotcha: multiple Async pipes for the same API request will call the API multiple times

Use the pipe() method in RxJS 6.0 (started in 5.5 but got better in 6)

 

Enterprise

Nrwl Nx for larger apps or, if you want to reuse chunks of code. https://nrwl.io/nx

 

State Management

Ngrx is currently the recommend library for application state management. Keep an eye on Mobx.

Deborah Kurata Pluralsight - https://www.pluralsight.com/courses/angular-ngrx-getting-started

Angular 6 & Pick N Mix

Meetup March 28, 2018


Angular 6 key features - free course

ngUpgrade

Nwrl Nx toolkit for enterprise Angular applications

ng-packagr for creating library packages.

Unit testing

  • WallabyJS Integrated Continuous Testing Tool for JavaScript

Conferences

Gordon recommended

­

Angular Material 2 & Angular 5

Meetup November 16, 2017

Angular Material is a library of modern UI components that work across the web, mobile and desktop

Angular state and NgRx

Meetup October 4, 2017

RxJS powered state management for Angular applications, inspired by Redux

NgRx 4 - fantastic reference:

NgRx Experiment 1 (using version 4)

Experiment based on getting-started example

NgRx 4 root

Root NgRx 4 github location

@ngrx/store

@ngrx/store getting-started example

@ngrx/effects

@ngrx/effects getting-started example

@ngrx/store-devtools

Instrumentation with the Chrome / Firefox Extension

Need to set your Action interfaces to carry payload

The payload property has been removed from the Action interface


GraphQL Throwdown

Meetup July 19, 2017

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data.

GraphQL 'Star Wars' example using GraphQL for .NET, ASP.NET Core, Entity Framework Core

JacekKosciesza / StarWars

GraphQL Playground

https://www.graphqlhub.com/playground an excellent practice area

GraphQL reference:

HTTP & Observables

Meetup May 31, 2017

A representation of any set of values over any amount of time. This the most basic building block of RxJS.

HTTP & Observables - slides

From Promises to Observables (briefly)


HTTP, Observables & Testing Workshop

Download code from here

Is Angular 4 Baked Yet?

Meetup March 22, 2017

Here are some highlights about Angular 4

5 Features To Watch Out For in Angular v4


Services Workshop

Part 1
Sharing values

Part 2
Sharing values between components using Observables (BehaviorSubject)

About

We are a free local meetup group of Angular 2+ enthusiasts; unsponsored and community driven.

We hold workshops and discuss current Angular topics.

All levels are welcome. Our members comprise beginners and experts.

We meet at The Skiff in Brighton. (Google map)

If you would like to request a topic for us to cover, or even present, get in touch.

Contact

You can contact us all these ways: