More Related Content
What's hot
Similar to Zeeto Tech Exchange: Design for Scalability - Front-End
Similar to Zeeto Tech Exchange: Design for Scalability - Front-End (20)
Recently uploaded
Recently uploaded (20)
Zeeto Tech Exchange: Design for Scalability - Front-End
- 1. Design for Scalability Zeeto Tech Exchange
- 3. 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
- 4. Our Panel This Evening Rahmeen Shary Director of UX Andre Recinto Sr. Software Engineer
- 5. Tonight’s Topic How Pattern Libraries and Reusable Components Future Proof Your Application
- 7. React
- 8. • 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
- 9. And last but not least...
- 13. • One Store as the Single Source of Truth. • Built for immutable states (which can lead to better performance in React). • Has awesome tooling. • Simplicity!
- 15. …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.
- 16. "The only way to mutate the state is to emit an action, an object describing what happened."
- 20. Redux
- 21. And the COOLEST thing in Redux...
- 22. Redux DevTool
- 25. 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.
- 26. React-Intl
- 27. 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).
- 29. 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);
- 32. React Components
- 33. Snitch Rubeus Albus Lucius Cornelius
- 34. 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.
- 35. What is Atomic Design?
- 42. Component Breakdown Row ColumnColumn HTML Input ElementLabel
- 43. Component Code
- 44. Form Components
- 45. Form Components
Editor's Notes
- Implementing Reusable Components
- The team chose React as the main library for our View layer. the ReactJS ecosystem is a solution built of many composable, single-purpose tools in which ReactJS is just one building block. You’re free to add only what’s needed for your application, which is good because you can build a light-weight high-performance solution that addresses exactly the issue you need to address.
- All the cool kids are using it. Zeeto as a company has been using React for over a year now in Production. so there is a lot of Internal experience with the toolchain, gotcha’s, and quirkyness of the library. Angular is a massive Framework as React is just the V in MVC. Angular is ● Routing ● Testing ● Structure ● Recommended Packaging ● Recommended Language ● Web API calls ● Templating ● Forms ● Style Scoping React has ● Addons ● Many react external libraries ● Easily integration with 3rd parties In contrast to AngularJS, the ReactJS ecosystem is a solution built of many composable, single-purpose tools in which ReactJS is just one building block. You’re free to add only what’s needed for your application, which is good because you can build a light-weight high-performance solution that addresses exactly the issue you need to address.
- Super simple. Discuss the breakdown from the pure function, and the return JSX content.
- Now we have the View taken care of. Next is to find a framework that will handle our controller and model. Discuss Angular and React in this pattern. React is just the View of the MVC pattern. Enter Redux.
- something to move towards. What is the problem? React is the View layer. We needed something to manage our state, which refers to it as the store. What is Redux? JS Framework that can manage state, subscribes to the Flux framework. Forces you to dispatch actions for all State modifications. Why? Well Supported in the community. To grasp the concepts of Redux, maybe in two days. Easy to onboard devs, 2 weeks vs 2 months. It Makes SENSE! Optional: Compare with MobX, RxJs, Flux Frameworks Better performance in Immutable states: Shallow comparison. ShouldComponentUpdate()
- The store can be thought of as a "middleman" for all state changes in the application. With Redux involved, components don't communicate directly between each other, but rather all state changes must go through the single source of truth, the store. This is much different from other strategies where parts of the application communicate directly between each other. Sometimes, those strategies are argued to be error prone and confusing to reason about:
- This means the application cannot modify the state directly. Instead, "actions" are dispatched to express an intent to change the state in the store.
- So as you can see, there's no method for setting state. Therefore, dispatching an action is the only way for the application code to express a state change:
- The dispatch() method sends an object to Redux, known as an action. The action can be described as a "payload" that carries a type and all other data that could be used to update the state — a user in this case. Keep in mind that after the type property, the design of an action object is up to you. https://css-tricks.com/learning-react-redux/ Reducers should be written as "pure" functions, a term that describes a function with the following characteristics: It does not make outside network or database calls. Its return value depends solely on the values of its parameters. Its arguments should be considered "immutable", meaning they should not be changed. Calling a pure function with the same set of arguments will always return the same value. These are called "pure" because they do nothing but return a value based on their parameters. They have no side effects into any other part of the system. It’s basically a calculation. Sort direction, settings, refreshing data, CRUD stuff.
- Connect allows us to subscribe to the store and also filter data we need to the component.
- Reducer provides default state, you have something to render. When the view renders, it dispatches an action (i.e getMembersList) When the server returns with response, a new action is dispatched and updates the store, thus updating the React View.
- Implementing Reusable Components
- Provides a connections to React and Redux Less Boilerplate code in Redux Makes it easy What is Redux-Form? More active in the community Why do we use it?
- Problem to solve? We need to Internationalized our app. Developed by Yahoo that connects to React that allows us internationalized and localized our strings without all the boilerplate code. Why we chose React-Intl? Other libraries: https://github.com/i18next/react-i18next
- These APIs are in all modern browsers (http://caniuse.com/#search=Intl) and Node.js since 0.12. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its props.
- A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature. You may have noticed similarities between HOCs and a pattern called container components. Container components are part of a strategy of separating responsibility between high-level and low-level concerns. Containers manage things like subscriptions and state, and pass props to components that handle things like rendering UI. HOCs use containers as part of their implementation. You can think of HOCs as parameterized container component definitions. https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html
- Note the ...input and meta properties. Coming from redux-form
- How do we manage our components? Where does it live? How does the front end apps get access to the shared component library?
- Show Snitch and describe how it is an NPM package and how all of the front end apps bring it in as a dependency. Currently we have over several dozens of components being shared across the front end apps, from simple to the more complex components such as the nested table components, you’ll see in a bit. Once we see a similar pattern in code, we immediately make decide if this particular piece of code is good to componentize.
- Show Snitch and describe how it is an NPM package and how all of the front end apps bring it in as a dependency. Currently we have over several dozens of components being shared across the front end apps, from simple to the more complex components such as the nested table components, you’ll see in a bit. Once we see a similar pattern in code, we immediately make decide if this particular piece of code is good to componentize.
- How do we manage our components? Where does it live? How does the front end apps get access to the shared component library?
- So we’ll take a look at a static mockup page from Rahmeen.
- We’ll focus on one of the elements on the upper section of the form.
- We’ll zoom in to the mockup and take one of the input fields as an example to break it down.
- We’ll start from the main wrapper of the component, the Row Component
- Within the Row component, there are two Column components.
- Then there is the Label component and the TextInput Component
- How many components are reusable? It makes me smile when I see a mock up like this and I can count how many form elements with one hand.