Data-Driven Frontend

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

the new Jira navigation

Nodebots book free!

Access bit.ly/nodebots-book-en

Decrease price to $0.00

Enjoy

HI, IT'S ME

Once upon a time in

the web...

2002 - Jira

Navigation

<Navigation
</Navigation>
  drawers=[...]
>
  <AkContainerNested
  global_*
  onResize_*
    stack=[...]
  >
<Navigation
</Navigation>
  drawers=[...]
>
  <AkContainerNested
  global_*
  onResize_*
    stack=[...]
  >
<Navigation
</Navigation>
  drawers=[...]
>
  <AkContainerNested
  global_*
  onResize_*
    stack=[...]
  >
<Navigation
</Navigation>
  drawers=[...]
>
  <AkContainerNested
  global_*
  onResize_*
    stack=[...]
  >
<Page
</Page>
  }
>
  navigation={
    <Skeleton />
<Page
</Page>
  }
>
  navigation={
    <Navigation />
<Page
</Page>
<Grid>
<GridColumn>
</GridColumn>
<p>my content</p>
</Grid>
  navigation={?!}
>
<Page
</Page>
<Grid>
<GridColumn>
</GridColumn>
<p>my content</p>
</Grid>
  navigation={?!}
>
<Page
</Page>
<Grid>
<GridColumn>
</GridColumn>
<p>my content</p>
</Grid>
  navigation={?!}
>

How to solve

code problems

How to solve

architectural problems

CSR or SSR
Lazy config
Types
Composition

Dev XP
Innovate
Experiments
Theming

APDEX

(SATISFIED COUNT)

+

(TOLERATING COUNT / 2)

TOTAL SAMPLES

=

APDEX

170 + (20 / 2)

200

90

navigation

next

<NavigationProvider>
</NavigationProvider>
<LayoutManager>
<PageContent>
</PageContent>
<p>my content</p>
</LayoutManager>
<NavigationProvider>
</NavigationProvider>
<LayoutManager>
<PageContent>
</PageContent>
<p>my content</p>
</LayoutManager>
<NavigationProvider>
</NavigationProvider>
<LayoutManager>
<PageContent>
</PageContent>
<p>my content</p>
</LayoutManager>
<NavigationProvider>
</NavigationProvider>
<LayoutManager>
<PageContent>
</PageContent>
<p>my content</p>
</LayoutManager>

Smooth Transitions via API

Emotion as CSS-in-JS solution

Client-side & Server-side

Progressive rollout: old x new

 

Some Wins

let asyncModule;

if (isFeatureFlagTurnedOn('new-nav')) {
  asyncModule = import(
    /* webpackChunkName: "new-nav" */
    './new-nav'
  );
} else {
  asyncModule = import(
    /* webpackChunkName: "old-nav" */
    './old-nav'
  );
}
componentDidMount() {
  // ...
  // logic to load async module
  // ...
  this.setState({
    Navigation: asyncModule.Navigation
  });
}

render() {
  if (!this.state.Navigation) {
    return <Skeleton />;
  }
  return <Navigation />;
}

📈 Global APDEX + 5

What if we

missed something?

How long is 2 seconds?

?

How to use async load

in

content & components

 

<NavigationProvider>
</NavigationProvider>
<AsyncLayoutManager>
<PageContent>
</PageContent>
<p>my content</p>
</AsyncLayoutManager>

Plug-and-play

that is how components should be 😉

bundle size

time to first render

prefetch

Concerns

Data-Driven

Show me what you got and you shall pass!

webpack-bundle-analyzer

ESM2015
FESM2015
UMD

CJS

Different bundle types

ESM5
FESM5

.mjs

ESM

...
import {
  NavigationProvider
} from '@atlaskit/navigation-provider';

import {
  LayoutManager
} from '@atlaskit/layout-manager';
...

Package composition

import compact from 'lodash/compact';

import { compact } from 'lodash';

Entry Points

Agnostic organization

nobody needs to know how you organize your code 😉

...
// Folder structure of @atlaskit/navigation-provider@2.1.0

import {
  NavigationProvider
}
from '@atlaskit/navigation-provider/src/components/NavigationProvider';


// Folder structure of @atlaskit/navigation-provider@2.1.1

import {
  NavigationProvider
}
from '@atlaskit/navigation-provider/src/components/connected/NavigationProvider';

...
src/
  - components/
    - connected/
      - NavigationProvider.js
  index.js

/*
  this file is exporting the content of
  `src/components/connected/NavigationProvider.js`
*/
  NavigationProvider.js
src/
  - components/
    - connected/
      - NavigationProvider.js
  index.js

/*
  this file is exporting the content of
  `src/components/connected/NavigationProvider.js`
*/
  NavigationProvider.js
// ... @atlaskit/navigation-next@3.0.0
//         - src/connected/NavigationProvider
// ... using entry points

import {
  NavigationProvider 
} from '@atlaskit/navigation-next/NavigationProvider';

// ... @atlaskit/navigation-next@3.1.0
//         - src/connected/NavigationProvider/component

import {
  NavigationProvider 
} from '@atlaskit/navigation-next/NavigationProvider';

132.7 kB

10 k

from

to

To "A" or To "B"

Experimenting in a component level

Flyout

flyout - menu on mouseover

optimistic preload

A/B testing

Hyphotesis

...will help you in this journey

standard

standard

standard

<AsyncLayoutManager
  experimental_*
>
<PageContent>
</PageContent>
<p>my content</p>
</AsyncLayoutManager>
<AsyncLayoutManager
  
>
<PageContent>
</PageContent>
<p>my content</p>
</AsyncLayoutManager>
experimental_*
...
import('./flyout')
  .then(({ default: Flyout }) => {
    // Logic to add
    // your experimental feature
  });
  .catch(e => 
    console.log(`WAT ?! ${e.message}`)
  );
...

import('what-you-need')

src/
  - components/
/*
  same component with and without
  the feature that can be solved
  on the top-level consumers
*/
    - Flyout.js
    - WithoutFlyout.js

Easy to add & remove

Ownership

Flexibility

Innovation
Experiments in
all layers

Impacts

<recap/>

Think in architecture

Enable experiments ...always!

Choose carefully

Minimize risks

Next steps

... or "What's next on navigation-next ?"

Navigation next ... next?

Thank you

Wilson Mendes

@willmendesneto

Google Developer Expert Web technologies

Data-Driven Frontend Components and the New Jira Navigation

By willmendesneto

Data-Driven Frontend Components and the New Jira Navigation

In large frontend codebases, concise components are the key for the success of your application. Decisions can be done based on the user journey: better ways to improve performance by code-splitting, memory consumption, flexibility or even A/B testing. What if we can use a data-driven approach in a component level and mitigating any possible risk involved? In this talk, I will share my experience and decisions using hypothesis and data-driven development effectively to release the new navigation in Jira, the most famous project management in the world! How to use some component patterns for A/B testing, performance and bundle size improvements and all the journey around the new navigation in Jira.

  • 83
Loading comments...

More from willmendesneto