iSplit

1

05/17/2016

Sharing is Caring

1

Group 4 - CSC 868

• Ivan Gonzalez
• Deeptanshu  Jha
• Chris Lang
• Madhura Patil    
• Siddhartha Sankasala
• Mahesh Singh Sawant
• Abhilash Shrivastava         
• Ishwari Shevade
• Thomas Tse
• Jens  Vanderhaeghe

05/17/2016

2

3

05/17/2016

Demo

• Software Architecture
• Technologies
  • Client
    • HTML5
    • React
    • Redux
    • ES6
  • Server
    • Google Vision
    • Parser
    • TextBelt
• Conclusion

Presentation Overview

4

05/17/2016

Software Architecture

• Client (browser)
• API (server)
• Written in Javascript
  • Code reuse
  • JSON serialization

5

05/17/2016

Software Architecture

6

05/17/2016

Technologies

7

05/17/2016

Client

• HTML5
  • Write once, run everywhere
  • iOS and Android support
• WebPack to bundle App

8

05/17/2016

React

• View Library
• Created by Facebook
• Reusable Components
  • Encapsulation
  • Example: List Item
• Updates UI when model changes
• Lightning Fast Performance
  • Due to Virtual DOM

9

05/17/2016

Redux

• Predictable State Container
  • Use Pure function to update
• Centralized State Object
• One Directional Data flow
• One way Databinding
• Perfect in combination with React

10

05/17/2016

ES6 - Javascript 2015

• Object Oriented Javascript
• Babel Compiler
• Inheritance
• Classes
• Modules & Imports

import React from 'react';
import './header.css';
import {connect} from 'react-redux';
class Header extends React.Component {
  componentWillMount() {
    window.addEventListener('popstate', () => {
      this.props.dispatch({
        'type': 'UPDATE_ROUTE',
        'payLoad': window.location.pathname
      });
    });
  }
  render() {
    return <header>
      <h1>iSplit</h1>
    </header>;
  }
}
const exports = connect(state => ({
  path: state.root.path
}))(Header);
export default exports;

11

05/17/2016

Server

• REST API
• NodeJS
  • Javascript without browser
• NPM package manager
• Express
  • Lightweight HTTP Server
• Nginx webserver
  • Load Balancer
  • Reverse proxy

12

05/17/2016

Parser

• Google Vision API
• Based on Neural Networks
• OCR
  • returns bounding rectangles
• Parser creates rows
• returns items

    13

05/17/2016

TextBelt API

• HTTP API
• Sends SMS
• Notifies Users

14

05/17/2016

Conclusion

• Full Stack Javascript
  • Reusable code
  • Reusable classes
  • JSON as data transfer format
• React/Redux provides structure
  • React : reusable View components
  • Redux : Application State container
• ES6: Object Oriented Javascript

15

05/17/2016

Questions?

16

05/17/2016