Why you should build a

REUSABLE COMPONENTS LIBRARY

for your company

nano vazquez @nanovazquez87

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

#1

No single source of truth

#2

Deprecated code / Dead code

#3

Completely isolated lifecycles

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

A collection of React components that implement the MuleSoft UX Plaform Style Guide

#1

#2

#3

A PROJECT THAT HELP US DEVELOP OUR UI FASTER, USING A CONSISTENT LOOK & FEEL

IT PROVIDES A COMMON LANGUAGE FOR PMS, DESIGNERS AND DEVELOPERS.

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)

#1

describes how we usually organize components

#2

describes how complex components work together

#3

describes platform components

Main goal: make UI development faster with no-brainers

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

Shared state

App state

Everything is a component

#1

controls are components

#2

experiences/Features/pages are components

#3

Applications are components (of what?)

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

Components v1

Components v2

UI App

UI Library

UI Shell beta

UI Shell GA

Dec 2015

Sept 2017

Dec 2017

March 2017

???

We are all lazy by nature

#1

#2

#3

and that is good

and that is bad

and that is awesome

MORE CODE MEANS MORE BUGS

EVERYTHING IS A COMPONENT

(people are not things)

Thank you

Why you should (not) build a reusable components library for your company

By Mariano Vazquez

Why you should (not) build a reusable components library for your company

Everything starts with a good idea, but it takes a lot of work to make it shine. And when you do it, and people start using it, you feel the need to take it to the next level. And so on, maintaining at the same time what is working in production. In this talk, I will share the lessons learnt of designing a reusable components library with React, that led us to redefine the entire UI development process and front-end architecture @ MuleSoft.

  • 1,326