Mobile app types (native, web, hybrid) in Intro to Computing - Draw & Build Visually

Draw This - beginner

Draw a diagram that shows the three main types of mobile apps: native, web, and hybrid. Include a simple description of each type and an example device or platform where each app type runs.

10 minutes

Hint 1

Hint 2

Hint 3

Grading Criteria

Three distinct app types labeled: native, web, hybrid

Each app type has a short, correct description

Examples or platforms shown for each app type

Clear separation between the three app types

Diagram is neat and easy to understand

Solution

  +----------------+       +----------------+       +----------------+
  |   Native App   |       |    Web App     |       |   Hybrid App   |
  +----------------+       +----------------+       +----------------+
  | - Built for    |       | - Runs in a    |       | - Combines     |
  |   specific OS  |       |   web browser  |       |   native & web |
  | - Uses device  |       | - No install   |       | - Installed    |
  |   features    |       | - Works online |       | - Uses web tech|
  | - Example:     |       | - Example:     |       | - Example:     |
  |   iOS, Android |       |   Chrome, Safari|      |   Instagram    |
  +----------------+       +----------------+       +----------------+

Platforms:
  Native App -> iOS, Android devices
  Web App -> Any device with a web browser
  Hybrid App -> iOS, Android devices

Arrows or lines can connect each box to their platform/device below.

This diagram shows three boxes, each representing one type of mobile app.

Native App: Built specifically for one operating system like iOS or Android. It uses device features like camera or GPS directly. It must be installed from an app store.

Web App: Runs inside a web browser like Chrome or Safari. It does not need installation and works online. It can run on any device with a browser.

Hybrid App: Combines features of native and web apps. It is installed like a native app but uses web technologies inside. Examples include apps like Instagram.

Lines or arrows connect each app type to the platforms or devices they run on, helping visualize where each app type works.

Variations - 2 Challenges

[intermediate] Draw a flowchart that helps decide which mobile app type (native, web, hybrid) to choose based on user needs: offline use, device features, and installation preference.

[advanced] Draw a detailed diagram comparing native, web, and hybrid apps including pros and cons for each, and examples of popular apps for each type.

Practice

1. Which type of mobile app runs directly in a web browser without needing installation?

easy

A. Web app

B. Native app

C. Hybrid app

D. Desktop app

Solution

1. Step 1: Understand app installation requirements

   Web apps run inside browsers and do not require installation on the device.

2. Step 2: Compare app types

   Native apps need installation and are built for specific platforms; hybrid apps combine features but still often require installation.

3. Final Answer:

   Web app -> Option A

4. Quick Check:

   Runs in browser = Web app [OK]

Hint: Apps in browsers without install are web apps [OK]

Common Mistakes:

• Confusing native apps with web apps
• Thinking hybrid apps don't need installation
• Assuming desktop apps run on phones

2. Which of the following is the correct description of a native app?

easy

A. An app that runs only in web browsers

B. An app built specifically for one platform using device features

C. An app that mixes web and native code but cannot access device features

D. An app that requires no installation and works offline only

Solution

1. Step 1: Define native app characteristics

   Native apps are built for a specific platform (like iOS or Android) and use device features like camera or GPS.

2. Step 2: Eliminate incorrect options

   Web apps run in browsers; hybrid apps mix code and can access some features; offline-only apps are not native by definition.

3. Final Answer:

   An app built specifically for one platform using device features -> Option B

4. Quick Check:

   Native = platform-specific with device features [OK]

Hint: Native apps use device features and need platform-specific build [OK]

Common Mistakes:

• Thinking native apps run in browsers
• Believing hybrid apps cannot access device features
• Confusing offline-only apps with native apps

3. Look at this description: "An app that uses web technologies but is wrapped to run on multiple platforms and can access some device features." Which app type is this?

medium

A. Hybrid app

B. Native app

C. Web app

D. Desktop app

Solution

1. Step 1: Analyze the description

   The app uses web technologies but is wrapped to run on many platforms and accesses device features.

2. Step 2: Match description to app types

   Native apps are platform-specific; web apps run only in browsers; hybrid apps combine web code with native wrappers and device access.

3. Final Answer:

   Hybrid app -> Option A

4. Quick Check:

   Web + native wrapper = Hybrid app [OK]

Hint: Hybrid apps mix web code with native wrappers [OK]

Common Mistakes:

• Choosing native app for multi-platform web code
• Confusing web apps with hybrid apps
• Selecting desktop app which is unrelated

4. A developer wants to create an app that runs fast and uses all phone features but writes only one codebase for all platforms. What is the main problem with this plan?

medium

A. Hybrid apps are always slow

B. Web apps cannot access phone features

C. Native apps require separate codebases for each platform

D. Desktop apps are not for phones

Solution

1. Step 1: Understand native app development

   Native apps are fast and use all phone features but need separate codebases for iOS and Android.

2. Step 2: Identify the conflict in the plan

   The developer wants one codebase for all platforms, which is not possible with native apps.

3. Final Answer:

   Native apps require separate codebases for each platform -> Option C

4. Quick Check:

   Native = separate codebases [OK]

Hint: Native apps need separate code for each platform [OK]

Common Mistakes:

• Thinking native apps use one codebase
• Believing hybrid apps are always slow
• Confusing desktop apps with mobile apps

5. A company wants an app that works offline, uses device camera, and can be updated instantly without app store approval. Which app type best fits these needs?

hard

A. Native app

B. Web app

C. Desktop app

D. Hybrid app

Solution

1. Step 1: Analyze offline and device feature needs

   The app must work offline and use the device camera, which web apps alone cannot fully support.

2. Step 2: Consider update and deployment needs

   Instant updates without app store approval are easier with web-based code wrapped in hybrid apps.

3. Step 3: Match requirements to app types

   Native apps support features but require app store updates; web apps lack device access; hybrid apps combine both advantages.

4. Final Answer:

   Hybrid app -> Option D

5. Quick Check:

   Offline + device access + instant update = Hybrid app [OK]

Hint: Hybrid apps combine offline, device access, and easy updates [OK]

Common Mistakes:

• Choosing native app despite update delays
• Selecting web app lacking device access
• Ignoring hybrid app benefits