⚡️ Introducing Custom UI: Static HTML/CSS/JS frontends on Forge

Atlassian Connect JS isn’t currently supported—but stay tuned, since we’re looking at ways we can reimagine its functionality to better fulfil the community’s requirements over the coming weeks and months (for example, APIs like Dialog may not be product-specific, so it’s the same API across all supported products).

Let us know if there’s anything else from AP you’re keen to get in your app :slight_smile:

5 Likes

Hi.
Can you create a jira or trello board where we could post our API requests to avoid duplicates?

Cheers
Przemyslaw

I’m also interested in learning about integration with AP or any equivalent. Besides calling methods like AP.Dialog, other common use for AP is retrieving context information from AP.context (i.e. in confluence the contentId and the spaceKey)

2 Likes

Absolutely, you can find the Forge-wide feedback/request board at FRGE on ecosystem.atlassian.net. I read every request.

1 Like

I’ve just run through the hello world Jira issue panel tutorial it worked great.

Immediate observations:

  • After i used forge tunnel the whole thing broke, unless I was using forge tunnel (no helpful log messages, just a graphql error about a missing environment) https://ecosystem.atlassian.net/browse/FRGE-163
  • Dev flow was a bit frustrating in the example because npm run build had to be run frequently, and then forge deploy which really slows down the experience
  • AP.request style API calls would be nice so that it isn’t necessary to proxy application api calls through a function
  • Other AP APIs might be useful, but i’ve not done anything particularly interesting with it yet. At the very least it would be good to trigger dialogs.

Hey @naiara,

Context information is available in the custom UI resolvers. If you do need this information in the UI itself, you can return it from the function. See the following example:

In your FaaS function:

resolver.define("example-key", ({ payload, context }) => {
  console.log(context);

  return { example: `Hello, ${payload.foo}!` };
});

In your custom UI:

import { invoke } from '@forge/bridge';

const getData = async () => {
  const result = await invoke('example-key', { foo: 'bar' });

  console.log(result);
}

If you have a use case that this doesn’t cover, don’t hesitate to reach out :slight_smile:

1 Like

Hey @jmort,

  • Regarding forge tunnel breaking, can I confirm you are on CLI version @forge/cli@0.24.0 or greater? You can check this by running forge --version and upgrade via npm i -g @forge/cli@latest.
  • We are aware of the current dev flow and will be improving it in future iterations of custom UI, any specific feedback on this is welcome!
  • With the AP.request calls, do you think this would still be an important thing for you if the dev loop did not require a build and deploy (i.e. faster)?

Thank you for taking the time to provide feedback!

hi @danielwinterw,
I’m using 0.24.0, after some time (I tried it the next day) everything worked fine again. (I haven’t tried to reproduce).

For me, dev flow should be similar to using webpack dev server, I should save and then changes should be live as fast as possible.

With AP.request, yes it would improve dev speed if we don’t have to keep deploying proxy functions, but also it adds unnecessary complexity and overhead to have to push everything through a proxy function. Something akin to AP.request (doesn’t have to be REST could be GraphQL) means that all the logic can stay in the same place and would improve the user experience as there are no unnecessary resolver functions being called.

1 Like

@jmort again, thank you for that feedback! I’ll take it back to the team :slight_smile:

What is the limit of bundle size? I just tried to embed a video which was blocked by the CSP, so if i want to use large assets they will have to be part of the bundle.

Unfortunately I cannot see the repository of the todo app, the new example with custom ui. Should that not be public or is it a mistake?

Hi Anna, the link should work now. Thanks for letting us know :slight_smile:

https://bitbucket.org/atlassian/todo-app-custom-ui

1 Like

Hey @jmort

See this page for the Forge platform limits. We have recently updated it with custom UI. https://developer.atlassian.com/platform/forge/platform-limits/

10MB is the max bundle size per resource currently, although if you have a use case that needs something higher then please let us know :slight_smile:

Since 10MB seems kinda like arbitrary - what’s the reasoning for it? (Because like @jmort - it’s quite easy to have large assets like videos because of other forge limitations). I’m also kinda concerned about the limitation of 1000 files (guess we can go back to css sprites).

Will we be able to point to our own cdn’s for our own assets once Forge leaves alpha?

2 Likes

@daniel thanks for providing that feedback :slight_smile:

You’re right, the limits imposed are currently arbitrary. To protect our platform, we need to impose upper bounds which is why this exists. We want to set the limits for GA based on the requirements from our developer community, so this kind of information is really valuable to us.

To help me understand a little more, do you think there is a reasonable limit that can be imposed, or do you think it varies significantly? We’d be happy to consider changing things based on feedback.

In terms of serving your own assets, we are currently considering this possibility. It may, however, mean that users need to consent to it as it can provide a means of data egress.

2 Likes

Well it really depends on the app and what libraries it’s using. One of my react based apps is around 350 files - and it’s not that advanced on the client side (it’s got some bells and whistles - but not that huge).

My suggestion would be to start with a “target” with the huge blinking sign with “we will change this depending on what we see” and then start measuring what people are doing… 'cause you give me a limit - I’ll come up with a way to work around it… :slight_smile:

That said - I would poll the vendor community with the more interesting apps on the client side and ask them about their apps. It would be good though for an explanation of what a bundle really is from you and how you see them being used…

(Oh - can you lower the App title to be 40 chars instead of 50? That way it matches the marketplace… :slight_smile: https://developer.atlassian.com/platform/marketplace/building-your-presence-on-marketplace/ )

1 Like

I don’t have any forge specific cases right now that would exceed the limits, but a number of our more complex apps would exceed both the 10mb and 1000 file limits. It is the kind of thing that would indicate that Forge isn’t ready for real apps, and we would hesitate to bet too much on it from a technical strategy perspective.

1 Like

Hi @jmort,

As mentioned, we are more than happy to look into increasing the limits. It definitely shouldn’t be an indication that Forge isn’t ready for real apps.

I’d love to hear what kind of bundle sizes you are working with in your more complex apps so that it can act as a data point for us.

@danielwinterw It’s far more important to think about real use cases instead of specific bundle sizes. @jmort mentioned one of them: embedding a video - for example as a part of onboarding experience.

An idea for You on how to discover those use cases: try to re-implement some of Confluence/Jira features as Forge apps.

As a data point, the FE build for one of our apps comes in at 20MB and several hundred files. The app consists of a SPA settings management app in a connect general page, several issue panels and glances built using AtlasKit. The bulk of the weight comes from Atlaskit and its dependencies along with assets and a large 3rd party library.

3 Likes