BentoChat - a platform for group organisation
•
0 likes•293 views
BentoChat is a one stop shop for group organisation and productivity. Bento is still under development, a first private alpha will be available later this summer, with a public beta coming later in 2015. This presentation was produced for the 2nd year WebApp project as part of the Computing degree at Imperial College London. Thanks to Oli and Sam, the other two thirds of Bento.
Recommended
More Related Content
Similar to BentoChat - a platform for group organisation
Similar to BentoChat - a platform for group organisation (20)
More from Lorenzo Paoliani
Recently uploaded
Recently uploaded (20)
BentoChat - a platform for group organisation
- 1. BentoChat
- 2. What is ?
- 3. Bento is an opinionated framework for group productivity
- 4. Motivation
- 5. We were unhappy with the available tools
- 6. They lack the ability to be the ground control for your team
- 7. Enter
- 8. App Concept pillars5 Wiki Todos IssuesChat Collections
- 9. Today pillars3 Wiki Todos IssuesChat Collections
- 10. Update Wiki Complete Todos Chat Set TodosRead Wiki User Interaction Cycle
- 11. Pillar 1 Chat
- 13. Demo
- 14. Pillar 2 Wiki
- 15. Wiki Collection of group’s knowledge Single source of project state
- 17. Demo
- 18. Pillar 3 Todos
- 20. Demo
- 21. Architecture
- 22. Stack Overview
- 23. Cloud deployment Linux Docker RethinkDB io.js BentoAPI HTTP server Bento front-end App expressJS
- 24. Local deployment Mac OS X Docker RethinkDB io.js BentoAPI Grunt Bento front-end App expressJS nodemon Webpack
- 25. Front-End
- 26. Flux
- 27. Action Dispatcher Stores Views Action the flux unidirectional cycle
- 28. Authentication
- 29. Front-end Back-end POST /login Create and sign tokenStore token in localStorage GET /chat Verify JWT Fetch data Load Authenticated View Render ChatList
- 30. 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
- 31. Pageload Cycle
- 32. 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 2 User sends a message. Chat component initiates sendMessage action. 1 6 Socket receives new_message event and dispatches the update 1 3 Authenticated socket receives the message 1 4 Save new message 1 5 Message is pushed to all connected users Socket.io HTTP Local
- 33. Reflections
- 34. Full JavaScript ES6 stack
- 35. Dogfooding Using Bento to build Bento
- 36. UI/UX Writing user facing software
- 37. Designing user interfaces is really hard It would be beneficial to invest some time upfront building mockups before implementing the UI
- 38. Sometimes it works out… …sometimes it doesn't Technological Investment
- 39. Technological Investment Find the right balance between writing higher-level code and not drowning in tutorials
- 40. Technological Investment Find the right balance between writing higher-level code and not drowning in tutorials
- 42. “Hofstadter's Law: It always takes longer than you expect, even when you take into account Hofstadter's Law. ”
- 43. and that’s
- 44. Thanks! Sam Budd | Lorenzo Paoliani | Oli Robinson
- 45. Bento is also for llamas cute fuzzy ones