Media is too big
VIEW IN TELEGRAM
23. Module Federation Q&A
Steve explores the use of module federation, discussing the possibility of assigning a function to the exposed object and experimenting with programmatic manipulation. Practical demonstrations and addressing TypeScript-related issues are also covered in this segment.
#lesson
Steve explores the use of module federation, discussing the possibility of assigning a function to the exposed object and experimenting with programmatic manipulation. Practical demonstrations and addressing TypeScript-related issues are also covered in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Virtual Modules
Steve discusses that a Vite plugin is essentially a function that conforms to a specific shape and can be used to modify the code during the build process. They also mention that there are various hooks available in the plugin development process and provide examples of how plugins can be used to perform specific tasks, such as parsing YAML files or creating virtual modules.
- https://vite-workshop.vercel.app/plugins
#lesson
Steve discusses that a Vite plugin is essentially a function that conforms to a specific shape and can be used to modify the code during the build process. They also mention that there are various hooks available in the plugin development process and provide examples of how plugins can be used to perform specific tasks, such as parsing YAML files or creating virtual modules.
- https://vite-workshop.vercel.app/plugins
#lesson
Media is too big
VIEW IN TELEGRAM
25. Building a Markdown Plugin
Steve demonstrates how to create a Vite plugin that transforms Markdown files into HTML. They install the "markdown-it" package, create a helper function to read and render Markdown files, and then create the plugin function that intercepts the loading of Markdown files and returns the transformed HTML. They also mention that this technique can be extended to perform other custom transformations on files.
#lesson
Steve demonstrates how to create a Vite plugin that transforms Markdown files into HTML. They install the "markdown-it" package, create a helper function to read and render Markdown files, and then create the plugin function that intercepts the loading of Markdown files and returns the transformed HTML. They also mention that this technique can be extended to perform other custom transformations on files.
#lesson
Media is too big
VIEW IN TELEGRAM
26. Using the Markdown Plugin
Steve explores the capabilities of Vite plugins and demonstrates how they can be used to manipulate and transform different file types. They show an example of converting a markdown file into JavaScript using a Vite plugin and discuss how plugins can be used to strip out certain attributes or perform other custom transformations during the build process.
#lesson
Steve explores the capabilities of Vite plugins and demonstrates how they can be used to manipulate and transform different file types. They show an example of converting a markdown file into JavaScript using a Vite plugin and discuss how plugins can be used to strip out certain attributes or perform other custom transformations during the build process.
#lesson
Media is too big
VIEW IN TELEGRAM
27. Wrapping Up
Steve wraps up the course by explaining the concept of returning null in JavaScript, discussing the maintainability of writing your own plugins, differentiating between micro front ends and module federation, and highlighting the benefits of using Vite as a build tool. They also share their thoughts on investing in learning the lower-level functionality of Rollup and provide closing remarks.
#lesson
Steve wraps up the course by explaining the concept of returning null in JavaScript, discussing the maintainability of writing your own plugins, differentiating between micro front ends and module federation, and highlighting the benefits of using Vite as a build tool. They also share their thoughts on investing in learning the lower-level functionality of Rollup and provide closing remarks.
#lesson
Title: Enterprise TypeScript
Description: Configure your TypeScript codebases for scalability, empowering large teams to collaborate more effectively! Learn how to set up, maintain, and evolve TypeScript libraries, manage migrations from JavaScript, and stay updated with TypeScript compiler versions. Utilize Yarn workspaces, TypeScript strictness settings, runtime type checking, and testing strategies for types.
Link: https://frontendmasters.com/courses/enterprise-typescript/
Time: 5 hours, 10 minutes
Lessons: 26 / 26
Tags: #course #frontendmasters #720p
Description: Configure your TypeScript codebases for scalability, empowering large teams to collaborate more effectively! Learn how to set up, maintain, and evolve TypeScript libraries, manage migrations from JavaScript, and stay updated with TypeScript compiler versions. Utilize Yarn workspaces, TypeScript strictness settings, runtime type checking, and testing strategies for types.
Link: https://frontendmasters.com/courses/enterprise-typescript/
Time: 5 hours, 10 minutes
Lessons: 26 / 26
Tags: #course #frontendmasters #720p
Frontendmasters
Enterprise TypeScript: Managing Large Codebases and Teams with Advanced TypeScript Techniques
Configure your TypeScript codebases for scalability, empowering large teams to collaborate more effectively! Learn how to set up, maintain, and evolve TypeScript libraries, manage migrations from JavaScript, and implement testing strategies for types.
❤1
Media is too big
VIEW IN TELEGRAM
1. Introduction
Mike North begins the course by explaining that enterprise development means addressing the challenges and indicators of working on a sizable codebase and multiple teams. The goals of the course include creating a library from scratch, migrating a JavaScript codebase to TypeScript, keeping pace with TypeScript compiler versions, understanding strictness, and using Yarn's built-in support for workspaces.
- https://www.typescript-training.com/course/enterprise-v2
#lesson
Mike North begins the course by explaining that enterprise development means addressing the challenges and indicators of working on a sizable codebase and multiple teams. The goals of the course include creating a library from scratch, migrating a JavaScript codebase to TypeScript, keeping pace with TypeScript compiler versions, understanding strictness, and using Yarn's built-in support for workspaces.
- https://www.typescript-training.com/course/enterprise-v2
#lesson
Media is too big
VIEW IN TELEGRAM
2. Setup & Course Project
Mike explains the process of installing Volta and provides instructions on cloning the workshop repository and installing the necessary dependencies using Yarn. The Slack-style project application is introduced, and the project's file structure is explained.
- https://github.com/mike-north/typescript-courses
#lesson
Mike explains the process of installing Volta and provides instructions on cloning the workshop repository and installing the necessary dependencies using Yarn. The Slack-style project application is introduced, and the project's file structure is explained.
- https://github.com/mike-north/typescript-courses
#lesson
Media is too big
VIEW IN TELEGRAM
3. .gitignore & package.json
Mike walks through setting up a TypeScript library within a project. Volta is installed, a package.json file is created, and versions for node and yarn are pinned. Mike emphasizes the importance of using the latest LTS node version and avoiding big changes that can disrupt the project.
- https://www.typescript-training.com/course/enterprise-v2/02-ts-library-zero-to-one/
#lesson
Mike walks through setting up a TypeScript library within a project. Volta is installed, a package.json file is created, and versions for node and yarn are pinned. Mike emphasizes the importance of using the latest LTS node version and avoiding big changes that can disrupt the project.
- https://www.typescript-training.com/course/enterprise-v2/02-ts-library-zero-to-one/
#lesson
Media is too big
VIEW IN TELEGRAM
4. Install TypeScript & Configure tsconfig.json
Mike installs the TypeScript compiler and creates a tsconfig.json file. The available configuration options are examined and TypeScript is configured for all files in the src directory and the .eslintrc.js file.
#lesson
Mike installs the TypeScript compiler and creates a tsconfig.json file. The available configuration options are examined and TypeScript is configured for all files in the src directory and the .eslintrc.js file.
#lesson
Media is too big
VIEW IN TELEGRAM
5. Install ESLint
Mike installs ESLint in the project. An index.ts file is added with some default code and build command is created to generate the dist folder. ESLint is initialized in the project using the CLI.
#lesson
Mike installs ESLint in the project. An index.ts file is added with some default code and build command is created to generate the dist folder. ESLint is initialized in the project using the CLI.
#lesson
Media is too big
VIEW IN TELEGRAM
6. Configure ESLint
Mike adjusts the ESLint config file, adding TypeScript-specific rules and specifying the TS config file location. The lint command is run, and initial linting errors are fixed in the index.ts file.
#lesson
Mike adjusts the ESLint config file, adding TypeScript-specific rules and specifying the TS config file location. The lint command is run, and initial linting errors are fixed in the index.ts file.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Setup Jest Testing
Mike installs and configures both Jest and Babel to work together for running TypeScript test files without an explicit build step. The tests are run, and any errors are fixed.
#lesson
Mike installs and configures both Jest and Babel to work together for running TypeScript test files without an explicit build step. The tests are run, and any errors are fixed.
#lesson
Media is too big
VIEW IN TELEGRAM
8. Setup Test & Watch Script
Mike explains how to improve the development workflow by setting up a watch mode for both the build and test scripts. The concurrently package is installed and used to run both scripts in parallel.
#lesson
Mike explains how to improve the development workflow by setting up a watch mode for both the build and test scripts. The concurrently package is installed and used to run both scripts in parallel.
#lesson
Media is too big
VIEW IN TELEGRAM
9. API Reporting
Mike adds an API surface report and documentation to the project by installing the api-extractor and api-documenter packages. The API Extractor package generates API report in a markdown file and can adapt the report based on alpha, beta, and public release statuses.
#lesson
Mike adds an API surface report and documentation to the project by installing the api-extractor and api-documenter packages. The API Extractor package generates API report in a markdown file and can adapt the report based on alpha, beta, and public release statuses.
#lesson
Media is too big
VIEW IN TELEGRAM
10. API Documentation
Mike uses the api-documenter package to generate documentation for the library's APIs. JSDoc comments are used to flag methods based on their version availability, like alpha and beta. A code change is made to the API, and the API Extractor warning about the change is explained.
#lesson
Mike uses the api-documenter package to generate documentation for the library's APIs. JSDoc comments are used to flag methods based on their version availability, like alpha and beta. A code change is made to the API, and the API Extractor warning about the change is explained.
#lesson
Media is too big
VIEW IN TELEGRAM
11. tsconfig Strictness
Mike discusses various TypeScript compiler options and their implications, such as noImplicitAny, noImplicitThis, strictNullChecks, strictFunctionTypes, and more. Fixing TypeScript/ESLint errors in a test file by specifying the correct path for the declaration file is also demonstrated.
#lesson
Mike discusses various TypeScript compiler options and their implications, such as noImplicitAny, noImplicitThis, strictNullChecks, strictFunctionTypes, and more. Fixing TypeScript/ESLint errors in a test file by specifying the correct path for the declaration file is also demonstrated.
#lesson
Media is too big
VIEW IN TELEGRAM
12. TypeScript Migration Overview
Mike discusses converting a project to TypeScript and gradually improving the typing and linting. Making incremental passes and staying focused on specific tasks to avoid introducing bugs is encouraged. The steps include getting TypeScript into the build toolchain, renaming files to TS, getting rid of implicit any's, bringing in definitely-typed packages, creating interfaces for domain modeling, and working on Boolean expressions.
#lesson
Mike discusses converting a project to TypeScript and gradually improving the typing and linting. Making incremental passes and staying focused on specific tasks to avoid introducing bugs is encouraged. The steps include getting TypeScript into the build toolchain, renaming files to TS, getting rid of implicit any's, bringing in definitely-typed packages, creating interfaces for domain modeling, and working on Boolean expressions.
#lesson
Media is too big
VIEW IN TELEGRAM
13. App Setup & Type-Checking JavaScript
Mike begins the TypeScript refactor by verifying TypeScript is already installed as a development dependency and then making adjustments to the TS config file to enable type checking. Errors previously tolerated with the allowJS option are fixed. JSDoc comments are used as a temporary solution for components with children.
#lesson
Mike begins the TypeScript refactor by verifying TypeScript is already installed as a development dependency and then making adjustments to the TS config file to enable type checking. Errors previously tolerated with the allowJS option are fixed. JSDoc comments are used as a temporary solution for components with children.
#lesson
Media is too big
VIEW IN TELEGRAM
14. Renaming Files to TS
Mike renames JavaScript files to TypeScript files in a chat project. Before fixing and type issues, a git commit is made to recognize the renaming in the git history. Now that all files in the project are TypeScript files, JSDoc comments are ignored, and type information needs to be provided with TypeScript.
#lesson
Mike renames JavaScript files to TypeScript files in a chat project. Before fixing and type issues, a git commit is made to recognize the renaming in the git history. Now that all files in the project are TypeScript files, JSDoc comments are ignored, and type information needs to be provided with TypeScript.
#lesson
Media is too big
VIEW IN TELEGRAM
15. Forbidding Implicit any
Mike demonstrates the next step in the TypeScript conversion, which is disallowing implicit any types. Setting the noImplicitAny flag to true for an entire project can be problematic since there's a wide surface area for changes. Instead, creating a new tsconfig file in an individual subfolder and starting there can make the process more incremental.
#lesson
Mike demonstrates the next step in the TypeScript conversion, which is disallowing implicit any types. Setting the noImplicitAny flag to true for an entire project can be problematic since there's a wide surface area for changes. Instead, creating a new tsconfig file in an individual subfolder and starting there can make the process more incremental.
#lesson