Skip to content

Libraries Used

Jump to bottom
Duha-H edited this page Sep 14, 2020 · 1 revision

Libraries/Frameworks Used

Libraries, frameworks, and packages used are broken down by front-end and back-end usage.

Front-end

Angular Material

The Angular Material library lent itself well to providing a simple and (fairly) customizable UI components for Traccio.

Material input components used:

Material view components used:



nivo

nivo is a data-visualization React library, so I had to jump through some hoops to use this library in my Angular app. Why did I choose a React library in my Angular app, I hear you ask? Well:

  1. It was one of the main inspirations behind the idea for this app, other existing Angular data visualization libraries either did not match the simplicity of nivo, or were too technical-looking and did not deliver the friendly UX that nivo provides. So I couldn't really compomise on using it.
  2. In all honesty, I was too distracted by how cool nivo components looked to realize that it was a React library until after I started development in Angular :)

In any case, it didn't prove too difficult to embed nivo's React components in Angular components and use them that way, details below.

Usage details:

In order to use nivo in the application, I created Angular component "wrappers" around each nivo component with help from this tutorial.

  • I created a parent ReactWrapper component that gets the reference to a span element in the component's template, and embeds the nivo component's canvas element (using react's createElement) in that
  • ReactWrapper also propagates input changes to the nivo component's props, and triggers re-renders (as required)
  • For each nivo component I decided to use, I created an Angular component that extends the parent ReactWrapper and renders it using react-dom's render() function
  • Each component receives data through binding @Inputs to its template, and then passes those along as props (formatted in the required prop type) to each nivo React component

Components used:



Hammerjs

hammerjs was used to handle simple mobile swiping gestures, only utilized in the app's Journey list view (specifically the SliderContainerComponent). This was added to provide a more intuitive interaction with the list on mobile.

  • An event handler is triggered by hammerjs's swipeLeft and swipeRight events


rxjs

rxjs was the primary data-stream and change propagation method used by the app. Since Traccio is essentially a CRUD app, using a reactive and asynchronous data-flow management system was obviously key. For my purposes, using rxjs was sufficient (as opposed to using state management-oriented library like NGRX, for instance) because it provided a faster way to get up and running, and was more than enough to handle the application's relatively simple data-flow and management.

Usage details:

  • The app mainly mimicked a data store using BehaviourSubjects. These were used to emit user details, journey lists, and application lists (fetched on authentication)
  • BehaviourSubjects were then used as the source for creating Observables, using rxjs's asObservable(), to be used in views across the application
  • Wherever necessary, these Observables were directly using in a given view's template using an async pipe


Amplify Framework

Since the app uses a number of back-end AWS services, the AWS Amplify Framework was used to connect to these services.

Usage details:

Authentication

  • User accounts were managed using Cognito user pools, connecting to the user pool and verifying auth-state was done using the Amplify Auth class
  • Auth functions were wrapped in a deliberately-created AuthWrapperService to control and manage function responses, and create more suitable user-facing feedback (error messages, etc.)

GraphQL API

  • Since DynamoDB tables were used for storage, a GraphQL schema was used to represent the data stored in these tables
  • An API service was created as an endpoint to connect to Amplify's GraphQL API
  • The service modelled the schema's types, queries, and mutations to be appropriately used by the application
  • Amplify's graphqlOperation() was used to perform operations (queries, mutations)


Back-end

An AWS Amplify app back-end app was created, and configured with the services described below.

Authentication using Cognito

  • Cognito user pools were used to store and manage user accounts, and setup user sign-in and sign-up
  • A social sign-in using Google was also configured for creating user-accounts
  • A Lambda function was used with a PostConfirmation trigger to add an entry of necessary user details to the app's database


GraphQL API using AWS AppSync

  • A GraphQL schema was defined and used to create DynamoDB tables
  • AppSync was used to create a GraphQL API, and integrate with the generated DynamoDB data sources (query and modify)


AWS Lambda

A number of Lambda functions were created or generated to handle different aspects of the application's business logic:

  • A userSetup function was created (triggered on user account confirmation) to create a user entry in the application's database
  • A customMessage function was created (triggered on user sign up) to handle sending a custom confirmation message to users signing up As well as others, generated by AppSync or Cognito, that manage other aspects of the back-end setup.


Database Storage using DynamoDB

  • 4 non-relational DynamoDB tables were generated using the aforementioned GraphQL schema
  • The tables store User Entries, Journeys (each linked to a user entry), Applications (each linked to a Journey), and Wishlist Applications
  • All database queries/updates are handled by the GraphQL API

Wiki Contents

Clone this wiki locally