#ng-summit-redux
Trendy Brunch Demo Application for Angular Summit
Get it:
git clone https://github.com/e-schultz/ng-summit-redux.git
To start:
- npm install
- npm run start
- open browser to localhost:3000/src
Slides from the Talk
TODO: Add Link
App Overview
To demonstrate reactive architecture using redux + ng-redux with Angular.
TrendyBrunch
Simple resturant application,
- Reducer for Lineup - people waiting to be seated
- Reducer for Tables - handles seated people, and their orders
- Reducer for Menu - food items available, and what is in stock
General Idea:
- parties of people can join/leave the line
- parties get seated at tables
- tables can take place orders - add/remove items from an order, then have it be submitted
- UI is derived from the application data structure
Data Structure
[Resturant] --------- [Menu]
| |
[Line] |
[Tables]
|
|
[Order]
UI Overview
- Lineup + Lineup Summary
- Dining Room - Smart Component
- Table - Dumb component
- Can seat a party
- Start an order
- Pay the bill
- Clean the table
- Menu - Dumb component
- Add item to order
- Remove item from order
- Place Order
- Table - Dumb component
- Tabs for Orders
- Pending Orders - orders that are activly being placed
- No actions, render only
- Completed Orders - orders that have been taken, and are now in the kitchen
- Can add items to order
- Can remove items from order
- Can deliver the order
- Pending Orders - orders that are activly being placed
Lineup
Data
- ID
- number of people
Actions/Events
- Join Line - PARTY_JOINED
- Seat a party - PARTY_SEATED
- Leave the line - PARTY_LEFT
Tables
Data
- table ID
- number of seats
--- events place order / pay bill / seat
Actions/Events
--- simplify it so a table is either clean / dirty / occupied- seat customer
- add items to order
- remove items from order
- submit order
- request bill
- pay bill + leave
- clean table
Orders
- table id
- id
- Order { key = menu item id, value = qty}
MenuItems
- id
- price
- stock
- description
Components
There are a few examples of components, smart/dumb components, containers in this application.
In the 'Orders' component, three versions are available showing different approaches.
In src/components/index.js
you can switch between them by commenting
out others and only bringing in the one that you want.
// import orders from './orders-v1';
// import orders from './orders-v2';
import orders from './orders-v3';