Last active
September 1, 2015 21:49
-
-
Save gilbox/12095aa0bc6822736f8f to your computer and use it in GitHub Desktop.
ui-router VS flux+vanillaJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// ui-router | |
// | |
$stateProvider.state('person', { | |
url: '/person/{personId}', | |
resolve: ($stateParams, AppObject) => { | |
return AppObject.getPerson( $stateParams.personId ) | |
}, | |
controller() { /* ... */ } | |
}); | |
$stateProvider.state('person.pet', { | |
url: '/pet/{petId}', | |
resolve: { | |
pet: ($stateParams, person) => { | |
return person.getPet( $stateParams.petId); | |
} | |
}, | |
controller() { /* ... */ } | |
}); | |
$stateProvider.state('person.pet.tricks', { | |
url: '/tricks', | |
resolve: { | |
tricks: (pet) => { | |
return pet.getTricks(); | |
} | |
}, | |
controller() { /* ... */ } | |
}) | |
// | |
// flux | |
// | |
var dispatch = dispatcher.dispatch; | |
actionCreator = { | |
person(route) { | |
return AppObject.getPerson(route.params.personId) | |
.then( (person) => { | |
dispatch('load:person', {person} ); | |
}); | |
}, | |
pet(route) { | |
return this.person(route).then( (person) => { | |
person.getPet(route.params.petId).then((pet) => { | |
dispatch('load:pet', {pet}); | |
}) | |
}) | |
}, | |
tricks(route) { | |
return this.pet(route).then( (pet) => { | |
pet.getTricks().then( (tricks) => { | |
dispatch('load:tricks', {tricks}) | |
}) | |
}) | |
} | |
}; | |
// | |
// flux with async/await | |
// | |
var dispatch = dispatcher.dispatch; | |
actionCreator = { | |
async person(route) { | |
var person = await AppObject.getPerson(route.params.personId); | |
dispatch('load:person', {person} ); | |
return person; | |
}, | |
async pet(route) { | |
var pet = await this.person(route).getPet(route.params.petId); | |
dispatch('load:pet', {pet}); | |
return pet; | |
}, | |
async tricks(route) { | |
var tricks = await this.pet(route).getTricks(); | |
dispatch('load:tricks', {tricks}); | |
return tricks; | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Right, the idea with relay is that with graph sql, multiple queries are combined into one query, not sent in parallel.
Pretty much everything is decoupled in this example, I'm not sure what you mean by this.
I agree with this, and it's one of my favorite things about your Angular ORM presentation at ng-conf. Unlike Facebook's initial Flux architecture, my flux implementation doesn't use event listeners to keep the view updated.
I think that dispatchers are useful in addition to the live bindings because they decouple your code and facilitate unidirectional flow.
The beauty of flux is how it manages asynchronous flow. All of the business logic becomes very easy to test because async operations are completely removed from the Stores. The views are also very easy to test because they become dumb views that just bind to the data. The only real challenge is testing the action creators because that's where all the async stuff happens.