Data Architecture (How data flows in the app?)

[martinleopold]

• Service (Database/Backend) => UI
  • How to access DOM in ng2?
• UI State => Database
  • https://www.google.at/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=angular+2+observable+UI+events

[martinleopold]

General

• [x] http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications

Reactive/Rx

• [x] ng-book 2 Chapter: Data Architecture with Observables and RxJS
• [ ] http://victorsavkin.com/post/146359880996/the-taxonomy-of-reactive-programming
• [ ] http://blog.rangle.io/observables-and-reactive-programming-in-angular-2/
• [ ] https://medium.com/front-end-developers/managing-state-in-angular-2-using-rxjs-b849d6bbd5a5#.mpwu4ja5z
• [ ] http://blog.lambda-it.ch/reactive-data-flow-in-angular-2/
• [ ] http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/

Redux Style/Rx

• [x] http://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications (Redux Style)
• [ ] http://victorsavkin.com/post/133936129316/angular-immutability-and-encapsulation
• [ ] http://blog.angular-university.io/angular-2-application-architecture-building-applications-using-rxjs-and-functional-reactive-programming-vs-redux/
• [x] https://github.com/ngrx/store
  • [x] https://www.youtube.com/watch?v=mhA7zZ23Odw&feature=youtu.be

Redux

• [ ] https://www.sitepoint.com/data-flows-angular-2-redux/
• [ ] http://blog.angular-university.io/angular-2-application-architecture-building-flux-like-apps-using-redux-and-immutable-js-js/
• [ ] https://github.com/angular-redux/ng2-redux

[martinleopold]

Two Phases of Angular 2 Applications:

1. Update the application model: Developer responsibility. Event bindings aka. () syntax, are used to to do that.
2. Reflect state of the model in the view: Angular responsibility (using change detection). Property bindings aka [] syntax, should be used for that. Updating the view is unidirectional and top-down. This makes the system a lot more predictable and performant.

[martinleopold]

Let’s use

• for state management: Redux-Style Rx with @ngrx/store
• for persistence: localForage/localForage

Related Courses: Build Redux Style Applications with Angular2, RxJS, and ngrx/store Introduction to Reactive Programming with RxJS Getting Started with Redux

Documentation: The introduction to Reactive Programming you've been missing Comprehensive Introduction to @ngrx/store @ngrx/store in 10 minutes