zeeto tech exchange: design for scalability - front-end

Design for Scalability

Zeeto Tech Exchange

Zeeto Tech Exchange

The Inaugural Series

• Nov – The Project / Technology Selection

• Dec – Cloud Hosting / Containers / Scheduling

• Jan – Microservices

• Feb – Design for Scalability

• Mar – Database Infrastructure

• Apr – Reporting and Analytics

• May – Lessons Learned

Our Panel This Evening

Rahmeen SharyDirector of UX

Andre RecintoSr. Software Engineer

Tonight’s Topic

How Pattern Librariesand Reusable Components Future

Proof Your Application

Implementing Reusable Components

React

• Easy to learn

● Built for creating components that we can reuse and combine.

● Super Fast! Almost for free. Virtual DOM avoids costly DOM operations and makes updates in a very efficient manner.

● Well supported in the JS community.

React

And last but not least...

Netflix FacebookYahoo Atlassian

React Sample Code

• One Store as the Single Source of Truth.

• Built for immutable states (which can lead to better performance in React).

• Has awesome tooling.

• Simplicity!

…in a nutshell

Redux stores your entire application state in one big,

immutable object. Whenever your application state

changes, a brand new object is created by your reducer.

"The only way to mutate the state is to emit an

action, an object describing what happened."

store.dispatch(action)

store.subscribe(listener)

store.getState()

replaceReducer(nextReducer)

Redux

And the COOLEST thing in Redux...

Redux DevTool

Redux-Form and React-Intl

Redux-Form

• A Redux reducer that listens to dispatched redux-form

actions to maintain your form state in Redux.

• A React component decorator that wraps your entire form in

a Higher Order Component (HOC) and provides

functionality via props.

• A Field component to connect your individual field inputs to

the Redux store.

• Various Action Creators for interacting with your forms

throughout the application.

React-Intl

React-Intl

• Internationalize React apps. Provides React components and an API to format dates, numbers, and strings including pluralization and handling translations.

• React Intl uses and builds on the Internationalization API built-in to JavaScript.

• React Intl's imperative API is accessed via injectIntl, a High-Order Component (HOC).

Higher Order Component?

...a higher-order component is a function that takes

a component and returns a new component with

additional properties from itself.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

React Components

Snitch

Rubeus Albus Lucius Cornelius

Snitch

The Golden Snitch, often called simply the Snitch, is the third and

smallest ball used in Quidditch. It is a walnut-sized gold-coloured sphere

with silver wings. It flies around the Quidditch field at high speeds,

sometimes pausing and hovering in place. The Seeker's goal is to catch

the Snitch before the other team's seeker, which is worth one-hundred

and fifty points. The game can only end when the Snitch has been

caught.

What is Atomic Design?

Component Breakdown

Component Breakdown

Component Breakdown

Row

Component Breakdown

RowColumnColumn

Component Breakdown

RowColumnColumn

HTML Input ElementLabel

Component Code

Form Components

Form Components