Frontend Architecture

[coryhouse]

Goals

• Improve quality
• Share knowledge
• Foster innovation
• Accelerate UI development
• Enable and encourage best-practices

Key concerns

• State management
  • Forms
  • Error handling
  • Loading states
  • Selecting storage mechanism
  • Request timeouts
  • Request cancellations
• HTTP
  • REST
  • GraphQL
  • Caching
  • Websockets / server push
• Linting
• Code formatting
• Dev environment workflows and feedback loops (Custom dev tools, build tools, scripts)
• Performance
  • Bundle optimization
  • Lazy loading
  • Code splitting
  • Tree shaking
  • Inlining CSS
  • RAIL
  • PRPL
  • Layout Performance
  • Runtime Performance
  • Auditing
• Rendering
  • Server vs client vs static
• Security
  • Authorization
  • Authentication
• Dependency management
  • Package manager
  • Build runner
  • Package upgrades / replacements / audits
  • Managing custom artifact repo like Artifactory
• Accessibility (semantic markup, ARIA, keyboard support, cross-browser testing)
• Styling
  • CSS methodologies
  • Tech selection
  • Enabling reuse
• Reusable components
• Routing
• Internationalization
• Third party integrations
• CI builds
• Repository structure (Monorepos, Microfrontends, Monoliths)
• Data fetching
• Types
• Automated testing
• User experience (via reviewing requirements and testing the final feature)
• App composition / integration / slicing / Microfrontends
• Deployment
  • Build Processes
  • Continuous Integration / Continuous Deployment
  • Docker / Kubernetes
  • Hosting and Content Delivery Networks
• Mocking
• SEO
• App Monitoring
  • Error tracking
• Code reviews (look for opportunities related to all items above)
• Browser support
• Font Loading and Rendering
• Image Optimization
• Templates and tooling
  • Bootstrapping new projects
  • Updating legacy code (Codemods)
• Backends for Front End
  • Custom back-end solutions
  • Out of box solutions
• WebAssembly
• Monitoring and Alerting
• Design Patterns
• Documentation
  • Platform Architecture
  • Sequence Diagrams/User Flows
  • Developer Workflow
  • Performance Budgets
  • Testing Strategy
  • Compliance Considerations
    • SOX
    • GDPR
    • WCAG 2.0
    • PCI
    • HIPAA
    • etc.
• Repo creation
  • README.md
    • Local Setup
    • Develop Against Different Environments
    • Run Tests
  • CONTRIBUTOR.md
    • Conventional Commits
    • Code Review Process
    • Library Release Process
• Selecting/creating of libs, frameworks, conventions for doing the above, well.