These are chat archives for AngularClass/angular2-webpack-starter

8th
Oct 2016
pigeont
@PigeonT
Oct 08 2016 14:34
hi, how to use angular2 with webpack together?
I need some help
Are u using webpack or systemjs?
Dan Cancro
@dancancro
Oct 08 2016 17:33

Hi all. I'd like to make an app with Angular 2 and Redux. How do practitioners of this starter use it with Redux?

From my view of other Angular2+Redux starters, I get the feeling that it totally changes the structure of an app from files being grouped by feature to being grouped by file type.

Marinho Brandão
@marinho
Oct 08 2016 18:44
hi @dancancro , this is the structure I have (different than standard suggested by Redux team):
src
src/app
src/app/store
src/app/store/feature1
src/app/store/feature1/feature1.actions.ts
src/app/store/feature1/feature1.reducers.ts
src/app/store/feature1/feature1.state.ts
src/app/store/feature1/feature1.models.ts
*.models.ts only when necessary
Dan Cancro
@dancancro
Oct 08 2016 18:45
@marinho are there any specific reasons for your departure from their way?
Marinho Brandão
@marinho
Oct 08 2016 18:46

inside store, I have also:

src/app/store/app.state.ts
src/app/store/reducers.ts

both grouping the others respective feature files

by this way, each feature is self contained as one package, it looks more organised and scalable
(scalable in terms of file structure)
other key information: angular2-webpack-starter has a app.state.ts to manage the HMR state, but it has nothing to do with the Redux’ app state interface… I suggest you to rename it to prevent confusion
Dan Cancro
@dancancro
Oct 08 2016 18:51
where would you put feature1's component, module, template, and css files?
Marinho Brandão
@marinho
Oct 08 2016 18:51
they aren’t part of the global state, they go to the normal places they would be
the idea is to keep everything under Redux’ domain inside src/app/store as that defines the app’s global state
Dan Cancro
@dancancro
Oct 08 2016 18:52
so you have some feature1 files under src/app/store/feature1 and others under, src/app/feature1? what sort of havok would it cause if you put all of feature1's files in src/app/feature1?
Marinho Brandão
@marinho
Oct 08 2016 18:54
you can do that too, no issue, but then you start to mix global state with components, which goes against the idea of a component-oriented approach
because when I say “feature1”, I don’t mean “feature1.component”’s state… what I mean is a feature from the state point of view, which mostly don’t coincide with feature structure
Dan Cancro
@dancancro
Oct 08 2016 18:55
hmm, to me putting all things concerned with a component in one place complies with component-orientation better. no?
Marinho Brandão
@marinho
Oct 08 2016 18:56

for example, you may have

  • home.component
  • kpis.component
  • map.component
  • sites-list.component

and then your global state is:

  • towns
  • sites
  • buildings
  • aggregations

so, just because some features will coincide in name with state keys, it doesn’t mean that’s a rule

nope, because the global state isn’t part of the component … it is like an external API the component uses as a third party service
Dan Cancro
@dancancro
Oct 08 2016 18:57
ah ok so there are two different sets of 'components' - visual ones and state ones. is that right?
Marinho Brandão
@marinho
Oct 08 2016 18:57
what would be a state component?
Dan Cancro
@dancancro
Oct 08 2016 18:57
towns
Marinho Brandão
@marinho
Oct 08 2016 18:58
nope, towns is just a simple JS array with a couple of JS objects with data
there’s no component inside the state
you must think of the state as a database… it provides data for the components, but the structure isn’t the same
Dan Cancro
@dancancro
Oct 08 2016 18:59
i think i got it
Marinho Brandão
@marinho
Oct 08 2016 19:01

:) in my example case:

  • towns, sites and buildings would be used by map.component
  • aggregations would be used by kpis.component
  • sites would be used by sites-list.component

so, some state keys are used by multiple components or the other way around

Dan Cancro
@dancancro
Oct 08 2016 19:06

ok. would this be more accurate then?

src/app
src/app/store
src/app/store/entityType1
src/app/store/entityType1/entityType1.actions.ts
src/app/store/entityType1/entityType1.reducers.ts
src/app/store/entityType1/entityType1.state.ts
src/app/store/entityType1/entityType1.models.ts

and

src/app
src/app/feature1
src/app/feature1/feature1.module.ts
src/app/feature1/feature1.component.ts
src/app/feature1/feature1.template.ts
src/app/feature1/subfeature/
src/app/feature1/...
Marinho Brandão
@marinho
Oct 08 2016 19:07
yep, true… I probably should have avoided the word “feature1” in my example… yours is better
other I suggest from my experience: ng2-redux + Redux.js has an advantage over ngrx: as they use the standard libraries, you can make use of middleware and Chrome Extensions. I don’t know ngrx well, but I’m very happy using some middleware and chrome things
Dan Cancro
@dancancro
Oct 08 2016 19:10
i started with ng2-redux but the community is much smaller. it was taking a week to get an answer to a simple question
the ngrx example app works with the developer tools http://ngrx.github.io/example-app
Marinho Brandão
@marinho
Oct 08 2016 19:12
well, you can grab some knowledge from ReactJS community though… it’s the same Redux.js… so it works the same way
hummm, just tried and my DevTools tab didn’t work as it does with ng2-redux
I see the black sidebar included in the website working but not the chrome extension in devtools
oops, jsut force-reloaded and it works now… odd
Dan Cancro
@dancancro
Oct 08 2016 19:14
it's flakey for me too.
how do you feel about Immutable.js? I had a real struggle working with it when i was trying ng2-redux then asked about it on the ngrx board and was told it was unnecessary complexity
Marinho Brandão
@marinho
Oct 08 2016 19:19
I’m using seamless-immutable instead
initially because the legal department on my job blocked ImmutabeJS as it has a patent trap…
but after I realized seamless-immutable is also better because it respects the exact object signature… you can use the arrays and objects with the exact same methods and they work perfectly, while with ImmutabeJS everything is different from standard
Dan Cancro
@dancancro
Oct 08 2016 19:22
no kidding? there's a hard to find gotcha
Marinho Brandão
@marinho
Oct 08 2016 19:22
what do you mean?
Dan Cancro
@dancancro
Oct 08 2016 19:24
whether something has a patent problem is probably not very easy for average folks to find out while they drown in the rest of the variables https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.87gsjlb8b
Marinho Brandão
@marinho
Oct 08 2016 19:27
hahaha, nice article, just read it few days ago :P
I wouldn’t find it myself either, but in my work there’s a huge legal department analysing every single OSS library/package we request… React and Immutable were caught
Dan Cancro
@dancancro
Oct 08 2016 19:30
thanks. i do my best to keep track of these things, but it's overwhelming. if you care to add any other hard-but-good-to-know facts about things, feel free to share them https://docs.google.com/spreadsheets/d/1nMv8TqUx3gUoC3M6BRPB4E4FMTSYGT_OLERguXGjePc/edit#gid=1404564369
Marinho Brandão
@marinho
Oct 08 2016 19:32
wow, cool
Dan Cancro
@dancancro
Oct 08 2016 19:32
and i made this for making use of the data www.techtradeoffs.info
Marinho Brandão
@marinho
Oct 08 2016 19:33
Facebook does that just to protect themselves against future competition and catch some up&coming startups, but I think most React & ImmutableJS users would never have any issue though
interesting
Dan Cancro
@dancancro
Oct 08 2016 19:44
last question... the Angular Style guide prescribes having a "core" folder for singleton things and a "shared" folder for multi-instance things. It seems that a Redux store would meet the criteria for going in the core folder. What do you think?
Marinho Brandão
@marinho
Oct 08 2016 19:46
I didn’t know about core… jsut about shared, which we use… fair point about core, yes, probably store should be placed in there
tuckerjt07
@tuckerjt07
Oct 08 2016 19:53
I'm working with the material2 branch, new to angular 2 and material 2, and cannot figure out where to put the sass file to change the default theme as shown here, https://github.com/angular/material2/blob/master/docs/theming.md
adirzoari
@adirzoari
Oct 08 2016 20:52
who knows to make facebook login to app with ionic 2?