Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Amend browser support policy for Safari #984

Merged
merged 11 commits into from
Feb 7, 2024
Merged

Amend browser support policy for Safari #984

Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1401660
initial
NullVoxPopuli Nov 2, 2023
d51d2d4
Update frontmatter
NullVoxPopuli Nov 2, 2023
cbfe861
specify
NullVoxPopuli Nov 2, 2023
76611b6
Apply suggestions from code review
achambers Nov 3, 2023
53c4701
Update safari to be evergreen
NullVoxPopuli Feb 2, 2024
39b5110
Add link to old RFC
NullVoxPopuli Feb 2, 2024
3eeec82
Update 0984-drop-safari-less-than-14.md
NullVoxPopuli Feb 2, 2024
82cbd16
Update text/0984-drop-safari-less-than-14.md
NullVoxPopuli Feb 5, 2024
9ef506c
Update text/0984-drop-safari-less-than-14.md
NullVoxPopuli Feb 6, 2024
573b0fa
Rename 0984-drop-safari-less-than-14.md to 0984-update-browser-suppor…
achambers Feb 7, 2024
bdeb2d0
Merge branch 'master' into safari-support
achambers Feb 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
318 changes: 318 additions & 0 deletions text/0984-drop-safari-less-than-14.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,318 @@
---
achambers marked this conversation as resolved.
Show resolved Hide resolved
stage: accepted
start-date: 2023-11-02T15:40:00.000Z
release-date: # In format YYYY-MM-DDT00:00:00.000Z
release-versions:
teams: # delete teams that aren't relevant
- cli
- data
- framework
- learning
- steering
- typescript
prs:
accepted: https://github.com/emberjs/rfcs/pull/984
project-link:
suite:
---


<!---
Directions for above:

stage: Leave as is
start-date: Fill in with today's date, 2032-12-01T00:00:00.000Z
release-date: Leave as is
release-versions: Leave as is
teams: Include only the [team(s)](README.md#relevant-teams) for which this RFC applies
prs:
accepted: Fill this in with the URL for the Proposal RFC PR
project-link: Leave as is
suite: Leave as is
-->

# Treat Safari as an Evergreen Browser

## Summary
NullVoxPopuli marked this conversation as resolved.
Show resolved Hide resolved
NullVoxPopuli marked this conversation as resolved.
Show resolved Hide resolved

Safari's release cadence has increased as well as relevant-device compatibilty. This RFC proposes an amendment to the [browser support](https://emberjs.com/browser-support/) policy (introduced in [RFC#685](https://rfcs.emberjs.com/id/0685-new-browser-support-policy)) to treat Safari the same as Chrome and FireFox for Desktop and Mobile devices.

## Motivation

Private class fields transpilation has a big impact on the kind of code emitted. We want to transpile as little as possible -- ideally nothing, and let app users decide if they need to transpile further.
NullVoxPopuli marked this conversation as resolved.
Show resolved Hide resolved

## Detailed design

Ember v6 will not support Safari < v14.1
NullVoxPopuli marked this conversation as resolved.
Show resolved Hide resolved


## How we teach this

### A new browser support policy

Diff:
- remove non-evergreen section
- place Safari under Evergreen Desktop and Evergreen Mobile
- actual numbers subject to change as time passes, this is an example

```diff
{{page-title "Browser Support"}}
<div class="container layout">
<section aria-labelledby="section-browser-support-policy">
<h1 id="section-browser-support-policy">Ember.js Browser Support Policy</h1>


+ <h2>Ember 6.0.0</h2>
+
+ <p>
+ In Ember 6.0.0, the framework supports the following major browsers:
+ </p>
+
+ <ul class="list-unstyled layout my-3">
+ <EsCard class="lg:col-2">
+ <div class="text-center text-md">Desktop</div>
+ <ul>
+ <li>Google Chrome >= 103</li>
+ <li>Mozilla Firefox >= 102</li>
+ <li>Microsoft Edge >= 110</li>
+ <li>Safari >= 16.4</li>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actual numbers available here: https://browsersl.ist/#q=%3E+0.25%25+and+not+dead

+ </ul>
+ </EsCard>
+ <EsCard class="lg:col-2">
+ <div class="text-center text-md">Mobile</div>
+ <ul>
+ <li>Google Chrome >= 112</li>
+ <li>Mozilla Firefox >= 110</li>
+ <li>Safari >= 16.4</li>
+ </ul>
+ </EsCard>
+ <EsCard class="lg:col-2">
+ <div class="text-center text-md">Testing</div>
+ <ul>
+ <li>Google Chrome</li>
+ <li>Mozilla Firefox</li>
+ </ul>
+ </EsCard>
+ </ul>

<h2>Ember 5.0.0</h2>

<p>
In Ember 5.0.0, the framework supports the following major browsers:
</p>

<ul class="list-unstyled layout my-3">
<EsCard class="lg:col-2">
<div class="text-center text-md">Desktop</div>
<ul>
<li>Google Chrome >= 103</li>
<li>Mozilla Firefox >= 102</li>
<li>Microsoft Edge >= 110</li>
<li>Safari >= 12</li>
</ul>
</EsCard>
<EsCard class="lg:col-2">
<div class="text-center text-md">Mobile</div>
<ul>
<li>Google Chrome >= 112</li>
<li>Mozilla Firefox >= 110</li>
<li>Safari >= 12</li>
</ul>
</EsCard>
<EsCard class="lg:col-2">
<div class="text-center text-md">Testing</div>
<ul>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
</ul>
</EsCard>
</ul>

<h2>Ember 4.0.0</h2>

<p>
In Ember 4.0.0, the framework supports the following major browsers:
</p>

<ul class="list-unstyled layout my-3">
<EsCard class="lg:col-2">
<div class="text-center text-md">Desktop</div>
<ul>
<li>Google Chrome >= 92</li>
<li>Mozilla Firefox >= 91</li>
<li>Microsoft Edge >= 93</li>
<li>Safari >= 12</li>
</ul>
</EsCard>
<EsCard class="lg:col-2">
<div class="text-center text-md">Mobile</div>
<ul>
<li>Chrome Android >= 96</li>
<li>Firefox Android >= 94</li>
<li>Safari >= 12</li>
</ul>
</EsCard>
<EsCard class="lg:col-2">
<div class="text-center text-md">Testing</div>
<ul>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
</ul>
</EsCard>
</ul>

<h2>Ember 3.0.0</h2>

<p>
Ember currently targets Internet Explorer 11 as a baseline for support. This means that generally all modern and relatively recent browsers will work with Ember, since browsers are backwards compatible by design. Ember runs tests against the latest desktop versions of the following browsers:
</p>

<div class="layout my-3">
<div class="card lg:col-2 lg:start-3">
<div class="card__content">
<ul>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
<li>Microsoft Edge</li>
<li>Internet Explorer 11</li>
<li>Safari</li>
</ul>
</div>
</div>
</div>

<p>
Other browsers may work with Ember.js, but are not explicitly supported. If you
would like to add support for a new browser, please <a href="https://github.com/emberjs/rfcs">submit an RFC or RFC issue for discussion</a>!
</p>


<p>
We determine support on a browser-by-browser basis. Browsers are categorized as
either <em>evergreen</em> or <em>non-evergreen</em>. The categorization is as follows:
</p>

<h3 class="text-center">Evergreen</h3>

<ul class="list-unstyled layout my-3">
<EsCard class="lg:col-2">
<div class="text-center text-md">Desktop</div>
<ul>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
<li>Microsoft Edge</li>
+ <li>Safari</li>
</ul>
</EsCard>
<EsCard class="lg:col-2">
<div class="text-center text-md">Mobile</div>
<ul>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
+ <li>Safari</li>
</ul>
</EsCard>
<EsCard class="lg:col-2">
<div class="text-center text-md">Testing</div>
<ul>
<li>Google Chrome</li>
<li>Mozilla Firefox</li>
</ul>
</EsCard>
</ul>

- <h3 class="text-center">Non-evergreen</h3>
-
- <div class="layout">
- <ul class="list-unstyled layout lg:col-4 lg:start-2 my-3">
- <EsCard class="lg:col-3">
- <div class="text-center text-md">Desktop</div>
- <ul>
- <li>Safari</li>
- </ul>
- </EsCard>
- <EsCard class="lg:col-3">
- <div class="text-center text-md">Mobile</div>
- <ul>
- <li>Safari</li>
- </ul>
- </EsCard>
- </ul>
- </div>

<p>
For evergreen browsers, the minimum version of the browser that we support is
determined at the time of every minor release, following this formula:
</p>

<div class="layout my-3">
<div class="card">
<div class="card__content">
<p>Whichever browser version is greater/more recent out of:</p>

<ol>
<li>
The lowest/least recent version that fulfills any one of these properties:
<ul>
<li>It is the latest version of the browser.</li>
<li>It is the latest LTS/extended support version of the browser (such as Firefox ESR).</li>
<li>It has at least <em>0.25%</em> of global marketshare usage across mobile and
desktop, based on <a href="https://gs.statcounter.com/">statcounter</a>.</li>
</ul>
</li>
<li>
The minimum version supported in the previous release
</li>
</ol>
</div>
</div>
</div>

<p>
To simplify, the supported version either moves forward or stays the same for
each release based on overall usage and LTS/current release versions.
</p>

<p>
For non-evergreen browsers, support is locked at a specific major version, and
we support all major versions above that version.
+ However, all supported browsers are considered ever green.
</p>

- <div class="layout">
- <ul class="list-unstyled layout lg:col-4 lg:start-2 my-3">
- <EsCard class="lg:col-3">
- <div class="text-center text-md">Desktop</div>
- <ul>
- <li>Safari: 12</li>
- </ul>
- </EsCard>
- <EsCard class="lg:col-3">
- <div class="text-center text-md">Mobile</div>
- <ul>
- <li>Safari: 12</li>
- </ul>
- </EsCard>
- </ul>
- </div>

Within a version of a browser, we only support the most recent patch release.
</section>
</div>
```

## Drawbacks

More calculations for us to do when determining browser support for a particular version of ember.
(based on the algorithm described in

> Whichever browser version is greater/more recent out of:

Copy link
Contributor Author

@NullVoxPopuli NullVoxPopuli Feb 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the choose-the-versions algo,

Whichever browser version is greater/more recent out of:

  1. The lowest/least recent version that fulfills any one of these properties:
      - It is the latest version of the browser.
      - It is the latest LTS/extended support version of the browser (such as Firefox ESR).
      - It has at least 0.25% of global marketshare usage across mobile and desktop, based on [statcounter](https://gs.statcounter.com/).
  2. The minimum version supported in the previous release

we'd have (if we needed to decide on numbers today, Feb 2nd, from: https://browsersl.ist/#q=%3E0.25%25%2C+not+dead)

Desktop

  • Safari: 15.6+
  • Chrome: 103+
  • FireFox: 115+ (it seems firefox users are waaay better at staying up to date than Chrome or Safari)

iOS

  • Safari 12.2+ (WHY?!)

Android

  • Chrome 121+
  • FireFox 122+

So, while initial motivations are to use the https://github.com/ef4/decorator-transforms plugin instead of the 6 babel plugins all apps need, I don't think we can decide that at this time.

But with the evergreen policy, hopefully this changes by the time ember 6.0 comes around.

For another RFC,
it may be worth giving users the option to choose their support, and we can configure their plugins accordingly.

  • ember itself, has to support this >=0.25% global market share thing.

  • apps could be more aggressive tho.
    If they were to support >1%, not dead: https://browsersl.ist/#q=%3E1%25%2C+not+dead
    their ranges would look something like this:
    Desktop

    • Chrome 109+
    • FireFox 120+
    • Safari 17.1+

    Mobile

    • Safari 16.6+

)


## Alternatives


## Unresolved questions

Loading