A collection of my overviews on various topics relevant to CS 394.
Team Tools
Most of the links on this page about about software development, but the primary focus of the course is team development. So the first link is about some simple tools for detecting possible team development issues. We use these to start discussion in coaching.
Git and Github
JavaScript
A prerequisite to good React coding is a solid understanding of modern functionally-oriented JavaScript programming.
- Hello, JavaScript! -- an introduction to programming, in JavaScript, covering what you will need to get started with React, and no more
- Intermediate JavaScript -- short introductions to important more complex concepts in JavaScript programming, including modules, asynchronous code, and Node programming
- My tips on modern JavaScript
- Modern JavaScript -- an extended tutorial and reference
- Eloquent JavaScript (4th ed) -- one of the best free online books for learning JavaScript
- MDN JavaScript -- more detailed reference
- Kent Dodd's JavaScript to know for React
React
React is one of the baseline technologies for this course. It is very popular, very helpful for quickly building robust interactive single-page apps, and good to have on your resume.
When looking for help with React, be wary of any site that is more than a year old, and avoid any site from before 2019, when React 16.8 was released. Even React 17 has some incompatibilities with the current React 18.
I have created the following React tutorial for my courses.
- Quick, React! -- This is a tutorial challenge, introducing the most critical tools you'll need, including connecting to a cloud database.
Here are some useful React resources:
- My guide on key React concepts and common pitfalls
- A library of React and Firebase code examples
- My comparison of old versus current React coding techniques
- Write clean(er) Components & JSX -- good advice on how to write more readable React
Firebase
Quite often, apps will need a central place to keep data. While you can create your own server to do this, that means you have to maintain a stable host that's easily deployed to. A regular web server, e.g., PHP, is not really appropriate since you don't want HTML pages, you want data.
The current best free option is Firebase. It's easy to get started, but it has its quirks.
Debugging React Apps
- Chrome’s DevTools -- breakpoints, DOM inspectors, etc. You'll also find similar tools in Firefox, Safari, and Edge.
- Debug Like a Lion With Chrome’s DevTools -- some really really handy tips for the Chrome console. Did you know you can trace functions in Chrome? Check out monitor. Note: doesn't work with arrow functions.
- The 2023 guide to React debugging -- a list of tools for debugging React, starting with Chrome Dev Tools
- React Developer Tools -- because your React source code has been transpiled into efficient but pretty unreadable JavaScript, you need to install this plugin to help Chrome DevTools work with React apps
- Reactime -- an optional but impressive time-traveling debugger for React; it requires a small change to your app and a Chrome plugin
- Easier browser debugging with Developer Tools integration in Visual Studio Code -- there are many obvious advantages to using your editor to set breakpoints and debug. This page is for VS Code. Similar pages can be found for other sophisticated programming editors.
Testing
As your app becomes more complex, the odds become higher that new code will break somethinng that used to work. Such breakage is called regression. Manually testing that all the functionality of your app becomes harder and harder. The answer is to automate this testing with a testing framework.
Unit testing
- My slides on unit testing
- Jest is a testing framwork that comes with React to make it easy to write and run tests
- The React Testing Library is an additional set of functions designed to help unit test React components and hooks.
- React Testing Recipes -- for unit testing
- Mocking Services with Vitest -- My guide on mocking Firebase and other libraries for faster, simpler, safer unit testing
End to end testing
Cypress is an end-to-end testing framework. Where React library unit tests call React code to test what is generated, Cypress tests use a browser engine to interact with your web app running a server, just as a user does.
- My guide on setting up Cypress
- My guide on setting up Firebase emulators -- automated tests should not interact with production databases; Firebase provides emulators for their various services that can be run locally
- Cypress -- the Cypress home page
- Cypress JavaScript Tutorial: A Step-by-Step Handbook For Beginners -- a lengthy tutorial
- Given When Then -- Given-when-then is a general approach for designing tests based on intended behaviors
- Why you should test both happy paths and unhappy paths -- a more general page on what to test
Continuous Integration
Once you have automated test suites it's worth setting up continuous integration and deployment (CI/CD) to automate the process of building, testing, and deploying an application every time the main repository is updated.