CM3050 Topic 01: The Mobile App Ecosystem

Main Info

Title: Topic 01: The Mobile App Ecosystem
Teachers: Joe McAlister
Semester Taken: April 2022
Parent Module: cm3050: Mobile Development

Description

An overview of the module, including how to get set up with React Native and start developing simple applications. An overview of different approaches you can take to cross-platform mobile development is also included.

External Resources

React Native The framework we’ll be using.
Expo The build and preview tool we’ll use. See their getting started guide.
JSX in Depth
JSX to JS Compiler
Expo guide to iOS simulators
Expo guide to Android simulators
Apple Developer Guidelines
Google Android Developer Guidelines

Lecture Summaries

1.0 Intro to the Course covers Joe’s background in mobile dev and his approach to teaching (hands-on). It also introduces Expo as the build and preview tool we’ll use. Introduces React Native, which we use:

One language, multiple platforms.
We can use JS
Near-native performance, much better than web rendering engines.
Heavily used in industry.

1.1 The App Ecosystem

How often do you pick up your phone? A scary number he bets. Hardware developing rapidly, user base is massive. Now you can create fully fledged apps that would previously only be possible on a laptop/desktop. Understand what you enjoy and love as a consumer, this will give you the feeling you need to develop for your users. Take a look at your most used apps, think about why and how you use them.

1.103 offers an overview of the development process from dev to consumer:

Ideation. The idea has to come from somewhere. Often for small dev teams the idea comes from some frustration or fascination in the team. In larger companies, ideas tend to get pitched and refined first.
Storyboarding/concept sketches. Start by drawing, often helpful in pinning down what you have in mind.
Prototyping. Often helps you test functionality without focusing on design. Helps you see how tricky a tech problem is, and how it works in practice.
Feedback and production. Use the prototype to get feedback and refine for production.
Testing. Internal testing, and third party beta testing. No such thing as too much feedback.
Approval and Release. Apps have to go through an approval process on the app store. Annoying process, common to be rejected. Undertand the dev guidelines before building.
On sale! Amazing feeling.

1.2 Developing for Multiple Platforms

There are lots of mobile platforms out there, but 2 dominate - Android (72%) and iOS (27%). Cover both and you have 98/99% of the user base.

But they are different operating systems and different languages - Swift/Kotlin. Really impossible for solo developers and costly for anyone.

You could just pick one, but you can also use hybrid apps. Written in a common language and compiled for multiple devices/platforms.

Native v. hybrid is a contentious debate, but either is valid and it depends really on use.

React Native is a unique hybrid. It produces a binary that compiles the JS down to native code. So he thinks of RN as a ‘native app’ for the purposes of comparing native and hybrid.

Hybrid apps refer to apps that are built using web technologies that are then housed in a shell that can display the web app. So you make a mobile site and package for an app. Ionic is one framework for doing this.

Native apps:

pros - faster performance; device-level APIs; use of OS UI elements (smoother UX, faster loading).

cons - lengthy and complex to build; no cross-compatibility.

Hybrid apps:

pros - cross-compatibility (web stack); larger market reach; faster to produce.

cons - slower performance (but gap is shrinking); no device-level APIs (can be a deal-breaker).

React Native is a nice middle-ground between native and hybrid.

1.3 Intro to React Native

React Native is part of the bigger React project. It enables writing apps in JS and compiling to multiple targets. Comparable tools include Flutter, Ionic, Apache Cordova. RN is very well adopted, so there is a v. active community. You can even build native desktop apps.

Expo is a tool that works with RN to simplify app building and testing. Code signing is a tricky part of mobile app development. It provides an app that means you can preview an app instantly by scanning a QR code.

Includes a note on JS arrow notation, which is widely used in React code.

Let’s build a blank project. We can use the command expo init --npm which will force use of npm rather than yarn.

For this course we don’t use typescript, so we always use the first blank template.

Once the dependencies are installed you can use expo start or npm start. This will use the metro bundler to transpile our code using Babel and serves it to the expo app. It also launches some dev tools in the browser.

The files that are created are:

App.js the most important file. Contains the app code.
app.json contains expo metadata.
assets folder for media assets
babel.config.js don’t need to change this.
node_modules folder with JS dependencies
package.json and package.lock.json normal Node stuff.

Takes a look at the App.js file, which is a pretty standard React functional component, with an Expo status bar.

Introduces the concept of state in React. Components take a state and return a view of that state. That view is like drawing a piece of state on paper. If the state changes, you have to scrunch up the old view and redraw it again. We’ll use Hooks for this.

Introduces styling in RN. We import the Stylesheet object from react-native and then create a stylesheet like this:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Then you can apply it like this: <View style={styles.container}>

Shows the expo refresh process when code is changed - it reboots the app.

1.4 React Native Core Concepts 1

Let’s take a look at some elements of JSX and how it differs from HTML. Consider a core React Native <Text> component:

<Text>Hello world</Text>

Whatever is between the opening and closing tags of the component are its children. A tag with no children might self-close like this: <MyComponent />

Components must be capitalized or it won’t compile. There are a number of core components that compile to native components in the target platform:

RN Component	Android	iOS
`<View>`	`<ViewGroup>`	`<UIView>`
`<Text>`	`<TextView>`	`<UITextView>`
`<Image>`	`<ImageView>`	`<UIImageView>`
`<ScrollView>`	`<ScrollView>`	`<UIScrollView>`
`<TextInput>`	`<EditText>`	`<UITextField>`

We might want to provide properties to components to alter their behaviour. These are called props.

They look like this:

<Text style={{color:"red"}}>
    Hello World!
</Text>

here style is the prop. The double curly braces is to nest a JS object inside the JS expression within JSX.

Some notes from the linked reading JSX in depth:

props default to the value true if no value is passed. It’s not recommended to rely on this though.
you can spread an existing object to be the props like this: <Greeting {...props} />
children are available at props.children If you only have a text string as a single child, props.children will just be that string. NB blank lines are removed, newlines adjacent to tags are removed, newlines in the middle of string literals are condensed to space. Leading and trailing whitespace on a line is removed.
You can have a mixture of text and components as children if you want.
A React component can return an array of elements.
You can pass a JS expression as children by enclosing it with {}, useful for rendering a list of JSX expressions of arbitrary length. Like this:

return (
    <ul>
	{todos.map((message)=> <Item key={message} message={message} />)}
    </ul>
);

you can even pass a function as a child, which can then be called in the parent component.
false and true are valid children, they just don’t render. You can use this to do a nice shorthand for conditional rendering:

<div>
    {showHeader && <Header />}
</div>

is fully valid and will then only render the header if showHeader is true.

1.5 Testing on Devices and Simulators

Most often the convenient way to test on lots of devices is to use simulators.

You can use physical devices by using the Expo Go app. Then you can scan the QR code and launch the app.

To run iOS simulators you need to be developing on a Mac. Then it will install the xcode simulator setup.

For Android you need the AVD virtual device manager.

1.6 Market Places

Distribution through the app stores are essential for app developers so you have to pay attention to the review process and guidelines.

No. 1 reason for rejection is your app doesn’t work.

No. 2 reason is copyright violation.

No. 3 reason is breach of safety guidelines - no offensive, upsetting, or creepy content.

No. 4 safeguarding issues, can you limit potential for bullying or inappropriate behaviour if users create content? User reporting…

No. 5 circumventing the app stores, IAP, money v. strict. V. strict rules aruond gambling too.

No. 6 is low quality design - apps that are spam, or copy cats are banned.

Lots more rules.

Alex's Notes