Web Development Notes from a Data Scientist

Who should read this?

Myself: one of my 2022 career goals is to become a better T-shaped data scientist. For example, the depth of my "T" represents data science and machine learning domain knowledge, especially recommender system and Natural Language Processing (NLP) and Bandit-related advancement. The width of my "T" represents all the areas that will be touched upon on personalization from backend to frontend. In the past 6 months, I feel I’ve started to get a good grasp on how to plug my data science code into Django and GraphQL API sides of things. So this year, I really want to understand how the GraphQL API is plugged into our frontend of service.

Any data scientist who wants to learn the essentials of web development to better understand frontend workflow.

What’s included?

Below are notes I took from my brilliant coworker Nic who is not only a great frontend developer but also a wonderful teacher on React, NextJS, and web development in general! There are four sections:

Soundbite for the Core Frontend Tech Deck
Step-by-Step guide on Frontend Development Environment Setup
Key File Structure Walkthrough
Tips: how to activate DevTools in Chrome + material ui

🎵 Soundbite for the Core Frontend Tech Deck

Core Frontend Tech Deck: Create-React-App (CRA) + TypeScript

When I started to learn web development from Nic, he said the first choice I have to make is to choose Next.js VS Create-React-App (CRA). Natural question you might ask – What are they and what are the differences?

What are they?

Next.js and Create-React-App are both web development frameworks for frontend developers. To draw an analogy from data science, it’s similar to that we have Keras and PyTorch as deep learning frameworks. To draw an analogy from the backend, we have both Flask and Django as a python-based web development framework for backend developers

How different are they for a data scientist?

Since my main purpose is to understand how data science API is connected with frontend code, and I’m not trying to become a frontend developer anytime soon, the difference to me is that Next.js requires more setup, while Create-React-App requires the bare minimum to get going.
Therefore I selected Create-React-App as my answer to the first choice.

The second choice to make is to choose between TypeScript and JavaScript. Actually, I didn’t have to choose I just needed to follow – Nic strongly recommended that TypeScript is considered as best practice adoption or the modern-day JavaScript.

What is TypeScript?
it is a superset of JavaScript, and the syntax is almost the same as JavaScript.
Why is it better?
JavaScript allows you to use the same object for different types of data, which makes it hard to debug. You might only notice issues when the app is already deployed on production. While TypeScripts has optional static typing and type inference, adding more limitations to achieve better robustness.

My third question is about two terms I hear a lot: React Native VS React

So both Next.js and Create-React-App are based on React, which is a JavaScript library for building user interfaces (UI). React is used for web development, meaning that the work is for developing websites.
React Native is a tool that allows you to write the same JavaScript or TypeScript code and develop them for mobile apps. For instance, normally, Android apps are coded in Java, and ios apps are coded in swift. If you develop your service on the website, Android mobile, and iPhones, you would need to write three completely different sets of code. React Native allows you to bundle the same TypeScript code you developed for the website and deploy it to both Android and ios mobile apps.

Nic also mentioned that there are three major pillars for frontend development: HTML, CSS, and JavaScript (TypeScript). Since my goal is to understand the logic on how data science models (wrapped in an API) get consumed in the frontend, we will focus less on HTML and CSS, and focus mainly on the TypeScript part.

👣 Step-by-Step guide on Frontend Development Environment Setup

Step 1: We need to install the packages node and yarn .

What is yarn?

it is a package manager. Just like for data science, we have python package manager pip and conda . Here we have npm and yarn.They both download packages from npm repository. Yarn generates yarn.lock to lock down the versions of package’s dependencies by default. Its main advantage is the fact that it helps to avoid any possible problems related to different versions of node.js system modules, on which the project will be mounted.

(Below installation code runs on terminal on MacBook)

# 1. install node
$ brew install node

# Check your node version
$ node --version

# 2. install yarn
$ brew install yarn

Pro-tip: if you ever need to work with different versions of Node.js (just like sometimes in DS we have different code for python versions), you can install n to manage Node.js version

# if you already have Node.js installed
$ npm install -g n

# check node.js version 
$ n lts

Step 2: create a project local or Github. In local, you can select create a React Project in Pycharm. If you like your project to be collaborative, you can also create a project in Github first then ran git clone your-project to your desired project folder.

Step 3: create a typescript react-app project using the below command

$ yarn create react-app discovery-client --template typescript

🗝 Key File Structure Walkthrough

Once you open your first react app project in Pycharm, you’ll notice that you have lots and lots of files, especially in node_modules . So it is highly recommended to add node_modules to your .gitignore so it keeps the updates clean and human-readable.

Since my goal is to build a recommender frontend, which is called discovery-client , here’s what my project folder looks like:

A quick tip on generating file structure is to use tree command. For instance, here’s what’s inside src folder:

Now it brings to a question I’ve had on my mind for a very long time. I know it’s best practice to put all your code under src , even for our data science code, it’s recommended by my manager to do so. But why?

Because src is the entry point for production deployment. The production system is typically cloud-hosted solution and src allows the production system can be pointed to the directory. That’s how the production system can find all the code and execute the right path.

There are three key files Nic called out that might be most relevant for Data scientists to pay attention to:

public/index.html : this will render the app component for the browser
src/index.tsx : this will render the app component for the local desktop environment
src/App.tsx : this is the main component in our app, which we can write React code using TypeScript.

🌠 Tips: how to activate DevTools in Chrome + material ui

How to enable development tool in Chrome
- option + cmd + J
- For example, as I am typing in Medium, I can see below elements

Material ui
- The best way to think about this in the Data Science analogy is that we have sklearn, and we can easily reuse the random search and grid search without writing code from scratch. The same goes for building UI components. This is a library including many prebuilt UI components which allow you to reuse and save your time!

Summary

As a data scientist, if you want to learn how your code talks from backend to frontend, it’s beneficial to learn at a high level how frontend and web development work. My goal here is to help myself and other data scientists to get minimum effective exposure to the logic and workflow of frontend.
In my company, we use React for the web and React Native for mobile. It might be different in your organization. I find it super beneficial to learn them from your frontend developer coworker rather than going through a course because they can easily tailor the most important lessons for data science and machine learning specifically.
Last but not least, always learn and evolve and enjoy the journey!