Meeting Purpose: David Daniel, Housing tech-lead and Data Visualization instructor, has developed a front-end workflow and a set of tools that all project teams will be using. He'll be discussing how we can contribute and utilize the Hack Oregon reusable react.js component library, dealing with routing issues and state, and utilizing React Storybook as UI style guide and development environment.
David is developing boilerplate but don't feel constrained to stick to it. So far each project has been self-contained, to add front-end to API, but this time...new platform. How will they all work together? End goal is site where people can look at different story cards for all the projects, URLs like civic.hackoregon.org/housing. Answer: React Redux and React Router. Also we may stick to Webpack 1 or Webpack 2 beta to avoid major changes / re-learning.
Storybook is a dev environment for making components, to force us to write and document components that can be reused. You can find stories and components David has built so far at https://github.com/hackoregon/component-library. Component guidelines:
- Use functional vs. class components.
- Don't change rules, they align to style guide.
- Use d3 methods e.g. pie chart layout, but don't use d3 for animation. Use React Motion (good idea to start learning now).
- To use Storybook components reference straight from Github (don't need to download a package to npm).
- If you're not able to extend, you can still create more specific components and give them stories.
- File structure will be like: navbar.story.js, navbar.test.js, navbar.js.
- Every folder should have an index file in it that exports out the contents of that folder.
- Follow duck pattern for Redux.
- Can ask David questions on Slack.
- Get into the habit of linting and testing your code.
- Pull requests will need two approvals.
- Goal is to follow best practices. If you think a rule should be changed, submit a pull request with reasoning.
One of the tools will be an editor config file that will take care of formatting, be testing-ready, and include Global JS dom with fake dom. Also test coverage (must be greater than 80% of code at all times). Using Require.assure to return a promise.
David will work on Tools on Thursday and put up example over the weekend. Recommended studying/practice: Redux, React Router, React Motion.