Fanghui He's CPT Project 2019

From CSclasswiki
Jump to: navigation, search

Full Stack Development at GOOGLE


Construct an internal dashboard from sketch

Technology and Language

Modulesets Serving, Protocol Buffer, Apps Framework, Http Server, and Angular
Java, Typescript, Javascript, Python, HTML, CSS
Bigtable, CNS

Porject Overview

To construct a website from scratch, there're two main sections: Frontend and Backend.

Frontend is responsible for displaying visual elements and data, while backend is responsible for data fetching and processing.

I worked with one other partner on this project. Even though both of us did some full stack development, I focus more on the backend. So I will pay more attention on backend here.

Backend (Java):

In this part, I will introduce how to set up the backend of the webserver.

Boost up
  • The first objective of a webserver is to boost up the webpage. To boost up a webpage, we need approaches to serve static files (html/css/protocol buffer/typescript...) to not only the local host but also the remote hosts, so that people can access your webpage on their on remote desktop with the same domain. Usually, this work is done by soy template (aka closure template), in which html and css files for different pages/sections can be packaged together and served as requested. However, since the soy template is more than this project needs, we instead used an index.html and MSS to accomplish this feature. In index.html, we define the frame of the web page (main page routing/layouts of basic UI components, etc.) and header links (package links/resources, templates links, etc.). In the places where we need routing links or third party links, I put place holders instead. Then later in the server running state,let MSS replace the placeholders with the correct links generated by MSS, so that the server knows where to get files from.
  • MSS (Modulesets Serving) is a technique that can help server to serve and package up files. It can pack static files in to modules, and pack multiple modules into a moduleset. Then the serve can look up the moduleset path and find the running directory of those files.
  • Pinto module is another technique used together with MSS. It's more frontend based, and can tell the frontend which visual components need which MSS module to work properly. The benefits of this technique include lazy loading and auto-optimization of downloading. Lazy loading means that the website won't download the files for visual components that haven't been activated (for example, hidden pictures or routing pages that require click activation), while auto-optimizaton of downloading basically can make sure the downloaded files won't be re-downloaded.

Unit tests