How we rapidly built Yotpo insights product, with 2 teams: one prototyping "future UI" and one integrating and releasing to production.

1. Cracking Web Development

2. The Birth of Insights
01/2017
Reviews Sentiment Deployed
Deploy review sentiment naive
model, which detects sentiment
for entire review
07/2017
Started Working on Insighs API
Creating an extensible, modular
and generic API over
Elasticsearch
02/2017
Insights POC
Data Science started working on
POC - detecting not only
sentiment, but what people
actually talk about
03/2017
Pass Down to Big Data
Splitting the pipeline into 2
phases - Syntactic Parser and
Insights. Implementing insights
in a distributed scalable manner
11/2017
Beta!!!
First phase, Topics with several
filters.
09/2017
Web Efforts
Working with Spectory on
Insights ui.

3. Tech Stack

4. Angular
● Opinionated Framework
Comes with RxJS and TypeScript built in
● Component-based
Self-contained modules and components
● One way data flow

5. ● Created by Dan Abramov in 2015
● Influenced by Facebook’s Flux paper and
the Elm language
Redux

6. Redux
● Your app is a state machine
The only way to change the state is by
dispatching an action to the reducer
● Declarative & Predictable
What instead of How
Async made easy
● Isolation of data
Data is isolated from presentation

7. Entities
● Store
● State
● Action
● Reducer
● Epic
● Module
● Service
● Widget
● Container

8. Entities
● Store
● State
● Action
● Reducer
● Epic
● Module
● Service
● Widget
● Container

9. Entities
● Store
● State
● Action
● Reducer
● Epic
● Module
● Service
● Widget
● Container

10. Entities
● Store
● State
● Action
● Reducer
● Epic
● Module
● Service
● Widget
● Container

11. Entities
● Store
● State
● Action
● Reducer
● Epic
● Module
● Service
● Widget
● Container

12. ● Store
● State
● Action
● Reducer
● Epic
Entities
● Module
● Service
● Widget
● Container

13. ● Store
● State
● Action
● Reducer
● Epic
Entities
● Module
● Service
● Widget
● Container

14. ● Store
● State
● Action
● Reducer
● Epic
Entities
● Module
● Service
● Widget
● Container

15. Key Concepts
1 | UI is always represented by the current state
interface AppState {
data: DataState;
ui: UIState;
}
interface UIState {
layoutState: LayoutState;
sidebarStructure:
SidebarStructure;
spinnersState: SpinnersState;
}
Interface SpinnersState {
topics: boolean;
paginatedTable: boolean;
reviewsModal: boolean;
filter: boolean;
}

16. Key Concepts
2 | UI is declaring only what happened
this.ngRedux.dispatch(this.actions.topicExpanded(data.topic))
case TopicsActions.expandedTopic:
const raw = lastState.raw.slice(0);
const index = _.findIndex(lastState.raw, { id: action.payload });
raw[index] = { ...raw[index], expanded: true };
return { ...lastState, raw }
Action
Reducer
State

17. 3 | Data is fetched in response to UI actions
Key Concepts
Topic Expanded
Fetch Topic Products
Call API
Fetch Topic Products SuccessEPIC

18. 4 | Front end is decoupled from Full Stack Backend
Key Concepts
FRONT-END FULL-STACK

19. 4 | Front end is decoupled from Full Stack Backend
Key Concepts
● Front end specialists work with simple mock json server
○ Not dependent on server environment - Always works
○ Easy to create UI edge cases
○ Use Demo for design product review usability testing QA
● Full stack developers will connect the UI to the backend
○ Deal with environment CI - Deploy first
○ Deals only with how to retrieve data
○ Work on API Logging Monitoring Analytics Caching

20. Key Concepts
5 | Current UI and Future UI
GA
Related Info | Moderation
Beta-3
All Filters | Dynamic Favorites
Beta-2
Drill-Down Chart | Search | 3 Filters
Beta-1
Static Favorites | 2 Filters | Products
insights-components
master
yotpo-internal-master
insights-ui

21. Key Concepts
5 | Current UI and Future UI
GA
Related Info | Moderation
Beta-3
All Filters | Dynamic Favorites
Beta-2
Drill-Down Chart | Search | 3 Filters
Beta-1
Static Favorites | 2 Filters | Products
master
yotpo-internal-master Beta-1
Static Favorites | 2 Filters | Products
insights-components
insights-ui

22. Benefits
● Start working immediately without a backend
● Get to design product review quicker
● Leverage Speciality (Frontend / Backend / CI)
● Ability to offload work to outsource
● End2End tests are easier and can be splitted for UI and Data

23. Challenges
● Communication
● Identifying responsibility between teams
● Merges between future and current UI - Regression Risk
● High quality components VS More components
● How much further should future UI advance?
● Deepen the Inequality - knowledge sharing

24. Thank You.