Financials Chapter Meeting Notes
===

# 🏈 Kickoff 12/6/2016

## Topics

### Set of values/overall goals that we embody
- Familiarity with the tools and libraries we're using
- Documentation, Patterns & Demos
- Code review (Depth or Breadth?)
- Lower the Barrier to entry
- Consistency
- Accessibility
- Documentation of Shared Resources
- Better Maths
- More of a TDD approach
- Reusability
- Shared conciousness of UX and tech debt on Financials
- API Contracts first!
- Align with API guild (Document in Swagger)
- Generally use a Link Based API

### When should we have this meeting?
- Day -> !Monday && !Friday
- Frequency -> Every 2 weeks

### List of actionables organized by effort vs value

 |                         1b                    4,1e
 |                    
 |
E|
f|
f|                                           1a,1c,1d
o|                                              
r|
t|
 |                       6
 |
 |                                       3,2(after 1)
 |___________________________________________________
                       Value

Effort vs Value

1.) Docs
- a.) Trivial Example of React Component in our System
- b.) Shared Component Examples
- c.) Shared Vocabulary
- d.) Folder Structure
- e.) Best practice examples

2.) Yeoman Generator all the things
3.) use `.isRequired` where it makes sense
4.) Universal Table Component
5.) Consistent interface for a Table Cell ( definition and data )
6.) Atom and Vim Snippets

Strategy -> Hackmd and use Github Projects

# 🎉 #17withtheTeam 1/3/2017

## 🎤 Show & Tell
- [flexbox-react](https://github.com/nachoaIvarez/flexbox-react)
- Draws the line between layout styles and visual styles
- Technologies of the Decentralized Web
- [solid](https://solid.mit.edu/)
- Socially Linked Data
- Like single sign on, but based on a browser's certificate
- public/private key
- Allows users to log in to any service on Solid, with the same certificate
- Data shared across SaaS providers
- Every resource has its own URL (users, posts, comments, everything)
- [ipfs](https://ipfs.io/)
- Interplanetary File System
- Like Git + BitTorrent
- Resilient
- [**Slight** usage example](https://github.com/mboperator/broadcast-cms/blob/master/web/static/js/decorators/ipfsInterface.js)

## 👓 Code Review

### Input Mask
- https://github.com/procore/wrench/pull/2329
- Cleanup in the works for something more "fluxxy"
- Let's make it open source
- Switching to open source library for number formatting
- Hinrichs' forked for onBlur (BUD/forecasting_with_flexbox_react) MaskedInput
- Must reconcile!

### Tiered Select
- https://github.com/procore/wrench/pull/2461
- CR - move state to OptionListWithChildren so that only one child menu is open at any given time

## 🎆 Initiatives

### 1a) Trivial Example of React Component in our System

#### Goal
Calling a component that just gets props
Making a component that is called by `react_component` that just gets props
Something like a toggle component, no crazy async stuff - just display state
like a Rails partial on creatine (not steroids)

#### Not Goals
Teaching React

### 1c) Shared Vocabulary
Not covered

### 1d) Folder Structure
Not covered

#### Goal
Making a complex component that is called by `react_component`

## 🐶 Feelings
New Initiative! Something like 1a), but with redux-loop and redux-modules
[Gist with hackmd links](https://gist.github.com/mboperator/a3331f30bd5a351821beb803e7dba0f0)
Loading Music next meeting Feelings - The Offspring

# 🚀 TAKE US TO SPACE, ELON 1/17/2017

## 🎤 Show & Tell
- [DecimalJS](https://github.com/MikeMcl/decimal.js/)
- Use behind `utils/accounting#formatCurrency`
- Make tests
- *Check back up on this next meeting*
- [shouldComponentUpdate, reselect, and you](https://github.com/procore/wrench/pull/2518)
- TLDR: derived data in the selectors
- use `shouldComponentUpdate`
- [SBHacks](http://www.sbhacks.com/)
- 1/20/16 - 1/22/16
- One more spot for talks
- Mentors are always appreciated
- [How to use PropTypes](https://hackmd.io/CzAcBMAYCYCMEMC0BmYknAGzQKaPpgJyiI6g7gKTLzDQDsQA)
- By Sean Spearman
- *Check back up on this next meeting*
- [Performance Gains 💪](https://hackmd.io/s/HJQhdMhIg)
-

## 👓 Code Review

## 🎆 Initiatives

### 1a) Trivial Example of React Component in our System

#### Goal
Calling a component that just gets props
Making a component that is called by `react_component` that just gets props
Something like a toggle component, no crazy async stuff - just display state
like a Rails partial on creatine (not steroids)

#### Not Goals
Teaching React

#### On Point
Marcus - build on https://hackmd.io/KYJghgzAJgjAnAMwLSzjJAWOBjA7EgIxkkLGGygRgAZcAOa6oA==?both

### 1c) Shared Vocabulary

### 1d) Folder Structure

### 2) Reconcile Hinrichs' InputMask fork

#### Goal
Keep the number of internal forks to a minimum
Try out individually packaged components

#### On Point
Hinrichs - plan of action by 31st

## 🐶 Feelings
New Initiative - DecimalJS + utils/accounting

# Performance Down Unduh 2/7/2017

## 🎤 Show & Tell
- [react-infinitable](https://github.com/mboperator/react-infinitable)
- Versioned component
- Based on Taflan/Tavolo
- Sticky headers
- Multi tier configurable grouping
- Group collapsing
- Group Checkboxing
- Infinite scroll

## 👓 Code Review
- Group Code Review coming up in a bit - Forecasting
- Code reviewers add inline comments to the code
- own the solution
- Live demo / overview

## 🎆 Initiatives

### 1a) Trivial Example of React Component in our System

#### Goal
Calling a component that just gets props
Making a component that is called by `react_component` that just gets props
Something like a toggle component, no crazy async stuff - just display state
like a Rails partial on creatine (not steroids)

#### Not Goals
Teaching React

#### On Point
Marcus - build on https://hackmd.io/KYJghgzAJgjAnAMwLSzjJAWOBjA7EgIxkkLGGygRgAZcAOa6oA==?both

### 2) Reconcile Hinrichs' InputMask fork

#### Goal
Keep the number of internal forks to a minimum
Try out individually packaged components

#### On Point
Hinrichs - plan of action by 31st

### [DecimalJS](https://github.com/MikeMcl/decimal.js/)

#### Goal
Use behind `utils/accounting#formatCurrency`
Make tests
*Check back up on this next meeting*
- Looks good so far, no issues in production
- Switch all accounting utils to use DecimalJS

### [How to use PropTypes](https://hackmd.io/CzAcBMAYCYCMEMC0BmYknAGzQKaPpgJyiI6g7gKTLzDQDsQA)

#### Goal
By Sean Spearman

## 🐶 Feelings

### Shared Components discussion
- Now's the time to try it
- solves issue of breaking API changes (once our tools all have their own package.json)
- react-infinitable = first attempt
- input mask = second attempt?

### Proactive vs Reactive development
- Component readiness checklist
- Check the Github Project
- Try to couple chapter initiatives with product initiatives

# For the ❤️ of Javascript 2/14/2017

## 🎤 Show & Tell
[Reason](https://facebook.github.io/reason/)
[Flow](https://facebook.github.io/flow/)

## 👓 Code Review

## 🎆 Initiatives

### Trivial Example of React Component in our System
[Frontend Onboarding Document](https://hackmd.io/KYJghgzAJgjAnAMwLSzjJAWOBjA7EgIxkkLGGygRgAZcAOa6oA==?both)
[Wrench Presentation](http://slides.com/marcusbernales/deck)

### [Component Readiness Checklist](https://hackmd.io/s/HyWXqnMIx)
- Add the reasoning behind each bullet
### Reconcile InputMask fork
### [DecimalJS](https://github.com/MikeMcl/decimal.js/) Migration
- Keep it in production for a while
- Move to using it universally when other people have the issue
### [How to use PropTypes](https://hackmd.io/CzAcBMAYCYCMEMC0BmYknAGzQKaPpgJyiI6g7gKTLzDQDsQA)

## 🐶 Feelings
- Mob Code Review Tips
- Some preparation (30 mins+) ideal
- Walk through the experience
- Highlight and whiteboard the code smell sections
- Do it at the end of the day!
- Bad Table Performance in Chrome?
- `will-change: transform;`
- Don't include that `<td />` in your cell component.
- Next meeting 🎵: Anderson Paak

# 2/28/2017

## 🎤 Show & Tell
[[BUD-1089] Reload Table and Add Loading State for Affected Subtotals](https://github.com/procore/wrench/pull/2758)

## 👓 Code Review
[[BUD-1089] Reload Table and Add Loading State for Affected Subtotals](https://github.com/procore/wrench/pull/2758)
[Sticky Header Manager](https://github.com/procore/wrench/commit/e2dd24e469604875e4da40e7a0a628ba6156e0fd)

## 🎆 Initiatives

### Follow up on Migration to Procore

### [Component Readiness Checklist](https://hackmd.io/s/HyWXqnMIx)
- Add the reasoning behind each bullet
- Add good/bad/ugly Examples for each checkmark

### [How to use PropTypes](https://hackmd.io/CzAcBMAYCYCMEMC0BmYknAGzQKaPpgJyiI6g7gKTLzDQDsQA)

## 🐶 Feelings
Show `connectActions` decorator pattern / motivations
Show example for level 0 for required testing
- selector tests
- Enzyme component prop tests

Talk about level 1 for testing (Integration)

## 5/24

### Standups

#### Jeremy
Knee deep in PDFs

#### Sean
Clusterized the sticky left panel on the table
The code is starting to get really good
Wants to move controls

#### Jordan
Flash banners on CELI Table

#### Andy
Change Mgmt under heavy load

#### Justin
Prequalification going to hop onto Rolodex soon

#### Marcus
Styleguide
Build process
Prequalification

#### Hinrichs
React component usage viewer

### Shared Styles
Andy:
proponent of shared styles (not the React scss)
use React scss to override
"(Was using Submittal's tab bar, but the found that Custom Reports had a global style...)Had I known it was there I would've used that. I prefer using classes than doing brand new inline styles"

proponent of the Bootstrap approach
enforce the markup and stylesheets

Sean:
Likes global because then creating new styles is a code smell, discussion point for estimates

### Styleguide Feedback
Should be more implementation details
what does the markup look like in each state
what are the classes

# 6/7

## Standups

### Jeremy
Talking to Sean about i18n implementation
Started writing tests because free time
Currently tackling formatting logic and data shape

### Andy
On SoV + Drag n Drop
using React DnD
Flexible markup
Currency mask day tomorrow
Tackling all the feedback
Going to A/B test behavior
Open source potential

### Jordan
Customer blocking bugs
DRYing up column definitions

### Justin
Finished milestone 1, prequal
Started working on Rolodex

## Hydra Update
It's out!
Andy: Wants to be able to mount apps within folders (not just a single app)

## Styleguide Update
With `rolodex` Prequal team are creating `atom` level components and styles in an isolated place

## Financial SoVs Update
Gabe codified the column definition paradigm with classes

# News from the Front 7/5

## Highlights

### [Jest](https://facebook.github.io/jest/)
[Basic Jest Example Test](https://github.com/procore/rolodex/blob/master/client/components/Input/component.test.js#L5)

[Config for Jest CSS Modules](https://github.com/procore/rolodex/blob/master/package.json#L25)

[Jest + Chrome Debugger (Thanks Sean)](https://github.com/procore/rolodex/pull/43/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R14)

### [Storybook](https://github.com/storybooks/storybook)
[Basic Storybook Example](https://github.com/procore/rolodex/blob/master/stories/index.js#L40)

### [Hydra](https://github.com/procore/procore/blob/master/gems/hydra/README.md)
[Example Implementation, Mounting in Procore](https://github.com/procore/procore/pull/21675/files#diff-399068c65a0777657c8f54ec2efd3621R3)

[Mounting Logic](https://github.com/procore/procore/pull/21675/files#diff-588c5c672b13b814006cb36a360e3921R9)

## PRs that need to be addressed
[React Widgets Calendar Tether Popover](https://github.com/procore/react-widgets/pull/16)

# July

## Highlights
### [Particles](https://github.com/procore/particles)

### [Crescent](https://github.com/procore/crescent)

### [Storybook](https://github.com/storybooks/storybook)
[Basic Storybook Example](https://github.com/procore/rolodex/blob/master/stories/index.js#L40)

### We should have a State of the Union Frontend guild meeting
- Communication is spotty right now
- Each team brings highlights

### [Percy.io](percy.io)
- Visual regression testing

### Iterate on the Column Decoration Paradigm
- Is this the right pattern?
- What are the pain points currently?
- Make a meeting, come up with a pattern.

# August 2nd

## Highlights

### [Redux-Modules](https://github.com/procore/redux-modules)
- 1.1.0 released

## New Initiatives
- Frontend performance measurements
- Performance metrics on frontend ala perfcheck
- Frontend analytics (Interana) tools
- Migrating old tools to new paradigms
- `ducks` -> modules
- typescript
- wrench -> hydra
- implications?
- benefits?
- Pick out worst performers
- Unpaginated pickers
- Lower barrier to testing in Wrench
- Use Jest, it has support for module directories
- Look at cell decoration paradigm
- What is a cell? What's the component responsibility?
- Cell component taxonomies
- How they're decorated, do we have a best practice?