Computer Science · Grade 9

Active learning ideas

Introduction to Web Development Frameworks

Active learning helps students grasp how frameworks abstract complex tasks because they engage directly with the difference between raw code and pre-structured solutions. Hands-on activities make the value of frameworks visible, building both technical insight and confidence in choosing tools.

• Ontario Curriculum Expectations
• CS.HS.AP.10
• CS.HS.N.8

• 30–45 min
• Pairs → Whole Class
• 4 activities

Activity 01

• Expert Panel
• 40 min · Pairs

Pair Coding: Framework vs Scratch

Pairs build a basic login form first in plain HTML, CSS, and JavaScript over 10 minutes. Then, they recreate it using a starter framework like Bootstrap or a simple React template in 15 minutes. Pairs tally code lines, note features added, and share time savings with the class.

Explain the advantages of using a web framework over building from scratch.

Facilitation Tip

During Pair Coding, circulate and ask each pair to explain one line of code in plain JavaScript before they use the framework version.

What to look for

Ask students to write down one advantage of using a framework over building from scratch and one example of a front-end framework and a back-end framework they learned about today.

• Understand
• Apply
• Analyze
• Evaluate
• Self-Management
• Relationship Skills

Activity 02

• Expert Panel
• 35 min · Small Groups

Small Group: Framework Comparison Chart

Small groups research two front-end frameworks (e.g., Vue, Angular) and two back-end ones (e.g., Express, Flask) using official docs. They create a chart listing key features, pros, cons, and use cases, then present to rotate and critique peers' charts.

Compare different types of web frameworks (e.g., front-end vs. back-end).

Facilitation Tip

For the Framework Comparison Chart, provide a color-coded template so groups can quickly categorize features without getting lost in formatting.

What to look for

Present students with a scenario: 'You need to build a simple blog with user comments.' Ask them to identify whether a front-end or back-end framework would be more critical for this task and explain why in one sentence.

• Understand
• Apply
• Analyze
• Evaluate
• Self-Management
• Relationship Skills

Activity 03

• Expert Panel
• 45 min · Whole Class

Whole Class: Prediction and Prototype

As a class, predict development time for a to-do app with and without a framework. Break into roles to prototype using a shared framework like a Node.js starter, track actual time, and debrief on accuracy and surprises.

Predict how a framework can accelerate the development process for complex web projects.

Facilitation Tip

In Prediction and Prototype, give students sticky notes to post predictions before building, then revisit them after the prototype to reflect on accuracy.

What to look for

Facilitate a class discussion using the prompt: 'Imagine you are building a social media site. How could using a framework like Django or Express.js speed up the development process compared to writing all the server logic yourself?'

• Understand
• Apply
• Analyze
• Evaluate
• Self-Management
• Relationship Skills

Activity 04

• Expert Panel
• 30 min · Individual

Individual: Mini-App Customization

Individuals fork a framework template online (e.g., Create React App), add one custom feature like a theme toggle, commit changes, and reflect on how the framework supported rapid iteration.

Explain the advantages of using a web framework over building from scratch.

Facilitation Tip

For Mini-App Customization, provide starter templates with comments marking where students should insert their own code to reduce overwhelm.

What to look for

Ask students to write down one advantage of using a framework over building from scratch and one example of a front-end framework and a back-end framework they learned about today.

• Understand
• Apply
• Analyze
• Evaluate
• Self-Management
• Relationship Skills

A few notes on teaching this unit

Teach frameworks as tools that extend existing skills rather than replace them. Avoid diving deep into syntax; focus on patterns like MVC or component-based design. Research shows beginners benefit from seeing the underlying logic first before using abstractions.

Students will articulate three advantages of frameworks, compare front-end and back-end roles, and explain why abstractions matter in real projects. Success looks like clear reasoning during discussions and accurate use of framework features in coding tasks.

---

Watch Out for These Misconceptions

• During Pair Coding: Framework vs Scratch, watch for students assuming framework code ‘just works’ without understanding the JavaScript underneath.

  Ask each pair to rewrite one framework feature in plain JavaScript on paper first, then compare it to the framework version to highlight the abstraction.

• During Small Group: Framework Comparison Chart, watch for students grouping all frameworks together as doing the same job.

  Give each group a blank chart with columns labeled ‘Front-end,’ ‘Back-end,’ and ‘Full-stack’ to force categorization before comparing features.

• During Whole Class: Prediction and Prototype, watch for students dismissing frameworks as unnecessary for simple projects.

  Have students time themselves manually coding a navigation bar, then time themselves using a framework component, and discuss the difference in speed and effort.

---

Methods used in this brief

• Expert Panel