Conversation
|
This is meant as a starting point for us to have a discussion around how this should work moving forward. I've been trying to keep the UI developers in the loop as we developed the BTR app, so this is mostly an implementation based on their feedback. Let me know what you guys think. |
There was a problem hiding this comment.
This branch is called "hybrid-apps", but we're talking about android here. Do we want to make this generic and call it hybrid, or are we wanting a separate file for iOS?
There was a problem hiding this comment.
Also, I know we did this because it was the fastest way to get app-specific changes, but I just want to make sure, is the consensus to have a separate file for different platforms as our long term solution?
There was a problem hiding this comment.
Well it seems like an efficient way to utilize the cascade and keep the different projects somewhat separate. I only had android.css in there to illustrate an example, I'll put iOS in there as well to avoid any confusion.
There was a problem hiding this comment.
This directory structure makes broad sense to me. We may want to call the directories app-{platform}, e.g. app-android/ so they group in lists. If so stylesheets should probably be called app-android.scss etc.
Whether or not to go with a single app stylesheet or do separate ones for each app probably revolves around maintenance and business expectations. Since we’re selling consistency across web and apps as a key benefit and differentiator, clients probably shouldn’t expect to be able to have radically different builds across native platforms… So that leads me to think that a single directory for app styles /might/ be the way to go, at least as a default. If clients expect more than a few teaks between apps, then separate stylesheets per app makes more sense, trading off code isolation against additional maintenance.
There was a problem hiding this comment.
I guess the thing I'm thinking about is, if you were to start fresh, would you really want separate css files for different platforms? For example, if you're building a brand new responsive site - AFAIK it's not a recommended practice to have separate css files for say, desktop vs mobile. Or for iOS Web vs Android Web. So why are we considering it for apps? What makes apps so special?
The only thing I can think of us that it's easier to have separate files when building off an existing mobify.js/adaptive.js sites, because then you don't need to worry as much about how you are effecting the mobile site.
There was a problem hiding this comment.
@ry5n I agree with the naming convention change - that makes sense for sure.
@shawn, one of the big reason we went this way with a separate stylesheet for OS was for the sake of performance. We can keep the android styles out of the regular stylesheet served to websites, keeping the file size down to a minimum, while also minimizing the stylesheets served to native webviews. And @ry5n, Im not sure what we're selling is necessarily consistency among platforms, more so the ability to manage all experiences from one place. I think having very similar experiences across platforms isn't something we should be shooting for. Having separate style sheets for each OS would give us the flexibility to be as OS-specific in our interface design as we want.
There was a problem hiding this comment.
I'm not @shawn, that random lucky person with a great name will randomly be added to this convo :)
So, let's talk performance here for a second. Looking at what we have today in the BTR app, we have 9 new files introduced. Looking at these files, they are actually quite small. I'm pretty sure if we added them up and minified them, it would be under 1KB. This actually makes sense considering the differences between the smartphone and app (style wise) are quite minimal.
A 1KB difference will barely make a difference in load times, so I'm not convinced that it's worth the added complexity. For me right now, I feel like the only reason it would make sense to have a separate file is if it reduced complexity.
I'd also like to bring up my previous point regarding the fact that in responsive sites, you don't have different CSS for different platforms. Again, if we're not splitting things up for performance sake by having separate files on desktop vs mobile, then why would we do things differently for apps? What makes the app vs web argument any different from the desktop vs mobile argument?
Changed the scope of the best practices to only be for legacy projects. Also changed the structure to include all of the web styles on any app.css.
|
So I've left this PR as an more-or-less established way of handling older projects like our current BTR implementation. I have also opened an issue regarding best practices for platform styling on new Mobify projects here at https://github.com/mobify/mobify-code-style/issues/40 |
|
I wanted the discussion about new projects as an issue because I didnt think the repo itself isn't the best place to put things that are still just ideas. However, in the interest of keeping all this discussion in one place I added it in anyway. We know what we need to think about and should couch this until we have a new project to work on. |
There was a problem hiding this comment.
Maybe a link to some internal documentation here.
Adjust the SCSS comments in the example stylesheet to use standard Mobify conventions.
|
I made an adjustment on the example stylesheet by adjusting the SCSS comments to follow Mobify standard convention block comment format. I did so under the assumption that this type of work will be following Customer Success' style of SCSS development, as opposed to the Product Team's. If that's not necessarily the case, then I can revert. |
There was a problem hiding this comment.
Shouldn't this say "Structuring App Styles For A New Mobile Site" or something to that effect?
|
Looks good @jeffkamo |
|
Just popping in to take a look now. Great start. A few questions, which may have already been discussed in the outdated diffs:
|
|
Seems like this never got merged... I see that there are some comments, but I think something is better then nothing. Merging! |
6 participants
Including CSS best practices for Hybrid App projects
Status: Up For Review
Reviewers: @kpeatt @rosshojo @jeffkamo @mobifydave @jansepar
JIRA: https://mobify.atlassian.net/browse/GOLD-1164
Changes