BentoChat

What is ?

Bento is an

opinionated framework for

group productivity

Motivation

We were unhappy with the available tools

They lack the ability to be the ground control for your team

Enter

App Concept

pillars5Wiki Todos IssuesChat Collections

Today

pillars3Wiki Todos IssuesChat Collections

Update Wiki

Complete Todos

Chat Set TodosRead Wiki

User Interaction Cycle

Pillar 1

Chat

ChatSimple and robust

Demo

Pillar 2

Wiki

WikiCollection of group’s knowledge

Single source of project state

WikiMarkdown Comments

Collaborative Editing

Demo

Pillar 3

Todos

TodosAssignable tasks

Due dates Archivable

Demo

Architecture

Stack Overview

Cloud deploymentLinux

Docker

RethinkDB

io.js

BentoAPI

HTTP server

Bento front-end

AppexpressJS

Local deploymentMac OS X

Docker

RethinkDBio.js

BentoAPI

Grunt

Bento front-end App

expressJS

nodemonWebpack

Front-End

Flux

Action Dispatcher Stores Views

Action

the flux unidirectional cycle

Authentication

Front-end Back-end

POST /login Create and sign tokenStore token in

localStorage

GET /chat Verify JWTFetch data

Load Authenticated View

Render ChatList

Front-end Back-end

Establish socket.io handshake

Send JWT through socket

Send new messages through

authenticated socket

Verify JWT

Create authenticated

socket

Establish socket.io handshake

Pageload Cycle

User authenticates with email and password POST /login

Static server

API server

React App

Database

1 Browser requests page 2 Sends index.html and minified JS files

3 React App loads root view

4

7 Save JWT in localStorage. React loads authenticated section of app

5 Hash password and check if OK

6 If OK, respond with signed JWT containing user information

8 Chat component mounts and initiates action to fetch the data it needs

9 Verify JWT signature

1 0 Retrieve all messages for group

1 1 Chat component renders messages

1 2User sends a message.

Chat component initiates sendMessage action.

1 6 Socket receives new_message event and dispatches the update

1 3Authenticated socket receives the message

1 4 Save new message

1 5 Message is pushed to all connected users

Socket.io HTTP Local

Reflections

Full JavaScript ES6 stack

DogfoodingUsing Bento to build Bento

UI/UXWriting user facing software

Designing user interfaces is really hard

It would be beneficial to invest some time upfront building mockups before implementing the UI

Sometimes it works out……sometimes it doesn't

Technological Investment

Technological Investment

Find the right balance between writing higher-level code and not

drowning in tutorials

Technological Investment

Find the right balance between writing higher-level code and not

drowning in tutorials

Hoftstadter’s Law

“ Hofstadter's Law: It always takes longer than you expect, even when you take into

account Hofstadter's Law.

”

and that’s

Thanks!Sam Budd | Lorenzo Paoliani | Oli Robinson

Bento is also for llamascute fuzzy ones