Software Part of First Prize Winner Project Presentation in 2018 Citibank Financial Innovation Application Competition

In the final of the 2018 Citibank Financial Innovation Application Competition, I, as the leader of the front-end team, gave a presentation about our software project.

Transcript

1. SOFTWARE
2. Crafted and fine-tuned UI Consistent Look Fluent animations Rich and interactive charts Optimized for Mobile, Tablet & PC With Ant Design, AntV and Bizcharts UI Architecture Workflow Crafted UI & Responsive Design Responsive design
3. UI Architecture Workflow Crafted UI & Responsive Design Homepage
4. UI Architecture Workflow Crafted UI & Responsive Design Rich and interactive charts
5. UI Architecture Workflow Crafted UI & Responsive Design Mobile Friendly
6. UI Architecture Workflow Crafted UI & Responsive Design Responsive Design
7. UI Architecture Workflow Architecture Web Frontend Application Backend Application Database CitiBank and External API RESTful API Complete Frontend Backend Separation Complete Frontend Backend Separation Improve network performance Easier integration of other clients
8. Write APIs as code Auto generated doc based on code Always up to date RESTful API with Swagger UI Architecture Workflow http://118.25.55.247:5000/api/ Auto Generate
9. Backend Architecture UI Architecture Workflow Flask View RESTful API Provides and receives data Application SQLAlchemy Executing requests Saves and reads data Any compatible database engine External API Layered Architecture Help development, debugging and testing Each layer is specialized
10. Backend Architecture Light weight Easy to use Rich ecosystem Flask Web Framework UI Architecture Workflow API definition with flask-restplus
11. Backend Architecture Integration with ML tools UI Architecture Workflow (And More)
12. Frontend Architecture Single Page Application UI Architecture Workflow RESTful API API Service with Mock Component1 Component2 UserStore UiStore Component3 Common components, layouts Injected Into Most welcomed in the world Large and evolving community Global Stores React stack TypeScript with TSLint Code Splitting MobX state management Dependency Injection API Layer with Mock Code Quality Control
13. Frontend Architecture UI Architecture Workflow TypeScript Write elegant code in elegant way Code style check with TSLint
14. Frontend Architecture UI Architecture Workflow Code Splitting 50+ small chunks Load on demand Reduce unnecessary network traffic
15. Frontend Architecture UI Architecture Workflow Dependency Injection Loosely coupled, flexible and maintainable codebase MobX Complex state management made easy
16. Frontend Architecture UI Architecture Workflow API Service layer: use mock data during development by just changing the value of one variable
17. Git Hierarchical branch and branch-based workflow UI Architecture Workflow Teamwork and Modern Workflow Development Stage Branch Development Team member’s own branch Review & Test Frontend or Backend Integration test Software Deployment Master