The direction for AUI 8

,

Hi everybody! I wanted to take a moment to discuss our plans for a new major version of AUI.

The AUI 8 agenda

For AUI 8, we have a few areas of focus.

Doing these things will drive down the default and minimum page size. Less code means a faster page, thus a better user experience.

Updating dependency versions

AUI has been using old versions of its upstream dependencies for some time. A major version allows us to bump those versions and remove support from older ones.

In AUI 8, we will be:

  • Adding support for jQuery 3.x.
  • Dropping support for jQuery 1.x.
  • Bumping jQuery-UI to the latest version.
  • Bumping Skate.js to the latest version.
  • Bumping Backbone and Underscore to their latest versions.

Small and sensible by default

A major version is a good time to revisit the shape of the AUI library ā€“ how it ends up in a browser, and what you get by default. In AUI 8, we will be:

  • Re-evaluating what you get ā€œby defaultā€ when you load an entry point to AUI.
  • Splitting less-used pieces of AUI in to separate Node packages.
  • Updating our build tooling to better compile and optimise our code.

Eliminating dead code

Finally, a major version offers an opportunity for us to remove long-deprecated code.

  • As AUI supports IE 11+, we will be removing polyfills and other code that supports IE 10 and below.

The progress so far

Progress is being made on the ā€œnextā€ branch of AUI.

Development of the version is currently in alpha. The direction is set, but the specifics of what will land in the final version are not.

Depending on your feedback, much can change before the beta and final versions.

So far, the AUI team has:

  • Replaced the build pipeline with Webpack 4 and the atlassian-webresource-webpack-plugin. The move has allowed the team to use modern versions of code minifiers and optimisers, and paves the way for future improvements such as code splitting.
  • Re-evaluated and moved code out of initial entry points for the library.
    • The default entry point for AUI in P2 ā€“ the ā€œajsā€ web-resource ā€“ is 50% smaller than in 7.x.
  • Removed several dead code paths, such as polyfills for requestAnimationFrame, window.MouseEvent, and other things that are supported natively by IE 11+ and other evergreen browsers.
  • Bumped AUIā€™s version of jQuery-UI to v1.12.1 (up from v1.8).
  • Bumped Backbone to v1.3.3 (up from v1.0.0).
  • Bumped Underscore to v1.9.2 (up from `v1.5).

The breaking changes

With this version of AUI, there are a few significant areas of backwards-incompatible changes.

  • The minimum required version of jQuery is now 2.x, up from 1.7.2.
  • Backbone and Underscore are not added to window by AUI any more. If you depend on these libraries, you must pull in your own.
  • In P2 plugins, most components no longer load through the ā€œajsā€ web-resource; they must be explicitly added as a <dependency> in your own pluginā€™s <web-resource> definitions.

For consumers of AUIā€™s source, there are some significant file structure changes as well. Individual source files have moved around quite drastically.

  • AUI is now split in to several Node packages:
    • packages/core ā€“ contains the majority of AUIā€™s component source code
    • packages/docs ā€“ the documentation pages and website assets
    • packages/deprecated/* ā€“ extracted packages for code that AUI no longer uses
    • packages/iconfont ā€“ contains the Atlassian ADG icon assets and iconfont files
    • packages/soy ā€“ contains all soy templates to implement AUIā€™s HTML patterns
  • The individual ā€œbatchā€ JS and LESS files are gone. In their place are ā€œentryā€ files that pull in all necessary assets to make a given component work. These can be compiled via Webpack, Rollup, or Parcel.

The full changelist is incomplete, but the changelog on AUIā€™s ā€œnextā€ branch is being kept current.

A comprehensive upgrade guide will be published alongside the final version of AUI 8. In the meantime, you can read the guide in our preview builds of the AUI 8 documentation.

What isnā€™t changing

We will be leaving HTML patterns alone in AUI 8.0.

During the course of AUI 8.x development, some HTML patterns may be augmented and improved, but breaking changes to the HTML layer are not planned until AUI 9.

How to get the release

You can see all released versions of AUI listed here, including alpha and beta releases: @atlassian/aui - npm

If youā€™re using AUI through NPM, add the latest beta by running npm install --save @atlassian/aui@beta or yarn add @atlassian/aui@beta.

If youā€™re using AUI through an Atlassian product and testing your app via the AMPS plugin, you can bump to the latest beta version by adding AUI as a pluginArtifact in your AMPS plugin configuration:

<plugin>
  <groupId>com.atlassian.maven.plugins</groupId>
  <artifactId>maven-bamboo-plugin</artifactId>
  <version>${amps.version}</version>
  <extensions>true</extensions>
  <configuration>
    <pluginArtifacts>
      <pluginArtifact>
        <groupId>com.atlassian.aui</groupId>
        <artifactId>auiplugin</artifactId>
        <version>${aui.next.version}</version>
      </pluginArtifact>
    </pluginArtifacts>
  </configuration>
</plugin>

If you just want a ZIP of the files, you can find a list of AUI ZIP files on Atlassianā€™s public packages registry.

Where we want your input

We want your teams to succeed. This version of AUI is the first major version weā€™ve planned with backward-incompatible changes in some time, so we want to work with teams to get it right.

Weā€™re confident there is a reasonable upgrade path for consumers of the Atlassian P2 plugin for AUI. We are working with Atlassianā€™s Server product teams to identify and fix incompatibilities within their products. They will be aiming to ship AUI 8 in their next major versions, so there will be a stable set of UI components and web-resource dependencies across each.

Weā€™re less confident about what the community needs from the other AUI distribution options. If youā€™re using AUI in your projects today through NPM or the ZIP files, weā€™d love to hear from you.

Download the latest AUI 8 version and try it out in your project. If you encounter any issues with code not working that you expected to, let us know in the comments below.

If you have any questions, concerns, or feedback for us about any of this, add a comment below.

<3,
Daz.

8 Likes

Where do we download it? Is the following URL correct (I had to guess it)?

https://packages.atlassian.com/maven-public/com/atlassian/aui/aui-flat-pack/8.0.0-alpha.3/aui-flat-pack-8.0.0-alpha.3.zip

Ah, my apologies, I thought Iā€™d included the links :frowning:

Yeah @vit, thatā€™s the correct link to the flatpack.

Links to the three distributions:

Because itā€™s on NPM, it will also end up on CDNs like unpkg: UNPKG - @atlassian/aui

Do you plan to update or change AUI Restful Table (it is using backbone as far as I know)?

Hi @Holger,

RestfulTable wonā€™t change significantly in 8.0.0. Weā€™ll be bumping the versions of Backbone and Underscore that AUI ships with, so weā€™ve tested to ensure it works with the updated versions.

Weā€™ve also checked RestfulTable interops with jQuery 3 correctly ([AUI-4845] - Ecosystem Jira). A bump to jQuery 3 may affect how some data is serialised to prep for sending via AJAX because of its changes to $.param and $.fn.serialize.

During development of AUI 8.x, there are some other ā€œuntanglingā€ efforts that may happen for RestfulTable, such as:

Apart from those upgrades and changes, we havenā€™t got plans to overhaul how RestfulTable works. APIs of the component pieces of RestfulTable arenā€™t likely to change any time soon.

RestfulTableā€™s behaviours appear consistent with the changes in AUI 8, but the test cases and known usages Iā€™ve got access to are limited. If you have specific concerns, feel free to email me and we can figure out how to test for acceptance of your use-cases.

Great that you decouple ā€ždeleteā€œ button from dialog1! See also AUI-3953.

As a minor thing, maybe you would like to align background color of active row during ā€žcreateā€œ or ā€žeditā€œ with AUI design guidelines. And an explicit ā€žeditā€œ button per row would be nice.

Hi there, in our plugin we are using
<dependency>com.atlassian.auiplugin:aui-experimental-table-sortable</dependency>
and now with Jira 8 we have a error message
java.lang.IllegalStateException: Required plugin module com.atlassian.auiplugin:aui-experimental-table-sortable was either missing or disabled.
Did you remove the support to aui-experimental-table-sortable ?

Thank you
Dusan

Hi @dusan.spaic,

try using ā€˜com.atlassian.auiplugin:aui-table-sortableā€™ instead; this is AUIā€™s official web-resource key for the sortable table behaviour.

https://docs.atlassian.com/aui/latest/docs/sortable-table.html

Hi @daz
Yes now we must switch to ā€˜com.atlassian.auiplugin:aui-table-sortableā€™ in order to fix this error. Experimental is coming from AUI version 5.7 that was used with Jira 7.1 (our plugin was supposed to work with Jira 7.1)
I was just surprised that there are no traces of removing aui-experimental-table-sortable in your AUI change log (I can only see that ā€œaui-experimental-header-rotpā€ was removed).

Thanks for the feedback

Dusan

Ah, interesting. In AUI 8, we initially removed all of the web-resources with ā€œexperimentalā€ in their keys, since they all had non-experimental equivalents that had existed for a number of years. We then added some of these back as deprecated web-resources, as they were either depended upon by a large number of plugins, or specific products had not included the non-experimental equivalents for a long enough period of time.

It sounds like aui-experimental-table-sortable is one of the keys we should add back in as a deprecated web-resource to support a longer rollover period for Jira plugins. Iā€™ll add that in to the next beta release of AUI 8.

Thanks for the heads-up!

2 Likes

Hey everybody,

We released an AUI 8.0.0-beta-3 yesterday. This is essentially the final version: weā€™re expecting the only changes weā€™ll make now are documentation updates and important bug fixes. I updated the main post to list where you can find the various distributions, as well as the upgrade guide for AUI 8:

1 Like

Thank you for the clarification.

How do AUI and AtlasKit relate to each other? I ask because while most components look identical the visual feel of text fields seems different. There could be others but I didnā€™t go through the entire list of components to find differences.