Giter VIP home page Giter VIP logo

react-hooks-domain-model's Introduction

360 Component

npm install No surprises here.

npm test This will two things:

  1. Run Jest: Within the interaction domain context, the unit tests focus on the permutations and the more mundane implementation details of the interaction model such as making sure we don't return null when we reach the end of an array and so on.

  2. Run Cucumber: This focuses on the complex parts of the interaction model. The idea here is that the interaction domain is where a lot of the complexity is, so modeling and testing the interaction in isolation without the complications of the UI will make it easier to reason about and evolve it.

npm run storybook Here you an see component rendered by React, and hooks are being used to "bind" the interaction domain model to the React component.

A few key points here:

  • Take a look at the files under the ./features directory for the BDD bits

  • The ThreeSixtyInteraction is hooked into React using the useDomain hook. The interface for this to happen looks as follows and is expo

  return {
    hash: () => require('object-hash')({images, selectedImage}),
    commands: {addImage, rotateLeft, rotateRight},
    queries: {currentImage},
  }

The hash is used to provide the useDomain hook with the knowledge if the model has changed. It's up to the developer to ensure the hashcode returns a unique value for the object state. The object-hash library does a great job of doing this if you pass it the attributes of the model.

The commands are wired in by the useDomain such that any commands call results in a rerender of the hooked react component.

The queries are delegated as is without any hooks since reading a value should not require a rerender.

react-hooks-domain-model's People

Contributors

samhatoum avatar tillathehun0 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

tillathehun0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.