Component Design

Resources slides

https://github.com/russellgoldenberg/scrollama

Resources

• 6 reasons component based UI Development - Ensure consistency within a portfolio of applications

  - Steps to switch to component based UI
  
    1. Identify candidates ( list components and rank them depending on level of re-use)
    2. Establish a component library framework
    3. Focus on isolation (components should be independents)
  
    ​
  

• Understanding Component-Based Architecture

MVC vs CBA => MVC split responsabilities horizontally whereas CBA split them vertically

• Create atomic design systems with Pattern Lab.

• UI Component Playbook

• Presentational and Container Components

  **Presentational**
  
  - How things look
  - Contain both presentational and containers components
  - No dependencies on the rest of the app
  - Don't specify data loading or mutation
  - Data and callbacks throught props
  - No own state
  
  **Container**
  
  - How things work
  - Contain both presentational and containers components
  - No markup (other than components)
  - No style
  - Provide Data and behavior
  - Call actions
  - Stateful
  
  => Provide better separation of concerns
  
  => Presentational can be put on a page listing them and designers can modify their style without touching logic code.
  
  To introduce containers, start by moving every components to presentational ones, when we realize that we have to pass to many data through props and some components are only hatch it means that we have to create containers.
  

• Micro frontends

• https://dassur.ma/things/120fps/

  • https://developers.google.com/web/showcase/2016/service-worker-perf

  Service Worker : Background service that handles network requests. Ideal for dealing with offline situations and background syncs or push notifications. Cannot directly interact with the DOM. Communication must go through the Service Worker’s postMessage method. Web Worker: Mimics multithreading, allowing intensive scripts to be run in the background so they do not block other scripts from running. Ideal for keeping your UI responsive while also performing processor-intensive functions. Cannot directly interact with the DOM. Communication must go through the Web Worker’s postMessage method. WebSocket: Creates an open connection between a client and a server, allowing persistent two-way communication over a single connection. Ideal for any situation where you currently use long-polling such as chat apps, online games, or sports tickers. Can directly interact with the DOM. Communication is handled through the WebSocket’s send method.

• Component Driven Development Benefits

  • Focus development
  • Increase UI coverage
  • Target feedback (just like in a small MR/PR)
  • Build a component library
  • Parallelize development (see micro-frontend)
  • Test visually

• Higher Order Component

• React patterns

• Atomic Design, Brad Frost, InVision

• https://twitter.com/Real_CSS_Tricks/status/942424145517842433

💡Idea

Create slides with components using spectacle or reveal.js

WHY

Because we believe that frontend development isn't just about scripting in one file to refresh data with AJAX and it is a big challenge to create robust and well designed application.

HOW

We have to embrace advanced patterns to architecture our projects

WHAT

To do so, we will present you patterns for introduce component design into your applications

Conflict

Have to work on application to improve them and add features, but the point is that often it is not well isolated, there is to many dependencies between parts of application. You just have to remove a props of a component and your console is all red.

Resolution

Different patterns

Design guidelines

Dumb/smart (container/presentational)

Atomic Design

Micro frontend