CM3050 Topic 05: Developing a Mobile App Project
Main Info
Title: Developing a Mobile App Project
Teachers: Joe McAlister
Semester Taken: April 2022
Parent Module: cm3050: Mobile Development
Description
In this topic, we look at the remaining advanced javascript techniques designed to help you build powerful mobile applications.
Key Reading
Supplementary Reading
Lab Summaries
5.105 is a quick demo of testing which reproduces much of the video on the same topic.
Lecture Summaries
5.0 Best Practices
Clean code!
Comment your code. JSX comments have to be embedded in curly braces.
Modular code: DRY, make custom components.
Multiple files: separate out your components into multiple files. Export the function components.
Remove console logs.
Constistent naming.
5.1 Unit Testing and Debugging
Static analysis checks your code without running it. Linting examines code formatting, type checking checks whether you’re passing the right types to functions.
Code should be modular so that we can write good tests for it.
We follow the AAA rule for structuring tests: Arrange, Act, Assert.
Unit tests cover the smallest part of code (individual functions or classes).
Mocking allows us to override variable dependencies to provide a constant state. Use mocks if you’re dependent on network connections or third party services, or just randomised data.
Integration testing tests if parts of the system work correctly in parallel.
Component tests check whether the component behaves correctly and whether it renders correctly.
We can use the snapshot function for, this we take a snapshot of the component which is rendered to JSON. Then we can run a test to see if anything has changed.
Update snapshots with Jest when you need to re-benchmark.
Debugging
Introduces react dev tools (npm i -g react-devtools). Once installed just launch from terminal with the react-devtools command.
Once they’re running shake the device and select remote JS debug, then the devtools should connect (I could not get this to work).
Introduces profiling, the flamegraph familiar from web devtools.
5.2 Class Components
Explains the differences between functional and class components. Use functional ones unless you really have to use class components.
Shows a class component. Expects functional components to be dominant going forward, with hooks used for easy state management.
Some differences - class compoennts access props with this.props.
state management is quite different though. Shows the way to show and update state in class components.
5.3 Advanced JavaScript
Introduces Babel and the versions of JS. Some features of ES6 are described: block scope with let and const; destructuring; for of loops.
On performance, we only have one thread, but we can use interaction manager to improve performance by scheduling work to take place after interactions are complete.
InteractionManager.runAfterInteractions(()=> {/* do something */}) this will only do the thing after we’ve stopped interacting.