ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Closing JRACLOUD-68845 - Jira’s journey towards delightful web performance

Submitted by Hannes Obweger (@obweger) on Thursday, 3 October 2019


Preview video

Duration: 40 mins full talk

View proposal in schedule

Abstract

Over the past few years, technologies such as React and GraphQL have lifted frontend development to a new level; never before have we seen web applications so rich and powerful, all running in the browser. But with great power comes great responsibility: As easy it is to develop rich interactions on the client, as difficult it is to keep these interactions fast and performant. In this talk, we’ll share a number of lessons and techniques that the Jira Cloud team has been applying to get Jira’s new, React-based UI to the level of performance that our customers love and deserve. We’ll discuss how Atlassian thinks and measures web performance, and talk about the impact of JavaScript and CSS bundle sizes, Single Page Application (SPA) architectures, and Server Side Rendering (SSR).

Outline

These are the areas I plan to touch on:

  • Overview of Jira’s journey towards a modern, React-based tech stack: Timeline - where did we start, where are we now; from lipsticking, to an inside-out model, to an outside-in model.
  • A primer on web performance at Atlassian: Vertical vs. horizontal scaling; TTR vs. TTI; P50, P90, APDEX.
  • Server Side Rendering (SSR): How it works and why it works; the security implications of SSR; Atlassian’s patented SSR architecture.
  • Single Page Application (SPA) architectures: Full page load vs. SPA transitions; the “network effect” of an SPA and its implications; how to integrate legacy experiences into a fundamentally modern SPA.
  • Education and alignment: How can independent teams and engineers sustainably use a shared, limited resource such as the browser?
  • Up next: What are the upcoming trends and technologies that Atlassian is looking into?

Speaker bio

Hannes is the engineering manager responsible for Jira’s frontend platform, which provides the build and deployment infrastructure, dev tooling, and application architecture for Jira’s new, React-based UI. Today, the frontend platform powers a codebase of more than 1M LoC, with 400 individual contributors in total, and 200 contributors every month.

Links

Preview video

https://youtu.be/kHvKc7u78QI

Comments

  • Zainab Bawa (@zainabbawa) Reviewer a month ago

    Hello Hannes. Thank for an excellent rehearsal this morning. Recapping the feedback from today’s session:

    1. The flow of the presentation is very good. The problem statement followed by solutions was very well structured.
    2. The inside-outside and inside-in model was very valuable.
    3. The performance measurement can be fleshed since performance is a concern for developers, senior engineers and leaders.
    4. Add at least one slide on the specific model you used for SSR with React. This will be valuable to developers.
    5. Show screenshots of the progression in terms of the JIRA dashboard itself. This will help build relatability among participants.
    6. A big transition has happened in your team from legacy developers to the React stack. There will be people in the audience who will be in a similar boat. Will help to add a slide on the team dynamics on how legacy developers had to switch/transition to React stack. This may not relate to React per se, but will be valuable for the audience.

    Update the link to your slides on this page once you have added the feedback points, by 6 November, latest.

  • Raghavendra Satish Peri (@artofvision) a month ago

    Hello,
    At hasgeek events we are trying to make our events accessible for people with disabilities. To achieve our goal is to first get the content of presentations accessible. Here is some guidance to make the presentations accessible. Please use these fonts & size so that even able body people can see the content in the auditorium during presentation.

    Fonts and Font Size
    Because they are the easiest to read, only use Sans Serif fonts, such as Arial and Verdana. Since a PowerPoint presentation will most likely be projected onto a large screen consider how far the audience will be from the screen and choose a font size accordingly. The minimum font size for a PowerPoint presentation should be 24 points.

    For more accessibility info on making presentations accessible use the following link
    https://www.framingham.edu/Assets/uploads/about-fsu/accessibility/_documents/7-steps-accessible-ppt.pdf

Login with Twitter or Google to leave a comment