Another 1k stars repository:
Angular Spotify

Frontend Engineer

AngularAirย - 08 May 2021

About me

Hi, My name is Trung ๐Ÿ˜Š

  • Experienced FE engineer, passion in
    creating experience-driven products
  • Frontend Engineer @cakedefi
  • Organizer @Angular Singapore
  • Organizer @Angular Vietnam
    ย 
  • Founded in 2021
  • Advocate and grow the Angular developer community in Singapore
  • Monthly meetup on the first Tuesday ย 
  • FREE one-on-one support ๐Ÿ‘‰ BOOK NOW!
  • Biggest Angular group in APAC
  • Advocate and grow the Angular developer community in Vietnam
  • 16k members
  • Founded in 2017 by
  • 100 Days Of Angularย series

Agenda

  • What is Angular Spotify?

  • Why another "clone"?

  • Monorepo and Nx Workspace

  • Principles

  • Spotify integration flow

  • The cherry on the cake

  • Q&A

What is Angular Spotify?

Spotify premium is required for the Web Playback SDK to play music

Why another "clone"?

  • Have you ever seen a largely completed Spotify client build with Angular?
    ย 
  • Other Angular fellows could see how a real world application looks like
    ย 
  • Save time on requirement and design
    ย 
  • Experiment Nx Workspace ๐Ÿ˜ฌ
    ย 
  • Livestream series for Angular Singapore

Techstack

Nx

Nx is a suite of dev tools to help you architect, test, and build at any scale.

Nx has fully integrated support for modern libraries like Jest, Cypress, ESLint, and more.

ย 

Nx works especially well for monorepos

What is monorepo?

A single git repository that holds the source code for multiple applications and libraries, along with the tooling for them.

Why monorepo?

Isn't it the same as putting multiple folders/projects within a repo?

Spotify hypothetical workspace

API

Core

Web

Mobile

  • API
  • Daemon
  • DB Schema

Code Collocation

.
โ”œโ”€โ”€ api
โ”‚   โ”œโ”€โ”€ package.json
โ”‚   โ”œโ”€โ”€ package-lock.json
โ”‚   โ”œโ”€โ”€ node_modules
โ”‚   โ””โ”€โ”€ tsconfig.json
โ”œโ”€โ”€ web
โ”‚   โ”œโ”€โ”€ package.json
โ”‚   โ”œโ”€โ”€ package-lock.json
โ”‚   โ”œโ”€โ”€ node_modules
โ”‚   โ””โ”€โ”€ tsconfig.json
โ””โ”€โ”€ mobile
    โ”œโ”€โ”€ package.json
    โ”œโ”€โ”€ package-lock.json
    โ”œโ”€โ”€ node_modules
    โ””โ”€โ”€ tsconfig.json

How it looks

.
โ”œโ”€โ”€ api
โ”‚   โ””โ”€โ”€ types
โ”‚       โ””โ”€โ”€ album.ts
โ”œโ”€โ”€ web
โ”‚   โ”œโ”€โ”€ api
โ”‚   โ”‚   โ””โ”€โ”€ album-api.ts
โ”‚   โ””โ”€โ”€ types
โ”‚       โ””โ”€โ”€ album.ts
โ””โ”€โ”€ mobile
    โ”œโ”€โ”€ api
    โ”‚   โ””โ”€โ”€ album-api.ts
    โ””โ”€โ”€ types
        โ””โ”€โ”€ album.ts

To better share code

API

Core

Core

SDK

Web

Mobile

  • API
  • Daemon
  • DB Schema
  • Data model
  • API endpoint
  • Utils function

@spotify/sdk

How it looks with the SDK

.
โ”œโ”€โ”€ core
โ”‚   โ””โ”€โ”€ types
โ”‚       โ””โ”€โ”€ album.ts
โ”œโ”€โ”€ sdk (publish to npm)
โ”‚   โ”œโ”€โ”€ interfaces
โ”‚   โ”‚   โ””โ”€โ”€ album.ts
โ”‚   โ””โ”€โ”€ api
โ”‚       โ””โ”€โ”€ album-api.ts
โ”œโ”€โ”€ web
โ”‚   โ””โ”€โ”€ import { Album } from "@spotify/sdk"
โ””โ”€โ”€ mobile
    โ””โ”€โ”€ import { Album } from "@spotify/sdk"
.
โ”œโ”€โ”€ apps
โ”‚   โ”œโ”€โ”€ api
โ”‚   โ”‚   โ””โ”€โ”€ import { Album } from "@spotify/shared/interfaces"
โ”‚   โ”œโ”€โ”€ web
โ”‚   โ”‚   โ”œโ”€โ”€ import { Album } from "@spotify/shared/interfaces"
โ”‚   โ”‚   โ”œโ”€โ”€ import { PlayButtonComponent } from "@spotify/shared/components"
โ”‚   โ”‚   โ””โ”€โ”€ import { VisualizationComponent } from "@spotify/web"
โ”‚   โ”œโ”€โ”€ mobile
โ”‚   โ”‚   โ”œโ”€โ”€ import { Album } from "@spotify/shared/interfaces"
โ”‚   โ”‚   โ””โ”€โ”€ import { Button } from "@spotify/mobile/button"
โ”‚   โ””โ”€โ”€ sdk
โ”‚       โ””โ”€โ”€ import { Album } from "@spotify/shared/interfaces"
โ”œโ”€โ”€ libs
โ”‚   โ”œโ”€โ”€ api
โ”‚   โ”œโ”€โ”€ web
โ”‚   โ”‚   โ””โ”€โ”€ visualization
โ”‚   โ””โ”€โ”€ mobile
โ”‚       โ””โ”€โ”€ button
โ”œโ”€โ”€ shared
โ”‚   โ”œโ”€โ”€ components
โ”‚   โ”‚   โ””โ”€โ”€ play-button
โ”‚   โ””โ”€โ”€ interfaces
โ”‚       โ””โ”€โ”€ album.ts
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ package-lock.json
โ””โ”€โ”€ node_modules

Why monorepo?

  • Single set of dependencies: keep all of our dependencies up to date across an organization
    ย 
  • Shared code: Simplify code sharing/refactoring across an organization
    ย 
  • Improve cross-team collaboration: Get a consistent way of building and testing applicationsย 

Why Nx?

  • Faster command execution: run commands only on code that is affected by the current change.
    ย 
  • Local and distributed caching of executors
    ย 
  • Consistent code generation:ย automate code creation and modification tasks

Affected Command

npm run affected:dep-graph

Computation Caching & Scaling

Why not monorepo?

  • Need a standard set of collaboration structure: commit message, branch name and etc.
    ย 
  • Versioning
    ย 
  • Boilerplate

Principles

  • OnPush Change Detection and async pipes
    ย 
  • No function calls in Angular template expressions
    ย 
  • SCAMs (single component Angular modules)
    ย 
  • Everything will stay in the libsย folder

Why

  • Consistency: eliminate mental overhead "where to put what"
    ย 
  • Promote (SCAM) to get the benefits from the Nx affected commands.
    ย 
  • Prevent circular dependencies issue.

View the full notes

Authentication Flow

Implicit Grant Flow

  • Does not involve secret key
  • Short lived access token
  • No refresh token

Integration Flow

Cherry on top of the cake

  • Visualization
    ย 
  • Blurry album background
    ย 
  • PWA application ๐Ÿ˜ฎ

Visualization

Blurry background

PWA Application

Q&A

Thank you!

Thanks everyone for your support!

Livestream Series

Another thousand stars repository: Angular Spotify

By Trung Vo

Another thousand stars repository: Angular Spotify

Deck for Angular Spotify talk https://github.com/trungk18/angular-spotify

  • 133
Loading comments...

More from Trung Vo