GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → aaronfrost → reactive-angular-workshop

aaronfrost / reactive-angular-workshop

Licence: other
This is the source code for the world's greatest Reactive Angular Workshop.

Programming Languages

typescript
32286 projects
SCSS
7915 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Labels

angularreactiverxjsreactive-programming

Projects that are alternatives of or similar to reactive-angular-workshop

vuse-rx
Vue 3 + rxjs = ❤
Stars: ✭ 52 (+73.33%)
Mutual labels:  rxjs, reactive-programming
ng-observe
Angular reactivity streamlined...
Stars: ✭ 65 (+116.67%)
Mutual labels:  rxjs, reactive-programming
Corsair
Corsair using RxJS, Immutable.js and WebGL/three.js
Stars: ✭ 36 (+20%)
Mutual labels:  rxjs, reactive-programming
Reactive.how
Learn reactive programming with animated cards.
Stars: ✭ 592 (+1873.33%)
Mutual labels:  rxjs, reactive-programming
Od Virtualscroll
🚀 Observable-based virtual scroll implementation in Angular
Stars: ✭ 133 (+343.33%)
Mutual labels:  rxjs, reactive-programming
Refract
Harness the power of reactive programming to supercharge your components
Stars: ✭ 791 (+2536.67%)
Mutual labels:  rxjs, reactive-programming
Inferno Most Fp Demo
A demo for the ReactJS Tampa Bay meetup showing how to build a React+Redux-like architecture from scratch using Inferno, Most.js, reactive programmning, and various functional programming tools & techniques
Stars: ✭ 45 (+50%)
Mutual labels:  rxjs, reactive-programming
Toy Rx
A tiny implementation of RxJS that actually works, for learning
Stars: ✭ 290 (+866.67%)
Mutual labels:  rxjs, reactive-programming
Cyclejs.cn
The Cycle.js Chinese documentation website.
Stars: ✭ 132 (+340%)
Mutual labels:  rxjs, reactive-programming
Ayanami
🍭 A better way to react with state
Stars: ✭ 129 (+330%)
Mutual labels:  rxjs, reactive-programming
Recycle
Convert functional/reactive object description using RxJS into React component
Stars: ✭ 374 (+1146.67%)
Mutual labels:  rxjs, reactive-programming
Redux Most
Most.js based middleware for Redux. Handle async actions with monadic streams & reactive programming.
Stars: ✭ 137 (+356.67%)
Mutual labels:  rxjs, reactive-programming
Learn Rxjs
Clear examples, explanations, and resources for RxJS
Stars: ✭ 3,475 (+11483.33%)
Mutual labels:  rxjs, reactive-programming
Rxfirebase
RxJS wrapper with extra goodies for the Firebase JavaScript SDK
Stars: ✭ 11 (-63.33%)
Mutual labels:  rxjs, reactive-programming
Awesome Rxjs
A collection of awesome RxJS resources
Stars: ✭ 314 (+946.67%)
Mutual labels:  rxjs, reactive-programming
Evolui
A tiny reactive user interface library, built on top of RxJs.
Stars: ✭ 43 (+43.33%)
Mutual labels:  rxjs, reactive-programming
angular2-instagram
🔥Instagram like photo filter playground built with Angular2 (Web | Desktop)
Stars: ✭ 91 (+203.33%)
Mutual labels:  rxjs, reactive-programming
observable-playground
Know your Observables before deploying to production
Stars: ✭ 96 (+220%)
Mutual labels:  rxjs, reactive-programming
Cyclejs
A functional and reactive JavaScript framework for predictable code
Stars: ✭ 9,996 (+33220%)
Mutual labels:  rxjs, reactive-programming
Beicon
Reactive Streams for ClojureScript
Stars: ✭ 133 (+343.33%)
Mutual labels:  rxjs, reactive-programming
View All Similar Projects ➔

Reactive Angular Workshop

What will be covered?

This workshop will teach attendees how to use reactive techniques in your Angular app. It will be based heavily on RxJS.

  • Intermediate Reactive concepts
    • BehaviorSubjects
    • combineLatest
    • several new operators: pluck, map, tap, distinctUntilChanged
  • Intermediate Angular patterns
  • Intermediate TypeScript
  • Basic State Management
  • Angular Performance

What will NOT be covered?

The following topics will not be covered in this class. To be fair to all involved, any questions that dive into these topics will be deferred until breaks, until after the workshop is over, or indefinitely.

  • Angular Basics, or beginner Angular questions
  • TypeScript Basics, or beginner TypeScript questions
  • Reactive Basics, or anything that TOO basic around Observables

Before you come to class

In order to work on this project and go through the trainings, please do each of the following:

  • Install git on your machine.

  • Install node & npm

    • Install node v14 (or higher)
    • Installing node v14 automatically installs npm

  • Install latest Angular CLI .

    • npm install -g @angular/cli

  • Install your favorite IDE

    • Most people use VSCode
    • Frosty uses Webstorm

  • Clone the project

    • Open your Terminal/Powershell
    • cd into where you want the code
    • Run git clone https://github.com/aaronfrost/reactive-angular-workshop

  • Run npm install

    • cd into the folder you just cloned
    • Run npm install

  • Get APIKEY from developer.marvel.com

    • Go to https://developer.marvel.com/
    • Create a developer account
    • Add localhost to the Your Authorized Referers section
    • Add your public and private keys into environments.ts files

  • Read Don't Unsubscribe blog by Ben Lesh

Please do all of this before the training starts. Otherwise we will have to spend the first part of the training up and running. If there are any questions, reach out to me (Frosty) me on Twitter.

Start Developing

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].