Overview
As with our use of HTML, rendered markup needs to serve more than one purpose, and we do this using Javascript logic. The Javascript language has evolved over the years with more features and conveniences being made available at a very fast pace. In order to make use of these language enhancements while also respecting browser compatibility, we manipulate our Javascript by running it through the Babel transpiler for target legacy browsers, and adding specific language feature polyfills where they make a difference to the developer experience of creating composable components.
...
| Code Block | ||
|---|---|---|
| ||
<template>
<Loader :loading="!ping && $apollo.loading">
<div v-if="ping">{{ ping.status }}</div>
</Loader>
</template>
<script>
import Loader from 'tui/components/loader/Loader';
import statusQuery from 'totara_webapi/graphql/status_nosession';
export default {
components: {
Loader,
},
apollo: {
ping: {
query: statusQuery,
update: data => data.totara_webapi_status,
},
},
};
</script> |
Tips and known limitations
IE 11
Totara 17+ does not support Internet Explorer.
Totara 16 and earlier supports IE 11, but there are some limitations to be aware of.
Polyfills
We In Totara 13-16, we use Babel to compile modern (ES6 and later) JavaScript syntax to ES5 in a separate bundle that is served to IE 11. This only covers syntax and language features, so it's important to check the browser support for any JS APIs you use to make sure they are available in the supported browsers or polyfilled (for IE11).
...
...
Array.find
...
IE 11 limitations
...
IE 11 limitations
In Totara 16 and earlier, there are some limitations to be aware of when writing code that needs to work with IE 11.
...
IE 11 lacks support for executing JS in micro-tasks, which can result in slightly degraded performance of asynchronous code and updates to Vue components being delayed until after native events are processed. This is a platform-level feature that is not possible to polyfill or emulate.