Homework: Assignment 1: JS, TS, and Basic React, is due 3/11 by 11:59pm
- tRPC: End-to-end type safety for a full-stack TypeScript app
- Turborepo: A monorepo tool for TypeScript, to keep all libraries, backend, and frontend code in one place
By the end of today, you should be able to:
- Understand the evolution of web development
- Understand how websites work under the hood
- Understand the difference between Node.js and Browser JS
- Understand the ecosystem of modern web development tools (Yarn, JS Frameworks, Linting, etc.), how each tool fits into the development process, why each is present, and how to use them.
How to build a web app
Intro to Node.js and Yarn
How do websites work?
There are two main models of websites: static and dynamic. The difference between the two is how the content is generated.
This is the traditional static website, and it adheres cleanly to the server-client model. However, as webpages got more complex, we needed a way to make them more dynamic. We needed a way to store data, and to send it back to the client when they requested it. This is where the dynamic website comes in.
Let's break it down...
All of the code is available to you to view on Github! Anyone can contribute-- this democratizes the development process!
- Can run Node.js on your terminal as well
- Threads are a separate line of execution and can be ran in parallel - i.e. several at the same time.
- However, Node.js uses a single-threaded event loop
- Run in a single process
- Requests do not spawn new threads
How does Node.js handle multiple requests?
- Node.js is asynchronous
- When a request is sent, it is dispatched to the server
- Instead of blocking the thread and wasting CPU cycles waiting for the request to finish, Node.js continues its operations
- Once the request is complete, a callback is triggered and information is sent back
- Client can send requests into the event loop
- We can register callbacks to server when doing things that might take time (ie. search, query, intensive computation)
- After operation completes, callback will fire and return to requests
A callback is a function that you can pass to another function to be executed later. This is a common pattern in web development, since lots of data goes from the client to the server, and we want to implement certain behavior that fires after the data is received.
- Unites front-end and back-end in one language/framework
- Frontend and backend in the same language
- Extremely performant
- Asynchronous and non-blocking
- NPM (Node Package Manager)
- a directory of many libraries and packages
- access to huge libraries to use in projects and build upon
- similar to
pipin Python, Gradle/Maven in Java, etc (it's okay if you've never heard of these!)
Conceptual Overview: Node.js vs Browser JS
Keep this in mind! If you install a package meant for Node.js and try to use it in the browser, it might behave unexpectedly. If you install a package meant for the browser and try to use it in Node.js, it might not behave unexpectedly. These are two entirely separate runtime environments!
Node Package Manager (NPM)
NPM is a dependency manager, like pip for python or maven for java. Think of node packages as recipes made by other people you want to use in your site. Also part of the open sourced community!
package.json is kind of like a directory for your Node project. It contains
various metadata and information about it, as well as details on what it depends
on, so others can reproduce the behavior of your project.
- Tracks which node packages you use
- Dependencies: packages needed at run-time
npm install --save <pkg_name>
yarn add <pkg_name>
- devDependencies: packages used during development (before pushing to production). When a "production" or real version gets built prior to deployment, these dependencies will not be included. Only install certain tools that ease development in this manner.
npm install --save-dev <pkg_name>
yarn add --dev <pkg_name>
We will use Yarn!
- Faster at installing dependencies in practice
- More optimized
NPM vs Yarn commands
npm install <pkg_name>
npm uninstall <pkg_name>
npm update <pkg_name>
yarn add <pkg_name>
yarn remove <pkg_name>
yarn upgrade <pkg_name>
- Very similar
- Audit: checks for vulnerabilities in dependencies
Static websites are pre-built and served to the client without the need for any server-side processing. They are fast and simple, but lack dynamic functionality. We covered this above.
Progressive Web Apps (PWAs) are web applications that can be "installed" on a user's device and run offline. They can be built using a variety of technologies, including **React.js**. These are entirely client-side frameworks that run in the browser, and are in reality singular empty HTML shells with a massive JS bundle that pushes in all the content on-the-fly as the user navigates the site.
Incremental static regeneration is a technique where a web application is rendered statically, but certain parts of the application are periodically re-rendered on the server to ensure that the content is up-to-date (we check if the content has turned "stale" and then refresh from the server when that happens). This is a technique used by Next.js to improve the performance of certain parts of the interface, as well as by other frameworks.
Then, at the end of the day, all of this fancy code has to be compiled down into bundles that the browser can understand anyway. Towards this end, the industry heavyweight is Webpack, which is a bundler written in JS that can be used to compile all of your code into a single file that can be served to the client. Recent challengers, however, include Vercel's Turbopack, which is written in Rust and offers a much faster build time. Vite also exists -- an extremely lightweight and performant bundler, normally used in development environments.
Why Linters Are Necessary
I recommend the You Don't Know JS series by Kyle Simpson. The ebooks are available for free on GitHub. The series is comprehensive and will teach you everything you want to know.
The official TypeScript website is a great resource to get familiar with the language. There are different guides that assume different programming backgrounds. Choose the article that best suits your background.
Take a look at the Get Started section here: TypeScript: The starting point for learning TypeScript (typescriptlang.org)
There is also a Handbook that you can chug through if interested (not necessary at all): TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org)
Hope this is helpful for you all! This will be the language you'll be working with all-semester, so being comfortable with the language will pay off.
node and in the browser