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