Workflow Notes

workflow-notes.md

Useful Workflow Notes

• Linting and Style
• CSS
• Git & Waffle
• Webpack
• Express
• Sequelize
• MongoDB
• AWS
• Heroku
• React & Redux
• Testing
  • Testing Sequelize
• Project Refinement

Linting and Style

• Clean Code JS

CSS

• Bounce Animation

Git Waffle

• Recommended Workflow for Waffle

Webpack

• Webpack Academy
• Build to multiple output paths

Express

• Express – Static Files

Sequelize

• Sequelize Associations Cheat Sheet
• Sequelize Associations Docs
• Body Parser

MongoDB

• Mongoose Reference

React Redux

• React Lifecycle
• Redux Thunk
• Create Store – React/Redux
• Multiple Inputs with React
• React Router – About onEnter Hooks
• Beginner's Guide to React Router

AWS

• Sending Messages to IoT from Lambda

Heroku

heroku run ____
              ^ bash, npm, whatever
              
heroku run bash

---

Testing

npm install --save-dev mocha chai chai-spies sinon supertest

Testing Sequelize models:

// Synchronizing Tables beforeEach



// For sync operations
it('doesnt create instance if size is an array of strings', () => {
     testMagnet.size = ['2', '4']
     const nonexistentMagnet = Magnet.build(testMagnet)
     expect(nonexistentMagnet.id).to.be.null
  })


// For async operations like .validate()
it('throws error if price is null', () => {
      testMagnet.price = null
      return Magnet.build(testMagnet).validate()
        .then(function(err) {
          expect(err).to.exist
          expect(err.message).to.equal('notNull Violation: price cannot be null')
        })
    })

// Clearing tables after each test
afterEach('Clear the tables', () => db.truncate({ cascade: true }))

// Testing a class method
describe('class methods', function() {
    it('findByTag finds all pages with tag', function(done) {
      const relatedPage = {
        title: 'Another Great Article',
        content: 'Good content',
        status: 'open',
        tags: ['genius']
      }
      const otherRelatedPage = {
        title: 'Still Another Great Article',
        content: 'Ok content',
        status: 'open',
        tags: ['genius']
      }
      Page.create(testPage)
        .then(page => {
          return Page.create(relatedPage)
        })
        .then(page => {
          return Page.create(otherRelatedPage)
        })
        .then(() => {
          return Page.findByTag('genius')
        })
        .then(pages => {
          expect(pages.length).to.equal(3)
          expect(pages).to.be.an('array')
          done()
        })
    })
})

// Testing an instance method
    it('findSimilar does not find itself', function(done) {
      let mainPage = {}
      const relatedPage = {
        title: 'Another Great Article',
        content: 'Good content',
        status: 'open',
        tags: ['genius']
      }
      const otherRelatedPage = {
        title: 'Still Another Great Article',
        content: 'Ok content',
        status: 'open',
        tags: ['genius']
      }
      Page.create(testPage)
        .then(page => {
          mainPage = page
          return Page.create(relatedPage)
        })
        .then(page => {
          return Page.create(otherRelatedPage)
        })
        .then(page => {
          return mainPage.findSimilar()
        })
        .then(pages => {
          expect(pages.length).to.equal(2)
          pages.every(p => {
            expect(p.title).to.not.equal('Amazing Article')
          })
          done()
        })
    })

---

Project Refinement

Things you can and should do to continue refining and improving a project:

TOP 5

1. Fix critical bugs
2. Deploy
3. Fix obvious design issues
4. Write docs and tests
5. Refactor code to be cleaner, smaller, simpler, better

Meta

• Deploy
• Get a custom domain name
• Write up documentation, improve your README.md
• Close stale issues
• Delete stale GitHub branches
• Clean up your Waffle

Linting and Testing

• Clean up your test suite so it is 100% passing
• Add automated testing through a CI service like Codeship or Travis
• Protect master by preventing merging test-breaking PRs
• Improve your test coverage (% code executed during test)
• Clean up linter warnings / customize your linter configuration

Code Quality

• Fix bugs
• Handle edge cases
• Remove console logging
• Remove commented code
• Clean up your formatting
• Refactor complex modules and functions
• Break functions apart into small named functions which compose well
• Push logic to more appropriate contexts / modules
• DRY
• Separate concerns
• Make things more functional
• Make things less stateful
• Move Redux state calculations to selector functions
• Break large React components up into smaller components
• Move model logic from routes into models
• Reuse model methods in other model methods

Design

• Improve CSS / styling
• Make it responsive / mobile friendly
• Improve UI / UX
• Add loaders / spinners
• Improve typography
• Whitespace / padding / margins are your friend
• Better user feedback

Functionality and Performance

• Add features (low priority!)
• Profile your app and improve performance in hot spots
  • Use caching and memoization where appropriate
  • Improve async handling
  • Allocate fewer objects (if you're making thousands in a very small time)
  • Move server logic to client (if it needs to run per client) or vice-versa (if it can be run once and cached)

Extra

• Add a coverage reporter like Istanbul
• Enable continuous integration with automatic deployment (note you will have to change your dependency and build system)
• Add a caching layer (e.g. Redis)