Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
luchadornado
Oct 7, 2004

A boombox is not a toy!

Thermopyle posted:

You do have to be careful that you're not just moving complexity from a thunk to a middleware. No gain in doing that.

Also, another potential downside is that you're creating a spooky action at a distance. Like everything you have to think about the tradeoffs you're making.

Those are both benefits in my mind. Isolating complexity in middleware vs a thunk that pops up every so often in your action creators leads to easier unit tests and less risk of bugs in your action creators. Your business logic doesn't care about the details of how asynchonicity is handled in JS. Those actions are fired at a distance from your business logic, but that's because the middleware is for non-business logic magic. A positive side affect of that last sentence is that you tend to share these types of actions across multiple reducers more, which is a good thing.

I agree with the last few posters that writing your own middleware is harder than using a thunk. I've found that eventually in some apps, there's a point where even worse ceremony is happening inside of your action creators, and trying to add new action creators or action in the middle of a thunk is horrible. I wouldn't recommend my approach until you're feeling pain.

luchadornado fucked around with this message at 19:21 on Mar 12, 2017

Adbot
ADBOT LOVES YOU

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Helicity posted:

Those are both benefits in my mind. Isolating complexity in middleware vs a thunk that pops up every so often in your action creators leads to easier unit tests and less risk of bugs in your action creators. Your business logic doesn't care about the details of how asynchonicity is handled in JS. Those actions are fired at a distance from your business logic, but that's because the middleware is for non-business logic magic. A positive side affect of that last sentence is that you tend to share these types of actions across multiple reducers more, which is a good thing.

I agree with the last few posters that writing your own middleware is harder than using a thunk. I've found that eventually in some apps, there's a point where even worse ceremony is happening inside of your action creators, and trying to add new action creators or action in the middle of a thunk is horrible. I wouldn't recommend my approach until you're feeling pain.

I think they can be benefits.

Forgall
Oct 16, 2012

by Azathoth
Anybody here using immutable.js with redux? Not sure if I should try using it for state representation, or go with plain javascript objects/arrays.

Shayl
Apr 11, 2007

Forgall posted:

Anybody here using immutable.js with redux? Not sure if I should try using it for state representation, or go with plain javascript objects/arrays.

My company does, though I'm still pretty junior so I don't touch it as much as I'd like to. It seems to work well for us (in the sense that I haven't heard anyone bitching about it, at least).

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Helicity posted:

Those are both benefits in my mind. Isolating complexity in middleware vs a thunk that pops up every so often in your action creators leads to easier unit tests and less risk of bugs in your action creators. Your business logic doesn't care about the details of how asynchonicity is handled in JS. Those actions are fired at a distance from your business logic, but that's because the middleware is for non-business logic magic. A positive side affect of that last sentence is that you tend to share these types of actions across multiple reducers more, which is a good thing.

I agree with the last few posters that writing your own middleware is harder than using a thunk. I've found that eventually in some apps, there's a point where even worse ceremony is happening inside of your action creators, and trying to add new action creators or action in the middle of a thunk is horrible. I wouldn't recommend my approach until you're feeling pain.

If I ever get power back (day five and counting!) I'm going to effortpost how I use thunk to do what your custom middleware does. Basically I have "services" that abstract out all the stuff you do in your middleware so my thunks are basically:

code:
const complexThing = id => {
  return (dispatch, getSate) => {
    dispatch(doingThing())
    return myService.asyncStuff(id)
    .then( payload => dispatch(allIsWell(payload))
   .catch( oops => dispatch(ohNoes(oops));
  }
}
That's as complex as they get. Using Promise.all you can have your services handle simultaneous stuff, etc. Very similar to what you are doing, but should I switch away from Redux / Thunks, all my service code is portable.

luchadornado
Oct 7, 2004

A boombox is not a toy!

Lumpy posted:

If I ever get power back (day five and counting!) I'm going to effortpost how I use thunk to do what your custom middleware does. Basically I have "services" that abstract out all the stuff you do in your middleware so my thunks are basically:

code:
const complexThing = id => {
  return (dispatch, getSate) => {
    dispatch(doingThing())
    return myService.asyncStuff(id)
    .then( payload => dispatch(allIsWell(payload))
   .catch( oops => dispatch(ohNoes(oops));
  }
}
That's as complex as they get. Using Promise.all you can have your services handle simultaneous stuff, etc. Very similar to what you are doing, but should I switch away from Redux / Thunks, all my service code is portable.

Your action creators shouldn't have synchronization logic in them because it makes them brittle. As simple as that example is, there isn't an argument that it's as bulletproof as just returning an action object. My action creators used to look like that, and then you need to add something, and then it needs to work on an interval, and then you have a bug somewhere in there, etc.. Unit tests for that will be a PITA as well.

You don't need to do an effort post on it, because I understand exactly what you're doing and have done it a lot. I'm not trying to convince anyone that Thunks are wrong and they're bad developers for using them. I'm just saying I was using Thunks and Sagas, I hated dealing with them at a certain point as apps scale, I tried a new way, and it feels really, really good. Like light-bulb going off in my head kind of way.

Forgall posted:

Anybody here using immutable.js with redux? Not sure if I should try using it for state representation, or go with plain javascript objects/arrays.

I am, and I like it, but there are two caveats: you have to be careful with your fromJS/toJS use or you can affect performance, and it doesn't play well with Typescript. You pretty much need to carry your Immutable objects all the way down into your components and then do a get() with a magic string. I still haven't solved the latter issue to my liking.

prom candy
Dec 16, 2005

Only I may dance

Helicity posted:

It's a lot of churn that is even more apparent when you have experience in a more stable ecosystem like Java, Python, or C# (even including Core CLR). One problem is the tendency towards modular architectures that make documenting the interaction between modules critical, but most authors consider that outside the scope of their concerns. The other problem is that documentation in general is poor for many of these projects, so blog posts and tweets are useful sources of information but become outdated very quickly. A React boilerplate from 2015 can be unusable in 2017, for example. Steps are being made, so there's hope - Redux and Webpack both got healthy updates to their documentation.

Dismissing frustration with the ecosystem as a fear of learning isn't fair. I'd rather solve interesting problems or play with Haskell/Kubernetes/whatever than figuring out yet another modular build tool for JS.

That's fair, and definitely an angle I hadn't considered. Most of the griping I've seen comes from a place of "I can just make that todo list example app with jQuery."

quote:

...Middleware code

This is really cool. My thunks are definitely looking like your first example there. I've been thinking about making the move to Sagas for my next project but maybe I'll try this middleware approach instead. I think something about middleware has made me just ignore it after I get my initial app set up, like it's a place for general plugins and extensions and not application code. Thanks for sharing!

Forgall
Oct 16, 2012

by Azathoth

Helicity posted:

I am, and I like it, but there are two caveats: you have to be careful with your fromJS/toJS use or you can affect performance, and it doesn't play well with Typescript. You pretty much need to carry your Immutable objects all the way down into your components and then do a get() with a magic string. I still haven't solved the latter issue to my liking.
I'm also trying to use it with typescript, and I found this which seems to work pretty nice.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Forgall posted:

I'm also trying to use it with typescript, and I found this which seems to work pretty nice.

That's cool, Immutable Records were a pain in the rear end to use directly with Typescript, which is unfortunate given how powerful the two go together. I said in another thread that if I had to choose between static typing and immutability, immutability would probably win. It's so very useful to know that your values are exactly what they're supposed to be, with no questions of whether particularly methods mutated them or whatever. But either way, it's very nice to have both.

Plavski
Feb 1, 2006

I could be a revolutionary
In a SaaS environment, what's your preference: pushing with websockets, or RESTful pulling? I can see benefits of both and we're currently architecting into a RESTful consumption model for simplicities sake, but I can't help feeling that early designing of a websockets push environment will be stronger in the long run. Anyone got any preferences, or experience going from one architecture to the other? Have you run both at once?

luchadornado
Oct 7, 2004

A boombox is not a toy!

Plavski posted:

In a SaaS environment, what's your preference: pushing with websockets, or RESTful pulling? I can see benefits of both and we're currently architecting into a RESTful consumption model for simplicities sake, but I can't help feeling that early designing of a websockets push environment will be stronger in the long run. Anyone got any preferences, or experience going from one architecture to the other? Have you run both at once?

I've found this to be good guideline: https://blogs.windows.com/buildingapps/2016/03/14/when-to-use-a-http-call-instead-of-a-websocket-or-http-2-0/

I've done a mix of REST and ws at my last 2 companies. ws was primarily for for pushing high volumes of uncacheable messages in a half-duplex fashion both times. The link above brings up a good point that you might have to spend more time defining your message layer if you're handling full duplex communications.

Forgall posted:

I'm also trying to use it with typescript, and I found this which seems to work pretty nice.

Thanks! I'll have to try that.

Plavski
Feb 1, 2006

I could be a revolutionary

Helicity posted:

I've found this to be good guideline: https://blogs.windows.com/buildingapps/2016/03/14/when-to-use-a-http-call-instead-of-a-websocket-or-http-2-0/

I've done a mix of REST and ws at my last 2 companies. ws was primarily for for pushing high volumes of uncacheable messages in a half-duplex fashion both times. The link above brings up a good point that you might have to spend more time defining your message layer if you're handling full duplex communications.

That was really helpful thanks.

Forgall
Oct 16, 2012

by Azathoth
I thought that since typescript added async/await for es5 target in 2.1 generators were also in, but turns out not :(

Plavski
Feb 1, 2006

I could be a revolutionary

Forgall posted:

I thought that since typescript added async/await for es5 target in 2.1 generators were also in, but turns out not :(

Yeah, if you look at the code await/async transpile down to in ES5 they have to fake their own generators.

It's on the milestone list for 2.3 though: https://github.com/Microsoft/TypeScript/issues/1564

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
So I'm slowly, slowly learning Angular (2.X).
I'm iterating over some objects: <div *ngFor="let basketitem of basketitems" class="row itemInfo"> but I'd like to sort, and group, by a property. I know sortBy and groupBy were removed from AngularJS because reasons.
I wouldn't know where to start to write my own, but I found angular2-pipes. Trouble is, I don't think I installed it properly.

I went to the folder that contains /app and /node_modules and did npm install ngx-pipes --save, I see it in package.json. Then in app.module.ts I put import {NgPipesModule} from 'ngx-pipes'; and NgPipesModule in the imports array in @NgModule, but when I try to use it, even by copy/pasting the first example in the docs, it gives an error saying it can't find the pipe.

Since I just started learning Angular this is the first plugin I've tried and I know with previous issues I've had with Angular it was just from not importing dependencies properly.

Plavski
Feb 1, 2006

I could be a revolutionary
Is your version of TypeScript up to date? Do you have definition files for that module?

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Plavski posted:

Is your version of TypeScript up to date? Do you have definition files for that module?

I'm not quite sure how to answer those questions :(
My package.json says "dependencies": { "ngx-pipes": "^1.4.6", } and "devDependencies": { "typescript": "~2.0.10",}. I see an /ngx-pipes folder in node_modules and I started this project using Angular Quickstart

Vesi
Jan 12, 2005

pikachu looking at?

The Merkinman posted:

I'm not quite sure how to answer those questions :(
My package.json says "dependencies": { "ngx-pipes": "^1.4.6", } and "devDependencies": { "typescript": "~2.0.10",}. I see an /ngx-pipes folder in node_modules and I started this project using Angular Quickstart

Angular Quickstart seemed a bit outdated, since you just started you can probably re-init the project with @angular/cli and I'm sure it'll work

https://cli.angular.io/

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

The Merkinman posted:

So I'm slowly, slowly learning Angular (2.X).
I'm iterating over some objects: <div *ngFor="let basketitem of basketitems" class="row itemInfo"> but I'd like to sort, and group, by a property. I know sortBy and groupBy were removed from AngularJS because reasons.
I wouldn't know where to start to write my own, but I found angular2-pipes. Trouble is, I don't think I installed it properly.

I went to the folder that contains /app and /node_modules and did npm install ngx-pipes --save, I see it in package.json. Then in app.module.ts I put import {NgPipesModule} from 'ngx-pipes'; and NgPipesModule in the imports array in @NgModule, but when I try to use it, even by copy/pasting the first example in the docs, it gives an error saying it can't find the pipe.

Since I just started learning Angular this is the first plugin I've tried and I know with previous issues I've had with Angular it was just from not importing dependencies properly.

I'd say they were removed for a good reason... Specifically in Angular 1.x, filtering in the template was 2x as expensive, as it happened during digests and thus, happened at least twice. But from a code maintenance perspective, Angular 1.x tried putting too much logic in the HTML. I'd put your sorting and grouping logic in the controller, and have your template iterate over that, it'll make it a lot easier to tweak later on.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Skandranon posted:

I'd say they were removed for a good reason... Specifically in Angular 1.x, filtering in the template was 2x as expensive, as it happened during digests and thus, happened at least twice. But from a code maintenance perspective, Angular 1.x tried putting too much logic in the HTML. I'd put your sorting and grouping logic in the controller, and have your template iterate over that, it'll make it a lot easier to tweak later on.

I understand the reasoning, but given how new I am to Angular I'm having trouble actually doing it

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

The Merkinman posted:

I understand the reasoning, but given how new I am to Angular I'm having trouble actually doing it

Put a get property on your controller like so

code:
public get filtered_basketitems(): IBasketItems[] {
	return this.basketitems.filter().sort().group();
}
Then change your template to <div *ngFor="let basketitem of filtered_basketitems" class="row itemInfo">

This will then request your new filtered collection upon every digest, but at least your code is in plain JS. To be even more picky about performance, you can have a collection on the controller as you do now, but specific functions that alter it, so you only perform filtering/sorting/grouping when someone clicks a button or changes something. This is much more efficient, but requires diligence.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Skandranon posted:

Put a get property on your controller like so

code:
public get filtered_basketitems(): IBasketItems[] {
	return this.basketitems.filter().sort().group();
}
Then change your template to <div *ngFor="let basketitem of filtered_basketitems" class="row itemInfo">

This will then request your new filtered collection upon every digest, but at least your code is in plain JS. To be even more picky about performance, you can have a collection on the controller as you do now, but specific functions that alter it, so you only perform filtering/sorting/grouping when someone clicks a button or changes something. This is much more efficient, but requires diligence.
OK so I should roll my own rather than using a plugin? (which incidentally did seem to work with angular-cli but only as far as importing, still errors, yay)
When I try what you suggest:
code:
missing argument 0 when calling function Array.prototype.filter
:confused:

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

The Merkinman posted:

OK so I should roll my own rather than using a plugin? (which incidentally did seem to work with angular-cli but only as far as importing, still errors, yay)
When I try what you suggest:
code:
missing argument 0 when calling function Array.prototype.filter
:confused:

Sorry... I was being a bit brief, filter().sort().group() aren't real functions... I guess it would look more like this.basketitems.filter(b => b.thingIWant).sort((a,b) => a.sortField > b.sortField). Probably some good grouping methods in lodash.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Skandranon posted:

Sorry... I was being a bit brief, filter().sort().group() aren't real functions... I guess it would look more like this.basketitems.filter(b => b.thingIWant).sort((a,b) => a.sortField > b.sortField). Probably some good grouping methods in lodash.

Oh I see, just pass the original array and output another? Well I got sorting working, but that grouping.
I can't wait until I'm done to share my findings because it seems I'm the first person in the world to want to do something in Angular that was built-in to AngularJS.

EDIT: Looks like I can pause this anyway since upon doing so, I realized a bunch of possibilities that we don't have requirements for.

The Merkinman fucked around with this message at 21:17 on Mar 14, 2017

Shayl
Apr 11, 2007

So, I'm working on this huge react app right now, very big, hundreds of components. I'm a junior with .js, but I'm also 100% in charge of the css styles because I'm a whiz (and not junior at all) at that.

Anyway, today I had this argument with one of our consultants about component-driven design and how to organize your files. The consultants want all the scss mixed in with the js components, and myself and some of the internal people want it to be in a stylesheet folder so it acts more as a style guide. The business people want to be able to theme this app someday, which isn't necessarily related but it might be.

I realize that directory structure is something fairly mundane that people argue PASSIONATELY about, but how valid are his arguments about scalability and confusion, when I'm the one who actually has to refactor this stuff (I came on 75% into the project launching and nobody before me really, truly knew css) and I'm far more comfortable dealing with hundreds of sass files that aren't mixed in with hundreds of .js files when it comes down to actually cleaning it up, removing redundancy, and somehow, some way getting this thing to work on mobile.

I've seen arguments for both sides, but nothing that actually addresses an app as huge as this. Usually the 'ideal structure' articles show apps that are 1/10th the size of this thing. Another large thing I've worked on is this game in Unity that is massive, I would never dream of mixing my art assets in with my C# code in that, so it seems sort of odd to do it here.

I DO understand that the philosophy is supposed to be 1:1 component/style association, and I'm not actually changing the component-based nature of the build (which is...piecemeal at best, that needs to be worked on, too). And I can see some value of having them together, but as it stands my task to actually improve the overall styles seemed impossible when it was.

Anyway, convince me to put them all back or keep them apart I guess. My manager doesn't have strong feelings either way and doesn't actually know what's best. Everyone has an opinion but my only experience with a codebase this big is a massive game project, which is C# rather than React.

luchadornado
Oct 7, 2004

A boombox is not a toy!

Shayl posted:

I would never dream of mixing my art assets in with my C# code in that, so it seems sort of odd to do it here.

You're conflating separation of filetypes with separation of concerns. That's probably besides the point though.

You want to theme one day. You're also the person that is stuck with this code. Do whatever is more maintainable and allows you to pivot quickly. Write your apps so they're easy to be strangled: https://www.martinfowler.com/bliki/StranglerApplication.html

Some consultants love to get on a high horse and pitch "best practices", and you need to be careful around them. Come up with some scenarios: adding theming, extracting large sections of the codebase out into standalone modules, switching from SASS to LESS, etc. Ask your co-workers how separate CSS would help/hinder. Ask the consultants how it would help/hinder in each of those. Make people think about it, and give valid reasons.

My gut is that it doesn't really matter, but it would probably be easier to keep them separate from the CSS. I've seen several projects with hundreds of components and the CSS layout has never been the pain point with any of them.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
If someone was gonna say to me, make this themeable, the file locations would be the least of my concerns. Good variables for single points of control and controlling specificity effectively (using BEM or something like that), is far more important for that kind of thing in my mind. That said though, our projects err towards keeping css per component in with the Javascript that renders it, because we believe the separation doesn't exist, given the CSS depends on either the HTML structure (if it's bad CSS), or the HTML classes in order to bind to the component. Separating the files doesn't separate their relationship.

If their sass files are actually binding to the component with very specific classes then there really should be no problem, but if the issue is they took a dump over specificity, well, you've got a lot of work ahead of you no matter where you put the sass.

Shayl
Apr 11, 2007

Helicity posted:


You want to theme one day. You're also the person that is stuck with this code. Do whatever is more maintainable and allows you to pivot quickly. Write your apps so they're easy to be strangled: https://www.martinfowler.com/bliki/StranglerApplication.html

...

My gut is that it doesn't really matter, but it would probably be easier to keep them separate from the CSS. I've seen several projects with hundreds of components and the CSS layout has never been the pain point with any of them.

I think this is why my manager doesn't have a strong opinion, where it goes doesn't matter that much to him, and I did this to make it easier for me, the person almost 100% responsible for it, to maintain and improve. I'm the only person with design background in the group and probably the only one who actually tries to maintain the visual style guide given to us.

Maluco Marinero posted:

If someone was gonna say to me, make this themeable, the file locations would be the least of my concerns. Good variables for single points of control and controlling specificity effectively (using BEM or something like that), is far more important for that kind of thing in my mind. That said though, our projects err towards keeping css per component in with the Javascript that renders it, because we believe the separation doesn't exist, given the CSS depends on either the HTML structure (if it's bad CSS), or the HTML classes in order to bind to the component. Separating the files doesn't separate their relationship.

If their sass files are actually binding to the component with very specific classes then there really should be no problem, but if the issue is they took a dump over specificity, well, you've got a lot of work ahead of you no matter where you put the sass.

Some bind to the component, some don't, its a bit all over the place (the way components were used wrong in the early part of the project is part of our technical debt). Heck, the reason I decided to get the files all in one place was so I could actually look at them from a high level and start to plan out what to do to make things more consistent with good variables and other things. (We're like, half BEM namespace and half bullshit td > td > td bla bla garbage)

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

Shayl posted:

I think this is why my manager doesn't have a strong opinion, where it goes doesn't matter that much to him, and I did this to make it easier for me, the person almost 100% responsible for it, to maintain and improve. I'm the only person with design background in the group and probably the only one who actually tries to maintain the visual style guide given to us.

The modular approach is nice if multiple developers are contributing to the styles. But if there is a more clear separation of developer vs designer, then I think it makes perfect sense to have a set styles folder with your own layout. And as Helicity said, if you are the main contributor, then do what you think it in your bests interests. Even if their way IS objectively 'better', there is value in YOU being able to work effectively, and this has to be taken into consideration and balanced. If they aren't actually going to be doing much style work, they have little leg to stand on in saying how it should be laid out.

I personally hate doing CSS work, so I go out of my way (within reason) to make the designers happy in how they want to structure things so I don't have to touch it.

Shayl
Apr 11, 2007

Skandranon posted:

The modular approach is nice if multiple developers are contributing to the styles. But if there is a more clear separation of developer vs designer, then I think it makes perfect sense to have a set styles folder with your own layout. And as Helicity said, if you are the main contributor, then do what you think it in your bests interests. Even if their way IS objectively 'better', there is value in YOU being able to work effectively, and this has to be taken into consideration and balanced. If they aren't actually going to be doing much style work, they have little leg to stand on in saying how it should be laid out.

I personally hate doing CSS work, so I go out of my way (within reason) to make the designers happy in how they want to structure things so I don't have to touch it.

Yep, I was literally hired because all the devs hate CSS and I like it and have a lot of experience with it. None of them have written any CSS for months.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Shayl posted:

Yep, I was literally hired because all the devs hate CSS and I like it and have a lot of experience with it. None of them have written any CSS for months.

Yep, do what's best for you in that environment. Honestly I feel like with CSS, otherwise good programmers seem to make absolutely brain-dead lower tier mistakes. Like, the specificity is a CSS thing, but then stuff like good mixins to reduce repetition and variables to reduce magic numbers to single points of control never seems to occur to people properly when working a design system.

It feels like you've got the right approach though, you need to audit before you figure out what to put in it's place. Honestly CSS doesn't take that long to write, sometimes even a rewrite is the best way to unfuck a CSS system.

Plavski
Feb 1, 2006

I could be a revolutionary
You're the one who's going to deal with them, so you make the call. You're the professional CSS guy, you get your respect!

Personally, I wrap my scss up next to my ts for compartmentalised goodness. I then uss SASS's programmatic loveliness to keep a central theme in one place and distribute the values out. I modelled it on Semantic-UI's theming structure: https://semantic-ui.com/usage/theming.html

Shayl
Apr 11, 2007

Plavski posted:

You're the one who's going to deal with them, so you make the call. You're the professional CSS guy, you get your respect!

Personally, I wrap my scss up next to my ts for compartmentalised goodness. I then uss SASS's programmatic loveliness to keep a central theme in one place and distribute the values out. I modelled it on Semantic-UI's theming structure: https://semantic-ui.com/usage/theming.html

Thanks for this, I was looking for a good example of how I wanted to do theming for this project, and someone else here also mentioned Semantic UI.

Plavski
Feb 1, 2006

I could be a revolutionary

Shayl posted:

Thanks for this, I was looking for a good example of how I wanted to do theming for this project, and someone else here also mentioned Semantic UI.

Note that if you're going the SASS route, you should probably read up on the issues Semantic has with SASS: https://github.com/Semantic-Org/Semantic-UI/issues/1147

The issue is that SASS doesn't support dynamic compilation based on variables in import strings, so theming by URL is out. It's why they use LESS. Not really an issue for us as themes aren't on our roadmap for a couple of years, and hopefully by that time SASS will have unfucked itself. Important to know tho, and I'd recommend checking out Bootstrap and Foundation for the way they use SASS and handle themes too.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Plavski posted:

Note that if you're going the SASS route, you should probably read up on the issues Semantic has with SASS: https://github.com/Semantic-Org/Semantic-UI/issues/1147

The issue is that SASS doesn't support dynamic compilation based on variables in import strings, so theming by URL is out. It's why they use LESS. Not really an issue for us as themes aren't on our roadmap for a couple of years, and hopefully by that time SASS will have unfucked itself. Important to know tho, and I'd recommend checking out Bootstrap and Foundation for the way they use SASS and handle themes too.

Why not generate all of them up-front as part of your build/deploy step by pointing SASS at a file that sets colors+measurements and includes the generic SASS files?

huhu
Feb 24, 2006
I'm running a Flask website that has a form that queries all images in a folder, and the corresponding thumbnails folder, on the server given a specific date range. I was originally planning to just put this into the front end with a JS LazyLoading script. However, there could be a thousand images to display and all the HTML that surrounds the image is making the page really long. I feel like I'm almost there with LazyLoading. Any thoughts?

Plavski
Feb 1, 2006

I could be a revolutionary

Munkeymon posted:

Why not generate all of them up-front as part of your build/deploy step by pointing SASS at a file that sets colors+measurements and includes the generic SASS files?

That's what we do. Our component scss is inline with our ts so developers working on them can just use their own little bit of scoped css without worrying about affecting anything else. Our gulp scripts scoop it all up and compile it all with the top level variables and dump out the css that webpack lumps together alongside Aurelia.

I quite like that pattern and picked it up playing around with Semantic. Their LESS situation allows them to do dynamic compilation with themenames in the *.less files. SASS won't let you do that easily, so that's why we're hardcoding everything to a default theme for the time being. I imagine when expansive theming bubbles up off the backlog, we'll either do it in SASS's (hopefully new) native import shenanigans, or just use mixins.

Our graphic designer is often too busy loving around with Framer and Sketch to get down to the nitty gritty of CSS, so it's left to the devs instead. Not having a top-level one-stop-shop for everything makes it easier for us to parcel out work and not tread on each others toes, but I can't help feeling that one day our art guy is gonna get really annoyed that he has to think to find out where something is styled.

lunar detritus
May 6, 2009


I'm having a problem with how determining what could be a component in a Rails + Vue app. The app has two dynamic sidebars, a couple of info bars, etc, and it all comes from a server-rendered html.erb. A lot of components have "inline-template" so it looks like a mess but I'm not sure moving a form outside the template where it's used makes sense. Anyone else doing this kind of mix?

Count Thrashula
Jun 1, 2003

Death is nothing compared to vindication.
Buglord
Is there a starting point that people use for React projects? Or do you tend to roll your own backend + webpack + Babel + whatever?

Just getting to Hello World in React is such a pain in the rear end to get working. I should save a template some day as a starting point.

Adbot
ADBOT LOVES YOU

HaB
Jan 5, 2001

What are the odds?
K so here's a general discussion topic, as I am looking for opinions on how to accomplish something like this.

So last place I worked had a configuration service which was call whenever the web app was bootstrapping, and it would return a list of feature flags for whatever environment you were running on. So dev.config.json for dev, qa.config.json for QA, etc.

The Pros were:

- code, assuming it's working is merged into all branches: dev, qa, staging, prod, etc.
- if a feature flag is turned off - that code isn't available. (can be done via routing, or even just checking the flags directly in code.)
- when a feature is finally complete a "release" is merely turning on the feature flag
- regression testing becomes a lot simpler, because the code in pre-prod say - isn't any different from code in qa. You can turn flags on and off for each environment.
- you stop thinking as a "release" as an "arbitrary group of features released on an equally arbitrary date" and more of as "feature releases"
- a rollback (if needed) simply consists of turning the flag back off until the issue can be addressed at a lower environment.
- no need to maintain something like a production branch vs a dev branch. Everything is merged - just gated off behind flags. Dev would probably have all flags enabled. Prod would have a subset.]
- forces you to think of your features in very modular terms - since you have to encapsulate well to gate off something behind a feature flag
- can "release" often since they are WAY smaller and relatively painless.

Cons:

- this did take a LOT of effort to get setup and working, and most of that was done before I got there. This means I am likely even now WAY underestimating the LOE required.
- requires a pretty solid bootstrapping process, and appropriate failover paths in case for some reason the app can't hit the config server (default config? Just an error message saying the app is unavailable?)
- murky waters when it comes to something like: edge case code that might only be used in one place which were hung off of some common object somewhere because there wasn't a better place - or someone was too lazy to make it its own module like they should have, and now the module it's hanging off of needs to be gated off but you can't because of this one corner case, etc.

So....has anyone here implemented anything similar to this? I suppose our eventual goal is something approaching continuous integration and this seemed like a decent interim solution.

I have worked ONE place that did CI - releases every day at 10am and 3pm. If you missed one train you just got on the next - and it was SO low-pressure it was amazing. But the way that app was designed was pretty much tailor made for that scenario, so that seems a bit pie-in-the-sky for this project. But I'd like to get to somewhere better than "pick a date X amount of time in the future - see how many things we can reasonably (and sometimes not so reasonably) stuff into the codebase before then - call it a release"

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply