Source-linked AI summary
Drafter: A Python Library for Full-Stack Web Development in CS1
Austin Cory Bart, Nazim Karaca
TL;DR
Web development is difficult to integrate into CS1 because its languages and frameworks can exceed beginners’ scope and conflict with CS1 principles. Drafter is a Python library for building full-stack applications with pure functions and managed state. In initial courses, most students completed projects meeting specifications without reports of serious difficulty, though student experiences were not directly surveyed.
Problem
Web development brings HTML, CSS, JavaScript, and backend technologies that challenge beginners, while many frameworks conflict with CS1 principles such as avoiding global mutable state.
Source: §1 · p. 1Method
Drafter is an open-source Python library that lets CS1 students create full-stack web applications using pure functions, minimal boilerplate, HTML-generating functions, and managed state.
Source: §1 · p. 1Results
In the initial deployment, the majority of students created projects meeting specifications without reports of serious difficulty or burden on course staff.
Source: §4.2 · p. 6Takeaways & Limitations
The initial deployment demonstrated that students could use Drafter to create meaningful projects in CS1 courses.
Source: §5 · p. 6The initial deployment did not directly survey students about their experiences, leaving Drafter’s motivational impact for future study.
Source: §4.2 · p. 6
Abstract
from arXiv · showhide
Web applications are increasingly the main way to create user interfaces, and they are often the most common software beginners have encountered. However, web development relies on concepts like HTML, CSS, JavaScript, and backend technologies, which are challenges beyond the scope of an introductory course. Additionally, many features of modern web frameworks conflict with CS1 principles, such as avoiding global mutable state and promoting test-driven development. Consequently, web development is rarely integrated into CS1 courses, despite its motivational potential. This paper introduces Drafter, a new open-source Python library for CS1, enabling students to develop full-stack web applications using pure functions with minimal boilerplate. Drafter has simple functions to generate HTML, eliminating the need to learn HTML or templating languages. The data model scales with students' mastery of types, from primitives to nested lists, Dataclasses, and dictionaries. Drafter supports unit testing of entire web applications and reinforces CS1 concepts like decomposition and reusability. Websites created with Drafter can be deployed through GitHub Pages, with plotting and image manipulation. Students receive extensive debug information, including unit test scaffolding, program state visualization, and enhanced error messages and tests. This paper discusses the pedagogical features and design decisions behind Drafter, along with instructor reflections on its use. We believe Drafter can significantly enhance student engagement in CS1 courses and reinforce key learning objectives.
1 Motivation
Drafter addresses the difficulty of teaching web development in CS1 by letting novices build full-stack applications in Python with pure functions and minimal boilerplate. Its design objectives and contributions center on reducing added-language demands while supporting core programming practices.
1 Motivation
- Students may know interactive web applications, but web development introduces HTML, CSS, JavaScript, and backend technologies that are challenging for CS1 and conflict with some CS1 principles.Existing frameworks also tend to involve substantial boilerplate and steep learning curves.Source: §1 · p. 1
- Drafter is an open-source Python library for CS1 that supports full-stack web applications with pure functions, minimal boilerplate, HTML-generating functions, and managed state.The design lets students focus on core programming concepts without learning additional languages or frameworks.Source: §1 · p. 1
1.1 Contributions and Objectives
- Drafter’s design goals include rich graphical applications, discouraging global mutable state, promoting decomposition and unit testing, minimizing cognitive load, and avoiding HTML and CSS syntax.The stated objectives limit learners to mastering a few key concepts.Source: §1.1 · p. 1
- The paper contributes design issues for novice web frameworks, descriptions of Drafter’s features, guidance on teaching it, and instructor reflections on its CS1 use.Source: §1.1 · p. 1
- The authors characterize Drafter as a tool intended to bridge introductory programming education and modern web development practices for CS1 students.They describe the intended learning experience as effective and engaging.Source: §1.1 · p. 1
2 Prior and Related Work
The authors review web development education and Python web libraries against the needs of novice learners. They report limited and scattered CS1 research and find existing libraries inadequate for their educational goals.
2 Prior and Related Work
- The authors found existing Python web libraries inadequate for their educational goals and not designed with true novices in mind.Source: §2 · p. 1, §2.2 · p. 2
2.1 Research on Web Development in CS1
- Web development has limited curricular integration, is designated optional rather than core in the ACM Curriculum 2023, and has advocates for deeper integration.Source: §2.1 · p. 2
- Reported barriers to teaching web development include rapidly changing technologies, limited teaching knowledge, broad topic scope, and complex interactions and deployment workflows.Source: §2.1 · p. 2
- Prior introductory web-development research is scattered, and the authors found no Python-based CS1 course in the literature they reviewed; examples include Java, Scheme, and JavaScript courses.They also identify most web-development education as occurring in advanced courses.Source: §2.1 · p. 2
2.2 Existing Python Web Development Libraries
- Frameworks may rely on global mutable state, require HTML and CSS or templating languages, or focus on backend JSON rather than graphical user interfaces.The authors considered these demands mismatched to their novice-focused design goals.Source: §2.2 · p. 2
- Other framework burdens include class-based routing, substantial setup or boilerplate, filesystem and command-line demands, and asynchronous function syntax.The authors judged the combined demands overwhelming despite their potential as scaffolded learning opportunities.Source: §2.2 · p. 2
3 Approach
The approach presents Drafter as a set of functions for building simple web applications, then describes core primitives and pedagogical enhancements.
3 Approach
- Drafter provides functions for creating simple web applications, with the core API and pedagogical enhancements treated in separate sections.Source: §3 · p. 2
- The approach first describes Drafter’s core application-building primitives in section 3.1.Source: §3 · p. 2
- The approach then describes how those primitives are enhanced for the pedagogical context in section 3.2.Source: §3 · p. 2
3.1 Drafter’s Core API
Drafter’s core API uses routes, state, and Page objects to build web pages, with server startup handled by start_server. Built-in components map to HTML elements and can be styled through helper functions.
3.1 Drafter’s Core API
- Drafter’s three major built-ins are start_server, the @route decorator, and Page; start_server launches the server and must run last because its loop blocks execution.It should come after unit tests.Source: §3.1 · pp. 2–3
- Route functions take a copy of the current State, return a Page, and can be reused across routes; they are intended to be pure apart from allowed state-parameter mutation.The paper connects this design to easier reasoning and testing.Source: §3.1 · p. 3
- A programmer-defined State convention can use a dataclass, other types such as lists or primitives, or no state at all, allowing use before object-oriented programming.State is not intrinsic to the library.Source: §3.1 · p. 3
- Page takes the new state and page content, which is a list of strings and component instances that will form the rendered HTML.State can be passed unchanged, reconstructed immutably, or modified through attribute assignment.Source: §3.1.5 · p. 3
3.1.5 The Component Classes.
- Drafter’s components correspond to HTML elements and include links, buttons, images, tables, and MatPlotLib plots.Tables can visualize dataclasses, while MatPlotLibPlot displays plots in place of plt.show().Source: §3.1.5 · pp. 3–4
- Style helpers modify component color, font size, margins, padding, and other CSS characteristics, returning components that can be chained.Components also accept optional style_ keyword arguments.Source: §3.1.6 · p. 4
3.2 Major Drafter Features
Drafter’s browser debug area combines testing, state visibility, type validation, and deployment support to simplify web development while reinforcing programming practices.
3.2.1 Graphical Test Diffs.
- Route tests compare expected State and Page outputs with generated results, using color-coded diffs and scaffolding tests for later regression checks.Extraneous data is green, unnecessary data red, and modified data purple; test results also appear in the browser’s debug area.Source: §3.2.1 · p. 4, §3.2.2 · p. 4, Figure 3 · p. 4
3.2.3 Program Visualization.
- The debug area shows State field types and values, the current endpoint and parameters, available routes, and navigation history.Users can revisit a recorded point in the route history.Source: §3.2.3 · p. 4
3.2.4 Serializable State.
- Drafter preserves state across pages without binary serialization, including complex Dataclasses, and aligns form data to route parameters by name and type.It also coerces checkboxes to booleans and number boxes to integers where meaningful.Source: §3.2.4 · p. 4
3.2.5 Internal Validation and Enhanced Errors.
- Internal validation checks that data passed between components and routes has the correct type and shape, while enhanced errors identify mismatches.Examples include invalid Page content and missing route parameters.Source: §3.2.5 · pp. 4–5, Figure 4 · p. 5
- Drafter sites can run entirely in the browser without a backend server and can be deployed through static hosting such as GitHub Pages.The client-side execution library is built in Skulpt.Source: §3.2.6 · p. 5
3.3 Documentation and Tutorials
Drafter is paired with instructional materials that guide students through building, testing, and deploying web applications.
3.3 Documentation and Tutorials
- The Quick Start Guide walks students through a basic application with forms, multiple endpoints, and unit tests; the Workbook provides four application skeletons and tests for automated grading.Workbook projects include a Cookie Clicker-like game, bank account simulator, adventure game, and RPG item shop.Source: §3.3 · p. 5
- Longer worked examples include a calculator, login form, and dog-tracking system, while a deployment guide walks through publishing a Drafter site on GitHub Pages.Source: §3.3 · p. 5
- Drafter provides separate documentation versions: detailed developer documentation and a more minimal version for novices that uses simpler vocabulary and hides unnecessary details.Source: §3.3 · p. 5
4 Evidence
The authors describe Drafter’s use in two Python CS1 courses and reflect on project outcomes, implementation choices, and remaining instructional challenges.
4.1 Context
- Drafter was used across two semesters in 2023–2024 at an eastern U.S. R1 university, in a Python CS1 curriculum emphasizing programming, software engineering, and testing.The courses served computer science majors and engineering students.Source: §4.1 · p. 5
- The open-ended final project required at least seven routes, five pages, four State fields including a list, four input fields, tests, static types, and no global variables.Students planned their sites, completed incremental route milestones, and were expected to deploy through GitHub Pages.Source: §4.1 · pp. 5–6
- Four lecture sessions provided troubleshooting and peer discussion during the project, while students otherwise worked outside class.Source: §4.1 · p. 6
4.2 Instructor Experiences
- Most students completed projects meeting specifications without reports of serious difficulty or burden on course staff; the initial deployment did not directly survey student experiences.Source: §4.2 · p. 6
- The instructors concluded that project requirements could be raised and identified calibrating the difficulty of an open-ended Drafter project as an open research question.They plan stricter assessment of documentation, tests, and code quality, and more explicit requirements for loops and nested data.Source: §4.2 · p. 6
- Drafter entered the curriculum in its second half; instructors saw possible earlier integration after students learn functions, Dataclasses, and lists.They also thought teaching web-data access before the final project could improve context.Source: §4.2 · p. 6
- Deployment was broadly effective, but students sometimes missed commit-message and required-file instructions, prompting scripts that validate these checks and report deployment errors.The scripts also generate coverage and static-analysis results.Source: §4.2 · p. 6
- Some students misplaced the blocking start_server call or struggled with State design, including list defaults that require an untaught Dataclasses feature.The authors had not found an elegant solution for premature start_server calls, though they proposed warning about code after the call.Source: §4.2 · p. 6
5 Conclusion
Drafter aims to make web development accessible to novice CS students by letting them focus on Python and core programming principles. Initial CS1 deployments showed students could create meaningful projects.
5 Conclusion
- Initial CS1 deployments showed students could use Drafter to create meaningful projects, bridging introductory programming education and real-world web development.Source: §5 · p. 6
- Drafter uses Python to reduce the complexity of web development while promoting functional programming, decomposition, and unit testing and discouraging global mutable state.Source: §5 · p. 6
- The authors anticipate greater integration and effectiveness as they refine the curriculum and enhance Drafter’s capabilities.Source: §5 · p. 6