Flux Architecture

Book description

Learn to build powerful and scalable applications with Flux, the architecture that serves billions of Facebook users every day

About This Book

  • This the first resource dedicated to the new architectural pattern that powers Facebook

  • You’ll learn all the tips and tricks you need to get the most out of Flux

  • Filled with practical, hands-on samples, you’ll not only understand how Flux works, but will be able to start building Flux-powered applications straight away

  • Written by Adam Boduch, software architect at Virtustream (EMC), and author of JavaScript at Scale, JavaScript Concurrency, and jQuery UI Cookbook for Packt Publishing

  • Who This Book Is For

    Are you trying to use React, but are struggling to get your head around Flux? Maybe you're tired of MV* spaghetti code at scale? Do you find yourself asking what the Flux?!

    Flux Architecture will guide you through everything you need to understand the Flux pattern, and design and build powerful web applications that rely on the Flux architecture.

    You don’t need to know what Flux is or how it works to read along with the book. No knowledge of Flux’s partner technology, ReactJS, is necessary to follow along, but it is recommended that you have a good working knowledge of JavaScript.

    What You Will Learn

  • Understand the Flux pattern and how it will impact your React applications

  • Build real-world applications that rely on Flux

  • Handle asynchronous actions in your application

  • Implement immutable stores with Immutable.js

  • Replace React.js with alternate View components such as jQuery and Handlebars

  • Test and benchmark your Flux architecture using Jest—Facebook’s enhancement of the Jasmine library

  • In Detail

    Whilst React has become Facebook’s poster-child for clean, complex, and modern web development, it has quietly been underpinned by its simplicity. It’s just a view. The real beauty in React is actually the architectural pattern that handles data in and out of React applications: Flux. With Flux, you’re able to build data-rich applications that engage your users, and scale to meet every demand. It is a key part of the Facebook technology stack that serves billions of users every day.

    This book will start by introducing the Flux pattern and help you get an understanding of what it is and how it works. After this, we’ll build real-world React applications that highlight the power and simplicity of Flux in action. Finally, we look at the landscape of Flux and explore the Alt and Redux libraries that make React and Flux developments easier.

    Filled with fully-worked examples and code-first explanations, by the end of the book, you'll not only have a rock solid understanding of the architecture, but will be ready to implement Flux architecture in anger.

    Style and approach

    This book is filled with practical, hands-on examples. You’ll not only understand how Flux works, but will be able to start building Flux-powered applications straight away.

    Table of contents

    1. Flux Architecture
      1. Table of Contents
      2. Flux Architecture
      3. Credits
      4. About the Author
      5. About the Reviewer
      6. www.PacktPub.com
        1. eBooks, discount offers, and more
          1. Why subscribe?
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. What is Flux?
        1. Flux is a set of patterns
          1. Data entry points
          2. Managing state
          3. Keeping updates synchronous
          4. Information architecture
        2. Flux isn't another framework
        3. Flux solves conceptual problems
          1. Data flow direction
          2. Predictable root cause
          3. Consistent notifications
          4. Simple architectural layers
          5. Loosely coupled rendering
        4. Flux components
          1. Action
          2. Dispatcher
          3. Store
          4. View
        5. Installing the Flux package
        6. Summary
      9. 2. Principles of Flux
        1. Challenges with MV*
          1. Separation of concerns
          2. Cascading updates
          3. Model update responsibilities
        2. Unidirectional data
          1. From start to finish
          2. No side-effects
        3. Explicit over implicit
          1. Updates via hidden side-effects
          2. Data changes state in one place
          3. Too many actions?
        4. Layers over hierarchies
          1. Multiple component hierarchies
          2. Hierarchy depth and side-effects
          3. Data-flow and layers
        5. Application data and UI state
          1. Two of the same thing
          2. Tightly coupled transformations
          3. Feature centric
        6. Summary
      10. 3. Building a Skeleton Architecture
        1. General organization
          1. Directory structure
          2. Dependency management
        2. Information design
          1. Users don't understand models
          2. Stores map to what the user sees
          3. What do we have to work with?
        3. Putting stores into action
          1. Fetching API data
          2. Changing API resource state
          3. Local actions
        4. Stores and feature domains
          1. Identifying top-level features
          2. Irrelevant API data
          3. Structuring store data
        5. Bare bone views
          1. Finding missing data
          2. Identifying actions
        6. End-to-end scenarios
          1. Action checklist
          2. Store checklist
          3. View checklist
        7. Summary
      11. 4. Creating Actions
        1. Action names and constants
          1. Action name conventions
          2. Static action data
          3. Organizing action constants
        2. Feature action creators
          1. When modularity is needed
          2. Modular architecture
        3. Mocking data
          1. Mocking existing APIs
          2. Mocking new APIs
          3. Replacing action creators
        4. Stateful action creators
          1. Integrating with other systems
          2. Web socket connectivity
        5. Parameterized action creators
          1. Removing redundant actions
          2. Keeping actions generic
          3. Creating action partials
        6. Summary
      12. 5. Asynchronous Actions
        1. Keeping Flux synchronous
          1. Why synchronicity?
          2. Encapsulating asynchronous behavior
          3. Asynchronous action semantics
        2. Making API calls
          1. APIs are the common case
          2. API calls and user interactivity
        3. Combining API calls
          1. Complex action creators
          2. Composing action creators
        4. Returning promises
          1. Synchronizing without promises
          2. Composing asynchronous behavior
          3. Handling errors
        5. Summary
      13. 6. Changing Flux Store State
        1. Adapting to changing information
          1. Changing API data
          2. Changing feature functionality
          3. Impacted components
        2. Reducing duplicate store data
          1. Generic store data
          2. Registering generic stores
          3. Combining generic and specific data
        3. Handling store dependencies
          1. Waiting for stores
          2. Data dependencies
          3. UI dependencies
        4. View update order
          1. Store registration order
          2. Prioritizing view rendering
        5. Dealing with store complexity
          1. Too many stores
          2. Rethinking feature domains
        6. Summary
      14. 7. Viewing Information
        1. Passing views data
          1. Data via the change event
          2. Views decide when to render
        2. Keeping views stateless
          1. UI state belongs in stores
          2. No querying the DOM
        3. View responsibilities
          1. Rendering store data
          2. Subview structure
          3. User interactivity
        4. Using ReactJS with Flux
          1. Setting the view state
          2. Composing views
          3. Reacting to events
          4. Routing and actions
        5. Summary
      15. 8. Information Lifecycle
        1. Component life cycle difficulties
          1. Reclaiming unused resources
          2. Hidden dependencies
          3. Memory leaks
        2. Flux structures are static
          1. Singleton pattern
          2. Comparison to models
          3. Static views
        3. Scaling information
          1. What scales well?
          2. Minimal information required
          3. Actions that scale
        4. Inactive stores
          1. Deleting store data
          2. Optimizing inactive stores
          3. Keeping store data
        5. Summary
      16. 9. Immutable Stores
        1. Renouncing hidden updates
          1. How to break Flux
          2. Getting store data
          3. Everything is immutable
        2. Enforcing unidirectional data flow
          1. Backwards, sideways, and leaky data flow
          2. Too many stores?
          3. Not enough actions
          4. Enforcing immutability
        3. The cost of immutable data
          1. Garbage collection is expensive
          2. Batched mutations
          3. Offsetting the cost
        4. Using Immutable.js
          1. Immutable lists and maps
          2. Immutable transformations
          3. Change detection
        5. Summary
      17. 10. Implementing a Dispatcher
        1. Abstract dispatcher interface
          1. Store registration
          2. Dispatching payloads
          3. Handling dependencies
        2. Challenges with the dispatcher
          1. Educational purposes
          2. Singleton dispatchers
          3. Manual store registration
          4. Error-prone dependency management
        3. Building a dispatcher module
          1. Encapsulating store references
          2. Handling dependencies
          3. Dispatching actions
        4. Improving store registration
          1. Base store class
          2. An action method
        5. Summary
      18. 11. Alternative View Components
        1. ReactJS is a good fit for Flux
          1. ReactJS is unidirectional
          2. Re-rendering new data is easy
          3. Small code footprint
        2. The downsides of ReactJS
          1. Virtual DOM and memory
          2. JSX and markup
          3. Vendor lock-in
        3. Using jQuery and Handlebars
          1. Why jQuery and Handlebars?
          2. Rendering templates
          3. Composing views
          4. Handling events
        4. Using VanillaJS
          1. Keeping my options open
          2. Moving to React
          3. New hotness
        5. Summary
      19. 12. Leveraging Flux Libraries
        1. Implementing core Flux components
          1. Customizing the dispatcher
          2. Implementing a base store
          3. Creating actions
        2. Implementation pain points
          1. Dispatching asynchronous actions
          2. Partitioning stores
        3. Using Alt
          1. The core ideas
          2. Creating stores
          3. Declaring action creators
          4. Listening for state changes
          5. Rendering views and dispatching actions
        4. Using Redux
          1. The core ideas
          2. Reducers and stores
          3. Redux actions
          4. Rendering components and dispatching actions
        5. Summary
      20. 13. Testing and Performance
        1. Hello Jest
        2. Testing action creators
          1. Synchronous functions
          2. Asynchronous functions
        3. Testing stores
          1. Testing store listeners
          2. Testing initial conditions
        4. Performance goals
          1. User perceived performance
          2. Measured performance
          3. Performance requirements
        5. Profiling tools
          1. Asynchronous actions
          2. Store memory
          3. CPU utilization
        6. Benchmarking tools
          1. Benchmarking code
          2. State transformations
        7. Summary
      21. 14. Flux and the Software Development Lifecycle
        1. Flux is open to interpretation
          1. Implementation option 1 – just the patterns
          2. Implementation option 2 – use a Flux library
          3. Roll your own Flux
        2. Development methodologies
          1. Upfront Flux activities
          2. Maturing a Flux application
        3. Borrowing ideas from Flux
          1. Unidirectional data flow
          2. Information design is king
        4. Packaging Flux components
          1. The case for monolithic Flux
          2. Packages enable scale
          3. Installable Flux components
        5. Summary
      22. Index

    Product information

    • Title: Flux Architecture
    • Author(s): Adam Boduch
    • Release date: May 2016
    • Publisher(s): Packt Publishing
    • ISBN: 9781786465818