Using redux and angular 2 with meteor
0 likes119 views
The document presents a seminar on using Redux and Angular 2 with Meteor, led by Ken Ono, detailing both the agenda and key technologies involved. It covers essential prerequisites like ES6, TypeScript, and RxJS, and provides insights into Angular 2 features and Redux's structure for managing application state. The document also addresses important patterns and packages to enhance development efficiency and concludes with the benefits and challenges of adopting this approach.
![ES6
– http://es6-features.org/
– Lambda / Arrow Function
Syntax
• function(x){} same as (x)=>{}
• ()=>{1} same as ()=>{return 1}
• a=>{a*2};
– Classes (prototypical
inheritance)
– `` strings
– let / const (new scoping rules)
– Extended Parameters
• Defaults: (x, b=1)=>{}
• Rest: (x,y, …a )=>{} (a is an array of
remaining params)
• Spread: [1, …[2,3]] same as [1,2,3]
– Property Short Hand:
• {x} same as {x:x}
– Iterators & Generators
– Import/export Modules](https://image.slidesharecdn.com/usingreduxandangular2withmeteor-160922154952/85/Using-redux-and-angular-2-with-meteor-5-320.jpg)
![Redux Module
• My approach to organizing Redux pieces
• Define a reducer, set of actions and async
handlers as a bundle
• Let’s look at a few modules that map to Meteor
features
– Organizing Actions
– Updating State
– Async and connecting to Meteor services
– Connecting to Angular Components
export abstract class ReduxModule<T> {
reducer:Reducer<T>;
epics:Epic[]=[]; // Stream based middleware
middlewares:any[]=[]; // Normal redux middleware
enhancers:any[]=[];
actions:Object;
abstract initialize():void;
}
…](https://image.slidesharecdn.com/usingreduxandangular2withmeteor-160922154952/85/Using-redux-and-angular-2-with-meteor-10-320.jpg)
Using redux and angular 2 with meteor
- 1. Using Redux and Angular 2 with Meteor Ken Ono Principal and CTO Fabrica Technology September 21, 2016
- 2. Introductions • Host Facility Introduction and Thanks • Attendee Intros – Recruiters or Recruiting? – Potentially available for hires – Individual Intros (First Name, Current Employer, Tech Interests, Experience with Meteor, Angular 2 or Redux) • About Ken – Current • Principal and CTO of Fabrica Technology (CTO for Hire) • VP Analytics @ TBA • CTO @ Aluvion Law – Formerly • CTO of Angoss Software (data mining) • VP Analytics and Innovation at NexJ Systems (enterprise CRM and consumer health and wellness) • CTO of Myant (Smart Garments). – Blog at: www.fabrica.tech
- 3. Agenda • Introductions • Introduction to Angular 2 • Introduction to Redux • Overview of an Approach for Meteor, Redux, Angular • Let’s Look at Code • Questions / deep dives at the end
- 4. Angular 2 - Important Prerequisites • ES6 • TypeScript • RxJS
- 5. ES6 – http://es6-features.org/ – Lambda / Arrow Function Syntax • function(x){} same as (x)=>{} • ()=>{1} same as ()=>{return 1} • a=>{a*2}; – Classes (prototypical inheritance) – `` strings – let / const (new scoping rules) – Extended Parameters • Defaults: (x, b=1)=>{} • Rest: (x,y, …a )=>{} (a is an array of remaining params) • Spread: [1, …[2,3]] same as [1,2,3] – Property Short Hand: • {x} same as {x:x} – Iterators & Generators – Import/export Modules
- 6. TypeScript – https://www.typescriptlang.org – Superset of ES6 – Compiles to ES5 (or 6) – Adds type checking, interfaces, generics and more – Decorators • annotating or modifying classes and class members • experimental, but heavily used by Angular 2 • http://rangle.io/resources/demystifying-decorators-a- new-feature-to-javascript/ export enum EDocumentChangeType { NEW, CHANGED, REMOVED, MOVED } export interface IDocumentChange<T> { changeType:EDocumentChangeType, newDocument?: T, oldDocument?: T, atIndex?:number, before?:string fromIndex?:number } … export class MeteorCursorObservers { static createCursorObserver<T>(ursor: Mongo.Cursor<any>): Observable<IDocumentChange<T>> { return Observable.create( (observer: Subscriber<IDocumentChange<T>>) => { let handle: Meteor.LiveQueryHandle = cursor.observe({ … Not your father’s JavaScript
- 7. RxJS – http://reactivex.io/ – Create and subscribe to streams – Observable • Like Promise except next(), error(), complete() – Library of operators make it like lodash/_, but for streams • Streams are like arrays, except over time, instead of indexed in memory – Declarative, not imperative – Hot (mouse clicks/live play) vs Cold (server request/DVD) – Will be part of JavaScript (currently stage one proposal) let myObservable<MyType> = somthingThatGivesMeAnObservable(); let subscription:Subscription = myObservablle.subsribe( (myData:MyType)=>{}, // Data pushed to you from Observable ()=>{}, // Error ()=>{} // Complete ); subSrciption.unsubscribe(); … myObservable.map( funciton (myData:MyType) { return transformed(myData); }). … // Short hand: myObservable.map( myData:MyType=> transformed(myData));
- 8. Key Angular 2 Features • Components and Directives – Hierarchical tree of components – Properties in / Events out – Templating, two-way binding and built in directives – Life Cycle Events • Forms • Services – HTTP – Router • Pipes • Dependency Injection • Testing • Animation • Modules • Web Workers • Client options (Bootstrap, Angular Material, Ionic (Native look and feel with Cordova), NativeScript (Angular 2 & JS with iOS and Android native components - No DOM), Angular Universal, Electron (browser and Node bundle for desktop) • CLI • https://angular.io/docs/ts/latest/guide/cheatsheet.html • http://rangle.io/resources/intro-to-angular-2-components/
- 9. Redux • A central nervous system for events and actions to derive a clean, well-defined application state. • A New Way of Organizing Code that is simple to conceptualize: – Actions (that have an action type and payload) are fired, – A reducer computes a new state with pure functions given an action and current state, – Middleware handles anything asynchronous (actions in, actions out) UI Actions Reducer StateStateStateState Middle ware Putting Redux into practice is a mental adjustment Yuri Takhteyev, CTO of Rangle, intro to Redux https://www.youtube.com/watch?v=s9AC8KTcce8
- 10. Redux Module • My approach to organizing Redux pieces • Define a reducer, set of actions and async handlers as a bundle • Let’s look at a few modules that map to Meteor features – Organizing Actions – Updating State – Async and connecting to Meteor services – Connecting to Angular Components export abstract class ReduxModule<T> { reducer:Reducer<T>; epics:Epic[]=[]; // Stream based middleware middlewares:any[]=[]; // Normal redux middleware enhancers:any[]=[]; actions:Object; abstract initialize():void; } …
- 11. Patterns • Request, Manage, Respond, Listen – a Redux Pattern – Kick off a request action – Middleware reacts to the request and kicks off server call. (Promises and RxJS to manage the asynchronous events.) – Server returns data (a single response or many responses from a watch) – Response action fired with data from server (or error condition) – Your reducer updates the application state with the new data – Presentation components wait for the information they need to arrive • Write and Watch - a Meteor/Redux Pattern – Write data to a Mongo Collection (via Collection.insert, Meteor.method) – Observe changes
- 12. Meteor – Cursor.observe • Mongo.Cursor#observe – Watch a query. Receive callbacks as the result of Mongo query changes. – Callbacks for • Added(document) or • Changed(newDocument, oldDocument) or • Removed(oldDocument) • http://docs.meteor.com/api/collections.html#Mongo-Cursor-observe
- 13. Wrapping a Meteor Cursor with an Observable • Convert a reactive Meteor cursor to an Observable: fromMeteorCursor<T>(cursor: Mongo.Cursor<any>): Observable<IDocumentChange<T>> { return Observable.create((observer: Subscriber<IDocumentChange<T>>) => { let handle: Meteor.LiveQueryHandle = cursor.observe({ added: (doc: T) => { observer.next({ changeType: EDocumentChangeType.NEW, newDocument: doc }); }, changed: (nDoc: T, oDoc: T) => { observer.next({ changeType: EDocumentChangeType.CHANGED, newDocument: nDoc, oldDocument: oDoc }); }, removed: (doc: T) => { observer.next({ changeType: EDocumentChangeType.REMOVED, • Then observe the cursor: static createUserObserver(userId:string):Observable<IDocumentChange<User>> { return MeteorCursorObservers. fromMeteorCursor<User>( Meteor.users.find({_id: userId}) ); } .createUserObserver(LoginService.userId()).map( (change:IDocumentChange<User>)=>{ let loginState:ILoginState = store.getState().loginReducer; if (loginState && loginState.neverLoggedIn) { // Never logged in, yet the current user is populated, must be automatic login return LoginActions.loginSuccessFactory( change.newDocument, change.newDocument._id, true); } else { return LoginActions.changeFactory(change); } })
- 14. Other Important Packages • Immutable.js - new state generation – Provides immutable maps and arrays (and more) – https://facebook.github.io/immutable-js/ – https://www.youtube.com/watch?v=I7IdS-PbEgI • NgRedux - Angular bindings for Redux – @select decorators, injectable store and dispatcher – https://github.com/angular-redux/ng-redux – https://www.youtube.com/watch?v=s4xr2avwv3s • Redux-Observable - RxJS middleware – Use RxJS operators (.filter, .map, .flatMap) for async operations – https://github.com/redux-observable/redux- observable var Immutable = require('immutable'); var map1 = Immutable.Map({a:1, b:2, c:3}); var map2 = map1.set('b', 50); map1.get('b'); // 2 map2.get('b'); // 50 @Component(…) class App { @select() count$: Observable<number>; constructor(private ngr: NgRedux<IAppState>) {} onClick() { this.ngr.dispatch({ type: INC); } } const pingEpic = action$ => action$.filter(action => action.type === 'PING') .delay(1000) // wait 1000ms .mapTo({ type: 'PONG' }); // later... dispatch({ type: 'PING' });
- 15. Demo App • For Real Cards (attempts to mimic actual card, game engine does not know rules) • Source Code: https://github.com/kokokenada/for-real-cards • Hosted at: http://for-real-cards.scalingo.io/ • Mobile app: Search for ”for real cards Fabrica”
- 16. Conclusion • Impact to Code – Reduced boiler plate (compared to using RxJS for actions) – Consolidated logic, less spaghetti code – Clean separation of presentation and data acquisition – Way, way easier to debug – Easier to develop rich functionality and reason about state and events – State is solidly understood – Less deep nesting / micro-management of async calls – Simple undo • Challenges – New way of thinking an organizing code – Lots of prerequisites to learn – Getting immutability right (for complex structures) takes practice – Tooling is catching up It’s hard work, but it will pay off