salcode / bootstrap-genesis

WordPress Genesis Child Theme setup to use Bootstrap, Sass, and Grunt
MIT License
183 stars 63 forks source link

Upgrade to Bootstrap 4 #167

Closed ClintonGallagher closed 7 years ago

ClintonGallagher commented 7 years ago

Upgrading the bootstrap-genesis child theme to Bootstrap 4 now will make it easier to upgrade the current alpha than the versions now in the child theme. Hope it is under consideration.

salcode commented 7 years ago

Thanks @ClintonGallagher for opening this question. I've had some offline discussions about Bootstrap 4 but exploring this topic here will be helpful.

My Philosophy

Overall, I am generally slow to adopt new technologies because I find the gains don't outweigh the cost of losing support on older browsers (e.g. I was slow to upgrade from 3.2.x). I don't anticipate moving to Bootstrap 4 until it has a stable release (and even then not necessarily right away).

If you or anyone else wants Bootstrap 4 support now, you're welcome to fork this repo as a starting point for your own repo (or as a bootstrap-4 branch on this repo).

I don't see making the move to Bootstrap 4 alpha now as reducing any work overall.

Ultimately, I'm sure I'll move this theme to Bootstrap 4 but the question is when.

Browser Support

You can view the Bootstrap 4 Browser Support but the most impactful factor for me at this point is the IE 10+ requirement. There was lots of conversation about dropping IE 9 support and going full flexbox.

In regards to IE9, the Bootstrap 4 site says

If you require IE8-9 support, use Bootstrap 3. It’s the most stable version of our code and is still supported by our team for critical bugfixes and documentation changes. However, no new features will be added to it.

How Bad Is It in IE9?

When I moved to Bootstrap 3.3, I gave up IE 8 looking good (generally everything displayed as if on mobile regardless of screen width). Despite not looking good IE 8 was still usable.

Loading Bootstrap 4 in IE 9 on my virtual machine, the first thing I notice is the nav is missing on screens beyond a certain width.

screenshot 2017-02-07 16 13 13 screenshot 2017-02-07 16 13 30

On screens beyond a certain width the content is also broken

screenshot 2017-02-07 16 15 40

So by default, we seem to be looking at hard dropping IE 9 if we move to Bootstrap 4.

Do we need IE 9 Support?

I'd argue that Bootstrap 3.3.x is still usable in IE 8 (not great but usable), so we'll be losing that as well.

IE9 Market Share

Looking at https://analytics.wikimedia.org/dashboards/browsers/#all-sites-by-browser/browser-family-and-major-hierarchical-view

screenshot 2017-02-07 16 26 01 screenshot 2017-02-07 16 26 04

I'm seeing a combined marketshare of 6.8% for IE 8 & 9 combined.

My Conclusion 2017-02-07

At this point, based on how broken Bootstrap 4 is in IE 9 (and IE 8) and their marketshare, I don't anticipate moving to Bootstrap 4 in the immediate future.

ClintonGallagher commented 7 years ago

A compelling argument but becoming increasingly obsolete. Using the stats via the link you supplied shows IE9 has slipped to 0.78% and nobody I know of who runs a business cares about IE8. The general consensus amongst most developers seems to suggest we are dropping support for IE9 as well.

The rationale being those types of users who refuse to update their browsers are generally pariahs that never buy anything or always demanding something with no benefit in return. They are not worth the expense of enjoying the benefits of not moving forward.

Checking caniuse.com shows wide support for flex which is the real benefit of moving to Bootstap 4. Saas gets compiled to CSS so that's not an issue and CSS Grid is not ready at all. Honestly, it may not be a popular choice anymore but I consider wasting time on browsers obsolete and not worth the time and effort. I rely on caniuse and the modern browsers which update themselves.

As for me, I'm going to tear into your child theme anyway as there has to be a real learning experience for me. The same argument I put forth applies to build tools and the generally accepted assertion that Gulp was made obsolete by Grunt which has been made obsolete by npm as a build tool. If I fork that will be the reason and I rationalize moving forward based on ubiquity of Bootstrap and npm both of which provide us with the benefit of the learn once use everywhere philosophy. Thanks for your consideration and response.

GaryJones commented 7 years ago

generally accepted assertion that Gulp was made obsolete by Grunt

I think you'll find that's back to front :-)

salcode commented 7 years ago

Browser Usage

Hmm, you seem to be right on the statistics - I'm not sure how I got the numbers I was getting. This is definitely worth considering and I can see an individual deciding not to support these browsers.

screenshot 2017-02-08 09 30 33

screenshot 2017-02-08 09 30 26

Graceful Degradation

I see a large difference between supporting a browser and having code that degrades gracefully. With an outdated browser I much prefer the site is still usable, even if it looks ugly.

Bootstrap 4 (at least currently) doesn't seem to degrade gracefully (as I mentioned the Bootstrap 4 site seems unusable in IE 9). I see as a problem and will most like delay my own adoption of BS4 (which in turn affects this project).

Grunt / Gulp / npm

Just to clarify, as Gary pointed out gulp is generally considered superior to grunt (and eventually this theme may move to gulp or another of the many task runners). Both grunt and gulp use npm to pull in their dependencies.

Next Steps

I think your digging into this theme is a great plan. Once you wrap your head around how it uses Genesis's filters to modify the classes in the markup, I imagine the same technique can be applied to ready the theme for Bootstrap 4.

ClintonGallagher commented 7 years ago

I cannot start yet. I need a new IDE with a PHP debugger to start meaningful WordPress development. I've installed NetBeans but its not yet functioning. I may have to spend + buy into PHPStorm. Visual Studio requires an $80 extension to use PHP that requires additional dependencies for debugging PHP. If I have to spend that and pull out more hair I may as well use a different IDE that supports WordPress development OOTB. Opinions?

salcode commented 7 years ago

@ClintonGallagher I have a post with some of my thoughts on editors for WordPress development

I'm going to mark this issue closed but if you have any other information you want to add on this topic, we can re-open it. Thanks for helping correct me on the IE 9 marketshare statistics 👍 .