Today's Agenda

01

Scenario

02

REUSABLE Components

03

experiences

04

componentize everything

We are all lazy by nature

More code means more bugs

Everything is a component

#1

#2

#3

(people are not things)

SCENARIO

THE COMPANY

THE COMPANY

anypoint Platform

Hey guys, can't we just

copy & paste this functionality from  this  other app?

Problems

Reusable components

it all started with this...

var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('@mulesoft/anypoint-components/Button');

angular.module('cloudhub').controller('AlertsCtrl', function ($scope, ...) {

  // Init scope
  ...
  $scope.$on('$destroy', unmountReact);

  (function() {
    ReactDOM.render(
      <Button>API Platform react button</Button>, 
      document.getElementById('react')
    );
    ...
  })();

  ...

  function unmountReact() {
    ReactDOM.unmountComponentAtNode(document.getElementById('react'));
  }
});

Anypoint components button

import React from 'react';
import { Button } from '../../';

export default class Button extends React.PureComponent {
  render() {
    const { 
      //props
      ...others
    } = this.props;

    const props = {
      'disabled': disabled || isLoading,
      'className': className,
      'onClick': this.handleClick,
      'data-test-id': testId,
      'data-anypoint-component': Button.displayName
    };

    return (
      <button {...props}>
        <span className={theme.children} display-if={children}>{children}</span>
        <Spinner className={theme.spinner} size="s" display-if={isLoading} />
      </button>
    );
  }
}

I love the idea! is there a way

I can play with them for

creating new designs?

UX Playground

That's nice. But we need charts, do you have charts?

(or we'll need to postpone the release)

Anypoint charts

What is anypoint components

And they are themable!

THAT'S NICE. BUT MY TEAM NEEDs TO IMPLEMENT really COMPLEX  SCENARIOS

how CAN YOU HELP us? 

experiences

What is an experience

What is an experience

What is an experience

What is an experience (for us)

ok guys. We have an idea: we want a plugin system to inject apps created by hundreds of contractors, located across the globe, seamlessly. Is that what you do?

(or we'll need to postpone the release)

Componentize everything

Let's recap

Let's recap

Everything is a component

UI Framework initiative

1. Shared state for all apps

2. Unified auth & authz strategy

3. UNIFIED DEVELOPER EXPERIENCE (FOR LIBRARIES AND APPS)

4. Unified user experience (initial loading, notifications, etc.)

5. Unified routing strategy (& deep linking support)

6. Optimized production build (CDN ready, async bundles, multi-device ready)

7. Offline support (& "fresh" support)

UI Starter apps

➜ ~ npm i -g create-react-app
➜ ~ create-react-app core-services-ui 
     --scripts-version=@mulesoft/react-scripts-app

➜ ~ npm i -g create-react-app
➜ ~ create-react-app core-services-base-components
     --scripts-version=@mulesoft/react-scripts-library

UI Starter apps

UI Shell

UI Shell

UI Components

Experiences

UI Starter apps

UI Shell

Library using UX design

Guidelines, examples

Complex components 

Common language

Common UI scenarios

zero-configuration

best practices

optimized for production

UI silos -> UI Platform

a PWA of apps

does things right (and once)

Where we are

We are all lazy by nature

#1

#2

#3

MORE CODE MEANS MORE BUGS

EVERYTHING IS A COMPONENT

(people are not things)